From 4ab08fb472611dcfef5fad57a85d6ecba5481231 Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
 <dependabot-preview[bot]@users.noreply.github.com>
Date: Mon, 27 May 2019 22:20:08 +0000
Subject: [PATCH 01/11] Bump prettier from 1.14.3 to 1.17.1 in /webapp

Bumps [prettier](https://github.com/prettier/prettier) from 1.14.3 to 1.17.1.
- [Release notes](https://github.com/prettier/prettier/releases)
- [Changelog](https://github.com/prettier/prettier/blob/master/CHANGELOG.md)
- [Commits](https://github.com/prettier/prettier/compare/1.14.3...1.17.1)

Signed-off-by: dependabot[bot] <support@dependabot.com>
---
 webapp/package.json |  2 +-
 webapp/yarn.lock    | 13 ++++---------
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/webapp/package.json b/webapp/package.json
index 29714e513..5fd7211ac 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -107,7 +107,7 @@
     "jest": "~24.8.0",
     "node-sass": "~4.12.0",
     "nodemon": "~1.19.1",
-    "prettier": "~1.14.3",
+    "prettier": "~1.17.1",
     "sass-loader": "~7.1.0",
     "tippy.js": "^4.3.1",
     "vue-jest": "~3.0.4",
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index f2e45260c..3c6ad8347 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -8797,15 +8797,10 @@ prettier@1.16.3:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.3.tgz#8c62168453badef702f34b45b6ee899574a6a65d"
   integrity sha512-kn/GU6SMRYPxUakNXhpP0EedT/KmaPzr0H5lIsDogrykbaxOpOfAFfk5XA7DZrJyMAv1wlMV3CPcZruGXVVUZw==
 
-prettier@^1.15.2:
-  version "1.17.0"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.17.0.tgz#53b303676eed22cc14a9f0cec09b477b3026c008"
-  integrity sha512-sXe5lSt2WQlCbydGETgfm1YBShgOX4HxQkFPvbxkcwgDvGDeqVau8h+12+lmSVlP3rHPz0oavfddSZg/q+Szjw==
-
-prettier@~1.14.3:
-  version "1.14.3"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.14.3.tgz#90238dd4c0684b7edce5f83b0fb7328e48bd0895"
-  integrity sha512-qZDVnCrnpsRJJq5nSsiHCE3BYMED2OtsI+cmzIzF1QIfqm5ALf8tEJcO27zV1gKNKRPdhjO0dNWnrzssDQ1tFg==
+prettier@^1.15.2, prettier@~1.17.1:
+  version "1.17.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.17.1.tgz#ed64b4e93e370cb8a25b9ef7fef3e4fd1c0995db"
+  integrity sha512-TzGRNvuUSmPgwivDqkZ9tM/qTGW9hqDKWOE9YHiyQdixlKbv7kvEqsmDPrcHJTKwthU774TQwZXVtaQ/mMsvjg==
 
 pretty-bytes@^5.2.0:
   version "5.2.0"

From 154b6a6f788541fd7de0d3622b1cced1a173a3b4 Mon Sep 17 00:00:00 2001
From: aonomike <aonomike@gmail.com>
Date: Tue, 28 May 2019 23:31:57 +0300
Subject: [PATCH 02/11] Fix large file sizes bug

---
 webapp/components/Upload/index.vue | 25 +++++++++++++++++--------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/webapp/components/Upload/index.vue b/webapp/components/Upload/index.vue
index 831edd2f8..df9d35d22 100644
--- a/webapp/components/Upload/index.vue
+++ b/webapp/components/Upload/index.vue
@@ -9,6 +9,7 @@
       :style="backgroundImage"
       @vdropzone-thumbnail="thumbnail"
       @vdropzone-drop="vddrop"
+      @vdropzone-error="verror"
     />
   </div>
 </template>
@@ -27,10 +28,11 @@ export default {
     return {
       dropzoneOptions: {
         url: this.vddrop,
-        maxFilesize: 0.5,
+        maxFilesize: 3.0,
         previewTemplate: this.template(),
         dictDefaultMessage: '',
       },
+      error: false,
     }
   },
   computed: {
@@ -42,19 +44,20 @@ export default {
       }
     },
   },
+  watch: {
+    error() {
+      let that = this
+      setTimeout(function() {
+        that.error = false
+      }, 2000)
+    },
+  },
   methods: {
     template() {
       return `<div class="dz-preview dz-file-preview">
                 <div class="dz-image">
                   <div data-dz-thumbnail-bg></div>
                 </div>
-                <div class="dz-details">
-                  <div class="dz-size"><span data-dz-size></span></div>
-                  <div class="dz-filename"><span data-dz-name></span></div>
-                </div>
-                <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
-                <div class="dz-error-message"><span data-dz-errormessage></span></div>
-                </div>
               </div>
       `
     },
@@ -94,6 +97,12 @@ export default {
         })
         .catch(error => this.$toast.error(error.message))
     },
+    verror(file, message) {
+      this.error = true
+      if (file.status === 'error') {
+        this.$toast.error(file.status, message)
+      }
+    },
   },
 }
 </script>

From ec1a24cbd31c29a5bd617519056f2aa2f18689cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Wed, 29 May 2019 13:18:18 +0200
Subject: [PATCH 03/11] Fix update incompatibility

It seems that prettier supports vue in version `v1.15` and above.
See: https://github.com/prettier/prettier/releases/tag/1.15.0

So I guess that interferes with the old vue linter rules in place. I
graduated the vlue rule from `recommended` to `essential` and now
running `yarn run lint --fix` is doing fine.
---
 webapp/.eslintrc.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/webapp/.eslintrc.js b/webapp/.eslintrc.js
index 0400fe5f2..f5aa82c81 100644
--- a/webapp/.eslintrc.js
+++ b/webapp/.eslintrc.js
@@ -10,7 +10,7 @@ module.exports = {
   },
   extends: [
     'standard',
-    'plugin:vue/recommended',
+    'plugin:vue/essential',
     'plugin:prettier/recommended'
   ],
   // required to lint *.vue files
@@ -25,7 +25,9 @@ module.exports = {
     'no-console': ['error'],
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'vue/component-name-in-template-casing': ['error', 'kebab-case'],
-    'prettier/prettier': ['error'],
+    'prettier/prettier': ['error', {
+      htmlWhitespaceSensitivity: 'ignore'
+    }],
     // 'newline-per-chained-call': [2]
   }
 }

From da0a4eabfc137056a18f6d972d0264d9c5d235fb Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
 <dependabot-preview[bot]@users.noreply.github.com>
Date: Wed, 29 May 2019 11:30:33 +0000
Subject: [PATCH 04/11] Bump prettier from 1.14.3 to 1.17.1 in /webapp

