75 lines
1.8 KiB
Vue
75 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import type { AuthFormField, FormSubmitEvent } from '@nuxt/ui'
|
|
import type * as v from 'valibot'
|
|
import { useForm } from '@inertiajs/vue3'
|
|
import { computed } from 'vue'
|
|
import { useAuth } from '@/composables/useAuth'
|
|
import AuthLayout from '@/layouts/AuthLayout.vue'
|
|
import { forgotPasswordSchema } from '@/validation/auth'
|
|
|
|
const { config, flash } = useAuth()
|
|
|
|
const form = useForm('ForgotPasswordForm', {
|
|
email: '',
|
|
})
|
|
|
|
const fields: AuthFormField[] = [
|
|
{
|
|
name: 'email',
|
|
type: 'email',
|
|
label: 'Email',
|
|
placeholder: 'Enter your email',
|
|
required: true,
|
|
},
|
|
]
|
|
|
|
const schema = forgotPasswordSchema
|
|
|
|
type Schema = v.InferOutput<typeof schema>
|
|
|
|
function onSubmit(event: FormSubmitEvent<Schema>) {
|
|
form.email = event.data.email
|
|
form.post('/forgot-password')
|
|
}
|
|
|
|
const hasErrors = computed(() => Object.keys(form.errors).length > 0)
|
|
const firstError = computed(() => Object.values(form.errors)[0])
|
|
</script>
|
|
|
|
<template>
|
|
<AuthLayout>
|
|
<UAuthForm
|
|
:schema="schema"
|
|
:fields="fields"
|
|
:submit="{ label: config.forgotPassword.submit_label, loading: form.processing }"
|
|
:disabled="form.processing"
|
|
:ui="{ header: 'hidden' }"
|
|
@submit="onSubmit"
|
|
>
|
|
<template v-if="hasErrors || flash.status" #validation>
|
|
<UAlert
|
|
v-if="hasErrors"
|
|
color="error"
|
|
icon="i-lucide-alert-circle"
|
|
:title="firstError"
|
|
/>
|
|
<UAlert
|
|
v-if="flash.status"
|
|
color="success"
|
|
icon="i-lucide-check-circle"
|
|
:title="flash.status"
|
|
/>
|
|
</template>
|
|
|
|
<template #footer>
|
|
<span class="text-muted">
|
|
Remember your password?
|
|
<ULink to="/login" class="text-primary font-medium">
|
|
Sign in
|
|
</ULink>
|
|
</span>
|
|
</template>
|
|
</UAuthForm>
|
|
</AuthLayout>
|
|
</template>
|