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() { const [showRecoveryInput, setShowRecoveryInput] = useState(false); const [code, setCode] = useState(''); const authConfigContent = useMemo<{ title: string; description: string; toggleText: string; }>(() => { if (showRecoveryInput) { return { title: 'Kode pemulihan', description: 'Silakan konfirmasi akses ke akun Anda dengan memasukkan salah satu kode pemulihan darurat Anda.', toggleText: 'masuk menggunakan kode autentikasi', }; } return { title: 'Kode autentikasi', description: 'Masukkan kode autentikasi yang diberikan oleh aplikasi autentikator Anda.', toggleText: 'masuk menggunakan kode pemulihan', }; }, [showRecoveryInput]); 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 > {Array.from( { length: OTP_MAX_LENGTH }, (_, index) => ( ), )}

)}

atau Anda bisa

)}

); }