import { Form, Head, setLayoutProps } from '@inertiajs/react'; import { motion } from 'framer-motion'; 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'; const itemVariants = { hidden: { opacity: 0, y: 15 }, visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: [0.22, 1, 0.36, 1] } } }; 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: 'Code de récupération', description: 'Confirmez l’accès à votre compte en saisissant l’un de vos codes de récupération d’urgence.', toggleText: 'vous connecter avec un code d’authentification', }; } return { title: 'Code d’authentification', description: 'Saisissez le code fourni par votre application d’authentification.', toggleText: 'vous connecter avec un code de récupération', }; }, [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 className="transition-all duration-300 hover:scale-[1.01]" > {Array.from( { length: OTP_MAX_LENGTH }, (_, index) => ( ), )}

)} ou vous pouvez )}

); }