From dcb4196a1a8b59079eeb34f47ef5deb5d7bff034 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 29 Oct 2019 23:52:50 +0100
Subject: [PATCH 1/2] Fix #2042 Back Link To Login Page

---
 webapp/components/Registration/Signup.vue | 296 +++++++++++-----------
 1 file changed, 152 insertions(+), 144 deletions(-)

diff --git a/webapp/components/Registration/Signup.vue b/webapp/components/Registration/Signup.vue
index 00309b1c6..cc1b661f3 100644
--- a/webapp/components/Registration/Signup.vue
+++ b/webapp/components/Registration/Signup.vue
@@ -1,152 +1,160 @@
 <template>
-  <ds-space v-if="!success && !error" margin="large">
-    <ds-form
-      @input="handleInput"
-      @input-valid="handleInputValid"
-      v-model="formData"
-      :schema="formSchema"
-      @submit="handleSubmit"
-    >
-      <h1>
-        {{ invitation ? $t('profile.invites.title') : $t('components.registration.signup.title') }}
-      </h1>
-      <ds-space v-if="token" margin-botton="large">
-        <ds-text v-html="$t('registration.signup.form.invitation-code', { code: token })" />
-      </ds-space>
-      <ds-space margin-botton="large">
-        <ds-text>
-          {{
-            invitation
-              ? $t('profile.invites.description')
-              : $t('components.registration.signup.form.description')
-          }}
-        </ds-text>
-      </ds-space>
-      <ds-input
-        :placeholder="invitation ? $t('profile.invites.emailPlaceholder') : $t('login.email')"
-        type="email"
-        id="email"
-        model="email"
-        name="email"
-        icon="envelope"
-      />
-      <ds-button
-        :disabled="disabled"
-        :loading="$apollo.loading"
-        primary
-        fullwidth
-        name="submit"
-        type="submit"
-        icon="envelope"
-      >
-        {{ $t('components.registration.signup.form.submit') }}
-      </ds-button>
-      <slot></slot>
-    </ds-form>
-  </ds-space>
-  <div v-else margin="large">
-    <template v-if="!error">
-      <transition name="ds-transition-fade">
-        <sweetalert-icon icon="info" />
-      </transition>
-      <ds-text align="center" v-html="submitMessage" />
-    </template>
-    <template v-else>
-      <transition name="ds-transition-fade">
-        <sweetalert-icon icon="error" />
-      </transition>
-      <ds-text align="center">{{ error.message }}</ds-text>
-    </template>
-  </div>
+    <ds-space v-if="!success && !error" margin="large">
+	<ds-form
+	    @input="handleInput"
+	    @input-valid="handleInputValid"
+	    v-model="formData"
+	    :schema="formSchema"
+	    @submit="handleSubmit"
+	>
+	    <h1>
+		{{ invitation ? $t('profile.invites.title') : $t('components.registration.signup.title') }}
+	    </h1>
+	    <ds-space v-if="token" margin-botton="large">
+		<ds-text v-html="$t('registration.signup.form.invitation-code', { code: token })" />
+	    </ds-space>
+	    <ds-space margin-botton="large">
+		<ds-text>
+		    {{
+		    invitation
+		    ? $t('profile.invites.description')
+		    : $t('components.registration.signup.form.description')
+		    }}
+		</ds-text>
+	    </ds-space>
+	    <ds-input
+		:placeholder="invitation ? $t('profile.invites.emailPlaceholder') : $t('login.email')"
+		type="email"
+		id="email"
+		model="email"
+		name="email"
+		icon="envelope"
+	    />
+	    <ds-button
+		:disabled="disabled"
+		:loading="$apollo.loading"
+		primary
+		fullwidth
+		name="submit"
+		type="submit"
+		icon="envelope"
+	    >
+		{{ $t('components.registration.signup.form.submit') }}
+	    </ds-button>
+	    <slot></slot>
+	</ds-form>
+    </ds-space>
+    <div v-else margin="large">
+	<template v-if="!error">
+	    <transition name="ds-transition-fade">
+		<sweetalert-icon icon="info" />
+	    </transition>
+	    <ds-text align="center" v-html="submitMessage" />
+	</template>
+	<template v-else>
+	    <transition name="ds-transition-fade">
+		<sweetalert-icon icon="error" />
+	    </transition>
+	    <ds-text align="center">{{ error.message }}</ds-text>
+	    <ds-space centered class="space-top">
+		<nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
+	    </ds-space>
+	</template>
+    </div>
 </template>
 
 <script>
-import gql from 'graphql-tag'
-import { SweetalertIcon } from 'vue-sweetalert-icons'
+ import gql from 'graphql-tag'
+ import { SweetalertIcon } from 'vue-sweetalert-icons'
 
