From b76354d95d23562e832f0a3ffe3d36aa94430bbb Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 7 Nov 2019 09:12:13 +0100
Subject: [PATCH] 2119-Fix consistent form input validation

---
 .../ContributionForm/ContributionForm.vue     | 59 +++++++++++++++++--
 1 file changed, 53 insertions(+), 6 deletions(-)

diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index eb849c71f..e27730584 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -21,7 +21,26 @@
           name="title"
           autofocus
         />
-        <small class="smallTag">{{ form.title.length }}/{{ formSchema.title.max }}</small>
+        <ds-text align="right">
+          <ds-chip v-if="form.title.length < formSchema.title.min" class="checkicon" size="base">
+            {{ form.title.length }}/{{ formSchema.title.max }}
+            <ds-icon name="check"></ds-icon>
+          </ds-chip>
+          <ds-chip
+            v-else-if="form.title.length < formSchema.title.max"
+            class="checkicon"
+            size="base"
+            color="primary"
+          >
+            {{ form.title.length }}/{{ formSchema.title.max }}
+            <ds-icon name="check"></ds-icon>
+          </ds-chip>
+          <ds-chip v-else class="checkicon" size="base" color="danger">
+            {{ form.title.length }}/{{ formSchema.title.max }}
+            <ds-icon name="check"></ds-icon>
+          </ds-chip>
+        </ds-text>
+        <floatClear />
         <client-only>
           <hc-editor
             :users="users"
@@ -29,7 +48,16 @@
             :hashtags="hashtags"
             @input="updateEditorContent"
           />
-          <small class="smallTag">{{ form.contentLength }}</small>
+          <ds-text align="right">
+            <small class="smallTag">{{ form.contentLength }}</small>
+            <ds-button
+              v-if="form.contentLength < formSchema.content.min"
+              class="checkicon"
+              icon="check"
+              size="small"
+            ></ds-button>
+            <ds-button v-else class="checkicon" icon="check" size="small" primary></ds-button>
+          </ds-text>
         </client-only>
         <ds-space margin-bottom="small" />
         <hc-categories-select
@@ -37,6 +65,21 @@
           @updateCategories="updateCategories"
           :existingCategoryIds="form.categoryIds"
         />
+        <ds-text align="right">
+          <ds-button
+            v-if="form.categoryIds !== 0"
+            class="checkicon checkicon_cat "
+            icon="check"
+            size="small"
+          ></ds-button>
+          <ds-button
+            v-else
+            class="checkicon checkicon_cat"
+            icon="check"
+            primary
+            size="small"
+          ></ds-button>
+        </ds-text>
         <ds-flex class="contribution-form-footer">
           <ds-flex-item :width="{ base: '10%', sm: '10%', md: '10%', lg: '15%' }" />
           <ds-flex-item :width="{ base: '80%', sm: '30%', md: '30%', lg: '20%' }">
@@ -113,7 +156,7 @@ export default {
       },
       formSchema: {
         title: { required: true, min: 3, max: 100 },
-        content: [{ required: true }],
+        content: { required: true, min: 3 },
       },
       id: null,
       loading: false,
@@ -204,9 +247,7 @@ export default {
       this.manageContent(value)
     },
     manageContent(content) {
-      // filter HTML out of content value
-      const str = content.replace(/<\/?[^>]+(>|$)/gm, '')
-      // Set counter length of text
+      let str = content.replace(/<\/?[^>]+(>|$)/gm, '')
       this.form.contentLength = str.length
       this.validatePost()
     },
@@ -288,4 +329,10 @@ export default {
     padding-right: 0;
   }
 }
+.checkicon {
+  top: -18px;
+}
+.checkicon_cat {
+  top: -38px;
+}
 </style>