feat: register server-side validation + forgot password UI
This commit is contained in:
Nicolas Giard
@@ -45,7 +45,7 @@
|
||||
:placeholder='$t("auth:fields.password")'
|
||||
@keyup.enter='login'
|
||||
)
|
||||
template(v-if='screen === "tfa"')
|
||||
template(v-else-if='screen === "tfa"')
|
||||
.body-2 Enter the security code generated from your trusted device:
|
||||
v-text-field.md2.centered.mt-2(
|
||||
solo
|
||||
@@ -57,6 +57,18 @@
|
||||
:placeholder='$t("auth:tfa.placeholder")'
|
||||
@keyup.enter='verifySecurityCode'
|
||||
)
|
||||
template(v-else-if='screen === "forgot"')
|
||||
.body-2 {{ $t('auth:forgotPasswordSubtitle') }}
|
||||
v-text-field.md2.mt-3(
|
||||
solo
|
||||
flat
|
||||
prepend-icon='email'
|
||||
background-color='grey lighten-4'
|
||||
hide-details
|
||||
ref='iptEmailForgot'
|
||||
v-model='username'
|
||||
:placeholder='$t("auth:fields.email")'
|
||||
)
|
||||
v-card-actions.pb-4
|
||||
v-spacer
|
||||
v-btn.md2(
|
||||
@@ -69,7 +81,7 @@
|
||||
:loading='isLoading'
|
||||
) {{ $t('auth:actions.login') }}
|
||||
v-btn.md2(
|
||||
v-if='screen === "tfa"'
|
||||
v-else-if='screen === "tfa"'
|
||||
block
|
||||
large
|
||||
color='primary'
|
||||
@@ -77,12 +89,25 @@
|
||||
round
|
||||
:loading='isLoading'
|
||||
) {{ $t('auth:tfa.verifyToken') }}
|
||||
v-btn.md2(
|
||||
v-else-if='screen === "forgot"'
|
||||
block
|
||||
large
|
||||
color='primary'
|
||||
@click='forgotPasswordSubmit'
|
||||
round
|
||||
:loading='isLoading'
|
||||
) {{ $t('auth:sendResetPassword') }}
|
||||
v-spacer
|
||||
v-card-actions.pb-3(v-if='selectedStrategy.key === "local"')
|
||||
v-card-actions.pb-3(v-if='screen === "login" && selectedStrategy.key === "local"')
|
||||
v-spacer
|
||||
a.caption(href='') {{ $t('auth:forgotPasswordLink') }}
|
||||
a.caption(@click.stop.prevent='forgotPassword', href='#forgot') {{ $t('auth:forgotPasswordLink') }}
|
||||
v-spacer
|
||||
template(v-if='isSocialShown')
|
||||
v-card-actions.pb-3(v-else-if='screen === "forgot"')
|
||||
v-spacer
|
||||
a.caption(@click.stop.prevent='screen = `login`', href='#cancelforgot') {{ $t('auth:forgotPasswordCancel') }}
|
||||
v-spacer
|
||||
template(v-if='screen === "login" && isSocialShown')
|
||||
v-divider
|
||||
v-card-text.grey.lighten-4.text-xs-center
|
||||
.pb-2.body-2.text-xs-center.grey--text.text--darken-2 {{ $t('auth:orLoginUsingStrategy') }}
|
||||
@@ -95,7 +120,7 @@
|
||||
@click='selectStrategy(strategy)'
|
||||
)
|
||||
span {{ strategy.title }}
|
||||
template(v-if='selectedStrategy.selfRegistration')
|
||||
template(v-if='screen === "login" && selectedStrategy.selfRegistration')
|
||||
v-divider
|
||||
v-card-actions.py-3(:class='isSocialShown ? "" : "grey lighten-4"')
|
||||
v-spacer
|
||||
@@ -286,6 +311,19 @@ export default {
|
||||
this.isLoading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
forgotPassword() {
|
||||
this.screen = 'forgot'
|
||||
this.$nextTick(() => {
|
||||
this.$refs.iptEmailForgot.focus()
|
||||
})
|
||||
},
|
||||
async forgotPasswordSubmit() {
|
||||
this.$store.commit('showNotification', {
|
||||
style: 'pink',
|
||||
message: 'Coming soon!',
|
||||
icon: 'free_breakfast'
|
||||
})
|
||||
}
|
||||
},
|
||||
apollo: {
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
offset-lg3, lg6
|
||||
offset-xl4, xl4
|
||||
)
|
||||
transition(name='zoom')
|
||||
transition(name='fadeUp')
|
||||
v-card.elevation-5.md2(v-show='isShown')
|
||||
v-toolbar(color='indigo', flat, dense, dark)
|
||||
v-spacer
|
||||
@@ -43,6 +43,7 @@
|
||||
:placeholder='$t("auth:fields.password")'
|
||||
color='indigo'
|
||||
loading
|
||||
counter='255'
|
||||
)
|
||||
password-strength(slot='progress', v-model='password')
|
||||
v-text-field.md2.mt-2(
|
||||
@@ -63,12 +64,12 @@
|
||||
flat
|
||||
prepend-icon='person'
|
||||
background-color='grey lighten-4'
|
||||
hide-details
|
||||
ref='iptName'
|
||||
v-model='name'
|
||||
:placeholder='$t("auth:fields.name")'
|
||||
@keyup.enter='register'
|
||||
color='indigo'
|
||||
counter='255'
|
||||
)
|
||||
v-card-actions.pb-4
|
||||
v-spacer
|
||||
@@ -116,7 +117,9 @@ export default {
|
||||
name: '',
|
||||
hidePassword: true,
|
||||
isLoading: false,
|
||||
isShown: false
|
||||
isShown: false,
|
||||
loaderColor: 'grey darken-4',
|
||||
loaderTitle: 'Working...'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@@ -211,6 +214,8 @@ export default {
|
||||
this.$refs.iptName.focus()
|
||||
}
|
||||
} else {
|
||||
this.loaderColor = 'grey darken-4'
|
||||
this.loaderTitle = this.$t('auth:registering')
|
||||
this.isLoading = true
|
||||
try {
|
||||
let resp = await this.$apollo.mutate({
|
||||
@@ -224,11 +229,8 @@ export default {
|
||||
if (_.has(resp, 'data.authentication.register')) {
|
||||
let respObj = _.get(resp, 'data.authentication.register', {})
|
||||
if (respObj.responseResult.succeeded === true) {
|
||||
this.$store.commit('showNotification', {
|
||||
message: 'Account created successfully! Redirecting...',
|
||||
style: 'success',
|
||||
icon: 'check'
|
||||
})
|
||||
this.loaderColor = 'green'
|
||||
this.loaderTitle = this.$t('auth:registerSuccess')
|
||||
Cookies.set('jwt', respObj.jwt, { expires: 365 })
|
||||
_.delay(() => {
|
||||
window.location.replace('/')
|
||||
@@ -237,7 +239,7 @@ export default {
|
||||
throw new Error(respObj.responseResult.message)
|
||||
}
|
||||
} else {
|
||||
throw new Error('Registration is unavailable at this time.')
|
||||
throw new Error(this.$t('auth:genericError'))
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
|
||||
Reference in New Issue
Block a user