135 lines
4.4 KiB
TypeScript
135 lines
4.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { auth, AuthError } from "@/lib/auth";
|
|
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 — an inline "Add your email" input that POSTs to
|
|
* /auth/email. On success the user state refreshes and the banner
|
|
* automatically flips into the "verify your email" mode.
|
|
* • Unverified email — existing "Resend verification" call to action.
|
|
*
|
|
* 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, setUser } = useAuth();
|
|
const [sent, setSent] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [busy, setBusy] = useState(false);
|
|
const [dismissed, setDismissed] = useState(false);
|
|
const [newEmail, setNewEmail] = useState("");
|
|
|
|
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);
|
|
}
|
|
}
|
|
|
|
async function onSetEmail(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
setError(null);
|
|
setBusy(true);
|
|
try {
|
|
const updated = await auth.setEmail(newEmail);
|
|
setUser(updated);
|
|
setSent(true);
|
|
} catch (err) {
|
|
setError(err instanceof AuthError ? err.message : "Could not save 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">
|
|
{sent ? (
|
|
<p>
|
|
{needsEmail
|
|
? "✓ Email saved — check your inbox for a verification link."
|
|
: "✓ Verification email sent — check your inbox."}
|
|
</p>
|
|
) : needsEmail ? (
|
|
<form
|
|
onSubmit={onSetEmail}
|
|
className="flex flex-1 flex-wrap items-center gap-2"
|
|
>
|
|
<label htmlFor="banner-email" className="shrink-0">
|
|
Add an email to your account:
|
|
</label>
|
|
<input
|
|
id="banner-email"
|
|
type="email"
|
|
required
|
|
value={newEmail}
|
|
onChange={(e) => setNewEmail(e.target.value)}
|
|
placeholder="you@example.com"
|
|
className="flex-1 min-w-[12rem] rounded-md border border-amber-300/70 dark:border-amber-800/70 bg-white/70 dark:bg-amber-950/30 px-2 py-1 text-amber-900 dark:text-amber-50 placeholder:text-amber-700/50 dark:placeholder:text-amber-200/40"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={busy || newEmail.trim() === ""}
|
|
className="font-medium underline-offset-2 hover:underline disabled:opacity-60"
|
|
>
|
|
{busy ? "Saving…" : "Save"}
|
|
</button>
|
|
{error ? (
|
|
<span className="text-amber-900/80 dark:text-amber-100/80">
|
|
{error}
|
|
</span>
|
|
) : null}
|
|
</form>
|
|
) : (
|
|
<p>
|
|
{error ?? `Verify your email (${user.email}) to secure your account.`}
|
|
</p>
|
|
)}
|
|
|
|
<div className="flex items-center gap-2">
|
|
{!sent && !needsEmail ? (
|
|
<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>
|
|
);
|
|
}
|