mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-13 07:46:06 +00:00
Split routes in two
So, to get a direct link it's better to have one route that calls a mutation as soon as it is visited.
This commit is contained in:
roschaefer
parent
0592f685f6
commit
69542617ac
@ -165,7 +165,9 @@
|
||||
"labelNonce": "Bestätigungscode eingeben",
|
||||
"success": "Eine neue E-Mail Addresse wurde registriert.",
|
||||
"submitted": "Eine E-Mail zur Bestätigung deiner Adresse wurde an <b>{email}</b> gesendet.",
|
||||
"change-successful": "Deine E-Mail Adresse wurde erfolgreich geändert."
|
||||
"change-successful": "Deine E-Mail Adresse wurde erfolgreich geändert.",
|
||||
"change-error": "Deine E-Mail Adresse konnte nicht verifiziert werden.",
|
||||
"change-error-help": "Vielleicht ist der Bestätigungscode falsch oder diese E-Mail Adresse wurde nicht hinterlegt?"
|
||||
},
|
||||
"validation": {
|
||||
"slug": {
|
||||
|
||||
@ -166,7 +166,9 @@
|
||||
"labelNonce": "Enter your code",
|
||||
"success": "A new E-Mail address has been registered.",
|
||||
"submitted": "An email to verify your address has been sent to <b>{email}</b>.",
|
||||
"change-successful": "Your E-Mail address has been changed successfully."
|
||||
"change-successful": "Your E-Mail address has been changed successfully.",
|
||||
"change-error": "Your E-Mail could not be changed.",
|
||||
"change-error-help": "Maybe the code was invalid or you did not add a new E-Mail address before?"
|
||||
},
|
||||
"validation": {
|
||||
"slug": {
|
||||
|
||||
59
webapp/pages/settings/my-email-address/enter-nonce.vue
Normal file
59
webapp/pages/settings/my-email-address/enter-nonce.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<ds-form v-model="form" :schema="formSchema" @submit="submit">
|
||||
<template slot-scope="{ errors }">
|
||||
<ds-card :header="$t('settings.email.name')">
|
||||
<ds-input
|
||||
id="email"
|
||||
model="email"
|
||||
icon="at"
|
||||
disabled
|
||||
:label="$t('settings.email.labelNewEmail')"
|
||||
/>
|
||||
<ds-input
|
||||
id="nonce"
|
||||
model="nonce"
|
||||
icon="question-circle"
|
||||
:label="$t('settings.email.labelNonce')"
|
||||
/>
|
||||
|
||||
<template slot="footer">
|
||||
<ds-button class="submit-button" icon="check" :disabled="errors" type="submit" primary>
|
||||
{{ $t('actions.save') }}
|
||||
</ds-button>
|
||||
</template>
|
||||
</ds-card>
|
||||
</template>
|
||||
</ds-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
formSchema: {
|
||||
nonce: { type: 'string', required: true },
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
form: {
|
||||
get: function() {
|
||||
const { email = '', nonce = '' } = this.$route.query
|
||||
return { email, nonce }
|
||||
},
|
||||
set: function(formData) {
|
||||
this.formData = formData
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
async submit() {
|
||||
const { email, nonce } = this.formData
|
||||
this.$router.replace({
|
||||
path: 'verify',
|
||||
query: { email, nonce },
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -68,7 +68,7 @@ export default {
|
||||
|
||||
setTimeout(() => {
|
||||
this.$router.push({
|
||||
path: 'my-email-address/verify-email-address-change',
|
||||
path: 'my-email-address/enter-nonce',
|
||||
query: { email },
|
||||
})
|
||||
}, 3000)
|
||||
|
||||
@ -1,97 +0,0 @@
|
||||
<template>
|
||||
<ds-card centered v-if="success">
|
||||
<transition name="ds-transition-fade">
|
||||
<sweetalert-icon icon="success" />
|
||||
</transition>
|
||||
<ds-text>
|
||||
{{ $t(`settings.email.change-successful`) }}
|
||||
</ds-text>
|
||||
</ds-card>
|
||||
<ds-form v-else v-model="form" :schema="formSchema" @submit="submit">
|
||||
<template slot-scope="{ errors }">
|
||||
<ds-card :header="$t('settings.email.name')">
|
||||
<ds-input
|
||||
id="email"
|
||||
model="email"
|
||||
icon="at"
|
||||
disabled
|
||||
:label="$t('settings.email.labelNewEmail')"
|
||||
/>
|
||||
<ds-input
|
||||
id="nonce"
|
||||
model="nonce"
|
||||
icon="question-circle"
|
||||
:label="$t('settings.email.labelNonce')"
|
||||
/>
|
||||
|
||||
<template slot="footer">
|
||||
<ds-button class="submit-button" icon="check" :disabled="errors" type="submit" primary>
|
||||
{{ $t('actions.save') }}
|
||||
</ds-button>
|
||||
</template>
|
||||
</ds-card>
|
||||
</template>
|
||||
</ds-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { VerifyEmailAddressMutation } from '~/graphql/EmailAddress.js'
|
||||
import { SweetalertIcon } from 'vue-sweetalert-icons'
|
||||
import { mapGetters, mapMutations } from 'vuex'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SweetalertIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formSchema: {
|
||||
nonce: { type: 'string', required: true },
|
||||
},
|
||||
success: false,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
currentUser: 'auth/user',
|
||||
}),
|
||||
form: {
|
||||
get: function() {
|
||||
const { email = '', nonce = '' } = this.$route.query
|
||||
return { email, nonce }
|
||||
},
|
||||
set: function(formData) {
|
||||
this.formData = formData
|
||||
},
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapMutations({
|
||||
setCurrentUser: 'auth/SET_USER',
|
||||
}),
|
||||
async submit() {
|
||||
const { email, nonce } = this.formData
|
||||
try {
|
||||
const {
|
||||
data: { VerifyEmailAddress },
|
||||
} = await this.$apollo.mutate({
|
||||
mutation: VerifyEmailAddressMutation,
|
||||
variables: { email, nonce },
|
||||
})
|
||||
this.setCurrentUser({
|
||||
...this.currentUser,
|
||||
email: VerifyEmailAddress.email,
|
||||
})
|
||||
this.$toast.success(this.$t('settings.email.change-successful'))
|
||||
this.success = true
|
||||
|
||||
setTimeout(() => {
|
||||
this.$router.push('/settings/my-email-address')
|
||||
}, 3000)
|
||||
} catch (err) {
|
||||
this.$toast.error(err.message)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
59
webapp/pages/settings/my-email-address/verify.vue
Normal file
59
webapp/pages/settings/my-email-address/verify.vue
Normal file
@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<ds-card centered>
|
||||
<client-only>
|
||||
<transition name="ds-transition-fade">
|
||||
<sweetalert-icon :icon="sweetAlertIcon" />
|
||||
</transition>
|
||||
</client-only>
|
||||
<ds-text v-if="success">
|
||||
{{ $t(`settings.email.change-successful`) }}
|
||||
</ds-text>
|
||||
<ds-text v-else>
|
||||
{{ $t(`settings.email.change-error`) }}
|
||||
<br />
|
||||
{{ $t(`settings.email.change-error-help`) }}
|
||||
</ds-text>
|
||||
</ds-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { VerifyEmailAddressMutation } from '~/graphql/EmailAddress.js'
|
||||
import { SweetalertIcon } from 'vue-sweetalert-icons'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SweetalertIcon,
|
||||
},
|
||||
computed: {
|
||||
sweetAlertIcon() {
|
||||
return this.success ? 'success' : 'error'
|
||||
},
|
||||
},
|
||||
created() {
|
||||
setTimeout(() => {
|
||||
this.$router.replace({ name: 'settings-my-email-address' })
|
||||
}, 3000)
|
||||
},
|
||||
async asyncData(context) {
|
||||
const {
|
||||
query,
|
||||
app: { apolloProvider },
|
||||
} = context
|
||||
const client = apolloProvider.defaultClient
|
||||
let success
|
||||
const { email = '', nonce = '' } = query
|
||||
|
||||
try {
|
||||
await client.mutate({
|
||||
mutation: VerifyEmailAddressMutation,
|
||||
variables: { email, nonce },
|
||||
})
|
||||
success = true
|
||||
} catch (error) {
|
||||
success = false
|
||||
}
|
||||
|
||||
return { success }
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user