opnform/client/pages/auth/password/reset.vue

72 lines
1.6 KiB
Vue

<template>
<div>
<div class="flex mt-6 mb-10">
<div class="w-full md:w-2/3 md:mx-auto md:max-w-md px-4">
<h1 class="my-6">
Reset Password
</h1>
<form @submit.prevent="reset" @keydown="form.onKeydown($event)">
<alert-success class="mb-4" :form="form" :message="status" />
<!-- Email -->
<text-input name="email" :form="form" label="Email" :required="true" />
<!-- Password -->
<text-input class="mt-8" native-type="password"
name="password" :form="form" label="Password" :required="true"
/>
<!-- Password Confirmation-->
<text-input class="mt-8" native-type="password"
name="password_confirmation" :form="form" label="Confirm Password" :required="true"
/>
<!-- Submit Button -->
<v-button class="w-full" :loading="form.busy">
Reset Password
</v-button>
</form>
</div>
</div>
<open-form-footer />
</div>
</template>
<script>
export default {
setup () {
definePageMeta({
middleware: "guest"
})
useOpnSeoMeta({
title: 'Reset Password'
})
},
data: () => ({
status: '',
form: useForm({
token: '',
email: '',
password: '',
password_confirmation: ''
})
}),
created () {
this.form.email = this.$route.query.email
this.form.token = this.$route.params.token
},
methods: {
async reset () {
const { data } = await this.form.post('/password/reset')
this.status = data.status
this.form.reset()
}
}
}
</script>