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 01/18] 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>

From 32c5ea1d52bffa60995dd389587097a11fd334c6 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 7 Nov 2019 09:23:00 +0100
Subject: [PATCH 02/18] fix category if fail, fix lint

---
 webapp/components/ContributionForm/ContributionForm.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index e27730584..1ba254aac 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -40,7 +40,6 @@
             <ds-icon name="check"></ds-icon>
           </ds-chip>
         </ds-text>
-        <floatClear />
         <client-only>
           <hc-editor
             :users="users"
@@ -67,7 +66,7 @@
         />
         <ds-text align="right">
           <ds-button
-            v-if="form.categoryIds !== 0"
+            v-if="form.categoryIds.length === 0"
             class="checkicon checkicon_cat "
             icon="check"
             size="small"

From f739dd8f11d0cac5ddd74ba69d2c992f83157af5 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 7 Nov 2019 11:39:07 +0100
Subject: [PATCH 03/18] fix css - checkbutton cursor: default

---
 webapp/components/ContributionForm/ContributionForm.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index 1ba254aac..22b0f9ba3 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -329,6 +329,7 @@ export default {
   }
 }
 .checkicon {
+  cursor: default;
   top: -18px;
 }
 .checkicon_cat {

From e4cbf9246bf3e6f8130bc28db108fdc26487bae2 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 7 Nov 2019 13:00:28 +0100
Subject: [PATCH 04/18] better style and dom

---
 .../ContributionForm/ContributionForm.vue     | 43 +++++++++----------
 1 file changed, 21 insertions(+), 22 deletions(-)

diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index 22b0f9ba3..f6ebf6bcc 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -24,7 +24,7 @@
         <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-icon name="warning"></ds-icon>
           </ds-chip>
           <ds-chip
             v-else-if="form.title.length < formSchema.title.max"
@@ -37,7 +37,7 @@
           </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-icon name="warning"></ds-icon>
           </ds-chip>
         </ds-text>
         <client-only>
@@ -48,14 +48,18 @@
             @input="updateEditorContent"
           />
           <ds-text align="right">
-            <small class="smallTag">{{ form.contentLength }}</small>
-            <ds-button
+            <ds-chip
               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>
+              size="base"
+            >
+              {{ form.contentLength }}
+              <ds-icon name="warning"></ds-icon>
+            </ds-chip>
+            <ds-chip v-else class="checkicon" size="base" color="primary">
+              {{ form.contentLength }}
+              <ds-icon name="check"></ds-icon>
+            </ds-chip>
           </ds-text>
         </client-only>
         <ds-space margin-bottom="small" />
@@ -65,19 +69,14 @@
           :existingCategoryIds="form.categoryIds"
         />
         <ds-text align="right">
-          <ds-button
-            v-if="form.categoryIds.length === 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-chip v-if="form.categoryIds.length === 0" class="checkicon checkicon_cat" size="base">
+            {{ form.categoryIds.length }} / 3
+            <ds-icon name="warning"></ds-icon>
+          </ds-chip>
+          <ds-chip v-else class="checkicon checkicon_cat" size="base" color="primary">
+            {{ form.categoryIds.length }} / 3
+            <ds-icon name="check"></ds-icon>
+          </ds-chip>
         </ds-text>
         <ds-flex class="contribution-form-footer">
           <ds-flex-item :width="{ base: '10%', sm: '10%', md: '10%', lg: '15%' }" />
@@ -333,6 +332,6 @@ export default {
   top: -18px;
 }
 .checkicon_cat {
-  top: -38px;
+  top: -58px;
 }
 </style>

From 253032468f8a1913adb0896c86304e78dd1f5f2c Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Thu, 7 Nov 2019 14:17:22 +0100
Subject: [PATCH 05/18] Refactor: Re-use validation via error slot

---
 .../ContributionForm/ContributionForm.vue          | 14 ++------------
 1 file changed, 2 insertions(+), 12 deletions(-)

diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index f6ebf6bcc..4c55a89b3 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -22,22 +22,12 @@
           autofocus
         />
         <ds-text align="right">
-          <ds-chip v-if="form.title.length < formSchema.title.min" class="checkicon" size="base">
+          <ds-chip v-if="errors && errors.title" color="danger" size="base">
             {{ form.title.length }}/{{ formSchema.title.max }}
             <ds-icon name="warning"></ds-icon>
           </ds-chip>
-          <ds-chip
-            v-else-if="form.title.length < formSchema.title.max"
-            class="checkicon"
-            size="base"
-            color="primary"
-          >
+          <ds-chip v-else size="base">
             {{ 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="warning"></ds-icon>
           </ds-chip>
         </ds-text>
         <client-only>

From c83a808825a7676edde2a5f34714297626035f2a Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Thu, 7 Nov 2019 14:22:05 +0100
Subject: [PATCH 06/18] Refactor content length validation with transform

---
 .../ContributionForm/ContributionForm.vue     | 34 +++++++++----------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index 4c55a89b3..224390d7e 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -39,16 +39,15 @@
           />
           <ds-text align="right">
             <ds-chip
-              v-if="form.contentLength < formSchema.content.min"
-              class="checkicon"
+              v-if="errors && errors.content"
+              color="danger"
               size="base"
             >
-              {{ form.contentLength }}
+              {{ contentLength }}
               <ds-icon name="warning"></ds-icon>
             </ds-chip>
-            <ds-chip v-else class="checkicon" size="base" color="primary">
-              {{ form.contentLength }}
-              <ds-icon name="check"></ds-icon>
+            <ds-chip v-else size="base">
+              {{ contentLength }}
             </ds-chip>
           </ds-text>
         </client-only>
@@ -135,7 +134,6 @@ export default {
       form: {
         title: '',
         content: '',
-        contentLength: 0,
         teaserImage: null,
         image: null,
         language: null,
@@ -144,7 +142,13 @@ export default {
       },
       formSchema: {
         title: { required: true, min: 3, max: 100 },
-        content: { required: true, min: 3 },
+        content: {
+          required: true,
+          min: 3,
+          transform: (content) => {
+            return this.$filters.removeHtml(content)
+          }
+        },
       },
       id: null,
       loading: false,
@@ -168,11 +172,13 @@ export default {
         this.form.content = contribution.content
         this.form.image = contribution.image
         this.form.categoryIds = this.categoryIds(contribution.categories)
-        this.manageContent(this.form.content)
       },
     },
   },
   computed: {
+    contentLength() {
+      return this.$filters.removeHtml(this.form.content).length
+    },
     locale() {
       const locale =
         this.contribution && this.contribution.language
@@ -230,14 +236,7 @@ export default {
         })
     },
     updateEditorContent(value) {
-      // TODO: Do smth????? what is happening
       this.$refs.contributionForm.update('content', value)
-      this.manageContent(value)
-    },
-    manageContent(content) {
-      let str = content.replace(/<\/?[^>]+(>|$)/gm, '')
-      this.form.contentLength = str.length
-      this.validatePost()
     },
     availableLocales() {
       orderBy(locales, 'name').map(locale => {
@@ -259,10 +258,9 @@ export default {
       return categoryIds
     },
     validatePost() {
-      const passesContentValidations = this.form.contentLength >= this.contentMin
       const passesCategoryValidations =
         this.form.categoryIds.length > 0 && this.form.categoryIds.length <= 3
-      this.failsValidations = !(passesContentValidations && passesCategoryValidations)
+      this.failsValidations = !(passesCategoryValidations)
     },
   },
   apollo: {

From dd03f4b7f09623fb9eb11cd7197b1192c221417b Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 7 Nov 2019 15:40:58 +0100
Subject: [PATCH 07/18] Fix Add Language check for form submit

---
 .../ContributionForm/ContributionForm.vue     | 39 +++++++++++++++----
 webapp/locales/de.json                        |  3 +-
 webapp/locales/en.json                        |  3 +-
 3 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index f6ebf6bcc..236a1a722 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -24,7 +24,7 @@
         <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="warning"></ds-icon>
+            <ds-icon name="warning" class="colorRed"></ds-icon>
           </ds-chip>
           <ds-chip
             v-else-if="form.title.length < formSchema.title.max"
@@ -54,7 +54,7 @@
               size="base"
             >
               {{ form.contentLength }}
-              <ds-icon name="warning"></ds-icon>
+              <ds-icon name="warning" class="colorRed"></ds-icon>
             </ds-chip>
             <ds-chip v-else class="checkicon" size="base" color="primary">
               {{ form.contentLength }}
@@ -71,7 +71,7 @@
         <ds-text align="right">
           <ds-chip v-if="form.categoryIds.length === 0" class="checkicon checkicon_cat" size="base">
             {{ form.categoryIds.length }} / 3
-            <ds-icon name="warning"></ds-icon>
+            <ds-icon name="warning" class="colorRed">></ds-icon>
           </ds-chip>
           <ds-chip v-else class="checkicon checkicon_cat" size="base" color="primary">
             {{ form.categoryIds.length }} / 3
@@ -79,18 +79,28 @@
           </ds-chip>
         </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%' }">
+          <ds-flex-item>
             <ds-space margin-bottom="small" />
             <ds-select
               model="language"
               :options="form.languageOptions"
               icon="globe"
-              :placeholder="locale"
+              :placeholder="form.languageDefault"
               :label="$t('contribution.languageSelectLabel')"
+              @input.native="updateLanguage"
             />
           </ds-flex-item>
         </ds-flex>
+        <ds-text align="right">
+          <ds-chip v-if="form.language !== null" size="base" color="primary">
+            {{ form.language.label }}
+            <ds-icon name="check"></ds-icon>
+          </ds-chip>
+          <ds-chip v-else size="base">
+            {{ $t('contribution.languageSelectLabel') }}
+            <ds-icon name="warning" class="colorRed"></ds-icon>
+          </ds-chip>
+        </ds-text>
         <ds-space />
         <div slot="footer" style="text-align: right">
           <ds-button
@@ -150,6 +160,8 @@ export default {
         image: null,
         language: null,
         languageOptions: [],
+        languageDefault: this.$t('contribution.languageSelectText'),
+        selectedLanguage: '',
         categoryIds: [],
       },
       formSchema: {
@@ -258,6 +270,10 @@ export default {
       this.form.categoryIds = ids
       this.validatePost()
     },
+    updateLanguage() {
+      this.form.selectedLanguage = this.form.language.label
+      this.validatePost()
+    },
     addTeaserImage(file) {
       this.form.teaserImage = file
     },
@@ -272,7 +288,13 @@ export default {
       const passesContentValidations = this.form.contentLength >= this.contentMin
       const passesCategoryValidations =
         this.form.categoryIds.length > 0 && this.form.categoryIds.length <= 3
-      this.failsValidations = !(passesContentValidations && passesCategoryValidations)
+      const passedLanguageValidation = this.form.language !== null
+
+      this.failsValidations = !(
+        passesContentValidations &&
+        passesCategoryValidations &&
+        passedLanguageValidation
+      )
     },
   },
   apollo: {
@@ -334,4 +356,7 @@ export default {
 .checkicon_cat {
   top: -58px;
 }
+.colorRed {
+  color: red;
+}
 </style>
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 34cd948ed..eba0c7d26 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -579,7 +579,8 @@
     "filterFollow": "Beiträge filtern von Usern denen ich folge",
     "filterALL": "Alle Beiträge anzeigen",
     "success": "Gespeichert!",
-    "languageSelectLabel": "Sprache",
+    "languageSelectLabel": "Sprache deines Beitrags",
+    "languageSelectText": "Sprache wählen",
     "categories": {
       "infoSelectedNoOfMaxCategories": "{chosen} von {max} Kategorien ausgewählt"
     },
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index d3b4e8edc..e51eab534 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -580,7 +580,8 @@
     "filterFollow": "Filter contributions from users I follow",
     "filterALL": "View all contributions",
     "success": "Saved!",
-    "languageSelectLabel": "Language",
+    "languageSelectLabel": "Language of your contribution",
+    "languageSelectText": "Select Language",
     "categories": {
       "infoSelectedNoOfMaxCategories": "{chosen} of {max} categories selected"
     },

From 62b393b0f00e07d2a4a16cff342546c69d4cb58b Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Thu, 7 Nov 2019 23:23:47 +0100
Subject: [PATCH 08/18] Refactoring of Categories Select component

---
 .../CategoriesSelect/CategoriesSelect.vue     | 37 ++++------
 .../ContributionForm/ContributionForm.vue     | 67 ++++++-------------
 2 files changed, 33 insertions(+), 71 deletions(-)

diff --git a/webapp/components/CategoriesSelect/CategoriesSelect.vue b/webapp/components/CategoriesSelect/CategoriesSelect.vue
index cbe46b890..9b54b3283 100644
--- a/webapp/components/CategoriesSelect/CategoriesSelect.vue
+++ b/webapp/components/CategoriesSelect/CategoriesSelect.vue
@@ -28,16 +28,23 @@
 
 <script>
 import CategoryQuery from '~/graphql/CategoryQuery'
+import xor from 'lodash/xor'
 
 export default {
+  inject: {
+    $parentForm: {
+      default: null,
+    },
+  },
   props: {
     existingCategoryIds: { type: Array, default: () => [] },
+    model: { type: String, required: true },
   },
   data() {
     return {
       categories: null,
       selectedMax: 3,
-      selectedCategoryIds: [],
+      selectedCategoryIds: this.existingCategoryIds,
     }
   },
   computed: {
@@ -48,35 +55,15 @@ export default {
       return this.selectedCount >= this.selectedMax
     },
   },
-  watch: {
-    selectedCategoryIds(categoryIds) {
-      this.$emit('updateCategories', categoryIds)
-    },
-    existingCategoryIds: {
-      immediate: true,
-      handler: function(existingCategoryIds) {
-        if (!existingCategoryIds || !existingCategoryIds.length) {
-          return
-        }
-        this.selectedCategoryIds = existingCategoryIds
-      },
-    },
-  },
   methods: {
     toggleCategory(id) {
-      const index = this.selectedCategoryIds.indexOf(id)
-      if (index > -1) {
-        this.selectedCategoryIds.splice(index, 1)
-      } else {
-        this.selectedCategoryIds.push(id)
+      this.selectedCategoryIds = xor(this.selectedCategoryIds, [id])
+      if (this.$parentForm) {
+        this.$parentForm.update(this.model, this.selectedCategoryIds)
       }
     },
     isActive(id) {
-      const index = this.selectedCategoryIds.indexOf(id)
-      if (index > -1) {
-        return true
-      }
-      return false
+      return this.selectedCategoryIds.includes(id)
     },
     isDisabled(id) {
       return !!(this.reachedMaximum && !this.isActive(id))
diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index 224390d7e..e588f1ac4 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -26,9 +26,7 @@
             {{ form.title.length }}/{{ formSchema.title.max }}
             <ds-icon name="warning"></ds-icon>
           </ds-chip>
-          <ds-chip v-else size="base">
-            {{ form.title.length }}/{{ formSchema.title.max }}
-          </ds-chip>
+          <ds-chip v-else size="base">{{ form.title.length }}/{{ formSchema.title.max }}</ds-chip>
         </ds-text>
         <client-only>
           <hc-editor
@@ -38,11 +36,7 @@
             @input="updateEditorContent"
           />
           <ds-text align="right">
-            <ds-chip
-              v-if="errors && errors.content"
-              color="danger"
-              size="base"
-            >
+            <ds-chip v-if="errors && errors.content" color="danger" size="base">
               {{ contentLength }}
               <ds-icon name="warning"></ds-icon>
             </ds-chip>
@@ -52,20 +46,13 @@
           </ds-text>
         </client-only>
         <ds-space margin-bottom="small" />
-        <hc-categories-select
-          model="categoryIds"
-          @updateCategories="updateCategories"
-          :existingCategoryIds="form.categoryIds"
-        />
+        <hc-categories-select model="categoryIds" :existingCategoryIds="form.categoryIds" />
         <ds-text align="right">
-          <ds-chip v-if="form.categoryIds.length === 0" class="checkicon checkicon_cat" size="base">
+          <ds-chip v-if="errors && errors.categoryIds" color="danger" size="base">
             {{ form.categoryIds.length }} / 3
             <ds-icon name="warning"></ds-icon>
           </ds-chip>
-          <ds-chip v-else class="checkicon checkicon_cat" size="base" color="primary">
-            {{ form.categoryIds.length }} / 3
-            <ds-icon name="check"></ds-icon>
-          </ds-chip>
+          <ds-chip v-else size="base">{{ form.categoryIds.length }} / 3</ds-chip>
         </ds-text>
         <ds-flex class="contribution-form-footer">
           <ds-flex-item :width="{ base: '10%', sm: '10%', md: '10%', lg: '15%' }" />
@@ -95,7 +82,7 @@
             type="submit"
             icon="check"
             :loading="loading"
-            :disabled="failsValidations || errors"
+            :disabled="errors"
             primary
             @click.prevent="submit"
           >
@@ -134,20 +121,31 @@ export default {
       form: {
         title: '',
         content: '',
+        categoryIds: [],
         teaserImage: null,
         image: null,
         language: null,
         languageOptions: [],
-        categoryIds: [],
       },
       formSchema: {
         title: { required: true, min: 3, max: 100 },
         content: {
           required: true,
           min: 3,
-          transform: (content) => {
+          transform: content => {
             return this.$filters.removeHtml(content)
-          }
+          },
+        },
+        categoryIds: {
+          type: 'array',
+          required: true,
+          validator: (rule, value) => {
+            const errors = []
+            if (!value || value.length <= 0) {
+              errors.push(new Error('Choose at least 1 but at most 3 categories'))
+            }
+            return errors
+          },
         },
       },
       id: null,
@@ -155,7 +153,6 @@ export default {
       slug: null,
       users: [],
       contentMin: 3,
-      failsValidations: true,
       hashtags: [],
     }
   },
@@ -222,7 +219,6 @@ export default {
           this.loading = false
           this.$toast.success(this.$t('contribution.success'))
           const result = data[this.id ? 'UpdatePost' : 'CreatePost']
-          this.failedValidations = false
 
           this.$router.push({
             name: 'post-id-slug',
@@ -232,7 +228,6 @@ export default {
         .catch(err => {
           this.$toast.error(err.message)
           this.loading = false
-          this.failedValidations = true
         })
     },
     updateEditorContent(value) {
@@ -243,24 +238,11 @@ export default {
         this.form.languageOptions.push({ label: locale.name, value: locale.code })
       })
     },
-    updateCategories(ids) {
-      this.form.categoryIds = ids
-      this.validatePost()
-    },
     addTeaserImage(file) {
       this.form.teaserImage = file
     },
     categoryIds(categories) {
-      let categoryIds = []
-      categories.map(categoryId => {
-        categoryIds.push(categoryId.id)
-      })
-      return categoryIds
-    },
-    validatePost() {
-      const passesCategoryValidations =
-        this.form.categoryIds.length > 0 && this.form.categoryIds.length <= 3
-      this.failsValidations = !(passesCategoryValidations)
+      return categories.map(c => c.id)
     },
   },
   apollo: {
@@ -315,11 +297,4 @@ export default {
     padding-right: 0;
   }
 }
-.checkicon {
-  cursor: default;
-  top: -18px;
-}
-.checkicon_cat {
-  top: -58px;
-}
 </style>

From a2dbe47f1ff4e36b16cb2f66a3d17e7de72cb803 Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Thu, 7 Nov 2019 23:35:35 +0100
Subject: [PATCH 09/18] Fix tests

---
 .../CategoriesSelect/CategoriesSelect.spec.js | 13 ++-
 .../ContributionForm/ContributionForm.spec.js | 82 +++++++++++++------
 .../ContributionForm/ContributionForm.vue     |  8 +-
 webapp/locales/de.json                        |  3 +-
 webapp/locales/en.json                        |  3 +-
 5 files changed, 73 insertions(+), 36 deletions(-)

diff --git a/webapp/components/CategoriesSelect/CategoriesSelect.spec.js b/webapp/components/CategoriesSelect/CategoriesSelect.spec.js
index 199dacb74..56534c6ad 100644
--- a/webapp/components/CategoriesSelect/CategoriesSelect.spec.js
+++ b/webapp/components/CategoriesSelect/CategoriesSelect.spec.js
@@ -8,10 +8,12 @@ localVue.use(Styleguide)
 describe('CategoriesSelect.vue', () => {
   let wrapper
   let mocks
+  let provide
   let democracyAndPolitics
   let environmentAndNature
   let consumptionAndSustainablity
 
+  const propsData = { model: 'categoryIds' }
   const categories = [
     {
       id: 'cat9',
@@ -35,6 +37,11 @@ describe('CategoriesSelect.vue', () => {
     },
   ]
   beforeEach(() => {
+    provide = {
+      $parentForm: {
+        update: jest.fn(),
+      },
+    }
     mocks = {
       $t: jest.fn(),
     }
@@ -42,7 +49,7 @@ describe('CategoriesSelect.vue', () => {
 
   describe('shallowMount', () => {
     const Wrapper = () => {
-      return mount(CategoriesSelect, { mocks, localVue })
+      return mount(CategoriesSelect, { propsData, mocks, localVue, provide })
     }
 
     beforeEach(() => {
@@ -60,8 +67,8 @@ describe('CategoriesSelect.vue', () => {
         expect(wrapper.vm.selectedCategoryIds).toEqual([categories[0].id])
       })
 
-      it('emits an updateCategories event when the selectedCategoryIds changes', () => {
-        expect(wrapper.emitted().updateCategories[0][0]).toEqual([categories[0].id])
+      it('calls $parent.update with selected category ids', () => {
+        expect(provide.$parentForm.update).toHaveBeenCalledWith('categoryIds', ['cat9'])
       })
 
       it('removes categories when clicked a second time', () => {
diff --git a/webapp/components/ContributionForm/ContributionForm.spec.js b/webapp/components/ContributionForm/ContributionForm.spec.js
index 836fe3fd3..f4d76895b 100644
--- a/webapp/components/ContributionForm/ContributionForm.spec.js
+++ b/webapp/components/ContributionForm/ContributionForm.spec.js
@@ -20,6 +20,34 @@ config.stubs['client-only'] = '<span><slot /></span>'
 config.stubs['nuxt-link'] = '<span><slot /></span>'
 config.stubs['v-popover'] = '<span><slot /></span>'
 
+const categories = [
+  {
+    "id": "cat3",
+    "slug": "health-wellbeing",
+    "icon": "medkit"
+  },
+  {
+    "id": "cat12",
+    "slug": "it-internet-data-privacy",
+    "icon": "mouse-pointer"
+  },
+  {
+    "id": "cat9",
+    "slug": "democracy-politics",
+    "icon": "university"
+  },
+  {
+    "id": "cat15",
+    "slug": "consumption-sustainability",
+    "icon": "shopping-cart"
+  },
+  {
+    "id": "cat4",
+    "slug": "environment-nature",
+    "icon": "tree"
+  }
+]
+
 describe('ContributionForm.vue', () => {
   let wrapper
   let postTitleInput
@@ -130,13 +158,13 @@ describe('ContributionForm.vue', () => {
 
       describe('invalid form submission', () => {
         it('title and content should not be empty ', async () => {
-          wrapper.find('.submit-button-for-test').trigger('click')
+          wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
         })
 
         it('title should not be empty', async () => {
           await wrapper.vm.updateEditorContent(postContent)
-          wrapper.find('.submit-button-for-test').trigger('click')
+          wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
         })
 
@@ -144,7 +172,7 @@ describe('ContributionForm.vue', () => {
           postTitleInput = wrapper.find('.ds-input')
           postTitleInput.setValue(postTitleTooLong)
           await wrapper.vm.updateEditorContent(postContent)
-          wrapper.find('.submit-button-for-test').trigger('click')
+          wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
         })
 
@@ -152,14 +180,14 @@ describe('ContributionForm.vue', () => {
           postTitleInput = wrapper.find('.ds-input')
           postTitleInput.setValue(postTitleTooShort)
           await wrapper.vm.updateEditorContent(postContent)
-          wrapper.find('.submit-button-for-test').trigger('click')
+          wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
         })
 
         it('content should not be empty', async () => {
           postTitleInput = wrapper.find('.ds-input')
           postTitleInput.setValue(postTitle)
-          await wrapper.find('.submit-button-for-test').trigger('click')
+          await wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
         })
 
@@ -167,7 +195,7 @@ describe('ContributionForm.vue', () => {
           postTitleInput = wrapper.find('.ds-input')
           postTitleInput.setValue(postTitle)
           await wrapper.vm.updateEditorContent(postContentTooShort)
-          wrapper.find('.submit-button-for-test').trigger('click')
+          wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
         })
 
@@ -175,7 +203,7 @@ describe('ContributionForm.vue', () => {
           postTitleInput = wrapper.find('.ds-input')
           postTitleInput.setValue(postTitle)
           await wrapper.vm.updateEditorContent(postContentTooLong)
-          wrapper.find('.submit-button-for-test').trigger('click')
+          wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
         })
 
@@ -183,7 +211,7 @@ describe('ContributionForm.vue', () => {
           postTitleInput = wrapper.find('.ds-input')
           postTitleInput.setValue(postTitle)
           await wrapper.vm.updateEditorContent(postContent)
-          wrapper.find('.submit-button-for-test').trigger('click')
+          wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
         })
 
@@ -192,7 +220,7 @@ describe('ContributionForm.vue', () => {
           postTitleInput.setValue(postTitle)
           await wrapper.vm.updateEditorContent(postContent)
           wrapper.vm.form.categoryIds = ['cat4', 'cat9', 'cat15', 'cat27']
-          wrapper.find('.submit-button-for-test').trigger('click')
+          wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
         })
       })
@@ -214,17 +242,17 @@ describe('ContributionForm.vue', () => {
           postTitleInput = wrapper.find('.ds-input')
           postTitleInput.setValue(postTitle)
           await wrapper.vm.updateEditorContent(postContent)
-          categoryIds = ['cat12']
-          wrapper.find(CategoriesSelect).vm.$emit('updateCategories', categoryIds)
+          wrapper.find(CategoriesSelect).setData({categories})
+          await wrapper.find(CategoriesSelect).findAll('button').at(1).trigger('click')
         })
 
         it('creates a post with valid title, content, and at least one category', async () => {
-          await wrapper.find('.submit-button-for-test').trigger('click')
+          await wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
         })
 
         it("sends a fallback language based on a user's locale", () => {
-          wrapper.find('.submit-button-for-test').trigger('click')
+          wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
         })
 
@@ -232,25 +260,25 @@ describe('ContributionForm.vue', () => {
           expectedParams.variables.language = 'de'
           deutschOption = wrapper.findAll('li').at(0)
           deutschOption.trigger('click')
-          wrapper.find('.submit-button-for-test').trigger('click')
+          wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
         })
 
         it('supports adding a teaser image', async () => {
           expectedParams.variables.imageUpload = imageUpload
           wrapper.find(TeaserImage).vm.$emit('addTeaserImage', imageUpload)
-          await wrapper.find('.submit-button-for-test').trigger('click')
+          await wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
         })
 
         it("pushes the user to the post's page", async () => {
-          wrapper.find('.submit-button-for-test').trigger('click')
+          wrapper.find('form').trigger('submit')
           await mocks.$apollo.mutate
           expect(mocks.$router.push).toHaveBeenCalledTimes(1)
         })
 
         it('shows a success toaster', async () => {
-          wrapper.find('.submit-button-for-test').trigger('click')
+          wrapper.find('form').trigger('submit')
           await mocks.$apollo.mutate
           expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
         })
@@ -275,11 +303,12 @@ describe('ContributionForm.vue', () => {
           postTitleInput.setValue(postTitle)
           await wrapper.vm.updateEditorContent(postContent)
           categoryIds = ['cat12']
-          wrapper.find(CategoriesSelect).vm.$emit('updateCategories', categoryIds)
+          wrapper.find(CategoriesSelect).setData({categories})
+          await wrapper.find(CategoriesSelect).findAll('button').at(1).trigger('click')
         })
 
         it('shows an error toaster when apollo mutation rejects', async () => {
-          await wrapper.find('.submit-button-for-test').trigger('click')
+          await wrapper.find('form').trigger('submit')
           await mocks.$apollo.mutate
           await expect(mocks.$toast.error).toHaveBeenCalledWith('Not Authorised!')
         })
@@ -345,7 +374,7 @@ describe('ContributionForm.vue', () => {
               content: postContent,
               language: propsData.contribution.language,
               id: propsData.contribution.id,
-              categoryIds,
+              categoryIds: ['cat12'],
               image,
               imageUpload: null,
             },
@@ -356,19 +385,20 @@ describe('ContributionForm.vue', () => {
           postTitleInput = wrapper.find('.ds-input')
           postTitleInput.setValue(postTitle)
           wrapper.vm.updateEditorContent(postContent)
-          wrapper.find(CategoriesSelect).vm.$emit('updateCategories', categoryIds)
-          wrapper.find('.submit-button-for-test').trigger('click')
+          await wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
         })
 
         it('supports updating categories', async () => {
-          const categoryIds = ['cat3', 'cat51', 'cat37']
+          expectedParams.variables.categoryIds = ['cat12', 'cat3', 'cat15']
           postTitleInput = wrapper.find('.ds-input')
           postTitleInput.setValue(postTitle)
           wrapper.vm.updateEditorContent(postContent)
-          expectedParams.variables.categoryIds = categoryIds
-          wrapper.find(CategoriesSelect).vm.$emit('updateCategories', categoryIds)
-          await wrapper.find('.submit-button-for-test').trigger('click')
+          wrapper.find(CategoriesSelect).setData({categories})
+          await wrapper.find(CategoriesSelect).findAll('button').at(0).trigger('click')
+          await wrapper.find(CategoriesSelect).findAll('button').at(3).trigger('click')
+          await wrapper.find(CategoriesSelect).findAll('button').at(4).trigger('click')
+          await wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
         })
       })
diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index e588f1ac4..90a63b7df 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <ds-form ref="contributionForm" v-model="form" :schema="formSchema">
+  <ds-form ref="contributionForm" v-model="form" :schema="formSchema" @submit="submit">
     <template slot-scope="{ errors }">
       <hc-teaser-image :contribution="contribution" @addTeaserImage="addTeaserImage">
         <img
@@ -78,13 +78,11 @@
             {{ $t('actions.cancel') }}
           </ds-button>
           <ds-button
-            class="submit-button-for-test"
             type="submit"
             icon="check"
             :loading="loading"
             :disabled="errors"
             primary
-            @click.prevent="submit"
           >
             {{ $t('actions.save') }}
           </ds-button>
@@ -141,8 +139,8 @@ export default {
           required: true,
           validator: (rule, value) => {
             const errors = []
-            if (!value || value.length <= 0) {
-              errors.push(new Error('Choose at least 1 but at most 3 categories'))
+            if (!(value && 1 <= value.length && value.length <= 3)) {
+              errors.push(new Error(this.$t('common.validations.categories')))
             }
             return errors
           },
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 34cd948ed..fb371c831 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -434,7 +434,8 @@
     "reportContent": "Melden",
     "validations": {
       "email": "muss eine gültige E-Mail Adresse sein",
-      "url": "muss eine gültige URL sein"
+      "url": "muss eine gültige URL sein",
+      "categories": "es müssen eine bis drei Kategorien ausgewählt werden"
     }
   },
   "actions": {
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index d3b4e8edc..e898c9000 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -435,7 +435,8 @@
     "reportContent": "Report",
     "validations": {
       "email": "must be a valid e-mail address",
-      "url": "must be a valid URL"
+      "url": "must be a valid URL",
+      "categories": "at least one and at most three categories must be selected"
     }
   },
   "actions": {

From 6c947f782dd016212f8c044ee49f380778cc4cc6 Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Fri, 8 Nov 2019 16:44:48 +0100
Subject: [PATCH 10/18] Fix CSS classes

---
 .../ContributionForm/ContributionForm.vue     | 24 ++++++++++---------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index ca4444683..384bafddb 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -1,5 +1,11 @@
 <template>
-  <ds-form ref="contributionForm" v-model="form" :schema="formSchema" @submit="submit">
+  <ds-form
+    class="contribution-form"
+    ref="contributionForm"
+    v-model="form"
+    :schema="formSchema"
+    @submit="submit"
+  >
     <template slot-scope="{ errors }">
       <hc-teaser-image :contribution="contribution" @addTeaserImage="addTeaserImage">
         <img
@@ -50,7 +56,7 @@
         <ds-text align="right">
           <ds-chip v-if="errors && errors.categoryIds" color="danger" size="base">
             {{ form.categoryIds.length }} / 3
-            <ds-icon name="warning" class="colorRed"></ds-icon>
+            <ds-icon name="warning"></ds-icon>
           </ds-chip>
           <ds-chip v-else size="base">{{ form.categoryIds.length }} / 3</ds-chip>
         </ds-text>
@@ -282,14 +288,10 @@ export default {
     padding-right: 0;
   }
 }
-.checkicon {
-  cursor: default;
-  top: -18px;
-}
-.checkicon_cat {
-  top: -58px;
-}
-.colorRed {
-  color: red;
+
+.contribution-form {
+  .ds-chip {
+    cursor: default;
+  }
 }
 </style>

From 7c278d7c7f58b03ea808643f638b593415d30b13 Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Fri, 8 Nov 2019 17:30:29 +0100
Subject: [PATCH 11/18] fix: send 403 if you try to edit another's post

This also fixes the glitch that you click on "Edit post" and the
contribution form is empty.
---
 webapp/pages/post/edit/_id.vue | 50 ++++++++++++++++------------------
 1 file changed, 23 insertions(+), 27 deletions(-)

diff --git a/webapp/pages/post/edit/_id.vue b/webapp/pages/post/edit/_id.vue
index 432dc484f..a85ba274a 100644
--- a/webapp/pages/post/edit/_id.vue
+++ b/webapp/pages/post/edit/_id.vue
@@ -10,41 +10,37 @@
 <script>
 import HcContributionForm from '~/components/ContributionForm/ContributionForm'
 import PostQuery from '~/graphql/PostQuery'
+import { mapGetters } from 'vuex'
 
 export default {
   components: {
     HcContributionForm,
   },
   computed: {
-    user() {
-      return this.$store.getters['auth/user']
-    },
-    author() {
-      return this.contribution ? this.contribution.author : {}
-    },
-    contribution() {
-      return this.Post ? this.Post[0] : {}
-    },
+    ...mapGetters({
+      user: 'auth/user',
+    }),
   },
-  watch: {
-    contribution() {
-      if (this.author.id !== this.user.id) {
-        throw new Error(`You can't edit that!`)
-      }
-    },
-  },
-  apollo: {
-    Post: {
-      query() {
-        return PostQuery(this.$i18n)
+  async asyncData(context) {
+    const {
+      app,
+      store,
+      error,
+      params: { id },
+    } = context
+    let client = app.apolloProvider.defaultClient
+    const {
+      data: {
+        Post: [contribution],
       },
-      variables() {
-        return {
-          id: this.$route.params.id,
-        }
-      },
-      fetchPolicy: 'cache-and-network',
-    },
+    } = await client.query({
+      query: PostQuery(app.$i18n),
+      variables: { id },
+    })
+    if (contribution.author.id !== store.getters['auth/user'].id) {
+      error({ statusCode: 403, message: "You can't edit that!" })
+    }
+    return { contribution }
   },
 }
 </script>

From edbb0c3d1f78afad94db2d12e88fc4e99edc630a Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Tue, 12 Nov 2019 17:37:16 +0100
Subject: [PATCH 12/18] Fix cypress tests

---
 cypress/integration/common/steps.js                | 7 ++++++-
 cypress/integration/notifications/Mentions.feature | 1 +
 cypress/integration/post/WritePost.feature         | 3 ++-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js
index 493c54e38..ec63a81c8 100644
--- a/cypress/integration/common/steps.js
+++ b/cypress/integration/common/steps.js
@@ -245,6 +245,11 @@ Then("I select a category", () => {
     .click();
 });
 
+When("I choose a language for the post", () => {
+  cy.get('.ds-flex-item > .ds-form-item .ds-select ')
+    .click().get('.ds-select-option').first().click()
+})
+
 Then("the post shows up on the landing page at position {int}", index => {
   cy.openPage("landing");
   const selector = `.post-card:nth-child(${index}) > .ds-card-content`;
@@ -536,4 +541,4 @@ Then("I see only one post with the title {string}", title => {
     .find(".post-link")
     .should("have.length", 1);
   cy.get(".main-container").contains(".post-link", title);
-});
\ No newline at end of file
+});
diff --git a/cypress/integration/notifications/Mentions.feature b/cypress/integration/notifications/Mentions.feature
index 7523e3d05..810b77433 100644
--- a/cypress/integration/notifications/Mentions.feature
+++ b/cypress/integration/notifications/Mentions.feature
@@ -20,6 +20,7 @@ Feature: Notification for a mention
       """
     And mention "@matt-rider" in the text
     And I select a category
+    And I choose a language for the post
     And I click on "Save"
     When I log out
     And I log in with the following credentials:
diff --git a/cypress/integration/post/WritePost.feature b/cypress/integration/post/WritePost.feature
index 461766532..c5762536e 100644
--- a/cypress/integration/post/WritePost.feature
+++ b/cypress/integration/post/WritePost.feature
@@ -17,7 +17,8 @@ Feature: Create a post
       Human Connection is a free and open-source social network
       for active citizenship.
       """
-    Then I select a category
+    And I select a category
+    And I choose a language for the post
     And I click on "Save"
     Then I get redirected to ".../my-first-post"
     And the post was saved successfully

From c20a656405eef0b6896bc85a1a76937b27608f52 Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Fri, 15 Nov 2019 11:51:53 +0100
Subject: [PATCH 13/18] Follow @mattwr18 suggestions

---
 cypress/integration/common/steps.js                | 8 ++++++--
 cypress/integration/notifications/Mentions.feature | 2 +-
 cypress/integration/post/WritePost.feature         | 2 +-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js
index ec63a81c8..c51c863d1 100644
--- a/cypress/integration/common/steps.js
+++ b/cypress/integration/common/steps.js
@@ -5,9 +5,12 @@ import {
 } from "cypress-cucumber-preprocessor/steps";
 import helpers from "../../support/helpers";
 import { VERSION } from '../../constants/terms-and-conditions-version.js'
+import locales from '../../../webapp/locales'
+import orderBy from 'lodash/orderBy'
 
 /* global cy  */
 
+const languages = orderBy(locales, 'name')
 let lastPost = {};
 
 let loginCredentials = {
@@ -245,9 +248,10 @@ Then("I select a category", () => {
     .click();
 });
 
-When("I choose a language for the post", () => {
+When("I choose {string} as the language for the post", (languageCode) => {
   cy.get('.ds-flex-item > .ds-form-item .ds-select ')
-    .click().get('.ds-select-option').first().click()
+    .click().get('.ds-select-option')
+    .eq(languages.findIndex(l => l.code === languageCode)).click()
 })
 
 Then("the post shows up on the landing page at position {int}", index => {
diff --git a/cypress/integration/notifications/Mentions.feature b/cypress/integration/notifications/Mentions.feature
index 810b77433..ef2694abc 100644
--- a/cypress/integration/notifications/Mentions.feature
+++ b/cypress/integration/notifications/Mentions.feature
@@ -20,7 +20,7 @@ Feature: Notification for a mention
       """
     And mention "@matt-rider" in the text
     And I select a category
-    And I choose a language for the post
+    And I choose "en" as the language for the post
     And I click on "Save"
     When I log out
     And I log in with the following credentials:
diff --git a/cypress/integration/post/WritePost.feature b/cypress/integration/post/WritePost.feature
index c5762536e..0d74606ad 100644
--- a/cypress/integration/post/WritePost.feature
+++ b/cypress/integration/post/WritePost.feature
@@ -18,7 +18,7 @@ Feature: Create a post
       for active citizenship.
       """
     And I select a category
-    And I choose a language for the post
+    And I choose "en" as the language for the post
     And I click on "Save"
     Then I get redirected to ".../my-first-post"
     And the post was saved successfully

From 04f07b90915e10bc2485daa30a222e6002b59a9a Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Mon, 18 Nov 2019 17:25:44 +0100
Subject: [PATCH 14/18] Fix lint

---
 webapp/components/Editor/Editor.story.js |  6 +++++-
 webapp/pages/admin/hashtags.vue          |  4 +---
 webapp/pages/admin/users.vue             |  4 +---
 webapp/plugins/vue-filters.js            |  6 +++++-
 webapp/store/auth.test.js                | 10 ++++++++--
 5 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/webapp/components/Editor/Editor.story.js b/webapp/components/Editor/Editor.story.js
index 7a69b347f..8efcf3f4c 100644
--- a/webapp/components/Editor/Editor.story.js
+++ b/webapp/components/Editor/Editor.story.js
@@ -27,7 +27,11 @@ const plugins = [
 ]
 helpers.init({ plugins })
 
-const users = [{ id: 1, slug: 'peter' }, { id: 2, slug: 'sandra' }, { id: 3, slug: 'jane' }]
+const users = [
+  { id: 1, slug: 'peter' },
+  { id: 2, slug: 'sandra' },
+  { id: 3, slug: 'jane' },
+]
 
 storiesOf('Editor', module)
   .addDecorator(withA11y)
diff --git a/webapp/pages/admin/hashtags.vue b/webapp/pages/admin/hashtags.vue
index 76306873a..521d3110a 100644
--- a/webapp/pages/admin/hashtags.vue
+++ b/webapp/pages/admin/hashtags.vue
@@ -1,9 +1,7 @@
 <template>
   <ds-card :header="$t('admin.hashtags.name')">
     <ds-table :data="Tag" :fields="fields" condensed>
-      <template slot="index" slot-scope="scope">
-        {{ scope.index + 1 }}.
-      </template>
+      <template slot="index" slot-scope="scope">{{ scope.index + 1 }}.</template>
       <template slot="id" slot-scope="scope">
         <nuxt-link :to="{ path: '/', query: { hashtag: encodeURI(scope.row.id) } }">
           <b>#{{ scope.row.id | truncate(20) }}</b>
diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index b8478df41..67594180d 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -20,9 +20,7 @@
     </ds-space>
     <ds-card v-if="User && User.length">
       <ds-table :data="User" :fields="fields" condensed>
-        <template slot="index" slot-scope="scope">
-          {{ scope.row.index + 1 }}.
-        </template>
+        <template slot="index" slot-scope="scope">{{ scope.row.index + 1 }}.</template>
         <template slot="name" slot-scope="scope">
           <nuxt-link
             :to="{
diff --git a/webapp/plugins/vue-filters.js b/webapp/plugins/vue-filters.js
index 399b675fa..56fc6ca73 100644
--- a/webapp/plugins/vue-filters.js
+++ b/webapp/plugins/vue-filters.js
@@ -45,7 +45,11 @@ export default ({ app = {} }) => {
       return value.join(glue)
     },
     listByKey: (values, key, glue, truncate) => {
-      return app.$filters.list(values.map(item => item[key]), glue, truncate)
+      return app.$filters.list(
+        values.map(item => item[key]),
+        glue,
+        truncate,
+      )
     },
     camelCase: (value = '') => {
       return value
diff --git a/webapp/store/auth.test.js b/webapp/store/auth.test.js
index ad398520f..87b5295dc 100644
--- a/webapp/store/auth.test.js
+++ b/webapp/store/auth.test.js
@@ -169,7 +169,10 @@ describe('actions', () => {
 
       it('saves pending flags in order', () => {
         expect(commit.mock.calls).toEqual(
-          expect.arrayContaining([['SET_PENDING', true], ['SET_PENDING', false]]),
+          expect.arrayContaining([
+            ['SET_PENDING', true],
+            ['SET_PENDING', false],
+          ]),
         )
       })
     })
@@ -207,7 +210,10 @@ describe('actions', () => {
           await action({ commit }, { email: 'user@example.org', password: 'wrong' })
         } catch (err) {} // ignore
         expect(commit.mock.calls).toEqual(
-          expect.arrayContaining([['SET_PENDING', true], ['SET_PENDING', false]]),
+          expect.arrayContaining([
+            ['SET_PENDING', true],
+            ['SET_PENDING', false],
+          ]),
         )
       })
     })

From 0815a12fc9d5f469fea20f31b7d2089b525e8f96 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Mon, 18 Nov 2019 17:42:56 +0100
Subject: [PATCH 15/18] Decrease width of language select, pull right

- @ogerly hope you are cool with this, I pulled it right so that the
validations you added still all line up on the right side

- @alina-beck I think you know a more sophisticated way to do this, it
was just easy for me to add an empty <ds-flex-item> with a 50% width on
medium and larger devices. This can also be populated with country of
contribution or visibility, when one of those is implemented.. what do
you think?
---
 webapp/components/ContributionForm/ContributionForm.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index 384bafddb..51adba663 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -61,6 +61,7 @@
           <ds-chip v-else size="base">{{ form.categoryIds.length }} / 3</ds-chip>
         </ds-text>
         <ds-flex class="contribution-form-footer">
+          <ds-flex-item :width="{ lg: '50%', md: '50%', sm: '100%' }" />
           <ds-flex-item>
             <ds-space margin-bottom="small" />
             <ds-select

From 5450eba1b9007f6113b1787880b66b2c1d79a8c3 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Mon, 18 Nov 2019 18:23:41 +0100
Subject: [PATCH 16/18] Update validations for a Post's content

- we were asked to remove a minimum of three characters since it's not
more substantive than a link.
---
 webapp/components/ContributionForm/ContributionForm.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index 51adba663..734e3be81 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -151,13 +151,7 @@ export default {
       form,
       formSchema: {
         title: { required: true, min: 3, max: 100 },
-        content: {
-          required: true,
-          min: 3,
-          transform: content => {
-            return this.$filters.removeHtml(content)
-          },
-        },
+        content: { required: true },
         categoryIds: {
           type: 'array',
           required: true,

From 399e13360ef600fabda80c04d3c445d0d6c85cef Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Mon, 18 Nov 2019 21:23:12 +0100
Subject: [PATCH 17/18] Update tests to test new validations

---
 .../CategoriesSelect/CategoriesSelect.vue     |   4 +
 .../ContributionForm/ContributionForm.spec.js | 156 ++++++------------
 2 files changed, 58 insertions(+), 102 deletions(-)

diff --git a/webapp/components/CategoriesSelect/CategoriesSelect.vue b/webapp/components/CategoriesSelect/CategoriesSelect.vue
index 9b54b3283..1fdb3ce0a 100644
--- a/webapp/components/CategoriesSelect/CategoriesSelect.vue
+++ b/webapp/components/CategoriesSelect/CategoriesSelect.vue
@@ -5,6 +5,7 @@
         <ds-flex-item>
           <ds-button
             size="small"
+            :data-test="categoryButtonsId(category.id)"
             @click.prevent="toggleCategory(category.id)"
             :primary="isActive(category.id)"
             :disabled="isDisabled(category.id)"
@@ -68,6 +69,9 @@ export default {
     isDisabled(id) {
       return !!(this.reachedMaximum && !this.isActive(id))
     },
+    categoryButtonsId(categoryId) {
+      return `category-buttons-${categoryId}`
+    },
   },
   apollo: {
     Category: {
diff --git a/webapp/components/ContributionForm/ContributionForm.spec.js b/webapp/components/ContributionForm/ContributionForm.spec.js
index a329ad4b1..3c27ea060 100644
--- a/webapp/components/ContributionForm/ContributionForm.spec.js
+++ b/webapp/components/ContributionForm/ContributionForm.spec.js
@@ -49,13 +49,16 @@ const categories = [
 ]
 
 describe('ContributionForm.vue', () => {
-  let wrapper
-  let postTitleInput
-  let expectedParams
-  let cancelBtn
-  let mocks
-  let propsData
-  let categoryIds
+  let wrapper,
+    postTitleInput,
+    expectedParams,
+    cancelBtn,
+    mocks,
+    propsData,
+    categoryIds,
+    englishLanguage,
+    deutschLanguage,
+    dataPrivacyButton
   const postTitle = 'this is a title for a post'
   const postTitleTooShort = 'xx'
   let postTitleTooLong = ''
@@ -63,11 +66,6 @@ describe('ContributionForm.vue', () => {
     postTitleTooLong += 'x'
   }
   const postContent = 'this is a post'
-  const postContentTooShort = 'xx'
-  let postContentTooLong = ''
-  for (let i = 0; i < 2001; i++) {
-    postContentTooLong += 'x'
-  }
   const imageUpload = {
     file: {
       filename: 'avataar.svg',
@@ -139,77 +137,54 @@ describe('ContributionForm.vue', () => {
     })
 
     describe('CreatePost', () => {
-      describe('language placeholder', () => {
-        it.skip("displays the name that corresponds with the user's location code", () => {
-          // Well not anymore right? We want the user to save the language
-          // excplicitly. I'll keep this test if we change our minds
-          expect(wrapper.find('.ds-select-placeholder').text()).toEqual('English')
-        })
-      })
-
       describe('invalid form submission', () => {
-        it('title and content should not be empty ', async () => {
-          wrapper.find('form').trigger('submit')
-          expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
+        beforeEach(async () => {
+          wrapper.find(CategoriesSelect).setData({ categories })
+          postTitleInput = wrapper.find('.ds-input')
+          postTitleInput.setValue(postTitle)
+          await wrapper.vm.updateEditorContent(postContent)
+          englishLanguage = wrapper.findAll('li').filter(language => language.text() === 'English')
+          englishLanguage.trigger('click')
+          dataPrivacyButton = await wrapper
+            .find(CategoriesSelect)
+            .find('[data-test="category-buttons-cat12"]')
+          dataPrivacyButton.trigger('click')
         })
 
         it('title should not be empty', async () => {
-          await wrapper.vm.updateEditorContent(postContent)
+          postTitleInput.setValue('')
           wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
         })
 
         it('title should not be too long', async () => {
-          postTitleInput = wrapper.find('.ds-input')
           postTitleInput.setValue(postTitleTooLong)
-          await wrapper.vm.updateEditorContent(postContent)
           wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
         })
 
         it('title should not be too short', async () => {
-          postTitleInput = wrapper.find('.ds-input')
           postTitleInput.setValue(postTitleTooShort)
-          await wrapper.vm.updateEditorContent(postContent)
           wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
         })
 
         it('content should not be empty', async () => {
-          postTitleInput = wrapper.find('.ds-input')
-          postTitleInput.setValue(postTitle)
+          await wrapper.vm.updateEditorContent('')
           await wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
         })
 
-        it('content should not be too short', async () => {
-          postTitleInput = wrapper.find('.ds-input')
-          postTitleInput.setValue(postTitle)
-          await wrapper.vm.updateEditorContent(postContentTooShort)
-          wrapper.find('form').trigger('submit')
-          expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
-        })
-
-        it('content should not be too long', async () => {
-          postTitleInput = wrapper.find('.ds-input')
-          postTitleInput.setValue(postTitle)
-          await wrapper.vm.updateEditorContent(postContentTooLong)
-          wrapper.find('form').trigger('submit')
-          expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
-        })
-
         it('should have at least one category', async () => {
-          postTitleInput = wrapper.find('.ds-input')
-          postTitleInput.setValue(postTitle)
-          await wrapper.vm.updateEditorContent(postContent)
+          dataPrivacyButton = await wrapper
+            .find(CategoriesSelect)
+            .find('[data-test="category-buttons-cat12"]')
+          dataPrivacyButton.trigger('click')
           wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
         })
 
         it('should have not have more than three categories', async () => {
-          postTitleInput = wrapper.find('.ds-input')
-          postTitleInput.setValue(postTitle)
-          await wrapper.vm.updateEditorContent(postContent)
           wrapper.vm.form.categoryIds = ['cat4', 'cat9', 'cat15', 'cat27']
           wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
@@ -234,15 +209,12 @@ describe('ContributionForm.vue', () => {
           postTitleInput.setValue(postTitle)
           await wrapper.vm.updateEditorContent(postContent)
           wrapper.find(CategoriesSelect).setData({ categories })
-          wrapper
-            .findAll('li')
-            .at(1)
-            .trigger('click') // language
-          await wrapper
+          englishLanguage = wrapper.findAll('li').filter(language => language.text() === 'English')
+          englishLanguage.trigger('click')
+          dataPrivacyButton = await wrapper
             .find(CategoriesSelect)
-            .findAll('button')
-            .at(1)
-            .trigger('click')
+            .find('[data-test="category-buttons-cat12"]')
+          dataPrivacyButton.trigger('click')
         })
 
         it('creates a post with valid title, content, and at least one category', async () => {
@@ -252,10 +224,8 @@ describe('ContributionForm.vue', () => {
 
         it('supports changing the language', async () => {
           expectedParams.variables.language = 'de'
-          wrapper
-            .findAll('li')
-            .at(0)
-            .trigger('click') // choose German as language
+          deutschLanguage = wrapper.findAll('li').filter(language => language.text() === 'Deutsch')
+          deutschLanguage.trigger('click')
           wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
         })
@@ -267,6 +237,14 @@ describe('ContributionForm.vue', () => {
           expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
         })
 
+        it('content is valid with just a link', async () => {
+          await wrapper.vm.updateEditorContent(
+            '<a href="https://www.youtube.com/watch?v=smoEelV6FUk" target="_blank"></a>',
+          )
+          wrapper.find('form').trigger('submit')
+          expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
+        })
+
         it("pushes the user to the post's page", async () => {
           wrapper.find('form').trigger('submit')
           await mocks.$apollo.mutate
@@ -300,15 +278,12 @@ describe('ContributionForm.vue', () => {
           await wrapper.vm.updateEditorContent(postContent)
           categoryIds = ['cat12']
           wrapper.find(CategoriesSelect).setData({ categories })
-          wrapper
-            .findAll('li')
-            .at(1)
-            .trigger('click') // language
-          await wrapper
+          englishLanguage = wrapper.findAll('li').filter(language => language.text() === 'English')
+          englishLanguage.trigger('click')
+          dataPrivacyButton = await wrapper
             .find(CategoriesSelect)
-            .findAll('button')
-            .at(1)
-            .trigger('click')
+            .find('[data-test="category-buttons-cat12"]')
+          dataPrivacyButton.trigger('click')
         })
 
         it('shows an error toaster when apollo mutation rejects', async () => {
@@ -374,8 +349,8 @@ describe('ContributionForm.vue', () => {
           expectedParams = {
             mutation: PostMutations().UpdatePost,
             variables: {
-              title: postTitle,
-              content: postContent,
+              title: propsData.contribution.title,
+              content: propsData.contribution.content,
               language: propsData.contribution.language,
               id: propsData.contribution.id,
               categoryIds: ['cat12'],
@@ -386,42 +361,19 @@ describe('ContributionForm.vue', () => {
         })
 
         it('calls the UpdatePost apollo mutation', async () => {
-          postTitleInput = wrapper.find('.ds-input')
-          postTitleInput.setValue(postTitle)
+          expectedParams.variables.content = postContent
           wrapper.vm.updateEditorContent(postContent)
-          wrapper
-            .findAll('li')
-            .at(0)
-            .trigger('click') // language
           await wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
         })
 
         it('supports updating categories', async () => {
-          expectedParams.variables.categoryIds = ['cat12', 'cat3', 'cat15']
-          postTitleInput = wrapper.find('.ds-input')
-          postTitleInput.setValue(postTitle)
-          wrapper.vm.updateEditorContent(postContent)
-          wrapper
-            .findAll('li')
-            .at(0)
-            .trigger('click') // language
+          expectedParams.variables.categoryIds.push('cat3')
           wrapper.find(CategoriesSelect).setData({ categories })
-          await wrapper
+          let healthWellbeingButton = await wrapper
             .find(CategoriesSelect)
-            .findAll('button')
-            .at(0)
-            .trigger('click')
-          await wrapper
-            .find(CategoriesSelect)
-            .findAll('button')
-            .at(3)
-            .trigger('click')
-          await wrapper
-            .find(CategoriesSelect)
-            .findAll('button')
-            .at(4)
-            .trigger('click')
+            .find('[data-test="category-buttons-cat3"]')
+          healthWellbeingButton.trigger('click')
           await wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
         })

From 123fc2f66686e4b8e37a4b71ac1debdda57ccfa1 Mon Sep 17 00:00:00 2001
From: mattwr18 <mattwr18@gmail.com>
Date: Mon, 18 Nov 2019 21:54:24 +0100
Subject: [PATCH 18/18] Fix lint with updated linter

---
 webapp/components/ContributionForm/ContributionForm.spec.js | 2 +-
 webapp/pages/post/edit/_id.vue                              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/components/ContributionForm/ContributionForm.spec.js b/webapp/components/ContributionForm/ContributionForm.spec.js
index 3c27ea060..52f77b3f2 100644
--- a/webapp/components/ContributionForm/ContributionForm.spec.js
+++ b/webapp/components/ContributionForm/ContributionForm.spec.js
@@ -370,7 +370,7 @@ describe('ContributionForm.vue', () => {
         it('supports updating categories', async () => {
           expectedParams.variables.categoryIds.push('cat3')
           wrapper.find(CategoriesSelect).setData({ categories })
-          let healthWellbeingButton = await wrapper
+          const healthWellbeingButton = await wrapper
             .find(CategoriesSelect)
             .find('[data-test="category-buttons-cat3"]')
           healthWellbeingButton.trigger('click')
diff --git a/webapp/pages/post/edit/_id.vue b/webapp/pages/post/edit/_id.vue
index a85ba274a..c79d2b70e 100644
--- a/webapp/pages/post/edit/_id.vue
+++ b/webapp/pages/post/edit/_id.vue
@@ -28,7 +28,7 @@ export default {
       error,
       params: { id },
     } = context
-    let client = app.apolloProvider.defaultClient
+    const client = app.apolloProvider.defaultClient
     const {
       data: {
         Post: [contribution],