Bumps [prettier](https://github.com/prettier/prettier) from 1.14.3 to 1.17.1.
- [Release notes](https://github.com/prettier/prettier/releases)
- [Changelog](https://github.com/prettier/prettier/blob/master/CHANGELOG.md)
- [Commits](https://github.com/prettier/prettier/compare/1.14.3...1.17.1)

Signed-off-by: dependabot[bot] <support@dependabot.com>
---
 webapp/package.json |  2 +-
 webapp/yarn.lock    | 13 ++++---------
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/webapp/package.json b/webapp/package.json
index b73b5cb3b..e2b151638 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -106,7 +106,7 @@
     "jest": "~24.8.0",
     "node-sass": "~4.12.0",
     "nodemon": "~1.19.1",
-    "prettier": "~1.14.3",
+    "prettier": "~1.17.1",
     "sass-loader": "~7.1.0",
     "tippy.js": "^4.3.1",
     "vue-jest": "~3.0.4",
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index f2e45260c..3c6ad8347 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -8797,15 +8797,10 @@ prettier@1.16.3:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.3.tgz#8c62168453badef702f34b45b6ee899574a6a65d"
   integrity sha512-kn/GU6SMRYPxUakNXhpP0EedT/KmaPzr0H5lIsDogrykbaxOpOfAFfk5XA7DZrJyMAv1wlMV3CPcZruGXVVUZw==
 
-prettier@^1.15.2:
-  version "1.17.0"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.17.0.tgz#53b303676eed22cc14a9f0cec09b477b3026c008"
-  integrity sha512-sXe5lSt2WQlCbydGETgfm1YBShgOX4HxQkFPvbxkcwgDvGDeqVau8h+12+lmSVlP3rHPz0oavfddSZg/q+Szjw==
-
-prettier@~1.14.3:
-  version "1.14.3"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.14.3.tgz#90238dd4c0684b7edce5f83b0fb7328e48bd0895"
-  integrity sha512-qZDVnCrnpsRJJq5nSsiHCE3BYMED2OtsI+cmzIzF1QIfqm5ALf8tEJcO27zV1gKNKRPdhjO0dNWnrzssDQ1tFg==
+prettier@^1.15.2, prettier@~1.17.1:
+  version "1.17.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.17.1.tgz#ed64b4e93e370cb8a25b9ef7fef3e4fd1c0995db"
+  integrity sha512-TzGRNvuUSmPgwivDqkZ9tM/qTGW9hqDKWOE9YHiyQdixlKbv7kvEqsmDPrcHJTKwthU774TQwZXVtaQ/mMsvjg==
 
 pretty-bytes@^5.2.0:
   version "5.2.0"

From ff0b4b6867228d30e6f1c8281549b21f7b94150c Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Wed, 29 May 2019 09:47:24 -0300
Subject: [PATCH 05/11] Fix lint

---
 webapp/components/Badges.vue                  |  19 +-
 webapp/components/Category/index.vue          |   5 +-
 webapp/components/Comment.vue                 |  15 +-
 webapp/components/ContentMenu.vue             |  29 +--
 webapp/components/ContributionForm/index.vue  |  32 +---
 webapp/components/CountTo.vue                 |   5 +-
 webapp/components/Dropdown.vue                |  13 +-
 webapp/components/Editor/index.vue            |  16 +-
 webapp/components/Empty.vue                   |  15 +-
 webapp/components/Image/index.vue             |   5 +-
 webapp/components/LoadMore.vue                |  12 +-
 webapp/components/LocaleSwitch.vue            |  22 +--
 webapp/components/Modal/DeleteModal.vue       |  30 +--
 webapp/components/Modal/DisableModal.vue      |  18 +-
 webapp/components/Modal/ReportModal.vue       |  22 +--
 webapp/components/Password/Change.vue         |   6 +-
 webapp/components/Password/Strength.vue       |  10 +-
 webapp/components/PostCard/index.vue          |  33 +---
 webapp/components/SearchInput.vue             |  39 ++--
 webapp/components/ShoutButton.vue             |  18 +-
 webapp/components/User/index.vue              |  73 ++-----
 .../components/comments/CommentForm/index.vue |  19 +-
 .../components/comments/CommentList/index.vue |  23 +--
 .../notifications/Notification/index.vue      |  22 +--
 .../notifications/NotificationMenu/index.vue  |  32 +---
 webapp/layouts/default.vue                    |  60 ++----
 webapp/nuxt.config.js                         |  36 ++--
 webapp/pages/admin.vue                        |  10 +-
 webapp/pages/admin/categories.vue             |  11 +-
 webapp/pages/admin/index.vue                  |  80 ++------
 webapp/pages/admin/notifications.vue          |   5 +-
 webapp/pages/admin/organizations.vue          |   5 +-
 webapp/pages/admin/pages.vue                  |   5 +-
 webapp/pages/admin/settings.vue               |   5 +-
 webapp/pages/admin/tags.vue                   |  11 +-
 webapp/pages/admin/users.vue                  |   5 +-
 webapp/pages/index.vue                        |  14 +-
 webapp/pages/login.vue                        |  42 ++--
 webapp/pages/logout.vue                       |  30 +--
 webapp/pages/moderation.vue                   |   5 +-
 webapp/pages/moderation/index.vue             |  85 ++++-----
 webapp/pages/post/_id.vue                     |  10 +-
 webapp/pages/post/_id/_slug/index.vue         |  35 +---
 webapp/pages/post/_id/_slug/more-info.vue     |  35 ++--
 webapp/pages/post/_id/_slug/take-action.vue   |   5 +-
 webapp/pages/post/create.vue                  |   5 +-
 webapp/pages/post/edit/_id.vue                |   5 +-
 webapp/pages/profile/_id/_slug.vue            | 180 ++++--------------
 webapp/pages/settings.vue                     |  10 +-
 webapp/pages/settings/data-download.vue       |   5 +-
 webapp/pages/settings/delete-account.vue      |   5 +-
 webapp/pages/settings/index.vue               |  13 +-
 webapp/pages/settings/invites.vue             |   5 +-
 webapp/pages/settings/languages.vue           |   5 +-
 webapp/pages/settings/my-organizations.vue    |   5 +-
 webapp/pages/settings/my-social-media.vue     |  36 +---
 56 files changed, 316 insertions(+), 985 deletions(-)

diff --git a/webapp/components/Badges.vue b/webapp/components/Badges.vue
index ff8a2bd35..40d323b2d 100644
--- a/webapp/components/Badges.vue
+++ b/webapp/components/Badges.vue
@@ -1,20 +1,7 @@
 <template>
-  <div
-    :class="[
-      (badges.length === 2) && 'hc-badges-dual'
-    ]"
-    class="hc-badges"
-  >
-    <div
-      v-for="badge in badges"
-      :key="badge.key"
-      class="hc-badge-container"
-    >
-      <hc-image
-        :title="badge.key"
-        :image-props="{ src: badge.icon}"
-        class="hc-badge"
-      />
+  <div :class="[badges.length === 2 && 'hc-badges-dual']" class="hc-badges">
+    <div v-for="badge in badges" :key="badge.key" class="hc-badge-container">
+      <hc-image :title="badge.key" :image-props="{ src: badge.icon }" class="hc-badge" />
     </div>
   </div>
 </template>
diff --git a/webapp/components/Category/index.vue b/webapp/components/Category/index.vue
index 31c1aa97b..acc35772a 100644
--- a/webapp/components/Category/index.vue
+++ b/webapp/components/Category/index.vue
@@ -1,9 +1,6 @@
 <template>
   <ds-tag>
-    <ds-icon
-      size="large"
-      :name="icon"
-    />
+    <ds-icon size="large" :name="icon" />
     {{ name }}
   </ds-tag>
 </template>
diff --git a/webapp/components/Comment.vue b/webapp/components/Comment.vue
index dcad2a2ac..751a11f02 100644
--- a/webapp/components/Comment.vue
+++ b/webapp/components/Comment.vue
@@ -1,17 +1,11 @@
 <template>
   <div v-if="(comment.deleted || comment.disabled) && !isModerator">
-    <ds-text
-      style="padding-left: 40px; font-weight: bold;"
-      color="soft"
-    >
+    <ds-text style="padding-left: 40px; font-weight: bold;" color="soft">
       <ds-icon name="ban" />
       {{ this.$t('comment.content.unavailable-placeholder') }}
     </ds-text>
   </div>
-  <div
-    v-else
-    :class="{'comment': true, 'disabled-content': (comment.deleted || comment.disabled)}"
-  >
+  <div v-else :class="{ comment: true, 'disabled-content': comment.deleted || comment.disabled }">
     <ds-space margin-bottom="x-small">
       <hc-user :user="author" />
     </ds-space>
@@ -27,10 +21,7 @@
     <!-- eslint-disable vue/no-v-html -->
     <!-- TODO: replace editor content with tiptap render view -->
     <ds-space margin-bottom="small" />
-    <div
-      style="padding-left: 40px;"
-      v-html="comment.contentExcerpt"
-    />
+    <div style="padding-left: 40px;" v-html="comment.contentExcerpt" />
     <!-- eslint-enable vue/no-v-html -->
   </div>
 </template>
diff --git a/webapp/components/ContentMenu.vue b/webapp/components/ContentMenu.vue
index a2e73b8af..6e5bca4c0 100644
--- a/webapp/components/ContentMenu.vue
+++ b/webapp/components/ContentMenu.vue
@@ -1,32 +1,13 @@
 <template>
-  <dropdown
-    class="content-menu"
-    :placement="placement"
-    offset="5"
-  >
-    <template
-      slot="default"
-      slot-scope="{toggleMenu}"
-    >
-      <slot
-        name="button"
-        :toggleMenu="toggleMenu"
-      >
-        <ds-button
-          class="content-menu-trigger"
-          size="small"
-          ghost
-          @click.prevent="toggleMenu"
-        >
+  <dropdown class="content-menu" :placement="placement" offset="5">
+    <template slot="default" slot-scope="{ toggleMenu }">
+      <slot name="button" :toggleMenu="toggleMenu">
+        <ds-button class="content-menu-trigger" size="small" ghost @click.prevent="toggleMenu">
           <ds-icon name="ellipsis-v" />
         </ds-button>
       </slot>
     </template>
-    <div
-      slot="popover"
-      slot-scope="{toggleMenu}"
-      class="content-menu-popover"
-    >
+    <div slot="popover" slot-scope="{ toggleMenu }" class="content-menu-popover">
       <ds-menu :routes="routes">
         <ds-menu-item
           slot="menuitem"
diff --git a/webapp/components/ContributionForm/index.vue b/webapp/components/ContributionForm/index.vue
index 48ad99315..cf90a23b4 100644
--- a/webapp/components/ContributionForm/index.vue
+++ b/webapp/components/ContributionForm/index.vue
@@ -1,35 +1,13 @@
 <template>
-  <ds-form
-    ref="contributionForm"
-    v-model="form"
-    :schema="formSchema"
-    @submit="submit"
-  >
+  <ds-form ref="contributionForm" v-model="form" :schema="formSchema" @submit="submit">
     <template slot-scope="{ errors }">
       <ds-card>
-        <ds-input
-          model="title"
-          class="post-title"
-          placeholder="Title"
-          name="title"
-          autofocus
-        />
+        <ds-input model="title" class="post-title" placeholder="Title" name="title" autofocus />
         <no-ssr>
-          <hc-editor
-            :users="users"
-            :value="form.content"
-            @input="updateEditorContent"
-          />
+          <hc-editor :users="users" :value="form.content" @input="updateEditorContent" />
         </no-ssr>
-        <div
-          slot="footer"
-          style="text-align: right"
-        >
-          <ds-button
-            :disabled="loading || disabled"
-            ghost
-            @click.prevent="$router.back()"
-          >
+        <div slot="footer" style="text-align: right">
+          <ds-button :disabled="loading || disabled" ghost @click.prevent="$router.back()">
             {{ $t('actions.cancel') }}
           </ds-button>
           <ds-button
diff --git a/webapp/components/CountTo.vue b/webapp/components/CountTo.vue
index 89f3d5cf8..ee0e3e082 100644
--- a/webapp/components/CountTo.vue
+++ b/webapp/components/CountTo.vue
@@ -1,9 +1,6 @@
 <template>
   <span>
-    <no-ssr
-      placeholder="0"
-      tag="span"
-    >
+    <no-ssr placeholder="0" tag="span">
       <count-to
         :start-val="lastEndVal || startVal"
         :end-val="endVal"
diff --git a/webapp/components/Dropdown.vue b/webapp/components/Dropdown.vue
index 89b05aced..6743529e8 100644
--- a/webapp/components/Dropdown.vue
+++ b/webapp/components/Dropdown.vue
@@ -7,17 +7,8 @@
     trigger="manual"
     :offset="offset"
   >
-    <slot
-      :toggleMenu="toggleMenu"
-      :openMenu="openMenu"
-      :closeMenu="closeMenu"
-      :isOpen="isOpen"
-    />
-    <div
-      slot="popover"
-      @mouseover="popoverMouseEnter"
-      @mouseleave="popoveMouseLeave"
-    >
+    <slot :toggleMenu="toggleMenu" :openMenu="openMenu" :closeMenu="closeMenu" :isOpen="isOpen" />
+    <div slot="popover" @mouseover="popoverMouseEnter" @mouseleave="popoveMouseLeave">
       <slot
         name="popover"
         :toggleMenu="toggleMenu"
diff --git a/webapp/components/Editor/index.vue b/webapp/components/Editor/index.vue
index ac1391a42..ebc812199 100644
--- a/webapp/components/Editor/index.vue
+++ b/webapp/components/Editor/index.vue
@@ -1,10 +1,6 @@
 <template>
   <div class="editor">
-    <div
-      v-show="showSuggestions"
-      ref="suggestions"
-      class="suggestion-list"
-    >
+    <div v-show="showSuggestions" ref="suggestions" class="suggestion-list">
       <template v-if="hasResults">
         <div
           v-for="(user, index) in filteredUsers"
@@ -16,10 +12,7 @@
           @{{ user.slug }}
         </div>
       </template>
-      <div
-        v-else
-        class="suggestion-list__item is-empty"
-      >
+      <div v-else class="suggestion-list__item is-empty">
         No users found
       </div>
     </div>
@@ -154,10 +147,7 @@
         </ds-button>
       </div>
     </editor-floating-menu>
-    <editor-content
-      ref="editor"
-      :editor="editor"
-    />
+    <editor-content ref="editor" :editor="editor" />
   </div>
 </template>
 
diff --git a/webapp/components/Empty.vue b/webapp/components/Empty.vue
index 25deb9fd3..8760a6e6f 100644
--- a/webapp/components/Empty.vue
+++ b/webapp/components/Empty.vue
@@ -1,9 +1,5 @@
 <template>
-  <ds-space
-    class="hc-empty"
-    centered
-    :margin="margin"
-  >
+  <ds-space class="hc-empty" centered :margin="margin">
     <ds-text>
       <img
         :src="iconPath"
@@ -11,12 +7,9 @@
         class="hc-empty-icon"
         style="margin-bottom: 5px"
         alt="Empty"
-      ><br>
-      <ds-text
-        v-show="message"
-        class="hc-empty-message"
-        color="softer"
-      >
+      />
+      <br />
+      <ds-text v-show="message" class="hc-empty-message" color="softer">
         {{ message }}
       </ds-text>
     </ds-text>
diff --git a/webapp/components/Image/index.vue b/webapp/components/Image/index.vue
index 9a4428b2e..125ea9cef 100644
--- a/webapp/components/Image/index.vue
+++ b/webapp/components/Image/index.vue
@@ -1,8 +1,5 @@
 <template>
-  <img
-    v-bind="imageProps"
-    :src="imageSrc"
-  >
+  <img v-bind="imageProps" :src="imageSrc" />
 </template>
 
 <script>
diff --git a/webapp/components/LoadMore.vue b/webapp/components/LoadMore.vue
index c2a3b6e83..3d583ef50 100644
--- a/webapp/components/LoadMore.vue
+++ b/webapp/components/LoadMore.vue
@@ -1,14 +1,6 @@
 <template>
-  <ds-space
-    margin-top="large"
-    style="text-align: center"
-  >
-    <ds-button
-      :loading="loading"
-      icon="arrow-down"
-      ghost
-      @click="$emit('click')"
-    >
+  <ds-space margin-top="large" style="text-align: center">
+    <ds-button :loading="loading" icon="arrow-down" ghost @click="$emit('click')">
       {{ $t('actions.loadMore') }}
     </ds-button>
   </ds-space>
diff --git a/webapp/components/LocaleSwitch.vue b/webapp/components/LocaleSwitch.vue
index a00f38109..f765c534f 100644
--- a/webapp/components/LocaleSwitch.vue
+++ b/webapp/components/LocaleSwitch.vue
@@ -1,29 +1,19 @@
 <template>
-  <dropdown
-    ref="menu"
-    :placement="placement"
-    :offset="offset"
-  >
+  <dropdown ref="menu" :placement="placement" :offset="offset">
     <a
       slot="default"
-      slot-scope="{toggleMenu}"
+      slot-scope="{ toggleMenu }"
       class="locale-menu"
       href="#"
       @click.prevent="toggleMenu()"
     >
-      <ds-icon
-        style="margin-right: 2px;"
-        name="globe"
-      /> {{ current.code.toUpperCase() }}
-      <ds-icon
-        style="margin-left: 2px"
-        size="xx-small"
-        name="angle-down"
-      />
+      <ds-icon style="margin-right: 2px;" name="globe" />
+      {{ current.code.toUpperCase() }}
+      <ds-icon style="margin-left: 2px" size="xx-small" name="angle-down" />
     </a>
     <ds-menu
       slot="popover"
-      slot-scope="{toggleMenu}"
+      slot-scope="{ toggleMenu }"
       class="locale-menu-popover"
       :matcher="matcher"
       :routes="routes"
diff --git a/webapp/components/Modal/DeleteModal.vue b/webapp/components/Modal/DeleteModal.vue
index ccbb5a096..781771f7e 100644
--- a/webapp/components/Modal/DeleteModal.vue
+++ b/webapp/components/Modal/DeleteModal.vue
@@ -1,15 +1,7 @@
 <template>
-  <ds-modal
-    :title="title"
-    :is-open="isOpen"
-    @cancel="cancel"
-  >
+  <ds-modal :title="title" :is-open="isOpen" @cancel="cancel">
     <transition name="ds-transition-fade">
-      <ds-flex
-        v-if="success"
-        class="hc-modal-success"
-        centered
-      >
+      <ds-flex v-if="success" class="hc-modal-success" centered>
         <sweetalert-icon icon="success" />
       </ds-flex>
     </transition>
@@ -17,24 +9,12 @@
     <!-- eslint-disable-next-line vue/no-v-html -->
     <p v-html="message" />
 
-    <template
-      slot="footer"
-    >
-      <ds-button
-        class="cancel"
-        icon="close"
-        @click="cancel"
-      >
+    <template slot="footer">
+      <ds-button class="cancel" icon="close" @click="cancel">
         {{ $t('post.delete.cancel') }}
       </ds-button>
 
-      <ds-button
-        danger
-        class="confirm"
-        icon="trash"
-        :loading="loading"
-        @click="confirm"
-      >
+      <ds-button danger class="confirm" icon="trash" :loading="loading" @click="confirm">
         {{ $t('post.delete.submit') }}
       </ds-button>
     </template>
diff --git a/webapp/components/Modal/DisableModal.vue b/webapp/components/Modal/DisableModal.vue
index 3a30cbce3..202e557d9 100644
--- a/webapp/components/Modal/DisableModal.vue
+++ b/webapp/components/Modal/DisableModal.vue
@@ -1,26 +1,14 @@
 <template>
-  <ds-modal
-    :title="title"
-    :is-open="isOpen"
-    @cancel="cancel"
-  >
+  <ds-modal :title="title" :is-open="isOpen" @cancel="cancel">
     <!-- eslint-disable-next-line vue/no-v-html -->
     <p v-html="message" />
 
     <template slot="footer">
-      <ds-button
-        class="cancel"
-        @click="cancel"
-      >
+      <ds-button class="cancel" @click="cancel">
         {{ $t('disable.cancel') }}
       </ds-button>
 
-      <ds-button
-        danger
-        class="confirm"
-        icon="exclamation-circle"
-        @click="confirm"
-      >
+      <ds-button danger class="confirm" icon="exclamation-circle" @click="confirm">
         {{ $t('disable.submit') }}
       </ds-button>
     </template>
diff --git a/webapp/components/Modal/ReportModal.vue b/webapp/components/Modal/ReportModal.vue
index 078707700..8452ad5de 100644
--- a/webapp/components/Modal/ReportModal.vue
+++ b/webapp/components/Modal/ReportModal.vue
@@ -1,15 +1,7 @@
 <template>
-  <ds-modal
-    :title="title"
-    :is-open="isOpen"
-    @cancel="cancel"
-  >
+  <ds-modal :title="title" :is-open="isOpen" @cancel="cancel">
     <transition name="ds-transition-fade">
-      <ds-flex
-        v-if="success"
-        class="hc-modal-success"
-        centered
-      >
+      <ds-flex v-if="success" class="hc-modal-success" centered>
         <sweetalert-icon icon="success" />
       </ds-flex>
     </transition>
@@ -17,14 +9,8 @@
     <!-- eslint-disable-next-line vue/no-v-html -->
     <p v-html="message" />
 
-    <template
-      slot="footer"
-    >
-      <ds-button
-        class="cancel"
-        icon="close"
-        @click="cancel"
-      >
+    <template slot="footer">
+      <ds-button class="cancel" icon="close" @click="cancel">
         {{ $t('report.cancel') }}
       </ds-button>
 
diff --git a/webapp/components/Password/Change.vue b/webapp/components/Password/Change.vue
index dd6626019..95da2a7be 100644
--- a/webapp/components/Password/Change.vue
+++ b/webapp/components/Password/Change.vue
@@ -27,11 +27,7 @@
       />
       <password-strength :password="formData.newPassword" />
       <ds-space margin-top="base">
-        <ds-button
-          :loading="loading"
-          :disabled="disabled"
-          primary
-        >
+        <ds-button :loading="loading" :disabled="disabled" primary>
           {{ $t('settings.security.change-password.button') }}
         </ds-button>
       </ds-space>
diff --git a/webapp/components/Password/Strength.vue b/webapp/components/Password/Strength.vue
index c6b8a09ab..7f01cbea9 100644
--- a/webapp/components/Password/Strength.vue
+++ b/webapp/components/Password/Strength.vue
@@ -1,16 +1,10 @@
 <template>
   <div class="field">
     <div class="password-strength-meter">
-      <div
-        class="password-strength-meter-inner"
-        :class="'strength-' + strength"
-      />
+      <div class="password-strength-meter-inner" :class="'strength-' + strength" />
     </div>
     <p class="help">
-      <span
-        v-if="pass"
-        :class="{ insecure: !isSecure }"
-      >
+      <span v-if="pass" :class="{ insecure: !isSecure }">
         {{ $t('settings.security.change-password.passwordSecurity') }}:
         <strong>{{ $t(`settings.security.change-password.passwordStrength${strength}`) }}</strong>
       </span>
diff --git a/webapp/components/PostCard/index.vue b/webapp/components/PostCard/index.vue
index d3ede45eb..65f31d5c6 100644
--- a/webapp/components/PostCard/index.vue
+++ b/webapp/components/PostCard/index.vue
@@ -1,8 +1,5 @@
 <template>
-  <ds-card
-    :image="post.image"
-    :class="{'post-card': true, 'disabled-content': post.disabled}"
-  >
+  <ds-card :image="post.image" :class="{ 'post-card': true, 'disabled-content': post.disabled }">
     <!-- Post Link Target -->
     <nuxt-link
       class="post-link"
@@ -14,30 +11,20 @@
     <!-- Username, Image & Date of Post -->
     <div>
       <no-ssr>
-        <hc-user
-          :user="post.author"
-          :trunc="35"
-          :date-time="post.createdAt"
-        />
+        <hc-user :user="post.author" :trunc="35" :date-time="post.createdAt" />
       </no-ssr>
       <hc-ribbon :text="$t('post.name')" />
     </div>
     <ds-space margin-bottom="small" />
     <!-- Post Title -->
-    <ds-heading
-      tag="h3"
-      no-margin
-    >
+    <ds-heading tag="h3" no-margin>
       {{ post.title }}
     </ds-heading>
     <ds-space margin-bottom="small" />
     <!-- Post Content Excerpt -->
     <!-- eslint-disable vue/no-v-html -->
     <!-- TODO: replace editor content with tiptap render view -->
-    <div
-      class="hc-editor-content"
-      v-html="excerpt"
-    />
+    <div class="hc-editor-content" v-html="excerpt" />
     <!-- eslint-enable vue/no-v-html -->
     <!-- Footer o the Post -->
     <template slot="footer">
@@ -46,29 +33,25 @@
         <hc-category
           v-for="category in post.categories"
           :key="category.id"
-          v-tooltip="{content: category.name, placement: 'bottom-start', delay: { show: 500 }}"
+          v-tooltip="{ content: category.name, placement: 'bottom-start', delay: { show: 500 } }"
           :icon="category.icon"
         />
       </div>
       <no-ssr>
         <div style="display: inline-block; float: right">
           <!-- Shouts Count -->
-          <span :style="{ opacity: post.shoutedCount ? 1 : .5 }">
+          <span :style="{ opacity: post.shoutedCount ? 1 : 0.5 }">
             <ds-icon name="bullhorn" />
             <small>{{ post.shoutedCount }}</small>
           </span>
           &nbsp;
           <!-- Comments Count -->
-          <span :style="{ opacity: post.commentsCount ? 1 : .5 }">
+          <span :style="{ opacity: post.commentsCount ? 1 : 0.5 }">
             <ds-icon name="comments" />
             <small>{{ post.commentsCount }}</small>
           </span>
           <!-- Menu -->
-          <content-menu
-            resource-type="contribution"
-            :resource="post"
-            :is-owner="isAuthor"
-          />
+          <content-menu resource-type="contribution" :resource="post" :is-owner="isAuthor" />
         </div>
       </no-ssr>
     </template>
diff --git a/webapp/components/SearchInput.vue b/webapp/components/SearchInput.vue
index 33c938656..be31239bd 100644
--- a/webapp/components/SearchInput.vue
+++ b/webapp/components/SearchInput.vue
@@ -5,16 +5,12 @@
     role="search"
     :class="{
       'is-active': isActive,
-      'is-open': isOpen
+      'is-open': isOpen,
     }"
   >
     <div class="field">
       <div class="control">
-        <a
-          v-if="isActive"
-          class="search-clear-btn"
-          @click="clear"
-        >
+        <a v-if="isActive" class="search-clear-btn" @click="clear">
           &nbsp;
         </a>
         <ds-select
@@ -42,42 +38,31 @@
           @input.native="handleInput"
           @click.capture.native="isOpen = true"
         >
-          <template
-            slot="option"
-            slot-scope="{option}"
-          >
+          <template slot="option" slot-scope="{ option }">
             <ds-flex>
               <ds-flex-item class="search-option-label">
                 <ds-text>
                   {{ option.label | truncate(70) }}
                 </ds-text>
               </ds-flex-item>
-              <ds-flex-item
-                class="search-option-meta"
-                width="280px"
-              >
+              <ds-flex-item class="search-option-meta" width="280px">
                 <ds-flex>
                   <ds-flex-item>
-                    <ds-text
-                      size="small"
-                      color="softer"
-                      class="search-meta"
-                    >
+                    <ds-text size="small" color="softer" class="search-meta">
                       <span style="text-align: right;">
-                        <b>{{ option.commentsCount }}</b> <ds-icon name="comments" />
+                        <b>{{ option.commentsCount }}</b>
+                        <ds-icon name="comments" />
                       </span>
                       <span style="width: 36px; display: inline-block; text-align: right;">
-                        <b>{{ option.shoutedCount }}</b> <ds-icon name="bullhorn" />
+                        <b>{{ option.shoutedCount }}</b>
+                        <ds-icon name="bullhorn" />
                       </span>
                     </ds-text>
                   </ds-flex-item>
                   <ds-flex-item>
-                    <ds-text
-                      size="small"
-                      color="softer"
-                      align="right"
-                    >
-                      {{ option.author.name | truncate(32) }} - {{ option.createdAt | dateTime('dd.MM.yyyy') }}
+                    <ds-text size="small" color="softer" align="right">
+                      {{ option.author.name | truncate(32) }} -
+                      {{ option.createdAt | dateTime('dd.MM.yyyy') }}
                     </ds-text>
                   </ds-flex-item>
                 </ds-flex>
diff --git a/webapp/components/ShoutButton.vue b/webapp/components/ShoutButton.vue
index 4486abf8e..3f24ee6c8 100644
--- a/webapp/components/ShoutButton.vue
+++ b/webapp/components/ShoutButton.vue
@@ -1,8 +1,5 @@
 <template>
-  <ds-space
-    margin="large"
-    style="text-align: center"
-  >
+  <ds-space margin="large" style="text-align: center">
     <ds-button
       :loading="loading"
       :disabled="disabled"
@@ -13,16 +10,9 @@
       @click="toggle"
     />
     <ds-space margin-bottom="xx-small" />
-    <ds-text
-      color="soft"
-      class="shout-button-text"
-    >
-      <ds-heading
-        style="display: inline"
-        tag="h3"
-      >
-        {{ shoutedCount }}x
-      </ds-heading> {{ $t('shoutButton.shouted') }}
+    <ds-text color="soft" class="shout-button-text">
+      <ds-heading style="display: inline" tag="h3">{{ shoutedCount }}x</ds-heading>
+      {{ $t('shoutButton.shouted') }}
     </ds-text>
   </ds-space>
 </template>
diff --git a/webapp/components/User/index.vue b/webapp/components/User/index.vue
index 82a08c5e1..756d4d032 100644
--- a/webapp/components/User/index.vue
+++ b/webapp/components/User/index.vue
@@ -3,36 +3,16 @@
     <div
       style="display: inline-block; float: left; margin-right: 4px;  height: 100%; vertical-align: middle;"
     >
-      <ds-avatar
-        style="display: inline-block; vertical-align: middle;"
-        size="small"
-      />
+      <ds-avatar style="display: inline-block; vertical-align: middle;" size="small" />
     </div>
     <div style="display: inline-block; height: 100%; vertical-align: middle;">
-      <b
-        class="username"
-        style="vertical-align: middle;"
-      >{{ $t('profile.userAnonym') }}</b>
+      <b class="username" style="vertical-align: middle;">{{ $t('profile.userAnonym') }}</b>
     </div>
   </div>
-  <dropdown
-    v-else
-    :class="{'disabled-content': user.disabled}"
-    placement="top-start"
-    offset="0"
-  >
-    <template
-      slot="default"
-      slot-scope="{openMenu, closeMenu, isOpen}"
-    >
-      <nuxt-link
-        :to="userLink"
-        :class="['user', isOpen && 'active']"
-      >
-        <div
-          @mouseover="openMenu(true)"
-          @mouseleave="closeMenu(true)"
-        >
+  <dropdown v-else :class="{ 'disabled-content': user.disabled }" placement="top-start" offset="0">
+    <template slot="default" slot-scope="{ openMenu, closeMenu, isOpen }">
+      <nuxt-link :to="userLink" :class="['user', isOpen && 'active']">
+        <div @mouseover="openMenu(true)" @mouseleave="closeMenu(true)">
           <div
             style="display: inline-block; float: left; margin-right: 4px;  height: 100%; vertical-align: middle;"
           >
@@ -44,21 +24,11 @@
             />
           </div>
           <div style="display: inline-block; height: 100%; vertical-align: middle;">
-            <b
-              class="username"
-              style="vertical-align: middle;"
-            >{{ userName | truncate(18) }}</b>
+            <b class="username" style="vertical-align: middle;">{{ userName | truncate(18) }}</b>
           </div>
           <!-- Time -->
-          <div
-            v-if="dateTime"
-            style="display: inline;"
-          >
-            <ds-text
-              align="left"
-              size="small"
-              color="soft"
-            >
+          <div v-if="dateTime" style="display: inline;">
+            <ds-text align="left" size="small" color="soft">
               <ds-icon name="clock" />
               <no-ssr>
                 <hc-relative-date-time :date-time="dateTime" />
@@ -70,10 +40,7 @@
     </template>
     <template slot="popover">
       <div style="min-width: 250px">
-        <hc-badges
-          v-if="user.badges && user.badges.length"
-          :badges="user.badges"
-        />
+        <hc-badges v-if="user.badges && user.badges.length" :badges="user.badges" />
         <ds-text
           v-if="user.location"
           align="center"
@@ -88,11 +55,7 @@
         <ds-flex style="margin-top: -10px">
           <ds-flex-item class="ds-tab-nav-item">
             <ds-space margin="small">
-              <ds-number
-                :count="fanCount"
-                :label="$t('profile.followers')"
-                size="x-large"
-              />
+              <ds-number :count="fanCount" :label="$t('profile.followers')" size="x-large" />
             </ds-space>
           </ds-flex-item>
           <ds-flex-item class="ds-tab-nav-item ds-tab-nav-item-active">
@@ -112,20 +75,16 @@
             </ds-space>
           </ds-flex-item>
         </ds-flex>
-        <ds-flex
-          v-if="!itsMe"
-          gutter="x-small"
-          style="margin-bottom: 0;"
-        >
-          <ds-flex-item :width="{base: 3}">
+        <ds-flex v-if="!itsMe" gutter="x-small" style="margin-bottom: 0;">
+          <ds-flex-item :width="{ base: 3 }">
             <hc-follow-button
               :follow-id="user.id"
               :is-followed="user.followedByCurrentUser"
-              @optimistic="follow => user.followedByCurrentUser = follow"
-              @update="follow => user.followedByCurrentUser = follow"
+              @optimistic="follow => (user.followedByCurrentUser = follow)"
+              @update="follow => (user.followedByCurrentUser = follow)"
             />
           </ds-flex-item>
-          <ds-flex-item :width="{base: 1}">
+          <ds-flex-item :width="{ base: 1 }">
             <ds-button fullwidth>
               <ds-icon name="user-times" />
             </ds-button>
diff --git a/webapp/components/comments/CommentForm/index.vue b/webapp/components/comments/CommentForm/index.vue
index 05ab2356e..4e05049fb 100644
--- a/webapp/components/comments/CommentForm/index.vue
+++ b/webapp/components/comments/CommentForm/index.vue
@@ -1,8 +1,5 @@
 <template>
-  <ds-form
-    v-model="form"
-    @submit="handleSubmit"
-  >
+  <ds-form v-model="form" @submit="handleSubmit">
     <template slot-scope="{ errors }">
       <ds-card>
         <no-ssr>
@@ -17,22 +14,12 @@
         <ds-flex :gutter="{ base: 'small', md: 'small', sm: 'x-large', xs: 'x-large' }">
           <ds-flex-item :width="{ base: '0%', md: '50%', sm: '0%', xs: '0%' }" />
           <ds-flex-item :width="{ base: '40%', md: '20%', sm: '30%', xs: '30%' }">
-            <ds-button
-              :disabled="disabled"
-              ghost
-              class="cancelBtn"
-              @click.prevent="clear"
-            >
+            <ds-button :disabled="disabled" ghost class="cancelBtn" @click.prevent="clear">
               {{ $t('actions.cancel') }}
             </ds-button>
           </ds-flex-item>
           <ds-flex-item :width="{ base: '40%', md: '20%', sm: '40%', xs: '40%' }">
-            <ds-button
-              type="submit"
-              :loading="loading"
-              :disabled="disabled || errors"
-              primary
-            >
+            <ds-button type="submit" :loading="loading" :disabled="disabled || errors" primary>
               {{ $t('post.comment.submit') }}
             </ds-button>
           </ds-flex-item>
diff --git a/webapp/components/comments/CommentList/index.vue b/webapp/components/comments/CommentList/index.vue
index 3ea4337ba..e3baabcad 100644
--- a/webapp/components/comments/CommentList/index.vue
+++ b/webapp/components/comments/CommentList/index.vue
@@ -9,26 +9,17 @@
           color="primary"
           size="small"
           round
-        >{{ comments.length }}</ds-tag>&nbsp; Comments
+        >
+          {{ comments.length }}
+        </ds-tag>
+        &nbsp; Comments
       </span>
     </h3>
     <ds-space margin-bottom="large" />
-    <div
-      v-if="comments && comments.length"
-      id="comments"
-      class="comments"
-    >
-      <comment
-        v-for="comment in comments"
-        :key="comment.id"
-        :comment="comment"
-      />
+    <div v-if="comments && comments.length" id="comments" class="comments">
+      <comment v-for="comment in comments" :key="comment.id" :comment="comment" />
     </div>
-    <hc-empty
-      v-else
-      name="empty"
-      icon="messages"
-    />
+    <hc-empty v-else name="empty" icon="messages" />
   </div>
 </template>
 <script>
diff --git a/webapp/components/notifications/Notification/index.vue b/webapp/components/notifications/Notification/index.vue
index 3e69dc415..5f14632e3 100644
--- a/webapp/components/notifications/Notification/index.vue
+++ b/webapp/components/notifications/Notification/index.vue
@@ -1,18 +1,11 @@
 <template>
-  <ds-space
-    :class="{'notification': true, 'read': notification.read}"
-    margin-bottom="x-small"
-  >
+  <ds-space :class="{ notification: true, read: notification.read }" margin-bottom="x-small">
     <no-ssr>
       <ds-space margin-bottom="x-small">
-        <hc-user
-          :user="post.author"
-          :date-time="post.createdAt"
-          :trunc="35"
-        />
+        <hc-user :user="post.author" :date-time="post.createdAt" :trunc="35" />
       </ds-space>
       <ds-text color="soft">
-        {{ $t("notifications.menu.mentioned") }}
+        {{ $t('notifications.menu.mentioned') }}
       </ds-text>
     </no-ssr>
     <ds-space margin-bottom="x-small" />
@@ -22,16 +15,11 @@
       @click.native="$emit('read')"
     >
       <ds-space margin-bottom="x-small">
-        <ds-card
-          :header="post.title"
-          :image="post.image"
-          hover
-          space="x-small"
-        >
+        <ds-card :header="post.title" :image="post.image" hover space="x-small">
           <ds-space margin-bottom="x-small" />
           <!-- eslint-disable vue/no-v-html -->
           <div v-html="excerpt" />
-        <!-- eslint-enable vue/no-v-html -->
+          <!-- eslint-enable vue/no-v-html -->
         </ds-card>
       </ds-space>
     </nuxt-link>
diff --git a/webapp/components/notifications/NotificationMenu/index.vue b/webapp/components/notifications/NotificationMenu/index.vue
index 4bc61dd92..20a9a7074 100644
--- a/webapp/components/notifications/NotificationMenu/index.vue
+++ b/webapp/components/notifications/NotificationMenu/index.vue
@@ -1,36 +1,16 @@
 <template>
-  <ds-button
-    v-if="totalNotifications <= 0"
-    class="notifications-menu"
-    disabled
-    icon="bell"
-  >
+  <ds-button v-if="totalNotifications <= 0" class="notifications-menu" disabled icon="bell">
     {{ totalNotifications }}
   </ds-button>
-  <dropdown
-    v-else
-    class="notifications-menu"
-  >
-    <template
-      slot="default"
-      slot-scope="{toggleMenu}"
-    >
-      <ds-button
-        primary
-        icon="bell"
-        @click.prevent="toggleMenu"
-      >
+  <dropdown v-else class="notifications-menu">
+    <template slot="default" slot-scope="{ toggleMenu }">
+      <ds-button primary icon="bell" @click.prevent="toggleMenu">
         {{ totalNotifications }}
       </ds-button>
     </template>
-    <template
-      slot="popover"
-    >
+    <template slot="popover">
       <div class="notifications-menu-popover">
-        <notification-list
-          :notifications="notifications"
-          @markAsRead="markAsRead"
-        />
+        <notification-list :notifications="notifications" @markAsRead="markAsRead" />
       </div>
     </template>
   </dropdown>
diff --git a/webapp/layouts/default.vue b/webapp/layouts/default.vue
index 34544ae06..75cce8a82 100644
--- a/webapp/layouts/default.vue
+++ b/webapp/layouts/default.vue
@@ -3,11 +3,7 @@
     <div class="main-navigation">
       <ds-container class="main-navigation-container">
         <div class="main-navigation-left">
-          <a
-            v-router-link
-            style="display: inline-flex"
-            href="/"
-          >
+          <a v-router-link style="display: inline-flex" href="/">
             <ds-logo />
           </a>
         </div>
@@ -24,11 +20,7 @@
         </div>
         <div class="main-navigation-right">
           <no-ssr>
-            <locale-switch
-              class="topbar-locale-switch"
-              placement="bottom"
-              offset="23"
-            />
+            <locale-switch class="topbar-locale-switch" placement="bottom" offset="23" />
           </no-ssr>
           <template v-if="isLoggedIn">
             <no-ssr>
@@ -36,47 +28,32 @@
             </no-ssr>
             <no-ssr>
               <dropdown class="avatar-menu">
-                <template
-                  slot="default"
-                  slot-scope="{toggleMenu}"
-                >
+                <template slot="default" slot-scope="{ toggleMenu }">
                   <a
                     class="avatar-menu-trigger"
-                    :href="$router.resolve({name: 'profile-id-slug', params: {id: user.id, slug: user.slug}}).href"
+                    :href="
+                      $router.resolve({
+                        name: 'profile-id-slug',
+                        params: { id: user.id, slug: user.slug },
+                      }).href
+                    "
                     @click.prevent="toggleMenu"
                   >
-                    <ds-avatar
-                      :image="user.avatar"
-                      :name="user.name"
-                      size="small"
-                    />
-                    <ds-icon
-                      size="xx-small"
-                      name="angle-down"
-                    />
+                    <ds-avatar :image="user.avatar" :name="user.name" size="small" />
+                    <ds-icon size="xx-small" name="angle-down" />
                   </a>
                 </template>
-                <template
-                  slot="popover"
-                  slot-scope="{closeMenu}"
-                >
+                <template slot="popover" slot-scope="{ closeMenu }">
                   <div class="avatar-menu-popover">
                     {{ $t('login.hello') }}
                     <b>{{ userName }}</b>
                     <template v-if="user.role !== 'user'">
-                      <ds-text
-                        color="softer"
-                        size="small"
-                        style="margin-bottom: 0"
-                      >
+                      <ds-text color="softer" size="small" style="margin-bottom: 0">
                         {{ user.role | camelCase }}
                       </ds-text>
                     </template>
-                    <hr>
-                    <ds-menu
-                      :routes="routes"
-                      :matcher="matcher"
-                    >
+                    <hr />
+                    <ds-menu :routes="routes" :matcher="matcher">
                       <ds-menu-item
                         slot="menuitem"
                         slot-scope="item"
@@ -88,11 +65,8 @@
                         {{ item.route.name }}
                       </ds-menu-item>
                     </ds-menu>
-                    <hr>
-                    <nuxt-link
-                      class="logout-link"
-                      :to="{ name: 'logout'}"
-                    >
+                    <hr />
+                    <nuxt-link class="logout-link" :to="{ name: 'logout' }">
                       <ds-icon name="sign-out" />
                       {{ $t('login.logout') }}
                     </nuxt-link>
diff --git a/webapp/nuxt.config.js b/webapp/nuxt.config.js
index a50ac9e2a..49f2f5d0a 100644
--- a/webapp/nuxt.config.js
+++ b/webapp/nuxt.config.js
@@ -32,8 +32,8 @@ module.exports = {
     locales: require('./locales'),
   },
   /*
-  ** Headers of the page
-  */
+   ** Headers of the page
+   */
   head: {
     title: 'Human Connection',
     titleTemplate: '%s - Human Connection',
@@ -46,8 +46,8 @@ module.exports = {
   },
 
   /*
-  ** Customize the progress-bar color
-  */
+   ** Customize the progress-bar color
+   */
   loading: {
     color: '#86b31e',
     height: '2px',
@@ -55,20 +55,20 @@ module.exports = {
   },
 
   /*
-  ** Global CSS
-  */
+   ** Global CSS
+   */
   css: ['~assets/styles/main.scss'],
 
   /*
-  ** Global processed styles
-  */
+   ** Global processed styles
+   */
   styleResources: {
     scss: styleguideStyles,
   },
 
   /*
-  ** Plugins to load before mounting the App
-  */
+   ** Plugins to load before mounting the App
+   */
   plugins: [
     {
       src: `~/plugins/styleguide${process.env.STYLEGUIDE_DEV ? '-dev' : ''}.js`,
@@ -93,8 +93,8 @@ module.exports = {
   },
 
   /*
-  ** Nuxt.js modules
-  */
+   ** Nuxt.js modules
+   */
   modules: [
     ['@nuxtjs/dotenv', { only: envWhitelist }],
     ['nuxt-env', { keys: envWhitelist }],
@@ -105,8 +105,8 @@ module.exports = {
   ],
 
   /*
-  ** Axios module configuration
-  */
+   ** Axios module configuration
+   */
   axios: {
     // See https://github.com/nuxt-community/axios-module#options
     debug: dev,
@@ -181,12 +181,12 @@ module.exports = {
   },
 
   /*
-  ** Build configuration
-  */
+   ** Build configuration
+   */
   build: {
     /*
-    ** You can extend webpack config here
-    */
+     ** You can extend webpack config here
+     */
     extend(config, ctx) {
       if (process.env.STYLEGUIDE_DEV) {
         const path = require('path')
diff --git a/webapp/pages/admin.vue b/webapp/pages/admin.vue
index 631338ef9..0cbee05d5 100644
--- a/webapp/pages/admin.vue
+++ b/webapp/pages/admin.vue
@@ -5,16 +5,10 @@
     </ds-heading>
     <ds-flex gutter="small">
       <ds-flex-item :width="{ base: '100%', md: '200px' }">
-        <ds-menu
-          :routes="routes"
-          :is-exact="() => true"
-        />
+        <ds-menu :routes="routes" :is-exact="() => true" />
       </ds-flex-item>
       <ds-flex-item :width="{ base: '100%', md: 1 }">
-        <transition
-          name="slide-up"
-          appear
-        >
+        <transition name="slide-up" appear>
           <nuxt-child />
         </transition>
       </ds-flex-item>
diff --git a/webapp/pages/admin/categories.vue b/webapp/pages/admin/categories.vue
index 4620b29ad..ce795feaf 100644
--- a/webapp/pages/admin/categories.vue
+++ b/webapp/pages/admin/categories.vue
@@ -1,14 +1,7 @@
 <template>
   <ds-card :header="$t('admin.categories.name')">
-    <ds-table
-      :data="Category"
-      :fields="fields"
-      condensed
-    >
-      <template
-        slot="icon"
-        slot-scope="scope"
-      >
+    <ds-table :data="Category" :fields="fields" condensed>
+      <template slot="icon" slot-scope="scope">
         <ds-icon :name="scope.row.icon" />
       </template>
     </ds-table>
diff --git a/webapp/pages/admin/index.vue b/webapp/pages/admin/index.vue
index d87cd8cc3..6732b2137 100644
--- a/webapp/pages/admin/index.vue
+++ b/webapp/pages/admin/index.vue
@@ -5,34 +5,18 @@
         <ds-flex>
           <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
             <ds-space margin="small">
-              <ds-number
-                :count="0"
-                :label="$t('admin.dashboard.users')"
-                size="x-large"
-                uppercase
-              >
+              <ds-number :count="0" :label="$t('admin.dashboard.users')" size="x-large" uppercase>
                 <no-ssr slot="count">
-                  <hc-count-to
-                    :start-val="0"
-                    :end-val="statistics.countUsers || 0"
-                  />
+                  <hc-count-to :start-val="0" :end-val="statistics.countUsers || 0" />
                 </no-ssr>
               </ds-number>
             </ds-space>
           </ds-flex-item>
           <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
             <ds-space margin="small">
-              <ds-number
-                :count="0"
-                :label="$t('admin.dashboard.posts')"
-                size="x-large"
-                uppercase
-              >
+              <ds-number :count="0" :label="$t('admin.dashboard.posts')" size="x-large" uppercase>
                 <no-ssr slot="count">
-                  <hc-count-to
-                    :start-val="0"
-                    :end-val="statistics.countPosts || 0"
-                  />
+                  <hc-count-to :start-val="0" :end-val="statistics.countPosts || 0" />
                 </no-ssr>
               </ds-number>
             </ds-space>
@@ -46,10 +30,7 @@
                 uppercase
               >
                 <no-ssr slot="count">
-                  <hc-count-to
-                    :start-val="0"
-                    :end-val="statistics.countComments || 0"
-                  />
+                  <hc-count-to :start-val="0" :end-val="statistics.countComments || 0" />
                 </no-ssr>
               </ds-number>
             </ds-space>
@@ -63,10 +44,7 @@
                 uppercase
               >
                 <no-ssr slot="count">
-                  <hc-count-to
-                    :start-val="0"
-                    :end-val="statistics.countNotifications || 0"
-                  />
+                  <hc-count-to :start-val="0" :end-val="statistics.countNotifications || 0" />
                 </no-ssr>
               </ds-number>
             </ds-space>
@@ -80,10 +58,7 @@
                 uppercase
               >
                 <no-ssr slot="count">
-                  <hc-count-to
-                    :start-val="0"
-                    :end-val="statistics.countOrganizations || 0"
-                  />
+                  <hc-count-to :start-val="0" :end-val="statistics.countOrganizations || 0" />
                 </no-ssr>
               </ds-number>
             </ds-space>
@@ -97,61 +72,34 @@
                 uppercase
               >
                 <no-ssr slot="count">
-                  <hc-count-to
-                    :start-val="0"
-                    :end-val="statistics.countProjects || 0"
-                  />
+                  <hc-count-to :start-val="0" :end-val="statistics.countProjects || 0" />
                 </no-ssr>
               </ds-number>
             </ds-space>
           </ds-flex-item>
           <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
             <ds-space margin="small">
-              <ds-number
-                :count="0"
-                :label="$t('admin.dashboard.invites')"
-                size="x-large"
-                uppercase
-              >
+              <ds-number :count="0" :label="$t('admin.dashboard.invites')" size="x-large" uppercase>
                 <no-ssr slot="count">
-                  <hc-count-to
-                    :start-val="0"
-                    :end-val="statistics.countInvites || 0"
-                  />
+                  <hc-count-to :start-val="0" :end-val="statistics.countInvites || 0" />
                 </no-ssr>
               </ds-number>
             </ds-space>
           </ds-flex-item>
           <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
             <ds-space margin="small">
-              <ds-number
-                :count="0"
-                :label="$t('admin.dashboard.follows')"
-                size="x-large"
-                uppercase
-              >
+              <ds-number :count="0" :label="$t('admin.dashboard.follows')" size="x-large" uppercase>
                 <no-ssr slot="count">
-                  <hc-count-to
-                    :start-val="0"
-                    :end-val="statistics.countFollows || 0"
-                  />
+                  <hc-count-to :start-val="0" :end-val="statistics.countFollows || 0" />
                 </no-ssr>
               </ds-number>
             </ds-space>
           </ds-flex-item>
           <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
             <ds-space margin="small">
-              <ds-number
-                :count="0"
-                :label="$t('admin.dashboard.shouts')"
-                size="x-large"
-                uppercase
-              >
+              <ds-number :count="0" :label="$t('admin.dashboard.shouts')" size="x-large" uppercase>
                 <no-ssr slot="count">
-                  <hc-count-to
-                    :start-val="0"
-                    :end-val="statistics.countShouts || 0"
-                  />
+                  <hc-count-to :start-val="0" :end-val="statistics.countShouts || 0" />
                 </no-ssr>
               </ds-number>
             </ds-space>
diff --git a/webapp/pages/admin/notifications.vue b/webapp/pages/admin/notifications.vue
index 62be1b3bb..0d348633f 100644
--- a/webapp/pages/admin/notifications.vue
+++ b/webapp/pages/admin/notifications.vue
@@ -1,9 +1,6 @@
 <template>
   <ds-card :header="$t('admin.notifications.name')">
-    <hc-empty
-      icon="tasks"
-      message="Coming Soon…"
-    />
+    <hc-empty icon="tasks" message="Coming Soon…" />
   </ds-card>
 </template>
 
diff --git a/webapp/pages/admin/organizations.vue b/webapp/pages/admin/organizations.vue
index f1e73b8cd..1a08056ba 100644
--- a/webapp/pages/admin/organizations.vue
+++ b/webapp/pages/admin/organizations.vue
@@ -1,9 +1,6 @@
 <template>
   <ds-card :header="$t('admin.organizations.name')">
-    <hc-empty
-      icon="tasks"
-      message="Coming Soon…"
-    />
+    <hc-empty icon="tasks" message="Coming Soon…" />
   </ds-card>
 </template>
 
diff --git a/webapp/pages/admin/pages.vue b/webapp/pages/admin/pages.vue
index 789d8ad1c..5a77d4bca 100644
--- a/webapp/pages/admin/pages.vue
+++ b/webapp/pages/admin/pages.vue
@@ -1,9 +1,6 @@
 <template>
   <ds-card :header="$t('admin.pages.name')">
-    <hc-empty
-      icon="tasks"
-      message="Coming Soon…"
-    />
+    <hc-empty icon="tasks" message="Coming Soon…" />
   </ds-card>
 </template>
 
diff --git a/webapp/pages/admin/settings.vue b/webapp/pages/admin/settings.vue
index 95d34bc86..d1fa80b36 100644
--- a/webapp/pages/admin/settings.vue
+++ b/webapp/pages/admin/settings.vue
@@ -1,9 +1,6 @@
 <template>
   <ds-card :header="$t('admin.settings.name')">
-    <hc-empty
-      icon="tasks"
-      message="Coming Soon…"
-    />
+    <hc-empty icon="tasks" message="Coming Soon…" />
   </ds-card>
 </template>
 
diff --git a/webapp/pages/admin/tags.vue b/webapp/pages/admin/tags.vue
index 56fa45d59..53808fc53 100644
--- a/webapp/pages/admin/tags.vue
+++ b/webapp/pages/admin/tags.vue
@@ -1,14 +1,7 @@
 <template>
   <ds-card :header="$t('admin.tags.name')">
-    <ds-table
-      :data="Tag"
-      :fields="fields"
-      condensed
-    >
-      <template
-        slot="id"
-        slot-scope="scope"
-      >
+    <ds-table :data="Tag" :fields="fields" condensed>
+      <template slot="id" slot-scope="scope">
         {{ scope.index + 1 }}
       </template>
     </ds-table>
diff --git a/webapp/pages/admin/users.vue b/webapp/pages/admin/users.vue
index e2958b638..90f6d598d 100644
--- a/webapp/pages/admin/users.vue
+++ b/webapp/pages/admin/users.vue
@@ -1,9 +1,6 @@
 <template>
   <ds-card :header="$t('admin.users.name')">
-    <hc-empty
-      icon="tasks"
-      message="Coming Soon…"
-    />
+    <hc-empty icon="tasks" message="Coming Soon…" />
   </ds-card>
 </template>
 
diff --git a/webapp/pages/index.vue b/webapp/pages/index.vue
index fa3061443..0a0e7159f 100644
--- a/webapp/pages/index.vue
+++ b/webapp/pages/index.vue
@@ -1,10 +1,6 @@
 <template>
   <div>
-    <ds-flex
-      v-if="Post && Post.length"
-      :width="{ base: '100%' }"
-      gutter="base"
-    >
+    <ds-flex v-if="Post && Post.length" :width="{ base: '100%' }" gutter="base">
       <ds-flex-item
         v-for="post in uniq(Post)"
         :key="post.id"
@@ -15,7 +11,7 @@
     </ds-flex>
     <no-ssr>
       <ds-button
-        v-tooltip="{content: 'Create a new Post', placement: 'left', delay: { show: 500 }}"
+        v-tooltip="{ content: 'Create a new Post', placement: 'left', delay: { show: 500 } }"
         :path="{ name: 'post-create' }"
         class="post-add-button"
         icon="plus"
@@ -23,11 +19,7 @@
         primary
       />
     </no-ssr>
-    <hc-load-more
-      v-if="true"
-      :loading="$apollo.loading"
-      @click="showMoreContributions"
-    />
+    <hc-load-more v-if="true" :loading="$apollo.loading" @click="showMoreContributions" />
   </div>
 </template>
 
diff --git a/webapp/pages/login.vue b/webapp/pages/login.vue
index 9a984298e..a96fbdbf1 100644
--- a/webapp/pages/login.vue
+++ b/webapp/pages/login.vue
@@ -1,12 +1,6 @@
 <template>
-  <transition
-    name="fade"
-    appear
-  >
-    <ds-container
-      v-if="ready"
-      width="small"
-    >
+  <transition name="fade" appear>
+    <ds-container v-if="ready" width="small">
       <ds-space margin="small">
         <blockquote>
           <p>{{ $t('quotes.african.quote') }}</p>
@@ -15,41 +9,25 @@
       </ds-space>
       <ds-card class="login-card">
         <ds-flex gutter="small">
-          <ds-flex-item
-            :width="{ base: '100%', sm: '50%' }"
-            centered
-          >
+          <ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
             <no-ssr>
-              <locale-switch
-                class="login-locale-switch"
-                offset="5"
-              />
+              <locale-switch class="login-locale-switch" offset="5" />
             </no-ssr>
-            <ds-space
-              margin-top="small"
-              margin-bottom="xxx-small"
-              centered
-            >
+            <ds-space margin-top="small" margin-bottom="xxx-small" centered>
               <img
                 class="login-image"
                 alt="Human Connection"
                 src="/img/sign-up/humanconnection.svg"
-              >
+              />
             </ds-space>
           </ds-flex-item>
-          <ds-flex-item
-            :width="{ base: '100%', sm: '50%' }"
-            centered
-          >
+          <ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
             <ds-space margin="small">
               <ds-text size="small">
                 {{ $t('login.copy') }}
               </ds-text>
             </ds-space>
-            <form
-              :disabled="pending"
-              @submit.prevent="onSubmit"
-            >
+            <form :disabled="pending" @submit.prevent="onSubmit">
               <ds-input
                 v-model="form.email"
                 :disabled="pending"
@@ -82,7 +60,9 @@
                   :href="$t('login.moreInfoURL')"
                   :title="$t('login.moreInfoHint')"
                   target="_blank"
-                >{{ $t('login.moreInfo') }}</a>
+                >
+                  {{ $t('login.moreInfo') }}
+                </a>
               </ds-space>
             </form>
           </ds-flex-item>
diff --git a/webapp/pages/logout.vue b/webapp/pages/logout.vue
index a7efb0fb8..a73b2730a 100644
--- a/webapp/pages/logout.vue
+++ b/webapp/pages/logout.vue
@@ -1,32 +1,12 @@
 <template>
   <ds-container width="small">
     <ds-flex>
-      <ds-flex-item
-        :width="{ base: '100%' }"
-        centered
-      >
-        <ds-space
-          style="text-align: center;"
-          margin-top="large"
-          margin-bottom="xxx-small"
-          centered
-        >
-          <img
-            style="width: 200px;"
-            src="/img/sign-up/onourjourney.png"
-            alt="Human Connection"
-          >
+      <ds-flex-item :width="{ base: '100%' }" centered>
+        <ds-space style="text-align: center;" margin-top="large" margin-bottom="xxx-small" centered>
+          <img style="width: 200px;" src="/img/sign-up/onourjourney.png" alt="Human Connection" />
         </ds-space>
-        <ds-space
-          style="text-align: center;"
-          margin-top="small"
-          margin-bottom="xxx-small"
-          centered
-        >
-          <ds-heading
-            tag="h3"
-            soft
-          >
+        <ds-space style="text-align: center;" margin-top="small" margin-bottom="xxx-small" centered>
+          <ds-heading tag="h3" soft>
             Logging out...
           </ds-heading>
         </ds-space>
diff --git a/webapp/pages/moderation.vue b/webapp/pages/moderation.vue
index 5205020fa..34199a144 100644
--- a/webapp/pages/moderation.vue
+++ b/webapp/pages/moderation.vue
@@ -8,10 +8,7 @@
         <ds-menu :routes="routes" />
       </ds-flex-item>
       <ds-flex-item :width="{ base: '100%', md: 1 }">
-        <transition
-          name="slide-up"
-          appear
-        >
+        <transition name="slide-up" appear>
           <nuxt-child />
         </transition>
       </ds-flex-item>
diff --git a/webapp/pages/moderation/index.vue b/webapp/pages/moderation/index.vue
index 97c1a2af1..e6b8532fc 100644
--- a/webapp/pages/moderation/index.vue
+++ b/webapp/pages/moderation/index.vue
@@ -3,56 +3,48 @@
     <ds-heading tag="h3">
       {{ $t('moderation.reports.name') }}
     </ds-heading>
-    <ds-table
-      v-if="Report && Report.length"
-      :data="Report"
-      :fields="fields"
-      condensed
-    >
-      <template
-        slot="name"
-        slot-scope="scope"
-      >
+    <ds-table v-if="Report && Report.length" :data="Report" :fields="fields" condensed>
+      <template slot="name" slot-scope="scope">
         <div v-if="scope.row.type === 'Post'">
           <nuxt-link
-            :to="{ name: 'post-id-slug', params: { id: scope.row.post.id, slug: scope.row.post.slug } }"
+            :to="{
+              name: 'post-id-slug',
+              params: { id: scope.row.post.id, slug: scope.row.post.slug },
+            }"
           >
             <b>{{ scope.row.post.title | truncate(50) }}</b>
           </nuxt-link>
-          <br>
-          <ds-text
-            size="small"
-            color="soft"
-          >
+          <br />
+          <ds-text size="small" color="soft">
             {{ scope.row.post.author.name }}
           </ds-text>
         </div>
         <div v-else-if="scope.row.type === 'Comment'">
           <nuxt-link
-            :to="{ name: 'post-id-slug', params: { id: scope.row.comment.post.id, slug: scope.row.comment.post.slug } }"
+            :to="{
+              name: 'post-id-slug',
+              params: { id: scope.row.comment.post.id, slug: scope.row.comment.post.slug },
+            }"
           >
             <b>{{ scope.row.comment.contentExcerpt | truncate(50) }}</b>
           </nuxt-link>
-          <br>
-          <ds-text
-            size="small"
-            color="soft"
-          >
+          <br />
+          <ds-text size="small" color="soft">
             {{ scope.row.comment.author.name }}
           </ds-text>
         </div>
         <div v-else>
           <nuxt-link
-            :to="{ name: 'profile-id-slug', params: { id: scope.row.user.id, slug: scope.row.user.slug } }"
+            :to="{
+              name: 'profile-id-slug',
+              params: { id: scope.row.user.id, slug: scope.row.user.slug },
+            }"
           >
             <b>{{ scope.row.user.name | truncate(50) }}</b>
           </nuxt-link>
         </div>
       </template>
-      <template
-        slot="type"
-        slot-scope="scope"
-      >
+      <template slot="type" slot-scope="scope">
         <ds-text color="soft">
           <ds-icon
             v-if="scope.row.type === 'Post'"
@@ -71,45 +63,50 @@
           />
         </ds-text>
       </template>
-      <template
-        slot="submitter"
-        slot-scope="scope"
-      >
+      <template slot="submitter" slot-scope="scope">
         <nuxt-link
-          :to="{ name: 'profile-id-slug', params: { id: scope.row.submitter.id, slug: scope.row.submitter.slug } }"
+          :to="{
+            name: 'profile-id-slug',
+            params: { id: scope.row.submitter.id, slug: scope.row.submitter.slug },
+          }"
         >
           {{ scope.row.submitter.name }}
         </nuxt-link>
       </template>
-      <template
-        slot="disabledBy"
-        slot-scope="scope"
-      >
+      <template slot="disabledBy" slot-scope="scope">
         <nuxt-link
           v-if="scope.row.type === 'Post' && scope.row.post.disabledBy"
-          :to="{ name: 'profile-id-slug', params: { id: scope.row.post.disabledBy.id, slug: scope.row.post.disabledBy.slug } }"
+          :to="{
+            name: 'profile-id-slug',
+            params: { id: scope.row.post.disabledBy.id, slug: scope.row.post.disabledBy.slug },
+          }"
         >
           <b>{{ scope.row.post.disabledBy.name | truncate(50) }}</b>
         </nuxt-link>
         <nuxt-link
           v-else-if="scope.row.type === 'Comment' && scope.row.comment.disabledBy"
-          :to="{ name: 'profile-id-slug', params: { id: scope.row.comment.disabledBy.id, slug: scope.row.comment.disabledBy.slug } }"
+          :to="{
+            name: 'profile-id-slug',
+            params: {
+              id: scope.row.comment.disabledBy.id,
+              slug: scope.row.comment.disabledBy.slug,
+            },
+          }"
         >
           <b>{{ scope.row.comment.disabledBy.name | truncate(50) }}</b>
         </nuxt-link>
         <nuxt-link
           v-else-if="scope.row.type === 'User' && scope.row.user.disabledBy"
-          :to="{ name: 'profile-id-slug', params: { id: scope.row.user.disabledBy.id, slug: scope.row.user.disabledBy.slug } }"
+          :to="{
+            name: 'profile-id-slug',
+            params: { id: scope.row.user.disabledBy.id, slug: scope.row.user.disabledBy.slug },
+          }"
         >
           <b>{{ scope.row.user.disabledBy.name | truncate(50) }}</b>
         </nuxt-link>
       </template>
     </ds-table>
-    <hc-empty
-      v-else
-      icon="alert"
-      :message="$t('moderation.reports.empty')"
-    />
+    <hc-empty v-else icon="alert" :message="$t('moderation.reports.empty')" />
   </ds-card>
 </template>
 
diff --git a/webapp/pages/post/_id.vue b/webapp/pages/post/_id.vue
index ab6ec0687..a02afd3b9 100644
--- a/webapp/pages/post/_id.vue
+++ b/webapp/pages/post/_id.vue
@@ -2,18 +2,12 @@
   <div>
     <ds-flex gutter="small">
       <ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
-        <transition
-          name="slide-up"
-          appear
-        >
+        <transition name="slide-up" appear>
           <nuxt-child />
         </transition>
       </ds-flex-item>
       <ds-flex-item :width="{ base: '200px' }">
-        <ds-menu
-          :routes="routes"
-          class="post-side-navigation"
-        />
+        <ds-menu :routes="routes" class="post-side-navigation" />
       </ds-flex-item>
     </ds-flex>
   </div>
diff --git a/webapp/pages/post/_id/_slug/index.vue b/webapp/pages/post/_id/_slug/index.vue
index b0718f893..778350fd2 100644
--- a/webapp/pages/post/_id/_slug/index.vue
+++ b/webapp/pages/post/_id/_slug/index.vue
@@ -1,18 +1,12 @@
 <template>
-  <transition
-    name="fade"
-    appear
-  >
+  <transition name="fade" appear>
     <ds-card
       v-if="post && ready"
       :image="post.image"
-      :class="{'post-card': true, 'disabled-content': post.disabled}"
+      :class="{ 'post-card': true, 'disabled-content': post.disabled }"
     >
       <ds-space margin-bottom="small" />
-      <hc-user
-        :user="post.author"
-        :date-time="post.createdAt"
-      />
+      <hc-user :user="post.author" :date-time="post.createdAt" />
       <no-ssr>
         <content-menu
           placement="bottom-end"
@@ -22,20 +16,14 @@
         />
       </no-ssr>
       <ds-space margin-bottom="small" />
-      <ds-heading
-        tag="h3"
-        no-margin
-      >
+      <ds-heading tag="h3" no-margin>
         {{ post.title }}
       </ds-heading>
       <ds-space margin-bottom="small" />
       <!-- Content -->
       <!-- eslint-disable vue/no-v-html -->
       <!-- TODO: replace editor content with tiptap render view -->
-      <div
-        class="content hc-editor-content"
-        v-html="post.content"
-      />
+      <div class="content hc-editor-content" v-html="post.content" />
       <!-- eslint-enable vue/no-v-html -->
       <ds-space margin="xx-large" />
       <!-- Categories -->
@@ -44,23 +32,16 @@
         <hc-category
           v-for="category in post.categories"
           :key="category.id"
-          v-tooltip="{content: category.name, placement: 'top-start', delay: { show: 300 }}"
+          v-tooltip="{ content: category.name, placement: 'top-start', delay: { show: 300 } }"
           :icon="category.icon"
           :name="category.name"
         />
       </div>
       <ds-space margin-bottom="small" />
       <!-- Tags -->
-      <div
-        v-if="post.tags && post.tags.length"
-        class="tags"
-      >
+      <div v-if="post.tags && post.tags.length" class="tags">
         <ds-space margin="xx-small" />
-        <hc-tag
-          v-for="tag in post.tags"
-          :key="tag.id"
-          :name="tag.name"
-        />
+        <hc-tag v-for="tag in post.tags" :key="tag.id" :name="tag.name" />
       </div>
       <!-- Shout Button -->
       <hc-shout-button
diff --git a/webapp/pages/post/_id/_slug/more-info.vue b/webapp/pages/post/_id/_slug/more-info.vue
index e18ab8f57..a1f2f1667 100644
--- a/webapp/pages/post/_id/_slug/more-info.vue
+++ b/webapp/pages/post/_id/_slug/more-info.vue
@@ -5,36 +5,38 @@
     </h2>
     <p>Hier findest du weitere infos zum Thema.</p>
     <ds-space />
-    <h3><ds-icon name="compass" /> Themenkategorien</h3>
+    <h3>
+      <ds-icon name="compass" />
+      Themenkategorien
+    </h3>
     <div class="tags">
       <ds-icon
         v-for="category in post.categories"
         :key="category.id"
-        v-tooltip="{content: category.name, placement: 'top-start', delay: { show: 300 }}"
+        v-tooltip="{ content: category.name, placement: 'top-start', delay: { show: 300 } }"
         :name="category.icon"
         size="large"
-      />&nbsp;
+      />
+      &nbsp;
       <!--<ds-tag
         v-for="category in post.categories"
         :key="category.id"><ds-icon :name="category.icon" /> {{ category.name }}</ds-tag>-->
     </div>
     <template v-if="post.tags && post.tags.length">
-      <h3><ds-icon name="tags" /> Schlagwörter</h3>
+      <h3>
+        <ds-icon name="tags" />
+        Schlagwörter
+      </h3>
       <div class="tags">
-        <ds-tag
-          v-for="tag in post.tags"
-          :key="tag.id"
-        >
-          <ds-icon name="tag" /> {{ tag.name }}
+        <ds-tag v-for="tag in post.tags" :key="tag.id">
+          <ds-icon name="tag" />
+          {{ tag.name }}
         </ds-tag>
       </div>
     </template>
     <h3>Verwandte Beiträge</h3>
     <ds-section style="margin: 0 -1.5rem; padding: 1.5rem;">
-      <ds-flex
-        v-if="post.relatedContributions && post.relatedContributions.length"
-        gutter="small"
-      >
+      <ds-flex v-if="post.relatedContributions && post.relatedContributions.length" gutter="small">
         <ds-flex-item
           v-for="relatedPost in post.relatedContributions"
           :key="relatedPost.id"
@@ -43,12 +45,7 @@
           <hc-post-card :post="relatedPost" />
         </ds-flex-item>
       </ds-flex>
-      <hc-empty
-        v-else
-        margin="large"
-        icon="file"
-        message="No related Posts"
-      />
+      <hc-empty v-else margin="large" icon="file" message="No related Posts" />
     </ds-section>
     <ds-space margin-bottom="large" />
   </ds-card>
diff --git a/webapp/pages/post/_id/_slug/take-action.vue b/webapp/pages/post/_id/_slug/take-action.vue
index 1dfb75208..38a561fe5 100644
--- a/webapp/pages/post/_id/_slug/take-action.vue
+++ b/webapp/pages/post/_id/_slug/take-action.vue
@@ -1,9 +1,6 @@
 <template>
   <ds-card header="Werde aktiv!">
-    <hc-empty
-      icon="tasks"
-      message="Coming Soon…"
-    />
+    <hc-empty icon="tasks" message="Coming Soon…" />
   </ds-card>
 </template>
 
diff --git a/webapp/pages/post/create.vue b/webapp/pages/post/create.vue
index a110965db..108cead09 100644
--- a/webapp/pages/post/create.vue
+++ b/webapp/pages/post/create.vue
@@ -1,8 +1,5 @@
 <template>
-  <ds-flex
-    :width="{ base: '100%' }"
-    gutter="base"
-  >
+  <ds-flex :width="{ base: '100%' }" gutter="base">
     <ds-flex-item :width="{ base: '100%', md: 3 }">
       <hc-contribution-form />
     </ds-flex-item>
diff --git a/webapp/pages/post/edit/_id.vue b/webapp/pages/post/edit/_id.vue
index 2420a85b9..7dcff5036 100644
--- a/webapp/pages/post/edit/_id.vue
+++ b/webapp/pages/post/edit/_id.vue
@@ -1,8 +1,5 @@
 <template>
-  <ds-flex
-    :width="{ base: '100%' }"
-    gutter="base"
-  >
+  <ds-flex :width="{ base: '100%' }" gutter="base">
     <ds-flex-item :width="{ base: '100%', md: 3 }">
       <hc-contribution-form :contribution="contribution" />
     </ds-flex-item>
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index b38458a16..de4a6ad2a 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -4,20 +4,13 @@
       <p>PROFILE IMAGE</p>
     </ds-card>
     <ds-space />
-    <ds-flex
-      v-if="user"
-      :width="{ base: '100%' }"
-      gutter="base"
-    >
+    <ds-flex v-if="user" :width="{ base: '100%' }" gutter="base">
       <ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
         <ds-card
-          :class="{'disabled-content': user.disabled}"
+          :class="{ 'disabled-content': user.disabled }"
           style="position: relative; height: auto;"
         >
-          <hc-upload
-            v-if="myProfile"
-            :user="user"
-          />
+          <hc-upload v-if="myProfile" :user="user" />
           <ds-avatar
             v-else
             :image="user.avatar"
@@ -35,54 +28,32 @@
             />
           </no-ssr>
           <ds-space margin="small">
-            <ds-heading
-              tag="h3"
-              align="center"
-              no-margin
-            >
+            <ds-heading tag="h3" align="center" no-margin>
               {{ userName }}
             </ds-heading>
-            <ds-text
-              v-if="user.location"
-              align="center"
-              color="soft"
-              size="small"
-            >
+            <ds-text v-if="user.location" align="center" color="soft" size="small">
               <ds-icon name="map-marker" />
               {{ user.location.name }}
             </ds-text>
-            <ds-text
-              align="center"
-              color="soft"
-              size="small"
-            >
+            <ds-text align="center" color="soft" size="small">
               {{ $t('profile.memberSince') }} {{ user.createdAt | date('MMMM yyyy') }}
             </ds-text>
           </ds-space>
-          <ds-space
-            v-if="user.badges && user.badges.length"
-            margin="x-small"
-          >
+          <ds-space v-if="user.badges && user.badges.length" margin="x-small">
             <hc-badges :badges="user.badges" />
           </ds-space>
           <ds-flex>
             <ds-flex-item>
               <no-ssr>
                 <ds-number :label="$t('profile.followers')">
-                  <hc-count-to
-                    slot="count"
-                    :end-val="followedByCount"
-                  />
+                  <hc-count-to slot="count" :end-val="followedByCount" />
                 </ds-number>
               </no-ssr>
             </ds-flex-item>
             <ds-flex-item>
               <no-ssr>
                 <ds-number :label="$t('profile.following')">
-                  <hc-count-to
-                    slot="count"
-                    :end-val="Number(user.followingCount) || 0"
-                  />
+                  <hc-count-to slot="count" :end-val="Number(user.followingCount) || 0" />
                 </ds-number>
               </no-ssr>
             </ds-flex-item>
@@ -92,140 +63,74 @@
               v-if="!myProfile"
               :follow-id="user.id"
               :is-followed="user.followedByCurrentUser"
-              @optimistic="follow => user.followedByCurrentUser = follow"
+              @optimistic="follow => (user.followedByCurrentUser = follow)"
               @update="follow => fetchUser()"
             />
           </ds-space>
           <template v-if="user.about">
-            <hr>
-            <ds-space
-              margin-top="small"
-              margin-bottom="small"
-            >
-              <ds-text
-                color="soft"
-                size="small"
-              >
+            <hr />
+            <ds-space margin-top="small" margin-bottom="small">
+              <ds-text color="soft" size="small">
                 {{ user.about }}
               </ds-text>
             </ds-space>
           </template>
         </ds-card>
         <ds-space />
-        <ds-heading
-          tag="h3"
-          soft
-          style="text-align: center; margin-bottom: 10px;"
-        >
+        <ds-heading tag="h3" soft style="text-align: center; margin-bottom: 10px;">
           Netzwerk
         </ds-heading>
         <ds-card style="position: relative; height: auto;">
-          <ds-space
-            v-if="user.following && user.following.length"
-            margin="x-small"
-          >
-            <ds-text
-              tag="h5"
-              color="soft"
-            >
-              Wem folgt {{ userName | truncate(15) }}?
-            </ds-text>
+          <ds-space v-if="user.following && user.following.length" margin="x-small">
+            <ds-text tag="h5" color="soft">Wem folgt {{ userName | truncate(15) }}?</ds-text>
           </ds-space>
           <template v-if="user.following && user.following.length">
-            <ds-space
-              v-for="follow in uniq(user.following)"
-              :key="follow.id"
-              margin="x-small"
-            >
+            <ds-space v-for="follow in uniq(user.following)" :key="follow.id" margin="x-small">
               <!-- TODO: find better solution for rendering errors -->
               <no-ssr>
-                <user
-                  :user="follow"
-                  :trunc="15"
-                />
+                <user :user="follow" :trunc="15" />
               </no-ssr>
             </ds-space>
-            <ds-space
-              v-if="user.followingCount - user.following.length"
-              margin="small"
-            >
-              <ds-text
-                size="small"
-                color="softer"
-              >
+            <ds-space v-if="user.followingCount - user.following.length" margin="small">
+              <ds-text size="small" color="softer">
                 und {{ user.followingCount - user.following.length }} weitere
               </ds-text>
             </ds-space>
           </template>
           <template v-else>
-            <p style="text-align: center; opacity: .5;">
-              {{ userName }} folgt niemandem
-            </p>
+            <p style="text-align: center; opacity: .5;">{{ userName }} folgt niemandem</p>
           </template>
         </ds-card>
         <ds-space />
         <ds-card style="position: relative; height: auto;">
-          <ds-space
-            v-if="user.followedBy && user.followedBy.length"
-            margin="x-small"
-          >
-            <ds-text
-              tag="h5"
-              color="soft"
-            >
-              Wer folgt {{ userName | truncate(15) }}?
-            </ds-text>
+          <ds-space v-if="user.followedBy && user.followedBy.length" margin="x-small">
+            <ds-text tag="h5" color="soft">Wer folgt {{ userName | truncate(15) }}?</ds-text>
           </ds-space>
           <template v-if="user.followedBy && user.followedBy.length">
-            <ds-space
-              v-for="follow in uniq(user.followedBy)"
-              :key="follow.id"
-              margin="x-small"
-            >
+            <ds-space v-for="follow in uniq(user.followedBy)" :key="follow.id" margin="x-small">
               <!-- TODO: find better solution for rendering errors -->
               <no-ssr>
-                <user
-                  :user="follow"
-                  :trunc="15"
-                />
+                <user :user="follow" :trunc="15" />
               </no-ssr>
             </ds-space>
-            <ds-space
-              v-if="user.followedByCount - user.followedBy.length"
-              margin="small"
-            >
-              <ds-text
-                size="small"
-                color="softer"
-              >
+            <ds-space v-if="user.followedByCount - user.followedBy.length" margin="small">
+              <ds-text size="small" color="softer">
                 und {{ user.followedByCount - user.followedBy.length }} weitere
               </ds-text>
             </ds-space>
           </template>
           <template v-else>
-            <p style="text-align: center; opacity: .5;">
-              niemand folgt {{ userName }}
-            </p>
+            <p style="text-align: center; opacity: .5;">niemand folgt {{ userName }}</p>
           </template>
         </ds-card>
-        <ds-space
-          v-if="user.socialMedia && user.socialMedia.length"
-          margin="large"
-        >
+        <ds-space v-if="user.socialMedia && user.socialMedia.length" margin="large">
           <ds-card style="position: relative; height: auto;">
             <ds-space margin="x-small">
-              <ds-text
-                tag="h5"
-                color="soft"
-              >
+              <ds-text tag="h5" color="soft">
                 {{ $t('profile.socialMedia') }} {{ user.name | truncate(15) }}?
               </ds-text>
               <template>
-                <ds-space
-                  v-for="link in socialMediaLinks"
-                  :key="link.username"
-                  margin="x-small"
-                >
+                <ds-space v-for="link in socialMediaLinks" :key="link.username" margin="x-small">
                   <a :href="link.url">
                     <ds-avatar :image="link.favicon" />
                     {{ 'link.username' }}
@@ -237,10 +142,7 @@
         </ds-space>
       </ds-flex-item>
       <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
-        <ds-flex
-          :width="{ base: '100%' }"
-          gutter="small"
-        >
+        <ds-flex :width="{ base: '100%' }" gutter="small">
           <ds-flex-item class="profile-top-navigation">
             <ds-card class="ds-tab-nav">
               <ds-flex>
@@ -249,10 +151,7 @@
                     <!-- TODO: find better solution for rendering errors -->
                     <no-ssr>
                       <ds-number :label="$t('common.post', null, user.contributionsCount)">
-                        <hc-count-to
-                          slot="count"
-                          :end-val="user.contributionsCount"
-                        />
+                        <hc-count-to slot="count" :end-val="user.contributionsCount" />
                       </ds-number>
                     </no-ssr>
                   </ds-space>
@@ -285,7 +184,7 @@
           <ds-flex-item style="text-align: center">
             <ds-button
               v-if="myProfile"
-              v-tooltip="{content: 'Create a new Post', placement: 'left', delay: { show: 500 }}"
+              v-tooltip="{ content: 'Create a new Post', placement: 'left', delay: { show: 500 } }"
               :path="{ name: 'post-create' }"
               class="profile-post-add-button"
               icon="plus"
@@ -304,18 +203,11 @@
           </template>
           <template v-else>
             <ds-flex-item :width="{ base: '100%' }">
-              <hc-empty
-                margin="xx-large"
-                icon="file"
-              />
+              <hc-empty margin="xx-large" icon="file" />
             </ds-flex-item>
           </template>
         </ds-flex>
-        <hc-load-more
-          v-if="hasMore"
-          :loading="$apollo.loading"
-          @click="showMoreContributions"
-        />
+        <hc-load-more v-if="hasMore" :loading="$apollo.loading" @click="showMoreContributions" />
       </ds-flex-item>
     </ds-flex>
   </div>
diff --git a/webapp/pages/settings.vue b/webapp/pages/settings.vue
index 48eab45ff..f6745cdf3 100644
--- a/webapp/pages/settings.vue
+++ b/webapp/pages/settings.vue
@@ -5,16 +5,10 @@
     </ds-heading>
     <ds-flex gutter="small">
       <ds-flex-item :width="{ base: '100%', md: '200px' }">
-        <ds-menu
-          :routes="routes"
-          :is-exact="() => true"
-        />
+        <ds-menu :routes="routes" :is-exact="() => true" />
       </ds-flex-item>
       <ds-flex-item :width="{ base: '100%', md: 1 }">
-        <transition
-          name="slide-up"
-          appear
-        >
+        <transition name="slide-up" appear>
           <nuxt-child />
         </transition>
       </ds-flex-item>
diff --git a/webapp/pages/settings/data-download.vue b/webapp/pages/settings/data-download.vue
index 5c9e5a24a..e54821912 100644
--- a/webapp/pages/settings/data-download.vue
+++ b/webapp/pages/settings/data-download.vue
@@ -1,9 +1,6 @@
 <template>
   <ds-card :header="$t('settings.download.name')">
-    <hc-empty
-      icon="tasks"
-      message="Coming Soon…"
-    />
+    <hc-empty icon="tasks" message="Coming Soon…" />
   </ds-card>
 </template>
 
diff --git a/webapp/pages/settings/delete-account.vue b/webapp/pages/settings/delete-account.vue
index 5f488fed1..d10fb706d 100644
--- a/webapp/pages/settings/delete-account.vue
+++ b/webapp/pages/settings/delete-account.vue
@@ -1,9 +1,6 @@
 <template>
   <ds-card :header="$t('settings.delete.name')">
-    <hc-empty
-      icon="tasks"
-      message="Coming Soon…"
-    />
+    <hc-empty icon="tasks" message="Coming Soon…" />
   </ds-card>
 </template>
 
diff --git a/webapp/pages/settings/index.vue b/webapp/pages/settings/index.vue
index 18e251bbc..4ad57b49c 100644
--- a/webapp/pages/settings/index.vue
+++ b/webapp/pages/settings/index.vue
@@ -1,8 +1,5 @@
 <template>
-  <ds-form
-    v-model="form"
-    @submit="submit"
-  >
+  <ds-form v-model="form" @submit="submit">
     <ds-card :header="$t('settings.data.name')">
       <ds-input
         id="name"
@@ -32,13 +29,7 @@
         :placeholder="$t('settings.data.labelBio')"
       />
       <template slot="footer">
-        <ds-button
-          style="float: right;"
-          icon="check"
-          type="submit"
-          :loading="loadingData"
-          primary
-        >
+        <ds-button style="float: right;" icon="check" type="submit" :loading="loadingData" primary>
           {{ $t('actions.save') }}
         </ds-button>
       </template>
diff --git a/webapp/pages/settings/invites.vue b/webapp/pages/settings/invites.vue
index 947d0b333..80996bc9e 100644
--- a/webapp/pages/settings/invites.vue
+++ b/webapp/pages/settings/invites.vue
@@ -1,9 +1,6 @@
 <template>
   <ds-card :header="$t('settings.invites.name')">
-    <hc-empty
-      icon="tasks"
-      message="Coming Soon…"
-    />
+    <hc-empty icon="tasks" message="Coming Soon…" />
   </ds-card>
 </template>
 
diff --git a/webapp/pages/settings/languages.vue b/webapp/pages/settings/languages.vue
index 7879d6425..a148dab92 100644
--- a/webapp/pages/settings/languages.vue
+++ b/webapp/pages/settings/languages.vue
@@ -1,9 +1,6 @@
 <template>
   <ds-card :header="$t('settings.languages.name')">
-    <hc-empty
-      icon="tasks"
-      message="Coming Soon…"
-    />
+    <hc-empty icon="tasks" message="Coming Soon…" />
   </ds-card>
 </template>
 
diff --git a/webapp/pages/settings/my-organizations.vue b/webapp/pages/settings/my-organizations.vue
index f651cbc61..e2a5f3373 100644
--- a/webapp/pages/settings/my-organizations.vue
+++ b/webapp/pages/settings/my-organizations.vue
@@ -1,9 +1,6 @@
 <template>
   <ds-card :header="$t('settings.organizations.name')">
-    <hc-empty
-      icon="tasks"
-      message="Coming Soon…"
-    />
+    <hc-empty icon="tasks" message="Coming Soon…" />
   </ds-card>
 </template>
 
diff --git a/webapp/pages/settings/my-social-media.vue b/webapp/pages/settings/my-social-media.vue
index 745e2f776..b53df6170 100644
--- a/webapp/pages/settings/my-social-media.vue
+++ b/webapp/pages/settings/my-social-media.vue
@@ -1,19 +1,9 @@
 <template>
   <ds-card :header="$t('settings.social-media.name')">
-    <ds-space
-      v-if="socialMediaLinks"
-      margin-top="base"
-      margin="x-small"
-    >
+    <ds-space v-if="socialMediaLinks" margin-top="base" margin="x-small">
       <ds-list>
-        <ds-list-item
-          v-for="link in socialMediaLinks"
-          :key="link.id"
-        >
-          <a
-            :href="link.url"
-            target="_blank"
-          >
+        <ds-list-item v-for="link in socialMediaLinks" :key="link.id">
+          <a :href="link.url" target="_blank">
             <hc-image
               :image-props="{ src: link.favicon }"
               alt="Social Media link"
@@ -23,15 +13,10 @@
             {{ link.url }}
           </a>
           &nbsp;&nbsp;
-          <span class="layout-leave-active">|</span> &nbsp;&nbsp;
-          <ds-icon
-            name="edit"
-            class="layout-leave-active"
-          />
-          <a
-            name="delete"
-            @click="handleDeleteSocialMedia(link)"
-          >
+          <span class="layout-leave-active">|</span>
+          &nbsp;&nbsp;
+          <ds-icon name="edit" class="layout-leave-active" />
+          <a name="delete" @click="handleDeleteSocialMedia(link)">
             <ds-icon name="trash" />
           </a>
         </ds-list-item>
@@ -43,15 +28,12 @@
           v-model="value"
           :placeholder="$t('settings.social-media.placeholder')"
           name="social-media"
-          :schema="{type: 'url'}"
+          :schema="{ type: 'url' }"
         />
       </div>
       <ds-space margin-top="base">
         <div>
-          <ds-button
-            primary
-            @click="handleAddSocialMedia"
-          >
+          <ds-button primary @click="handleAddSocialMedia">
             {{ $t('settings.social-media.submit') }}
           </ds-button>
         </div>

From 0111e60f1d07075c31769091423b7d796423ab86 Mon Sep 17 00:00:00 2001
From: aonomike <aonomike@gmail.com>
Date: Wed, 29 May 2019 16:09:34 +0300
Subject: [PATCH 06/11] Resolve Upload image rerender and double submit

- Make Upload component re-render on failed upload
- Resolve double submit of uploaded to the backend when uploading with drag and drop

Co-authored-by: @mattWr18
Co-authored-by: @tirrok
---
 webapp/components/Upload/index.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/webapp/components/Upload/index.vue b/webapp/components/Upload/index.vue
index 5fbcff524..e5f91347d 100644
--- a/webapp/components/Upload/index.vue
+++ b/webapp/components/Upload/index.vue
@@ -8,7 +8,6 @@
       :include-styling="false"
       :style="backgroundImage"
       @vdropzone-thumbnail="thumbnail"
-      @vdropzone-drop="vddrop"
       @vdropzone-error="verror"
     />
   </div>
@@ -28,7 +27,7 @@ export default {
     return {
       dropzoneOptions: {
         url: this.vddrop,
-        maxFilesize: 3.0,
+        maxFilesize: 5.0,
         previewTemplate: this.template(),
         dictDefaultMessage: '',
       },
@@ -98,8 +97,8 @@ export default {
         .catch(error => this.$toast.error(error.message))
     },
     verror(file, message) {
-      this.error = true
       if (file.status === 'error') {
+        this.error = true
         this.$toast.error(file.status, message)
       }
     },

From e162cd480e86c0e7c531b3c08aa3441dedbbb0eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 31 May 2019 13:27:24 +0200
Subject: [PATCH 07/11] Run `yarn run lint --fix` on prettier v1.17.1

---
 webapp/yarn.lock | 64 +++++++++++++++++++++++++++++++++---------------
 1 file changed, 44 insertions(+), 20 deletions(-)

diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index 3c6ad8347..02f1f0058 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -1142,14 +1142,14 @@
     webpack-node-externals "^1.7.2"
 
 "@nuxtjs/axios@~5.5.2":
-  version "5.5.2"
-  resolved "https://registry.yarnpkg.com/@nuxtjs/axios/-/axios-5.5.2.tgz#b6447bb12707b56b16b942ae6c737a0b051cecba"
-  integrity sha512-S5+IkUjCSSFeMVZp/JAzjoit9P7Di2QM4beAlFbHXbOEG+/vSaZReW8l817u9WC6nuKa3x6HhZfWD3tJDTvljg==
+  version "5.5.3"
+  resolved "https://registry.yarnpkg.com/@nuxtjs/axios/-/axios-5.5.3.tgz#1893609fc4a3e845516a45c1aaf428104cb3d524"
+  integrity sha512-WEgWcmgJqWLHWw8ZTieQvuV+I6vcaVgdnCmtzrsKliPsCTtbhDu1i7iFkM/dYAqppIxpL2v46lH6sQ4FfOOxTA==
   dependencies:
     "@nuxtjs/proxy" "^1.3.3"
-    axios "^0.18.0"
+    axios "^0.19.0"
     axios-retry "^3.1.2"
-    consola "^2.6.2"
+    consola "^2.7.1"
 
 "@nuxtjs/dotenv@~1.3.0":
   version "1.3.0"
@@ -2280,13 +2280,13 @@ axios-retry@^3.1.2:
   dependencies:
     is-retry-allowed "^1.1.0"
 
-axios@^0.18.0:
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102"
-  integrity sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=
+axios@^0.19.0:
+  version "0.19.0"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.0.tgz#8e09bff3d9122e133f7b8101c8fbdd00ed3d2ab8"
+  integrity sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==
   dependencies:
-    follow-redirects "^1.3.0"
-    is-buffer "^1.1.5"
+    follow-redirects "1.5.10"
+    is-buffer "^2.0.2"
 
 babel-code-frame@^6.26.0:
   version "6.26.0"
@@ -3224,10 +3224,10 @@ connect@^3.6.6:
     parseurl "~1.3.2"
     utils-merge "1.0.1"
 
-consola@^2.0.0-1, consola@^2.3.0, consola@^2.4.0, consola@^2.5.6, consola@^2.6.0, consola@^2.6.1, consola@^2.6.2:
-  version "2.6.2"
-  resolved "https://registry.yarnpkg.com/consola/-/consola-2.6.2.tgz#4c1238814bb80688b19f0db97123508889577752"
-  integrity sha512-GNJhwvF4bJ8eiAlyB8r4WNM8kBqkl+y4DvMehMbyywoJiv37N0M6/xrKqrrZw/5maZA+UagQV8UZ+XBeuGMzUg==
+consola@^2.0.0-1, consola@^2.3.0, consola@^2.4.0, consola@^2.5.6, consola@^2.6.0, consola@^2.6.1, consola@^2.7.1:
+  version "2.7.1"
+  resolved "https://registry.yarnpkg.com/consola/-/consola-2.7.1.tgz#3f7f7c53eb44362240c3aee41b9bb2641d5ca32e"
+  integrity sha512-u7JYs+HnMbZPD2cEuS1XHsLeqtazA0kd5lAk8r8DnnGdgNhOdb7DSubJ+QLdQkbtpmmxgp7gs8Ug44sCyY4FCQ==
 
 console-browserify@^1.1.0:
   version "1.1.0"
@@ -3753,6 +3753,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
+debug@=3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261"
+  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
+  dependencies:
+    ms "2.0.0"
+
 debug@^3.1.0, debug@^3.2.6:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
@@ -4833,7 +4840,14 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
-follow-redirects@^1.0.0, follow-redirects@^1.3.0:
+follow-redirects@1.5.10:
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
+  integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
+  dependencies:
+    debug "=3.1.0"
+
+follow-redirects@^1.0.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.7.0.tgz#489ebc198dc0e7f64167bd23b03c4c19b5784c76"
   integrity sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==
@@ -4980,9 +4994,9 @@ functional-red-black-tree@^1.0.1:
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
 fuse.js@^3.4.4:
-  version "3.4.4"
-  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.4.4.tgz#f98f55fcb3b595cf6a3e629c5ffaf10982103e95"
-  integrity sha512-pyLQo/1oR5Ywf+a/tY8z4JygnIglmRxVUOiyFAbd11o9keUDpUJSMGRWJngcnkURj30kDHPmhoKY8ChJiz3EpQ==
+  version "3.4.5"
+  resolved "https://registry.yarnpkg.com/fuse.js/-/fuse.js-3.4.5.tgz#8954fb43f9729bd5dbcb8c08f251db552595a7a6"
+  integrity sha512-s9PGTaQIkT69HaeoTVjwGsLfb8V8ScJLx5XGFcKHg0MqLUH/UZ4EKOtqtXX9k7AFqCGxD1aJmYb8Q5VYDibVRQ==
 
 gauge@~2.7.3:
   version "2.7.4"
@@ -5723,6 +5737,11 @@ is-buffer@^1.1.5:
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
   integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
 
+is-buffer@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.3.tgz#4ecf3fcf749cbd1e472689e109ac66261a25e725"
+  integrity sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==
+
 is-callable@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
@@ -8797,7 +8816,12 @@ prettier@1.16.3:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.16.3.tgz#8c62168453badef702f34b45b6ee899574a6a65d"
   integrity sha512-kn/GU6SMRYPxUakNXhpP0EedT/KmaPzr0H5lIsDogrykbaxOpOfAFfk5XA7DZrJyMAv1wlMV3CPcZruGXVVUZw==
 
-prettier@^1.15.2, prettier@~1.17.1:
+prettier@^1.15.2:
+  version "1.17.0"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.17.0.tgz#53b303676eed22cc14a9f0cec09b477b3026c008"
+  integrity sha512-sXe5lSt2WQlCbydGETgfm1YBShgOX4HxQkFPvbxkcwgDvGDeqVau8h+12+lmSVlP3rHPz0oavfddSZg/q+Szjw==
+
+prettier@~1.17.1:
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.17.1.tgz#ed64b4e93e370cb8a25b9ef7fef3e4fd1c0995db"
   integrity sha512-TzGRNvuUSmPgwivDqkZ9tM/qTGW9hqDKWOE9YHiyQdixlKbv7kvEqsmDPrcHJTKwthU774TQwZXVtaQ/mMsvjg==

From cd9d58980135310ee217b15bec76f3d29c0adec5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 31 May 2019 14:57:59 +0200
Subject: [PATCH 08/11] Update lockfile

---
 webapp/yarn.lock | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index f81246c4c..2c63537e2 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -8821,10 +8821,10 @@ prettier@^1.15.2:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.17.0.tgz#53b303676eed22cc14a9f0cec09b477b3026c008"
   integrity sha512-sXe5lSt2WQlCbydGETgfm1YBShgOX4HxQkFPvbxkcwgDvGDeqVau8h+12+lmSVlP3rHPz0oavfddSZg/q+Szjw==
 
-prettier@~1.14.3:
-  version "1.14.3"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.14.3.tgz#90238dd4c0684b7edce5f83b0fb7328e48bd0895"
-  integrity sha512-qZDVnCrnpsRJJq5nSsiHCE3BYMED2OtsI+cmzIzF1QIfqm5ALf8tEJcO27zV1gKNKRPdhjO0dNWnrzssDQ1tFg==
+prettier@~1.17.1:
+  version "1.17.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.17.1.tgz#ed64b4e93e370cb8a25b9ef7fef3e4fd1c0995db"
+  integrity sha512-TzGRNvuUSmPgwivDqkZ9tM/qTGW9hqDKWOE9YHiyQdixlKbv7kvEqsmDPrcHJTKwthU774TQwZXVtaQ/mMsvjg==
 
 pretty-bytes@^5.2.0:
   version "5.2.0"

From 038e2167487a90166f7c7cb397dc284d79232e1a Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
 <dependabot-preview[bot]@users.noreply.github.com>
Date: Fri, 31 May 2019 15:06:18 +0000
Subject: [PATCH 09/11] Bump node from 10-alpine to 12.3.1-alpine in /webapp

Bumps node from 10-alpine to 12.3.1-alpine.
---
 webapp/Dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/Dockerfile b/webapp/Dockerfile
index 7274693a4..3c44167af 100644
--- a/webapp/Dockerfile
+++ b/webapp/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:10-alpine as base
+FROM node:12.3.1-alpine as base
 LABEL Description="Web Frontend of the Social Network Human-Connection.org" Vendor="Human-Connection gGmbH" Version="0.0.1" Maintainer="Human-Connection gGmbH (developer@human-connection.org)"
 
 EXPOSE 3000

From 1773d136e9f5e04da0201b3c47f02bcfbd43d158 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Robert=20Sch=C3=A4fer?= <git@roschaefer.de>
Date: Fri, 31 May 2019 19:32:36 +0200
Subject: [PATCH 10/11] Yarn `--ignore-engines`, v12.x.x will become LTS

---
 webapp/Dockerfile | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/Dockerfile b/webapp/Dockerfile
index 3c44167af..fc3b17779 100644
--- a/webapp/Dockerfile
+++ b/webapp/Dockerfile
@@ -18,7 +18,7 @@ COPY . .
 
 FROM base as build-and-test
 RUN cp .env.template .env
-RUN yarn install --production=false --frozen-lockfile --non-interactive
+RUN yarn install --ignore-engines --production=false --frozen-lockfile --non-interactive
 RUN yarn run build
 
 FROM base as production

From 78100bec3734cd583b2fc60a6afb1c2abf104b1e Mon Sep 17 00:00:00 2001
From: aonomike <aonomike@gmail.com>
Date: Sat, 1 Jun 2019 20:23:04 +0300
Subject: [PATCH 11/11] Add tests to upload error bug fix

Co-authored-by: mattwr18 <mattwr18@gmail.com>
---
 webapp/components/Upload/spec.js | 32 +++++++++++++++++++++++++++++---
 1 file changed, 29 insertions(+), 3 deletions(-)

diff --git a/webapp/components/Upload/spec.js b/webapp/components/Upload/spec.js
index 85215ea59..b81babb6e 100644
--- a/webapp/components/Upload/spec.js
+++ b/webapp/components/Upload/spec.js
@@ -26,6 +26,7 @@ describe('Upload', () => {
       success: jest.fn(),
       error: jest.fn(),
     },
+    $t: jest.fn(),
   }
 
   const propsData = {
@@ -34,7 +35,7 @@ describe('Upload', () => {
     },
   }
 
-  const file = {
+  const fileSuccess = {
     filename: 'avatar.jpg',
     previewElement: {
       classList: {
@@ -59,13 +60,38 @@ describe('Upload', () => {
     wrapper = shallowMount(Upload, { localVue, propsData, mocks })
   })
 
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
   it('sends a the UpdateUser mutation when vddrop is called', () => {
     wrapper.vm.vddrop([{ filename: 'avatar.jpg' }])
     expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
   })
 
   it('thumbnail', () => {
-    wrapper.vm.thumbnail(file, dataUrl)
-    expect(file.previewElement.classList.add).toHaveBeenCalledTimes(1)
+    wrapper.vm.thumbnail(fileSuccess, dataUrl)
+    expect(fileSuccess.previewElement.classList.add).toHaveBeenCalledTimes(1)
+  })
+
+  describe('error handling', () => {
+    const message = 'File upload failed'
+    const fileError = { status: 'error' }
+
+    it('defaults to error false', () => {
+      expect(wrapper.vm.error).toEqual(false)
+    })
+
+    it('shows an error toaster when verror is called', () => {
+      wrapper.vm.verror(fileError, message)
+      expect(mocks.$toast.error).toHaveBeenCalledWith(fileError.status, message)
+    })
+
+    it('changes error status from false to true to false', () => {
+      wrapper.vm.verror(fileError, message)
+      expect(wrapper.vm.error).toEqual(true)
+      jest.runAllTimers()
+      expect(wrapper.vm.error).toEqual(false)
+    })
   })
 })