106 lines
2.7 KiB
Vue
106 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import type { AuthFormField, FormSubmitEvent } from '@nuxt/ui'
|
|
import { useForm } from '@inertiajs/vue3'
|
|
import * as v from 'valibot'
|
|
import { computed } from 'vue'
|
|
import { useAuth } from '@/composables/useAuth'
|
|
import AuthLayout from '@/layouts/AuthLayout.vue'
|
|
|
|
const props = defineProps<{
|
|
email: string
|
|
token: string
|
|
}>()
|
|
|
|
const { config } = useAuth()
|
|
|
|
const form = useForm({
|
|
token: props.token,
|
|
email: props.email,
|
|
password: '',
|
|
password_confirmation: '',
|
|
})
|
|
|
|
const fields: AuthFormField[] = [
|
|
{
|
|
name: 'email',
|
|
type: 'email',
|
|
label: 'Email',
|
|
placeholder: 'Enter your email',
|
|
required: true,
|
|
},
|
|
{
|
|
name: 'password',
|
|
type: 'password',
|
|
label: 'New password',
|
|
placeholder: 'Enter your new password',
|
|
required: true,
|
|
},
|
|
{
|
|
name: 'password_confirmation',
|
|
type: 'password',
|
|
label: 'Confirm password',
|
|
placeholder: 'Confirm your new password',
|
|
required: true,
|
|
},
|
|
]
|
|
|
|
const schema = v.pipe(
|
|
v.object({
|
|
email: v.pipe(v.string('Email is required'), v.nonEmpty('Email is required'), v.email('Please enter a valid email')),
|
|
password: v.pipe(v.string('Password is required'), v.nonEmpty('Password is required'), v.minLength(8, 'Password must be at least 8 characters')),
|
|
password_confirmation: v.pipe(v.string('Please confirm your password'), v.nonEmpty('Please confirm your password')),
|
|
}),
|
|
v.forward(
|
|
v.partialCheck(
|
|
[['password'], ['password_confirmation']],
|
|
input => input.password === input.password_confirmation,
|
|
'Passwords do not match',
|
|
),
|
|
['password_confirmation'],
|
|
),
|
|
)
|
|
|
|
type Schema = v.InferOutput<typeof schema>
|
|
|
|
function onSubmit(event: FormSubmitEvent<Schema>) {
|
|
form.email = event.data.email
|
|
form.password = event.data.password
|
|
form.password_confirmation = event.data.password_confirmation
|
|
|
|
form.post('/reset-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.resetPassword.submit_label, loading: form.processing }"
|
|
:disabled="form.processing"
|
|
:ui="{ header: 'hidden' }"
|
|
@submit="onSubmit"
|
|
>
|
|
<template v-if="hasErrors" #validation>
|
|
<UAlert
|
|
color="error"
|
|
icon="i-lucide-alert-circle"
|
|
:title="firstError"
|
|
/>
|
|
</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>
|