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 { CaretRightIcon } from '@phosphor-icons/react'; import { REGEXP_ONLY_DIGITS } from 'input-otp'; import { useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; export default function TwoFactorChallenge() { const { t } = useTranslation(); 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]); 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) => ( ))}
)}
{t('or you can')}
)}
); }