import { KeyRound } from 'lucide-react'; import { useState, FormEventHandler } from 'react'; import { Head, Link, useForm } from '@inertiajs/react'; import InputError from '@/Components/InputError'; import { Button } from '@/Components/ui/button'; import { Input } from '@/Components/ui/input'; import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/Components/ui/input-otp'; import { Label } from '@/Components/ui/label'; import { LoadingButton } from '@/Components/ui/loading-button'; import AuthLayout from '@/Layouts/AuthLayout'; export default function TwoFactorChallenge() { const [useRecovery, setUseRecovery] = useState(false); const { data, setData, post, processing, errors } = useForm({ code: '', recovery_code: '', }); const handleSubmit: FormEventHandler = (e) => { e.preventDefault(); post(route('two-factor.challenge')); }; return (

Two-factor authentication

{useRecovery ? 'Enter one of your emergency recovery codes to access your account.' : 'Enter the 6-digit code from your authenticator app to continue.'}

{useRecovery ? (
setData('recovery_code', e.target.value)} autoComplete="one-time-code" autoFocus placeholder="XXXXX-XXXXX" aria-describedby={errors.code ? '2fa-error' : undefined} aria-invalid={!!errors.code} />
) : (
setData('code', value)} autoFocus >
)} Verify

Having trouble?{' '} Return to login

); }