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] 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>