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