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 { store } from '@/routes/two-factor/login'; export default function TwoFactorChallenge({ qaAccount, }: { qaAccount?: { id: number; email: string }; }) { const [showRecoveryInput, setShowRecoveryInput] = useState(false); const [code, setCode] = useState(''); const authConfigContent = useMemo<{ title: string; description: string; toggleText: string; }>(() => { if (showRecoveryInput) { return { title: 'Código de recuperação', description: 'Confirme o acesso à conta com um dos seus códigos de recuperação.', toggleText: 'entrar com um código de autenticação', }; } return { title: 'Código de autenticação', description: 'Introduza o código apresentado pela sua aplicação autenticadora.', toggleText: 'entrar com um código de recuperação', }; }, [showRecoveryInput]); setLayoutProps({ title: authConfigContent.title, description: authConfigContent.description, }); const toggleRecoveryMode = (clearErrors: () => void): void => { setShowRecoveryInput(!showRecoveryInput); clearErrors(); setCode(''); }; return ( <> {qaAccount && (

MFA da conta QA {qaAccount.id}: {qaAccount.email}. Confirme com o autenticador desta conta.

)}

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

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

)}

or you can

)}

); }