ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix #2042 Back Link To Login Page

Browse Source
This commit is contained in:
Moriz Wahl 2019-10-29 23:52:50 +01:00
parent b4896c3839
commit dcb4196a1a
1 changed files with 152 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

296
webapp/components/Registration/Signup.vue
View File

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