nate/prayer-app
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance unverified user banner when returning to login

Browse Source
This commit is contained in:
nmemmert committed 2026-01-16 09:45:10 -05:00
1 parent 40b61243c1
commit 3de069fce9
2 files changed
+25 -13
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/Login.tsx
+24 -12
View File
@@ -97,9 +97,9 @@ export default function Login() {
await signOut(auth);
setError('');
setNeedsVerification(false);
setShowVerificationBanner(true);
setVerificationSent(true);
setNeedsVerification(false);
} catch (err: unknown) {
setError(err instanceof Error ? err.message : 'Failed to resend verification email');
}
@@ -139,17 +139,29 @@ export default function Login() {
</div>
)}
{needsVerification && (
<div className="bg-yellow-900 border border-yellow-700 text-yellow-200 px-4 py-3 rounded-lg">
<p className="font-semibold mb-2">Email Not Verified</p>
<p className="text-sm mb-3">Please check your inbox for the verification email.</p>
<button
type="button"
onClick={handleResendVerification}
disabled={loading}
className="w-full px-3 py-2 bg-yellow-600 hover:bg-yellow-700 disabled:bg-yellow-800 disabled:cursor-not-allowed text-white text-sm font-medium rounded-lg transition-colors"
>
{loading ? 'Sending...' : 'Resend Verification Email'}
</button>
<div className="bg-yellow-900 border-2 border-yellow-600 text-yellow-100 px-5 py-4 rounded-lg">
<div className="flex items-start gap-3">
<svg className="w-6 h-6 text-yellow-400 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
</svg>
<div className="flex-1">
<p className="font-bold text-lg mb-2">⚠️ Email Not Verified</p>
<p className="mb-2">Your account exists, but <strong>you haven't verified your email yet</strong>.</p>
<p className="text-sm text-yellow-300 mb-3">Check your inbox for <strong>{resendEmail}</strong> and click the verification link. Don't forget to check your spam folder!</p>
<div className="bg-yellow-950 border border-yellow-700 rounded p-3 mb-3 text-sm">
<p className="font-semibold mb-1">📧 Can't find the email?</p>
<p className="text-yellow-300 text-xs">Click the button below to send a new verification email.</p>
</div>
<button
type="button"
onClick={handleResendVerification}
disabled={loading}
className="w-full px-4 py-2 bg-yellow-600 hover:bg-yellow-700 disabled:bg-yellow-800 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors"
>
{loading ? 'Sending...' : '📨 Resend Verification Email'}
</button>
</div>
</div>
</div>
)}
{isSignup && (