import { Head } from '@inertiajs/react'; import type { FormEvent } from 'react'; import InputError from '@/components/InputError'; import PasswordInput from '@/components/PasswordInput'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Spinner } from '@/components/ui/spinner'; import { useYupForm } from '@/hooks/use-yup-form'; import { PASSWORD_HINT } from '@/lib/field-constraints'; import { resetPasswordSchema } from '@/lib/validation/auth'; import { update } from '@/routes/password'; type Props = { token: string; email: string; }; export default function ResetPassword({ token, email }: Props) { const { data, setData, processing, errors, validateField, submit } = useYupForm(resetPasswordSchema, { token, email, password: '', password_confirmation: '', }); const handleSubmit = (e: FormEvent) => { e.preventDefault(); submit((form) => form.post(update().url, { onFinish: () => form.reset('password', 'password_confirmation'), }), ); }; return ( <>
setData('password', e.target.value) } onBlur={() => validateField('password')} autoFocus placeholder="Password" />

{PASSWORD_HINT}

setData('password_confirmation', e.target.value) } onBlur={() => validateField('password_confirmation') } placeholder="Confirm password" />
); } ResetPassword.layout = { title: 'Reset password', description: 'Please enter your new password below', };