76 lines
2.2 KiB
Vue
76 lines
2.2 KiB
Vue
<template>
|
|
<div class="main pusher" v-title="$gettext('Reset your password')">
|
|
<div class="ui vertical stripe segment">
|
|
<div class="ui small text container">
|
|
<h2>{{ $gettext('Reset your password') }}</h2>
|
|
<form class="ui form" @submit.prevent="submit()">
|
|
<div v-if="errors.length > 0" class="ui negative message">
|
|
<div class="header">{{ $gettext('Error while asking for a password reset') }}</div>
|
|
<ul class="list">
|
|
<li v-for="error in errors">{{ error }}</li>
|
|
</ul>
|
|
</div>
|
|
<p>{{ $gettext('Use this form to request a password reset. We will send an email to the given address with instructions to reset your password.') }}</p>
|
|
<div class="field">
|
|
<label>{{ $gettext('Account\'s email') }}</label>
|
|
<input
|
|
required
|
|
ref="email"
|
|
type="email"
|
|
autofocus
|
|
:placeholder="$gettext('Input the email address binded to your account')"
|
|
v-model="email">
|
|
</div>
|
|
<router-link :to="{path: '/login'}">
|
|
{{ $gettext('Back to login') }}
|
|
</router-link>
|
|
<button :class="['ui', {'loading': isLoading}, 'right', 'floated', 'green', 'button']" type="submit">
|
|
{{ $gettext('Ask for a password reset') }}</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios'
|
|
|
|
export default {
|
|
props: ['defaultEmail'],
|
|
data () {
|
|
return {
|
|
email: this.defaultEmail,
|
|
isLoading: false,
|
|
errors: []
|
|
}
|
|
},
|
|
mounted () {
|
|
this.$refs.email.focus()
|
|
},
|
|
methods: {
|
|
submit () {
|
|
let self = this
|
|
self.isLoading = true
|
|
self.errors = []
|
|
let payload = {
|
|
email: this.email
|
|
}
|
|
return axios.post('auth/password/reset/', payload).then(response => {
|
|
self.isLoading = false
|
|
self.$router.push({
|
|
name: 'auth.password-reset-confirm'
|
|
})
|
|
}, error => {
|
|
self.errors = error.backendErrors
|
|
self.isLoading = false
|
|
})
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style scoped>
|
|
</style>
|