Mike
50 lines
1.5 KiB
Vue
50 lines
1.5 KiB
Vue
<template>
|
|
<form class="mx-auto w-full px-2" @submit="onSubmit">
|
|
<h1 class="text-heading-xl text-center inline-block mb-4 w-full">
|
|
Reset your password
|
|
</h1>
|
|
<div class="flex flex-col space-y-4">
|
|
<div class="text-body-xs text-foreground text-center mb-2">
|
|
Enter your email address and we'll send you the password reset instructions.
|
|
</div>
|
|
<div>
|
|
<FormTextInput
|
|
name="resetEmail"
|
|
color="foundation"
|
|
size="lg"
|
|
type="email"
|
|
placeholder="email@example.com"
|
|
:rules="emailRules"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-y-2 mt-8">
|
|
<FormButton submit full-width size="lg" :disabled="loading">
|
|
Send reset email
|
|
</FormButton>
|
|
<FormButton color="outline" size="lg" full-width :to="homeRoute">
|
|
Back to login
|
|
</FormButton>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { useForm } from 'vee-validate'
|
|
import { homeRoute } from '~/lib/common/helpers/route'
|
|
import { usePasswordReset } from '~~/lib/auth/composables/passwordReset'
|
|
import { isEmail, isRequired } from '~~/lib/common/helpers/validation'
|
|
|
|
type FormValues = { resetEmail: string }
|
|
|
|
const { handleSubmit } = useForm<FormValues>()
|
|
const { sendResetEmail } = usePasswordReset()
|
|
|
|
const emailRules = [isEmail, isRequired]
|
|
const loading = ref(false)
|
|
|
|
const onSubmit = handleSubmit(
|
|
async ({ resetEmail }) => await sendResetEmail(resetEmail)
|
|
)
|
|
</script>
|