-export const SignupMutation = gql`
-  mutation($email: String!) {
-    Signup(email: $email) {
-      email
-    }
-  }
-`
-export const SignupByInvitationMutation = gql`
-  mutation($email: String!, $token: String!) {
-    SignupByInvitation(email: $email, token: $token) {
-      email
-    }
-  }
-`
-export default {
-  name: 'Signup',
-  components: {
-    SweetalertIcon,
-  },
-  props: {
-    token: { type: String, default: null },
-    invitation: { type: Boolean, default: false },
-  },
-  data() {
-    return {
-      formData: {
-        email: '',
-      },
-      formSchema: {
-        email: {
-          type: 'email',
-          required: true,
-          message: this.$t('common.validations.email'),
-        },
-      },
-      disabled: true,
-      success: false,
-      error: null,
-    }
-  },
-  computed: {
-    submitMessage() {
-      const { email } = this.formData
-      return this.$t('components.registration.signup.form.success', { email })
-    },
-  },
-  methods: {
-    handleInput() {
-      this.disabled = true
-    },
-    handleInputValid() {
-      this.disabled = false
-    },
-    async handleSubmit() {
-      const mutation = this.token ? SignupByInvitationMutation : SignupMutation
-      const { email } = this.formData
-      const { token } = this
+ export const SignupMutation = gql`
+     mutation($email: String!) {
+	 Signup(email: $email) {
+	     email
+	 }
+     }
+ `
+ export const SignupByInvitationMutation = gql`
+     mutation($email: String!, $token: String!) {
+	 SignupByInvitation(email: $email, token: $token) {
+	     email
+	 }
+     }
+ `
+ export default {
+     name: 'Signup',
+     components: {
+	 SweetalertIcon,
+     },
+     props: {
+	 token: { type: String, default: null },
+	 invitation: { type: Boolean, default: false },
+     },
+     data() {
+	 return {
+	     formData: {
+		 email: '',
+	     },
+	     formSchema: {
+		 email: {
+		     type: 'email',
+		     required: true,
+		     message: this.$t('common.validations.email'),
+		 },
+	     },
+	     disabled: true,
+	     success: false,
+	     error: null,
+	 }
+     },
+     computed: {
+	 submitMessage() {
+	     const { email } = this.formData
+	     return this.$t('components.registration.signup.form.success', { email })
+	 },
+     },
+     methods: {
+	 handleInput() {
+	     this.disabled = true
+	 },
+	 handleInputValid() {
+	     this.disabled = false
+	 },
+	 async handleSubmit() {
+	     const mutation = this.token ? SignupByInvitationMutation : SignupMutation
+	     const { email } = this.formData
+	     const { token } = this
 
-      try {
-        await this.$apollo.mutate({ mutation, variables: { email, token } })
-        this.success = true
+	     try {
+		 await this.$apollo.mutate({ mutation, variables: { email, token } })
+		 this.success = true
 
-        setTimeout(() => {
-          this.$emit('submit', { email })
-        }, 3000)
-      } catch (err) {
-        const { message } = err
-        const mapping = {
-          'A user account with this email already exists': 'email-exists',
-          'Invitation code already used or does not exist': 'invalid-invitation-token',
-        }
-        for (const [pattern, key] of Object.entries(mapping)) {
-          if (message.includes(pattern))
-            this.error = {
-              key,
-              message: this.$t(`components.registration.signup.form.errors.${key}`),
-            }
-        }
-        if (!this.error) {
-          this.$toast.error(message)
-        }
-      }
-    },
-  },
-}
+		 setTimeout(() => {
+		     this.$emit('submit', { email })
+		 }, 3000)
+	     } catch (err) {
+		 const { message } = err
+		 const mapping = {
+		     'A user account with this email already exists': 'email-exists',
+		     'Invitation code already used or does not exist': 'invalid-invitation-token',
+		 }
+		 for (const [pattern, key] of Object.entries(mapping)) {
+		     if (message.includes(pattern))
+			 this.error = {
+			     key,
+			     message: this.$t(`components.registration.signup.form.errors.${key}`),
+			 }
+		 }
+		 if (!this.error) {
+		     this.$toast.error(message)
+		 }
+	     }
+	 },
+     },
+ }
 </script>
+<style>
+ .space-top {
+     margin-top: 6ex;
+ }
+</style>

From cac529a73dbb05ceb09b7d9e0b3b86f1bcb9434e Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Sun, 17 Nov 2019 19:26:15 +0100
Subject: [PATCH 2/2] Test is running fine

---
 webapp/components/Registration/Signup.spec.js |   1 +
 webapp/components/Registration/Signup.vue     | 300 +++++++++---------
 2 files changed, 151 insertions(+), 150 deletions(-)

