78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { auth, AuthError } from "@/lib/auth";
|
|
import { useAuth } from "./auth-provider";
|
|
|
|
/**
|
|
* Persistent top ribbon shown when a logged-in user has not yet verified
|
|
* their email. Lets them re-trigger the verification mail without leaving
|
|
* the page.
|
|
*
|
|
* Renders nothing when:
|
|
* - auth state is still loading
|
|
* - user is logged out
|
|
* - user.email_verified_at is set
|
|
* - user dismissed it for this session (banner is meant to be persistent
|
|
* across navigations but skippable per-tab; we keep the dismissed flag
|
|
* in component state so a refresh brings it back)
|
|
*/
|
|
export function VerifyEmailBanner() {
|
|
const { user, loading } = useAuth();
|
|
const [sent, setSent] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [busy, setBusy] = useState(false);
|
|
const [dismissed, setDismissed] = useState(false);
|
|
|
|
if (loading || !user || user.email_verified_at || dismissed) return null;
|
|
|
|
async function onResend() {
|
|
setError(null);
|
|
setBusy(true);
|
|
try {
|
|
await auth.resendVerification();
|
|
setSent(true);
|
|
} catch (err) {
|
|
setError(
|
|
err instanceof AuthError ? err.message : "Could not send verification email.",
|
|
);
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="w-full bg-amber-50 dark:bg-amber-950/40 text-amber-900 dark:text-amber-100 border-b border-amber-200/60 dark:border-amber-800/60">
|
|
<div className="max-w-5xl mx-auto px-4 py-2 flex flex-wrap items-center justify-between gap-3 text-sm">
|
|
<p>
|
|
{sent
|
|
? "✓ Verification email sent — check your inbox."
|
|
: error
|
|
? error
|
|
: `Verify your email (${user.email}) to secure your account.`}
|
|
</p>
|
|
<div className="flex items-center gap-2">
|
|
{!sent ? (
|
|
<button
|
|
type="button"
|
|
onClick={onResend}
|
|
disabled={busy}
|
|
className="font-medium underline-offset-2 hover:underline disabled:opacity-60"
|
|
>
|
|
{busy ? "Sending…" : "Resend email"}
|
|
</button>
|
|
) : null}
|
|
<button
|
|
type="button"
|
|
onClick={() => setDismissed(true)}
|
|
aria-label="Dismiss"
|
|
className="opacity-70 hover:opacity-100"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|