Refactor ResetPassword to remove thx page, a start

This commit is contained in:
Wolfgang Huß 2022-04-29 11:41:32 +02:00
parent 5c89fe545d
commit 28f85cce87

View File

@ -1,55 +1,66 @@
<template> <template>
<div class="resetpwd-form"> <div class="resetpwd-form">
<b-container> <div v-if="!showPageMessage">
<div class="header p-4" ref="header"> <b-container>
<div class="header-body text-center mb-7"> <div class="header p-4" ref="header">
<b-row class="justify-content-center"> <div class="header-body text-center mb-7">
<b-col xl="5" lg="6" md="8" class="px-2"> <b-row class="justify-content-center">
<!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys--> <b-col xl="5" lg="6" md="8" class="px-2">
<h1>{{ $t(displaySetup.title) }}</h1> <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
<div class="pb-4"> <h1>{{ $t(displaySetup.title) }}</h1>
<span> <div class="pb-4">
<!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys--> <span>
{{ $t(displaySetup.text) }} <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
</span> {{ $t(displaySetup.text) }}
</div> </span>
</b-col> </div>
</b-row> </b-col>
</b-row>
</div>
</div> </div>
</div> </b-container>
</b-container> <b-container class="mt--8 p-1">
<b-container class="mt--8 p-1"> <b-row class="justify-content-center">
<b-row class="justify-content-center"> <b-col lg="6" md="8">
<b-col lg="6" md="8"> <b-card no-body class="border-0 gradido-custom-background">
<b-card no-body class="border-0 gradido-custom-background"> <b-card-body class="p-4">
<b-card-body class="p-4"> <validation-observer ref="observer" v-slot="{ handleSubmit }">
<validation-observer ref="observer" v-slot="{ handleSubmit }"> <b-form role="form" @submit.prevent="handleSubmit(onSubmit)">
<b-form role="form" @submit.prevent="handleSubmit(onSubmit)"> <input-password-confirmation v-model="form" />
<input-password-confirmation v-model="form" /> <div class="text-center">
<div class="text-center"> <b-button type="submit" variant="primary" class="mt-4">
<b-button type="submit" variant="primary" class="mt-4"> <!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys-->
<!-- eslint-disable-next-line @intlify/vue-i18n/no-dynamic-keys--> {{ $t(displaySetup.button) }}
{{ $t(displaySetup.button) }} </b-button>
</b-button> </div>
</div> </b-form>
</b-form> </validation-observer>
</validation-observer> </b-card-body>
</b-card-body> </b-card>
</b-card> </b-col>
</b-col> </b-row>
</b-row> <b-row v-if="displaySetup.linkTo">
<b-row v-if="displaySetup.linkTo"> <b-col class="text-center py-lg-4">
<b-col class="text-center py-lg-4"> <router-link :to="displaySetup.linkTo" class="mt-3">{{ $t('back') }}</router-link>
<router-link :to="displaySetup.linkTo" class="mt-3">{{ $t('back') }}</router-link> </b-col>
</b-col> </b-row>
</b-row> </b-container>
</b-container> </div>
<div v-else>
<message
:headline="$t('site.thx.errorTitle')"
:subtitle="errorMessage"
:buttonText="$t('settings.password.reset')"
linkTo="/forgot-password/resetPassword"
/>
</div>
</div> </div>
</template> </template>
<script> <script>
import InputPasswordConfirmation from '@/components/Inputs/InputPasswordConfirmation'
import { setPassword } from '@/graphql/mutations' import { setPassword } from '@/graphql/mutations'
import { queryOptIn } from '@/graphql/queries' import { queryOptIn } from '@/graphql/queries'
import InputPasswordConfirmation from '@/components/Inputs/InputPasswordConfirmation'
import Message from '@/components/Message/Message'
const textFields = { const textFields = {
reset: { reset: {
@ -64,9 +75,10 @@ const textFields = {
button: 'settings.password.set', button: 'settings.password.set',
linkTo: '/login', linkTo: '/login',
}, },
// Wolle: seems unused
login: { login: {
headline: 'site.thx.errorTitle', headline: 'site.thx.errorTitle',
subtitle: 'site.thx.activateEmail', subtitle: 'site.thx.activateEmail', // Wolle: error.backend.ERR_EMAIL_NOT_VALIDATED
}, },
} }
@ -74,6 +86,7 @@ export default {
name: 'ResetPassword', name: 'ResetPassword',
components: { components: {
InputPasswordConfirmation, InputPasswordConfirmation,
Message,
}, },
data() { data() {
return { return {
@ -82,6 +95,8 @@ export default {
passwordRepeat: '', passwordRepeat: '',
}, },
displaySetup: {}, displaySetup: {},
showPageMessage: false,
errorMessage: '',
} }
}, },
methods: { methods: {
@ -107,13 +122,21 @@ export default {
} }
}) })
.catch((error) => { .catch((error) => {
this.toastError(error.message) let errorMessage
// Wolle: how to solve this with error codes?
if ( if (
error.message.match( error.message.match(
/email was sent more than ([0-9]+ hours)?( and )?([0-9]+ minutes)? ago/, /email was sent more than ([0-9]+ hours)?( and )?([0-9]+ minutes)? ago/,
) )
) ) {
this.$router.push('/forgot-password/resetPassword') // Wolle: this.$router.push('/forgot-password/resetPassword')
errorMessage = error.message
} else {
errorMessage = error.message
}
this.showPageMessage = true
this.toastError(errorMessage)
this.errorSubtitle = errorMessage
}) })
}, },
checkOptInCode() { checkOptInCode() {
@ -126,6 +149,7 @@ export default {
}) })
.then() .then()
.catch((error) => { .catch((error) => {
// Wolle: show message as well?
this.toastError(error.message) this.toastError(error.message)
this.$router.push('/forgot-password/resetPassword') this.$router.push('/forgot-password/resetPassword')
}) })