import { Form, Head, setLayoutProps } from '@inertiajs/react'; import { REGEXP_ONLY_DIGITS } from 'input-otp'; import { useMemo, useState } from 'react'; 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 { useT } from '@/lib/i18n'; import { authHelperTextClass, authInputClass, authLinkClass, authOtpSlotClass, authPrimaryButtonClass, } from '@/pages/auth/styles'; import { store } from '@/routes/two-factor/login'; export default function TwoFactorChallenge() { const { t } = useT(); const [showRecoveryInput, setShowRecoveryInput] = useState(false); const [code, setCode] = useState(''); const authConfigContent = useMemo<{ title: string; description: string; toggleText: string; }>(() => { if (showRecoveryInput) { return { title: t('Recovery code'), description: t( 'Please confirm access to your account by entering one of your emergency recovery codes.', ), toggleText: t('login using an authentication code'), }; } return { title: t('Authentication code'), description: t( 'Enter the authentication code provided by your authenticator application.', ), toggleText: t('login using a recovery code'), }; }, [showRecoveryInput, t]); setLayoutProps({ title: authConfigContent.title, description: authConfigContent.description, }); const toggleRecoveryMode = (clearErrors: () => void): void => { setShowRecoveryInput(!showRecoveryInput); clearErrors(); setCode(''); }; return ( <>

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

setCode(value)} disabled={processing} pattern={REGEXP_ONLY_DIGITS} autoFocus containerClassName="justify-center gap-2.5" > {Array.from( { length: OTP_MAX_LENGTH }, (_, index) => ( ), )}

)}

{t('or you can')}

)}

); }