import React, { useState } from 'react';
import { Head, useForm, router } from '@inertiajs/react';
import { swal } from '@/lib/swal';
interface Props {
type: 'email' | 'totp';
}
export default function TwoFactorChallenge({ type = 'totp' }: Props) {
const [useRecovery, setUseRecovery] = useState(false);
const { data, setData, post, processing, errors } = useForm({ code: '' });
const [resending, setResending] = useState(false);
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
post(route('two-factor.verify'), { preserveScroll: true });
};
const handleResend = () => {
if (resending) return;
setResending(true);
router.post(route('two-factor.resend'), {}, {
preserveScroll: true,
onSuccess: () => {
setResending(false);
swal.success('Sent!', 'A new verification code has been sent to your email.');
},
onError: (err) => {
setResending(false);
swal.error('Error', err.code || 'Failed to resend verification code.');
}
});
};
const isEmail = type === 'email';
return (
{/* Logo / Header */}
{isEmail && !useRecovery ? (
) : (
)}
Two-Factor Authentication
{useRecovery
? 'Enter a recovery code to continue.'
: isEmail
? 'Please enter the 6-digit verification code sent to your registered email address.'
: 'Please enter the 6-digit authentication code from your authenticator app.'
}