import InputError from '@/components/input-error'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { InputOTP, InputOTPGroup, InputOTPSlot, } from '@/components/ui/input-otp'; import { OTP_MAX_LENGTH } from '@/hooks/use-two-factor-auth'; import AuthLayout from '@/layouts/auth-layout'; import { store } from '@/routes/two-factor/login'; import { Form, Head } from '@inertiajs/react'; import { REGEXP_ONLY_DIGITS } from 'input-otp'; import { useMemo, useState } from 'react'; export default function TwoFactorChallenge() { const [showRecoveryInput, setShowRecoveryInput] = useState(false); const [code, setCode] = useState(''); const authConfigContent = useMemo<{ title: string; description: string; toggleText: string; }>(() => { if (showRecoveryInput) { return { title: 'Recovery Code', description: 'Please confirm access to your account by entering one of your emergency recovery codes.', toggleText: 'login using an authentication code', }; } return { title: 'Authentication Code', description: 'Enter the authentication code provided by your authenticator application.', toggleText: 'login using a recovery code', }; }, [showRecoveryInput]); const toggleRecoveryMode = (clearErrors: () => void): void => { setShowRecoveryInput(!showRecoveryInput); clearErrors(); setCode(''); }; return (

{({ errors, processing, clearErrors }) => ( <> {showRecoveryInput ? ( <> ) : (

setCode(value)} disabled={processing} pattern={REGEXP_ONLY_DIGITS} > {Array.from( { length: OTP_MAX_LENGTH }, (_, index) => ( ), )}

)}

or you can

)}

); }