feat: add resend verification email functionality to login page error state

This commit is contained in:
pradeepkumar
2026-04-08 10:32:29 +05:30
parent 935c747cd1
commit 5dc8977d24

View File

@@ -15,6 +15,9 @@ export default function LoginPage() {
const [error, setError] = useState(''); const [error, setError] = useState('');
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [userType, setUserType] = useState<'USER' | 'ADMIN'>('USER'); const [userType, setUserType] = useState<'USER' | 'ADMIN'>('USER');
const [showResendVerification, setShowResendVerification] = useState(false);
const [resendingVerification, setResendingVerification] = useState(false);
const [resendSuccess, setResendSuccess] = useState('');
// Clear logout flags on mount so API calls aren't blocked after redirect from logout // Clear logout flags on mount so API calls aren't blocked after redirect from logout
useEffect(() => { useEffect(() => {
@@ -27,10 +30,40 @@ export default function LoginPage() {
} }
}, [searchParams]); }, [searchParams]);
const handleResendVerification = async () => {
if (!email) {
setError('Please enter your email first');
return;
}
setResendingVerification(true);
setResendSuccess('');
try {
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/auth/resend-verification-public`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email }),
});
const data = await res.json();
if (res.ok) {
setResendSuccess(data?.data?.message || 'Verification email sent. Please check your inbox.');
setError('');
setShowResendVerification(false);
} else {
setError(data?.message || 'Failed to resend verification email');
}
} catch {
setError('Failed to resend verification email');
} finally {
setResendingVerification(false);
}
};
const handleSubmit = async (e: React.FormEvent) => { const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault(); e.preventDefault();
setLoading(true); setLoading(true);
setError(''); setError('');
setResendSuccess('');
setShowResendVerification(false);
// Clear logout flags now that user is actively logging in // Clear logout flags now that user is actively logging in
localStorage.removeItem('isLoggingOut'); localStorage.removeItem('isLoggingOut');
@@ -47,8 +80,12 @@ export default function LoginPage() {
const validateData = await validateRes.json(); const validateData = await validateRes.json();
if (!validateRes.ok) { if (!validateRes.ok) {
// Show the actual error message from backend const msg = validateData.message || 'Invalid email or password';
setError(validateData.message || 'Invalid email or password'); setError(msg);
// If error is about email verification, show resend button
if (msg.toLowerCase().includes('verify your email') || msg.toLowerCase().includes('not verified')) {
setShowResendVerification(true);
}
setLoading(false); setLoading(false);
return; return;
} }
@@ -144,6 +181,21 @@ export default function LoginPage() {
{error && ( {error && (
<div className="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-[7px] text-[14px] font-serif"> <div className="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-[7px] text-[14px] font-serif">
{error} {error}
{showResendVerification && (
<button
type="button"
onClick={handleResendVerification}
disabled={resendingVerification}
className="block mt-2 text-[#e58625] hover:text-[#d47720] underline font-medium disabled:opacity-50"
>
{resendingVerification ? 'Sending...' : 'Resend verification email'}
</button>
)}
</div>
)}
{resendSuccess && (
<div className="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-[7px] text-[14px] font-serif">
{resendSuccess}
</div> </div>
)} )}