import { useForm, Head } from '@inertiajs/react'; import classNames from 'classnames'; import React, { useRef, useState } from 'react'; import useRoute from '@/Hooks/useRoute'; import AuthenticationCard from '@/Components/AuthenticationCard'; import InputLabel from '@/Components/InputLabel'; import PrimaryButton from '@/Components/PrimaryButton'; import TextInput from '@/Components/TextInput'; import InputError from '@/Components/InputError'; export default function TwoFactorChallenge() { const route = useRoute(); const [recovery, setRecovery] = useState(false); const form = useForm({ code: '', recovery_code: '', }); const recoveryCodeRef = useRef(null); const codeRef = useRef(null); function toggleRecovery(e: React.FormEvent) { e.preventDefault(); const isRecovery = !recovery; setRecovery(isRecovery); setTimeout(() => { if (isRecovery) { recoveryCodeRef.current?.focus(); form.setData('code', ''); } else { codeRef.current?.focus(); form.setData('recovery_code', ''); } }, 100); } function onSubmit(e: React.FormEvent) { e.preventDefault(); form.post(route('two-factor.login')); } return (
{recovery ? 'Please confirm access to your account by entering one of your emergency recovery codes.' : 'Please confirm access to your account by entering the authentication code provided by your authenticator application.'}
{recovery ? (
Recovery Code form.setData('recovery_code', e.currentTarget.value) } ref={recoveryCodeRef} autoComplete="one-time-code" />
) : (
Code form.setData('code', e.currentTarget.value)} autoFocus autoComplete="one-time-code" ref={codeRef} />
)}
Log in
); }