105 lines
3.4 KiB
TypeScript
105 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { auth, AuthError } from "@/lib/auth";
|
|
import { AddEmailModal } from "./add-email-modal";
|
|
import { useAuth } from "./auth-provider";
|
|
|
|
/**
|
|
* Top ribbon for accounts whose email is either missing (OAuth sign-up
|
|
* without an address) or present-but-unverified.
|
|
*
|
|
* Two modes:
|
|
* • Missing email — "Add an email" button that opens AddEmailModal.
|
|
* The modal POSTs to /auth/email and refreshes the user; on success
|
|
* this banner flips into the verify-your-email mode automatically.
|
|
* • Unverified email — "Resend verification" button calls
|
|
* auth.resendVerification().
|
|
*
|
|
* Renders nothing when:
|
|
* - auth state is still loading
|
|
* - user is logged out
|
|
* - user.email_verified_at is set (the address has been confirmed)
|
|
* - user dismissed it for this session (persistent across navigations
|
|
* but reset on full page refresh)
|
|
*/
|
|
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);
|
|
const [emailModalOpen, setEmailModalOpen] = useState(false);
|
|
|
|
if (loading || !user || user.email_verified_at || dismissed) return null;
|
|
|
|
const needsEmail = !user.email;
|
|
|
|
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
|
|
: needsEmail
|
|
? "Add an email to enable password recovery and notifications."
|
|
: `Verify your email (${user.email}) to secure your account.`}
|
|
</p>
|
|
<div className="flex items-center gap-2">
|
|
{!sent ? (
|
|
needsEmail ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => setEmailModalOpen(true)}
|
|
className="font-medium underline-offset-2 hover:underline"
|
|
>
|
|
Add email
|
|
</button>
|
|
) : (
|
|
<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>
|
|
<AddEmailModal
|
|
open={emailModalOpen}
|
|
onClose={() => setEmailModalOpen(false)}
|
|
/>
|
|
</>
|
|
);
|
|
}
|