import { Form, Head, Link, router } from '@inertiajs/react'; import { ArrowLeft, MailCheck } from 'lucide-react'; import { useEffect, useState } from 'react'; import AuthHeading from '@/components/auth/auth-heading'; import OtpCodeInput from '@/components/auth/otp-code-input'; import ResetSteps from '@/components/auth/reset-steps'; import InputError from '@/components/input-error'; import { Spinner } from '@/components/ui/spinner'; import { login } from '@/routes'; import { request } from '@/routes/password'; import { resend, verify } from '@/routes/password/code'; type Props = { email: string; codeLength: number; resendAvailableIn: number; status?: string; }; export default function ForgotPasswordCode({ email, codeLength, resendAvailableIn, status, }: Props) { const [code, setCode] = useState(''); const [secondsLeft, setSecondsLeft] = useState(resendAvailableIn); const [resending, setResending] = useState(false); useEffect(() => { if (secondsLeft <= 0) { return; } const timer = setTimeout(() => setSecondsLeft(secondsLeft - 1), 1000); return () => clearTimeout(timer); }, [secondsLeft]); const handleResend = () => { router.post( resend.url(), {}, { preserveScroll: true, onStart: () => setResending(true), onFinish: () => setResending(false), onSuccess: (page) => { setCode(''); setSecondsLeft(page.props.resendAvailableIn as number); }, }, ); }; return ( <> If an account exists for{' '} {email} , you’ll get a {codeLength} digit code.{' '} Change email } /> {status === 'code-sent' && (
A new code has been sent to your email address.
)}
setCode('')} > {({ processing, errors }) => ( <>
Didn’t get the code?{' '} {secondsLeft > 0 ? ( Resend in{' '} 0:{String(secondsLeft).padStart(2, '0')} ) : ( )}
)} Back to login ); }