From 8dff7496c0a3edb32d50755b0d625d4ec880260d Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Tue, 15 Oct 2019 14:17:36 +0200
Subject: [PATCH 01/10] refactor: create LoginForm component

I moved most code in pages/login.vue to a separate LoginForm component.
The intention is to have a separate vue storybook for the LoginForm
component.
---
 webapp/components/LoginForm/LoginForm.vue | 129 ++++++++++++++++++++++
 webapp/pages/login.vue                    | 121 +-------------------
 2 files changed, 134 insertions(+), 116 deletions(-)
 create mode 100644 webapp/components/LoginForm/LoginForm.vue

diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue
new file mode 100644
index 000000000..d72b5befe
--- /dev/null
+++ b/webapp/components/LoginForm/LoginForm.vue
@@ -0,0 +1,129 @@
+<template>
+  <ds-container v-if="ready" width="medium">
+    <ds-space margin="small">
+      <blockquote>
+        <p>{{ $t('quotes.african.quote') }}</p>
+        <b>- {{ $t('quotes.african.author') }}</b>
+      </blockquote>
+    </ds-space>
+    <ds-card class="login-card">
+      <ds-flex gutter="small">
+        <ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
+          <client-only>
+            <locale-switch class="login-locale-switch" offset="5" />
+          </client-only>
+          <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-space margin="small">
+            <a :href="$t('login.moreInfoURL')" :title="$t('login.moreInfoHint')" target="_blank">
+              {{ $t('login.moreInfo') }}
+            </a>
+          </ds-space>
+          <ds-space margin="small">
+            <ds-text size="small">{{ $t('login.copy') }}</ds-text>
+          </ds-space>
+          <form :disabled="pending" @submit.prevent="onSubmit">
+            <ds-input
+              v-model="form.email"
+              :disabled="pending"
+              :placeholder="$t('login.email')"
+              type="email"
+              name="email"
+              icon="envelope"
+            />
+            <ds-input
+              v-model="form.password"
+              :disabled="pending"
+              :placeholder="$t('login.password')"
+              icon="lock"
+              icon-right="question-circle"
+              name="password"
+              type="password"
+            />
+            <ds-space margin-bottom="large">
+              <nuxt-link to="/password-reset/request">{{ $t('login.forgotPassword') }}</nuxt-link>
+            </ds-space>
+            <ds-button
+              :loading="pending"
+              primary
+              fullwidth
+              name="submit"
+              type="submit"
+              icon="sign-in"
+            >
+              {{ $t('login.login') }}
+            </ds-button>
+            <ds-space margin-top="large" margin-bottom="x-small">
+              {{ $t('login.no-account') }}
+              <nuxt-link to="/registration/signup">{{ $t('login.register') }}</nuxt-link>
+            </ds-space>
+          </form>
+        </ds-flex-item>
+      </ds-flex>
+    </ds-card>
+  </ds-container>
+</template>
+
+<script>
+import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch.vue'
+
+export default {
+  components: {
+    LocaleSwitch,
+  },
+  data() {
+    return {
+      ready: false,
+      form: {
+        email: '',
+        password: '',
+      },
+    }
+  },
+  computed: {
+    pending() {
+      return this.$store.getters['auth/pending']
+    },
+  },
+  mounted() {
+    setTimeout(() => {
+      // NOTE: quick fix for jumping flexbox implementation
+      // will be fixed in a future update of the styleguide
+      this.ready = true
+    }, 50)
+  },
+  methods: {
+    async onSubmit() {
+      try {
+        await this.$store.dispatch('auth/login', { ...this.form })
+        this.$toast.success(this.$t('login.success'))
+        this.$emit('success')
+      } catch (err) {
+        this.$toast.error(err.message)
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.login-image {
+  width: 90%;
+  max-width: 200px;
+}
+.login-card {
+  position: relative;
+}
+.login-locale-switch {
+  position: absolute;
+  top: 1em;
+  left: 1em;
+}
+</style>
diff --git a/webapp/pages/login.vue b/webapp/pages/login.vue
index 971754870..e969fe46f 100644
--- a/webapp/pages/login.vue
+++ b/webapp/pages/login.vue
@@ -1,138 +1,27 @@
 <template>
   <transition name="fade" appear>
-    <ds-container v-if="ready" width="medium">
-      <ds-space margin="small">
-        <blockquote>
-          <p>{{ $t('quotes.african.quote') }}</p>
-          <b>- {{ $t('quotes.african.author') }}</b>
-        </blockquote>
-      </ds-space>
-      <ds-card class="login-card">
-        <ds-flex gutter="small">
-          <ds-flex-item :width="{ base: '100%', sm: '50%' }" centered>
-            <client-only>
-              <locale-switch class="login-locale-switch" offset="5" />
-            </client-only>
-            <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-space margin="small">
-              <a :href="$t('login.moreInfoURL')" :title="$t('login.moreInfoHint')" target="_blank">
-                {{ $t('login.moreInfo') }}
-              </a>
-            </ds-space>
-            <ds-space margin="small">
-              <ds-text size="small">{{ $t('login.copy') }}</ds-text>
-            </ds-space>
-            <form :disabled="pending" @submit.prevent="onSubmit">
-              <ds-input
-                v-model="form.email"
-                :disabled="pending"
-                :placeholder="$t('login.email')"
-                type="email"
-                name="email"
-                icon="envelope"
-              />
-              <ds-input
-                v-model="form.password"
-                :disabled="pending"
-                :placeholder="$t('login.password')"
-                icon="lock"
-                icon-right="question-circle"
-                name="password"
-                type="password"
-              />
-              <ds-space margin-bottom="large">
-                <nuxt-link to="/password-reset/request">{{ $t('login.forgotPassword') }}</nuxt-link>
-              </ds-space>
-              <ds-button
-                :loading="pending"
-                primary
-                fullwidth
-                name="submit"
-                type="submit"
-                icon="sign-in"
-              >
-                {{ $t('login.login') }}
-              </ds-button>
-              <ds-space margin-top="large" margin-bottom="x-small">
-                {{ $t('login.no-account') }}
-                <nuxt-link to="/registration/signup">{{ $t('login.register') }}</nuxt-link>
-              </ds-space>
-            </form>
-          </ds-flex-item>
-        </ds-flex>
-      </ds-card>
-    </ds-container>
+    <login-form @success="handleSuccess" />
   </transition>
 </template>
 
 <script>
-import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
+import LoginForm from '~/components/LoginForm/LoginForm.vue'
 import { VERSION } from '~/constants/terms-and-conditions-version.js'
 
 export default {
   layout: 'no-header',
   components: {
-    LocaleSwitch,
-  },
-  data() {
-    return {
-      ready: false,
-      form: {
-        email: '',
-        password: '',
-      },
-    }
-  },
-  computed: {
-    pending() {
-      return this.$store.getters['auth/pending']
-    },
+    LoginForm,
   },
   asyncData({ store, redirect }) {
     if (store.getters['auth/user'].termsAndConditionsAgreedVersion === VERSION) {
       redirect('/')
     }
   },
-  mounted() {
-    setTimeout(() => {
-      // NOTE: quick fix for jumping flexbox implementation
-      // will be fixed in a future update of the styleguide
-      this.ready = true
-    }, 50)
-  },
   methods: {
-    async onSubmit() {
-      try {
-        await this.$store.dispatch('auth/login', { ...this.form })
-        this.$toast.success(this.$t('login.success'))
-        this.$router.replace(this.$route.query.path || '/')
-      } catch (err) {
-        this.$toast.error(err.message)
-      }
+    handleSuccess() {
+      this.$router.replace(this.$route.query.path || '/')
     },
   },
 }
 </script>
-
-<style lang="scss">
-.login-image {
-  width: 90%;
-  max-width: 200px;
-}
-.login-card {
-  position: relative;
-}
-.login-locale-switch {
-  position: absolute;
-  top: 1em;
-  left: 1em;
-}
-</style>

From fced9ce4353a7ef459c7a7f81df1024764a7cf27 Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Tue, 15 Oct 2019 14:19:26 +0200
Subject: [PATCH 02/10] refactor: remove `ready` quickfix in LoginForm

According to the code comments this is a quick fix to avoid a visible
re-arrangement of elements in the browser. To be honest: I would rather
have the visible re-arrangement than this obscure quickfix. Everything
that's visible and annoying will be fixed. Everything we just hide, we
will forget.
---
 webapp/components/LoginForm/LoginForm.vue | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue
index d72b5befe..0eb0d4be9 100644
--- a/webapp/components/LoginForm/LoginForm.vue
+++ b/webapp/components/LoginForm/LoginForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <ds-container v-if="ready" width="medium">
+  <ds-container width="medium">
     <ds-space margin="small">
       <blockquote>
         <p>{{ $t('quotes.african.quote') }}</p>
@@ -80,7 +80,6 @@ export default {
   },
   data() {
     return {
-      ready: false,
       form: {
         email: '',
         password: '',
@@ -92,13 +91,6 @@ export default {
       return this.$store.getters['auth/pending']
     },
   },
-  mounted() {
-    setTimeout(() => {
-      // NOTE: quick fix for jumping flexbox implementation
-      // will be fixed in a future update of the styleguide
-      this.ready = true
-    }, 50)
-  },
   methods: {
     async onSubmit() {
       try {

From 1549ff6c5313937cc698aa129b788f2de3b8a225 Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Tue, 15 Oct 2019 15:35:03 +0200
Subject: [PATCH 03/10] docs: add storybook story for LoginForm

---
 webapp/components/LoginForm/LoginForm.story.js | 18 ++++++++++++++++++
 webapp/package.json                            |  2 +-
 2 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 webapp/components/LoginForm/LoginForm.story.js

diff --git a/webapp/components/LoginForm/LoginForm.story.js b/webapp/components/LoginForm/LoginForm.story.js
new file mode 100644
index 000000000..ae422876a
--- /dev/null
+++ b/webapp/components/LoginForm/LoginForm.story.js
@@ -0,0 +1,18 @@
+import { storiesOf } from '@storybook/vue'
+import { withA11y } from '@storybook/addon-a11y'
+import helpers from '~/storybook/helpers'
+import Vue from 'vue'
+
+import LoginForm from './LoginForm.vue'
+
+helpers.init()
+
+storiesOf('LoginForm', module)
+  .addDecorator(withA11y)
+  .addDecorator(helpers.layout)
+  .add('LoginForm', () => ({
+    components: { LoginForm },
+    data: () => ({}),
+    store: helpers.store,
+    template: `<login-form />`,
+  }))
diff --git a/webapp/package.json b/webapp/package.json
index 7c892f181..a8df805bd 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -12,7 +12,7 @@
   "scripts": {
     "dev": "nuxt",
     "dev:styleguide": "cross-env STYLEGUIDE_DEV=true yarn run dev",
-    "storybook": "start-storybook -p 3002 -c storybook/",
+    "storybook": "start-storybook -p 3002  -s ./static -c storybook/",
     "build": "nuxt build",
     "start": "nuxt start",
     "generate:maintenance": "nuxt generate -c nuxt.config.maintenance.js",

From 48943d0ec855d170edf573663d888f4d2f524f73 Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Tue, 15 Oct 2019 16:16:40 +0200
Subject: [PATCH 04/10] fix: inject $toast into storybook components

---
 .../components/LoginForm/LoginForm.story.js   | 55 ++++++++++++++++---
 webapp/storybook/helpers.js                   | 10 +---
 2 files changed, 49 insertions(+), 16 deletions(-)

diff --git a/webapp/components/LoginForm/LoginForm.story.js b/webapp/components/LoginForm/LoginForm.story.js
index ae422876a..d04481496 100644
--- a/webapp/components/LoginForm/LoginForm.story.js
+++ b/webapp/components/LoginForm/LoginForm.story.js
@@ -1,18 +1,57 @@
 import { storiesOf } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
-import helpers from '~/storybook/helpers'
+import { action } from '@storybook/addon-actions'
 import Vue from 'vue'
-
+import Vuex from 'vuex'
+import helpers from '~/storybook/helpers'
 import LoginForm from './LoginForm.vue'
 
 helpers.init()
 
+const createStore = ({ loginSuccess }) => {
+  return new Vuex.Store({
+    modules: {
+      auth: {
+        namespaced: true,
+        actions: {
+          async login({ commit, dispatch }, args) {
+            action('Vuex action `auth/login`')(args)
+            if (loginSuccess) {
+              return loginSuccess
+            } else {
+              throw new Error('Login unsuccessful')
+            }
+          },
+        },
+      },
+    },
+  })
+}
+
 storiesOf('LoginForm', module)
   .addDecorator(withA11y)
   .addDecorator(helpers.layout)
-  .add('LoginForm', () => ({
-    components: { LoginForm },
-    data: () => ({}),
-    store: helpers.store,
-    template: `<login-form />`,
-  }))
+  .add('successful login', () => {
+    return {
+      components: { LoginForm },
+      store: createStore({ loginSuccess: true }),
+      methods: {
+        handleSuccess() {
+          action('Login successful!')()
+        },
+      },
+      template: `<login-form @success="handleSuccess"/>`,
+    }
+  })
+  .add('unsuccessful login', () => {
+    return {
+      components: { LoginForm },
+      store: createStore({ loginSuccess: false }),
+      methods: {
+        handleSuccess() {
+          action('Login successful!')()
+        },
+      },
+      template: `<login-form @success="handleSuccess"/>`,
+    }
+  })
diff --git a/webapp/storybook/helpers.js b/webapp/storybook/helpers.js
index 790a10f78..8793da1e4 100644
--- a/webapp/storybook/helpers.js
+++ b/webapp/storybook/helpers.js
@@ -3,6 +3,7 @@ import Vuex from 'vuex'
 import vuexI18n from 'vuex-i18n/dist/vuex-i18n.umd.js'
 import Styleguide from '@human-connection/styleguide'
 import Filters from '~/plugins/vue-filters'
+import IziToast from '~/plugins/izi-toast'
 import layout from './layout.vue'
 
 import '~/plugins/v-tooltip'
@@ -12,6 +13,7 @@ const helpers = {
     Vue.use(Vuex)
     Vue.use(Styleguide)
     Vue.use(Filters)
+    Vue.use(IziToast)
 
     Vue.use(vuexI18n.plugin, helpers.store)
     Vue.i18n.add('en', require('~/locales/en.json'))
@@ -35,14 +37,6 @@ const helpers = {
           },
         },
       },
-      editor: {
-        namespaced: true,
-        getters: {
-          placeholder(state) {
-            return 'Leave your inspirational thoughts ...'
-          },
-        },
-      },
     },
   }),
   layout(storyFn) {

From 42d0ffe6ffc32f941a88f44da22c0a6e5f80fb73 Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Tue, 15 Oct 2019 18:42:15 +0200
Subject: [PATCH 05/10] docs: use setTimeout to show spinner

---
 .../components/LoginForm/LoginForm.story.js   | 30 +++++++++++++++----
 1 file changed, 24 insertions(+), 6 deletions(-)

diff --git a/webapp/components/LoginForm/LoginForm.story.js b/webapp/components/LoginForm/LoginForm.story.js
index d04481496..618b2556c 100644
--- a/webapp/components/LoginForm/LoginForm.story.js
+++ b/webapp/components/LoginForm/LoginForm.story.js
@@ -1,7 +1,6 @@
 import { storiesOf } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
 import { action } from '@storybook/addon-actions'
-import Vue from 'vue'
 import Vuex from 'vuex'
 import helpers from '~/storybook/helpers'
 import LoginForm from './LoginForm.vue'
@@ -13,14 +12,33 @@ const createStore = ({ loginSuccess }) => {
     modules: {
       auth: {
         namespaced: true,
+        state: () => ({
+          pending: false,
+        }),
+        mutations: {
+          SET_PENDING(state, pending) {
+            state.pending = pending
+          },
+        },
+        getters: {
+          pending(state) {
+            return !!state.pending
+          },
+        },
         actions: {
           async login({ commit, dispatch }, args) {
             action('Vuex action `auth/login`')(args)
-            if (loginSuccess) {
-              return loginSuccess
-            } else {
-              throw new Error('Login unsuccessful')
-            }
+            return new Promise((resolve, reject) => {
+              commit('SET_PENDING', true)
+              setTimeout(() => {
+                commit('SET_PENDING', false)
+                if (loginSuccess) {
+                  resolve(loginSuccess)
+                } else {
+                  reject(new Error('Login unsuccessful'))
+                }
+              }, 1000)
+            })
           },
         },
       },

From 72bbadd8524ad82a5b88eb3e25635cbe7d3863e1 Mon Sep 17 00:00:00 2001
From: roschaefer <git@roschaefer.de>
Date: Wed, 16 Oct 2019 01:07:32 +0200
Subject: [PATCH 06/10] dosc: add comment list story

---
 .../CommentList/CommentList.story.js          | 45 +++++++++++++++++++
 webapp/package.json                           |  1 +
 webapp/yarn.lock                              |  5 +++
 3 files changed, 51 insertions(+)
 create mode 100644 webapp/components/CommentList/CommentList.story.js

diff --git a/webapp/components/CommentList/CommentList.story.js b/webapp/components/CommentList/CommentList.story.js
new file mode 100644
index 000000000..1f96b1ad0
--- /dev/null
+++ b/webapp/components/CommentList/CommentList.story.js
@@ -0,0 +1,45 @@
+import { storiesOf } from '@storybook/vue'
+import { withA11y } from '@storybook/addon-a11y'
+import HcCommentList from './CommentList.vue'
+import helpers from '~/storybook/helpers'
+import faker from 'faker'
+
+helpers.init()
+
+const commentMock = fields => {
+  return {
+    id: faker.random.uuid(),
+    title: faker.lorem.sentence(),
+    content: faker.lorem.paragraph(),
+    createdAt: faker.date.past(),
+    updatedAt: faker.date.recent(),
+    deleted: false,
+    disabled: false,
+    ...fields,
+  }
+}
+
+const comments = [
+  commentMock(),
+  commentMock(),
+  commentMock(),
+  commentMock(),
+  commentMock(),
+  commentMock(),
+  commentMock(),
+  commentMock(),
+  commentMock(),
+  commentMock(),
+]
+
+storiesOf('CommentList', module)
+  .addDecorator(withA11y)
+  .addDecorator(helpers.layout)
+  .add('given 10 comments', () => ({
+    components: { HcCommentList },
+    store: helpers.store,
+    data: () => ({
+      post: { comments },
+    }),
+    template: `<hc-comment-list :post="post" />`,
+  }))
diff --git a/webapp/package.json b/webapp/package.json
index a8df805bd..2e6dcdee1 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -121,6 +121,7 @@
     "eslint-plugin-promise": "~4.2.1",
     "eslint-plugin-standard": "~4.0.1",
     "eslint-plugin-vue": "~5.2.3",
+    "faker": "^4.1.0",
     "flush-promises": "^1.0.2",
     "fuse.js": "^3.4.5",
     "identity-obj-proxy": "^3.0.0",
diff --git a/webapp/yarn.lock b/webapp/yarn.lock
index 23aae565b..57b531852 100644
--- a/webapp/yarn.lock
+++ b/webapp/yarn.lock
@@ -7207,6 +7207,11 @@ extsprintf@^1.2.0:
   resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
   integrity sha1-4mifjzVvrWLMplo6kcXfX5VRaS8=
 
+faker@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/faker/-/faker-4.1.0.tgz#1e45bbbecc6774b3c195fad2835109c6d748cc3f"
+  integrity sha1-HkW7vsxndLPBlfrSg1EJxtdIzD8=
+
 fast-deep-equal@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz#7b05218ddf9667bf7f370bf7fdb2cb15fdd0aa49"

From b72f3da489bc6d6913bfbf239a5abc2a2b4f83d1 Mon Sep 17 00:00:00 2001
From: Youri Seichter <yseichter@gmail.com>
Date: Wed, 16 Oct 2019 17:06:44 +0200
Subject: [PATCH 07/10] Make login failure translateable, translate
 'login.failure' to german and english

---
 webapp/components/LoginForm/LoginForm.vue | 2 +-
 webapp/locales/de.json                    | 3 ++-
 webapp/locales/en.json                    | 3 ++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue
index 0eb0d4be9..91693ed4b 100644
--- a/webapp/components/LoginForm/LoginForm.vue
+++ b/webapp/components/LoginForm/LoginForm.vue
@@ -98,7 +98,7 @@ export default {
         this.$toast.success(this.$t('login.success'))
         this.$emit('success')
       } catch (err) {
-        this.$toast.error(err.message)
+        this.$toast.error(this.$t('login.failure'))
       }
     },
   },
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 9ef19e486..57e33afec 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -112,7 +112,8 @@
     "moreInfoURL": "https://human-connection.org",
     "moreInfoHint": "zur Präsentationsseite",
     "hello": "Hallo",
-    "success": "Du bist eingeloggt!"
+    "success": "Du bist eingeloggt!",
+    "failure": "Login fehlgeschlagen"
   },
   "editor": {
     "placeholder": "Schreib etwas Inspirierendes …",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 1a2ea643b..3c136b63a 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -113,7 +113,8 @@
     "moreInfoURL": "https://human-connection.org/en/",
     "moreInfoHint": "to the presentation page",
     "hello": "Hello",
-    "success": "You are logged in!"
+    "success": "You are logged in!",
+    "failure": "Login failed"
   },
   "editor": {
     "placeholder": "Leave your inspirational thoughts …",

From b89ef8987e953cd8ea92e12cffae49782d493150 Mon Sep 17 00:00:00 2001
From: Youri Seichter <yseichter@gmail.com>
Date: Wed, 16 Oct 2019 17:57:03 +0200
Subject: [PATCH 08/10] Change login.failure translations, log login.failure
 error

---
 webapp/components/LoginForm/LoginForm.vue | 1 +
 webapp/locales/de.json                    | 2 +-
 webapp/locales/en.json                    | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue
index 91693ed4b..fefd6c452 100644
--- a/webapp/components/LoginForm/LoginForm.vue
+++ b/webapp/components/LoginForm/LoginForm.vue
@@ -99,6 +99,7 @@ export default {
         this.$emit('success')
       } catch (err) {
         this.$toast.error(this.$t('login.failure'))
+        console.log(err)
       }
     },
   },
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 57e33afec..996db60a8 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -113,7 +113,7 @@
     "moreInfoHint": "zur Präsentationsseite",
     "hello": "Hallo",
     "success": "Du bist eingeloggt!",
-    "failure": "Login fehlgeschlagen"
+    "failure": "Fehlerhafte E-Mail-Adresse oder Passwort."
   },
   "editor": {
     "placeholder": "Schreib etwas Inspirierendes …",
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 3c136b63a..12edda304 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -114,7 +114,7 @@
     "moreInfoHint": "to the presentation page",
     "hello": "Hello",
     "success": "You are logged in!",
-    "failure": "Login failed"
+    "failure": "Incorrect email address or password."
   },
   "editor": {
     "placeholder": "Leave your inspirational thoughts …",

From 6c8ccea448a69600d22e999740b1254db669dcda Mon Sep 17 00:00:00 2001
From: Martin Neumann <neumann@insystems.de>
Date: Wed, 16 Oct 2019 18:25:20 +0200
Subject: [PATCH 09/10] Fix: Import all languages in storybook

---
 webapp/storybook/helpers.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/webapp/storybook/helpers.js b/webapp/storybook/helpers.js
index 8793da1e4..de988ab81 100644
--- a/webapp/storybook/helpers.js
+++ b/webapp/storybook/helpers.js
@@ -5,6 +5,7 @@ import Styleguide from '@human-connection/styleguide'
 import Filters from '~/plugins/vue-filters'
 import IziToast from '~/plugins/izi-toast'
 import layout from './layout.vue'
+import locales from '~/locales/index.js'
 
 import '~/plugins/v-tooltip'
 
@@ -16,8 +17,10 @@ const helpers = {
     Vue.use(IziToast)
 
     Vue.use(vuexI18n.plugin, helpers.store)
-    Vue.i18n.add('en', require('~/locales/en.json'))
-    Vue.i18n.add('de', require('~/locales/de.json'))
+    locales.forEach(({ code }) => {
+      Vue.i18n.add(code, require(`~/locales/${code}.json`))
+    })
+
     Vue.i18n.set('en')
     Vue.i18n.fallback('en')
 

From 967273a1aff40860f3b8a69947ee20b2e3c5fa58 Mon Sep 17 00:00:00 2001
From: Youri Seichter <yseichter@gmail.com>
Date: Wed, 16 Oct 2019 19:38:51 +0200
Subject: [PATCH 10/10] remove error logging as it results in linting errors

---
 webapp/components/LoginForm/LoginForm.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/webapp/components/LoginForm/LoginForm.vue b/webapp/components/LoginForm/LoginForm.vue
index fefd6c452..91693ed4b 100644
--- a/webapp/components/LoginForm/LoginForm.vue
+++ b/webapp/components/LoginForm/LoginForm.vue
@@ -99,7 +99,6 @@ export default {
         this.$emit('success')
       } catch (err) {
         this.$toast.error(this.$t('login.failure'))
-        console.log(err)
       }
     },
   },