Skip to content

Commit fa24496

Browse files
author
Boopathi
committed
UX: Show email verification check form immediately on invalid state, never dead-end users
1 parent 95d2fd0 commit fa24496

File tree

1 file changed

+54
-64
lines changed

1 file changed

+54
-64
lines changed

‎src/app/auth/action/page.tsx‎

Lines changed: 54 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -322,72 +322,62 @@ const ActionHandlerContent: React.FC = () => {
322322
}
323323

324324
// Fallback for any other state
325-
if (showCheckVerification) {
326-
return (
327-
<div className="text-center">
328-
<CardHeader className="text-center">
329-
<CardTitle>Check Email Verification</CardTitle>
330-
<CardDescription>Enter your email to check if it has been verified.</CardDescription>
331-
</CardHeader>
332-
<CardContent>
333-
<form onSubmit={async (e) => {
334-
e.preventDefault();
335-
setChecking(true);
336-
setCheckResult(null);
337-
setCheckError("");
338-
try {
339-
const response = await fetch(`${API_BASE_URL}/api/check-verification-status`, {
340-
method: 'POST',
341-
headers: { 'Content-Type': 'application/json' },
342-
body: JSON.stringify({ email: checkEmail })
343-
});
344-
const data = await response.json();
345-
if (response.ok && data.email_verified) {
346-
setCheckResult("verified");
347-
} else if (response.ok && !data.email_verified) {
348-
setCheckResult("not_verified");
349-
} else {
350-
setCheckResult("error");
351-
setCheckError(data.error || "Unknown error");
352-
}
353-
} catch (err) {
354-
setCheckResult("error");
355-
setCheckError("Network error");
356-
} finally {
357-
setChecking(false);
358-
}
359-
}} className="space-y-4">
360-
<Input type="email" placeholder="you@example.com" value={checkEmail} onChange={e => setCheckEmail(e.target.value)} required />
361-
<Button type="submit" className="w-full" disabled={checking}>{checking ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : "Check Verification Status"}</Button>
362-
</form>
363-
{checkResult === "verified" && (
364-
<div className="mt-4">
365-
<CheckCircle className="h-8 w-8 text-green-500 mx-auto mb-2" />
366-
<p className="font-semibold">Your email is verified! Please log in.</p>
367-
<Button className="mt-2" onClick={() => router.push('/?action=login')}>Go to Login</Button>
368-
</div>
369-
)}
370-
{checkResult === "not_verified" && (
371-
<div className="mt-4">
372-
<XCircle className="h-8 w-8 text-destructive mx-auto mb-2" />
373-
<p className="font-semibold">Your email is not verified yet.</p>
374-
<Button className="mt-2" onClick={() => setShowResendForm(true)}>Resend Verification Email</Button>
375-
</div>
376-
)}
377-
{checkResult === "error" && (
378-
<div className="mt-4 text-destructive">{checkError}</div>
379-
)}
380-
</CardContent>
381-
</div>
382-
);
383-
}
384-
385325
return (
386326
<div className="text-center">
387-
<h2 className="text-2xl font-bold">Invalid State</h2>
388-
<p className="text-muted-foreground">Something went wrong. Please return to the homepage or check your email verification status.</p>
389-
<Button onClick={() => router.push('/')} className="mt-4">Go to Homepage</Button>
390-
<Button onClick={() => setShowCheckVerification(true)} className="mt-4 ml-2" variant="outline">Check Email Verification</Button>
327+
<CardHeader className="text-center">
328+
<CardTitle>Check Email Verification</CardTitle>
329+
<CardDescription>Enter your email to check if it has been verified.</CardDescription>
330+
</CardHeader>
331+
<CardContent>
332+
<form onSubmit={async (e) => {
333+
e.preventDefault();
334+
setChecking(true);
335+
setCheckResult(null);
336+
setCheckError("");
337+
try {
338+
const response = await fetch(`${API_BASE_URL}/api/check-verification-status`, {
339+
method: 'POST',
340+
headers: { 'Content-Type': 'application/json' },
341+
body: JSON.stringify({ email: checkEmail })
342+
});
343+
const data = await response.json();
344+
if (response.ok && data.email_verified) {
345+
setCheckResult("verified");
346+
} else if (response.ok && !data.email_verified) {
347+
setCheckResult("not_verified");
348+
} else {
349+
setCheckResult("error");
350+
setCheckError(data.error || "Unknown error");
351+
}
352+
} catch (err) {
353+
setCheckResult("error");
354+
setCheckError("Network error");
355+
} finally {
356+
setChecking(false);
357+
}
358+
}} className="space-y-4">
359+
<Input type="email" placeholder="you@example.com" value={checkEmail} onChange={e => setCheckEmail(e.target.value)} required />
360+
<Button type="submit" className="w-full" disabled={checking}>{checking ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : "Check Verification Status"}</Button>
361+
</form>
362+
{checkResult === "verified" && (
363+
<div className="mt-4">
364+
<CheckCircle className="h-8 w-8 text-green-500 mx-auto mb-2" />
365+
<p className="font-semibold">Your email is verified! Please log in.</p>
366+
<Button className="mt-2" onClick={() => router.push('/?action=login')}>Go to Login</Button>
367+
</div>
368+
)}
369+
{checkResult === "not_verified" && (
370+
<div className="mt-4">
371+
<XCircle className="h-8 w-8 text-destructive mx-auto mb-2" />
372+
<p className="font-semibold">Your email is not verified yet.</p>
373+
<Button className="mt-2" onClick={() => setShowResendForm(true)}>Resend Verification Email</Button>
374+
</div>
375+
)}
376+
{checkResult === "error" && (
377+
<div className="mt-4 text-destructive">{checkError}</div>
378+
)}
379+
<Button onClick={() => router.push('/')} className="mt-4" variant="secondary">Go to Homepage</Button>
380+
</CardContent>
391381
</div>
392382
);
393383
};

0 commit comments

Comments
 (0)