blessing-skin-server/resources/assets/src/views/auth/Forgot.vue
2019-03-27 11:09:11 +08:00

97 lines
2.3 KiB
Vue

<template>
<form>
<div class="form-group has-feedback">
<input
ref="email"
v-model="email"
type="email"
class="form-control"
:placeholder="$t('auth.email')"
>
<span class="glyphicon glyphicon-envelope form-control-feedback" />
</div>
<captcha ref="captcha" />
<div class="callout callout-success" :class="{ hide: !successMsg }">{{ successMsg }}</div>
<div class="callout callout-info" :class="{ hide: !infoMsg }">{{ infoMsg }}</div>
<div class="callout callout-warning" :class="{ hide: !warningMsg }">{{ warningMsg }}</div>
<div class="row">
<div class="col-xs-8">
<a v-t="'auth.forgot.login-link'" :href="`${baseUrl}/auth/login`" class="text-center" />
</div>
<div class="col-xs-4">
<button v-if="pending" disabled class="btn btn-primary btn-block btn-flat">
<i class="fa fa-spinner fa-spin" /> {{ $t('auth.sending') }}
</button>
<button
v-else
class="btn btn-primary btn-block btn-flat"
@click.prevent="submit"
>
{{ $t('auth.forgot.button') }}
</button>
</div>
</div>
</form>
</template>
<script>
import Captcha from '../../components/Captcha.vue'
export default {
name: 'Forgot',
components: {
Captcha,
},
props: {
baseUrl: {
type: String,
default: blessing.base_url,
},
},
data: () => ({
email: '',
successMsg: '',
infoMsg: '',
warningMsg: '',
pending: false,
}),
methods: {
async submit() {
const { email } = this
if (!email) {
this.infoMsg = this.$t('auth.emptyEmail')
this.$refs.email.focus()
return
}
if (!/\S+@\S+\.\S+/.test(email)) {
this.infoMsg = this.$t('auth.invalidEmail')
this.$refs.email.focus()
return
}
this.pending = true
const { errno, msg } = await this.$http.post(
'/auth/forgot',
{ email, captcha: await this.$refs.captcha.execute() }
)
if (errno === 0) {
this.infoMsg = ''
this.warningMsg = ''
this.successMsg = msg
this.pending = false
} else {
this.infoMsg = ''
this.warningMsg = msg
this.pending = false
this.$refs.captcha.refresh()
}
},
},
}
</script>