diff --git a/webapp/components/Registration/Signup.spec.js b/webapp/components/Registration/Signup.spec.js
index b6b83a82e..40a0a99c6 100644
--- a/webapp/components/Registration/Signup.spec.js
+++ b/webapp/components/Registration/Signup.spec.js
@@ -6,6 +6,7 @@ const localVue = createLocalVue()
 
 localVue.use(Styleguide)
 config.stubs['sweetalert-icon'] = '<span><slot /></span>'
+config.stubs['nuxt-link'] = '<span><slot /></span>'
 
 describe('Signup', () => {
   let wrapper
diff --git a/webapp/components/Registration/Signup.vue b/webapp/components/Registration/Signup.vue
index cc1b661f3..fb8fe309f 100644
--- a/webapp/components/Registration/Signup.vue
+++ b/webapp/components/Registration/Signup.vue
@@ -1,160 +1,160 @@
 <template>
-    <ds-space v-if="!success && !error" margin="large">
-	<ds-form
-	    @input="handleInput"
-	    @input-valid="handleInputValid"
-	    v-model="formData"
-	    :schema="formSchema"
-	    @submit="handleSubmit"
-	>
-	    <h1>
-		{{ invitation ? $t('profile.invites.title') : $t('components.registration.signup.title') }}
-	    </h1>
-	    <ds-space v-if="token" margin-botton="large">
-		<ds-text v-html="$t('registration.signup.form.invitation-code', { code: token })" />
-	    </ds-space>
-	    <ds-space margin-botton="large">
-		<ds-text>
-		    {{
-		    invitation
-		    ? $t('profile.invites.description')
-		    : $t('components.registration.signup.form.description')
-		    }}
-		</ds-text>
-	    </ds-space>
-	    <ds-input
-		:placeholder="invitation ? $t('profile.invites.emailPlaceholder') : $t('login.email')"
-		type="email"
-		id="email"
-		model="email"
-		name="email"
-		icon="envelope"
-	    />
-	    <ds-button
-		:disabled="disabled"
-		:loading="$apollo.loading"
-		primary
-		fullwidth
-		name="submit"
-		type="submit"
-		icon="envelope"
-	    >
-		{{ $t('components.registration.signup.form.submit') }}
-	    </ds-button>
-	    <slot></slot>
-	</ds-form>
-    </ds-space>
-    <div v-else margin="large">
-	<template v-if="!error">
-	    <transition name="ds-transition-fade">
-		<sweetalert-icon icon="info" />
-	    </transition>
-	    <ds-text align="center" v-html="submitMessage" />
-	</template>
-	<template v-else>
-	    <transition name="ds-transition-fade">
-		<sweetalert-icon icon="error" />
-	    </transition>
-	    <ds-text align="center">{{ error.message }}</ds-text>
-	    <ds-space centered class="space-top">
-		<nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
-	    </ds-space>
-	</template>
-    </div>
+  <ds-space v-if="!success && !error" margin="large">
+    <ds-form
+      @input="handleInput"
+      @input-valid="handleInputValid"
+      v-model="formData"
+      :schema="formSchema"
+      @submit="handleSubmit"
+    >
+      <h1>
+        {{ invitation ? $t('profile.invites.title') : $t('components.registration.signup.title') }}
+      </h1>
+      <ds-space v-if="token" margin-botton="large">
+        <ds-text v-html="$t('registration.signup.form.invitation-code', { code: token })" />
+      </ds-space>
+      <ds-space margin-botton="large">
+        <ds-text>
+          {{
+            invitation
+              ? $t('profile.invites.description')
+              : $t('components.registration.signup.form.description')
+          }}
+        </ds-text>
+      </ds-space>
+      <ds-input
+        :placeholder="invitation ? $t('profile.invites.emailPlaceholder') : $t('login.email')"
+        type="email"
+        id="email"
+        model="email"
+        name="email"
+        icon="envelope"
+      />
+      <ds-button
+        :disabled="disabled"
+        :loading="$apollo.loading"
+        primary
+        fullwidth
+        name="submit"
+        type="submit"
+        icon="envelope"
+      >
+        {{ $t('components.registration.signup.form.submit') }}
+      </ds-button>
+      <slot></slot>
+    </ds-form>
+  </ds-space>
+  <div v-else margin="large">
+    <template v-if="!error">
+      <transition name="ds-transition-fade">
+        <sweetalert-icon icon="info" />
+      </transition>
+      <ds-text align="center" v-html="submitMessage" />
+    </template>
+    <template v-else>
+      <transition name="ds-transition-fade">
+        <sweetalert-icon icon="error" />
+      </transition>
+      <ds-text align="center">{{ error.message }}</ds-text>
+      <ds-space centered class="space-top">
+        <nuxt-link to="/login">{{ $t('site.back-to-login') }}</nuxt-link>
+      </ds-space>
+    </template>
+  </div>
 </template>
 
 <script>
- import gql from 'graphql-tag'
- import { SweetalertIcon } from 'vue-sweetalert-icons'
+import gql from 'graphql-tag'
+import { SweetalertIcon } from 'vue-sweetalert-icons'
 
- export const SignupMutation = gql`
-     mutation($email: String!) {
-	 Signup(email: $email) {
-	     email
-	 }
-     }
- `
- export const SignupByInvitationMutation = gql`
-     mutation($email: String!, $token: String!) {
-	 SignupByInvitation(email: $email, token: $token) {
-	     email
-	 }
-     }
- `
- export default {
-     name: 'Signup',
-     components: {
-	 SweetalertIcon,
-     },
-     props: {
-	 token: { type: String, default: null },
-	 invitation: { type: Boolean, default: false },
-     },
-     data() {
-	 return {
-	     formData: {
-		 email: '',
-	     },
-	     formSchema: {
-		 email: {
-		     type: 'email',
-		     required: true,
-		     message: this.$t('common.validations.email'),
-		 },
-	     },
-	     disabled: true,
-	     success: false,
-	     error: null,
-	 }
-     },
-     computed: {
-	 submitMessage() {
-	     const { email } = this.formData
-	     return this.$t('components.registration.signup.form.success', { email })
-	 },
-     },
-     methods: {
-	 handleInput() {
-	     this.disabled = true
-	 },
-	 handleInputValid() {
-	     this.disabled = false
-	 },
-	 async handleSubmit() {
-	     const mutation = this.token ? SignupByInvitationMutation : SignupMutation
-	     const { email } = this.formData
-	     const { token } = this
+export const SignupMutation = gql`
+  mutation($email: String!) {
+    Signup(email: $email) {
+      email
+    }
+  }
+`
+export const SignupByInvitationMutation = gql`
+  mutation($email: String!, $token: String!) {
+    SignupByInvitation(email: $email, token: $token) {
+      email
+    }
+  }
+`
+export default {
+  name: 'Signup',
+  components: {
+    SweetalertIcon,
+  },
+  props: {
+    token: { type: String, default: null },
+    invitation: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      formData: {
+        email: '',
+      },
+      formSchema: {
+        email: {
+          type: 'email',
+          required: true,
+          message: this.$t('common.validations.email'),
+        },
+      },
+      disabled: true,
+      success: false,
+      error: null,
+    }
+  },
+  computed: {
+    submitMessage() {
+      const { email } = this.formData
+      return this.$t('components.registration.signup.form.success', { email })
+    },
+  },
+  methods: {
+    handleInput() {
+      this.disabled = true
+    },
+    handleInputValid() {
+      this.disabled = false
+    },
+    async handleSubmit() {
+      const mutation = this.token ? SignupByInvitationMutation : SignupMutation
+      const { email } = this.formData
+      const { token } = this
 
-	     try {
-		 await this.$apollo.mutate({ mutation, variables: { email, token } })
-		 this.success = true
+      try {
+        await this.$apollo.mutate({ mutation, variables: { email, token } })
+        this.success = true
 
-		 setTimeout(() => {
-		     this.$emit('submit', { email })
-		 }, 3000)
-	     } catch (err) {
-		 const { message } = err
-		 const mapping = {
-		     'A user account with this email already exists': 'email-exists',
-		     'Invitation code already used or does not exist': 'invalid-invitation-token',
-		 }
-		 for (const [pattern, key] of Object.entries(mapping)) {
-		     if (message.includes(pattern))
-			 this.error = {
-			     key,
-			     message: this.$t(`components.registration.signup.form.errors.${key}`),
-			 }
-		 }
-		 if (!this.error) {
-		     this.$toast.error(message)
-		 }
-	     }
-	 },
-     },
- }
+        setTimeout(() => {
+          this.$emit('submit', { email })
+        }, 3000)
+      } catch (err) {
+        const { message } = err
+        const mapping = {
+          'A user account with this email already exists': 'email-exists',
+          'Invitation code already used or does not exist': 'invalid-invitation-token',
+        }
+        for (const [pattern, key] of Object.entries(mapping)) {
+          if (message.includes(pattern))
+            this.error = {
+              key,
+              message: this.$t(`components.registration.signup.form.errors.${key}`),
+            }
+        }
+        if (!this.error) {
+          this.$toast.error(message)
+        }
+      }
+    },
+  },
+}
 </script>
 <style>
- .space-top {
-     margin-top: 6ex;
- }
+.space-top {
+  margin-top: 6ex;
+}
 </style>