import { Head, useForm, Link, router } from '@inertiajs/react'; import { FormEvent, useEffect, useState } from 'react'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp'; import { Lock, ShieldCheck, Eye, EyeOff } from 'lucide-react'; import { toast } from 'sonner'; interface LoginProps { canResetPassword: boolean; status?: string; otpRequired?: boolean; otpEmail?: string; } export default function Login({ canResetPassword, status, otpRequired, otpEmail }: LoginProps) { const [step, setStep] = useState<'login' | 'otp'>(otpRequired ? 'otp' : 'login'); const [email, setEmail] = useState(otpEmail ?? ''); const [otp, setOtp] = useState(''); const [otpLoading, setOtpLoading] = useState(false); const [resendIn, setResendIn] = useState(0); const [resending, setResending] = useState(false); const [showPassword, setShowPassword] = useState(false); // Inertia re-renders this page with the OTP flash data after the password POST. // useState only honours the initializer on first mount, so sync the step to the prop. useEffect(() => { if (otpRequired) { setStep('otp'); if (otpEmail) setEmail(otpEmail); setResendIn(60); } }, [otpRequired, otpEmail]); // 60-second resend cooldown ticker useEffect(() => { if (resendIn <= 0) return; const t = setTimeout(() => setResendIn((s) => s - 1), 1000); return () => clearTimeout(t); }, [resendIn]); const resendOtp = async () => { if (resendIn > 0 || resending) return; setResending(true); try { const csrf = (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement | null)?.content ?? ''; const res = await fetch('/api/functions/send-admin-otp', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, Accept: 'application/json' }, body: JSON.stringify({ email }), }); if (res.status === 429) { toast.error('Too many requests. Please wait a minute and try again.'); setResendIn(60); return; } const body = await res.json().catch(() => ({})); if (!res.ok || body?.error) { toast.error(body?.error ?? 'Could not resend code'); } else { toast.success('A new code has been sent'); setOtp(''); setResendIn(60); } } catch { toast.error('Network error — please try again'); } finally { setResending(false); } }; const { data, setData, post, processing, errors } = useForm({ email: otpEmail ?? '', password: '', remember: false, }); const submit = (e: FormEvent) => { e.preventDefault(); post(route('login')); }; const verifyOtp = async (e: FormEvent) => { e.preventDefault(); if (otp.length !== 6) return; setOtpLoading(true); try { const csrf = (document.querySelector('meta[name="csrf-token"]') as HTMLMetaElement | null)?.content ?? ''; const res = await fetch('/api/functions/verify-admin-otp', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, Accept: 'application/json' }, body: JSON.stringify({ email, code: otp }), }); if (res.status === 429) { toast.error('Too many verification attempts. Please wait a minute and try again.'); setOtp(''); setOtpLoading(false); return; } const body = await res.json().catch(() => ({})); if (!res.ok || body?.error) { toast.error(body?.error ?? 'Verification failed'); setOtpLoading(false); return; } toast.success('Access granted'); router.visit(body.redirect ?? '/admin'); } catch { toast.error('Network error — please try again'); setOtpLoading(false); } }; return ( <>
{step === 'otp' ? ( ) : ( )}

{step === 'otp' ? 'Admin Verification' : 'Sign In'}

{step === 'otp' ? `Enter the 6-digit code sent to ${email}` : 'Sign in with your credentials to continue'}

{status && (
{status}
)} {step === 'login' ? (
{ setData('email', e.target.value); setEmail(e.target.value); }} placeholder="you@example.com" autoComplete="username" required /> {errors.email &&

{errors.email}

}
setData('password', e.target.value)} placeholder="••••••••" autoComplete="current-password" required minLength={6} className="pr-10" />
{errors.password &&

{errors.password}

}
{canResetPassword && (
Forgot password?
)}
Don't have an account?{' '} Register
) : (

Admin accounts require two-factor authentication. A 6-digit code has been sent to your email.

Didn't get the code? {resendIn > 0 ? ( Resend available in {resendIn}s ) : ( )}
)}
); }