peter
f8a31d48cf
Round 5 extracted `ui/dialogFocus` so no shell would hand-roll the focus contract, then introduced four ways to lose the focus anyway — all four measured in jsdom against the real components. **Ownership was narrower than the trap.** `ui/Modal` traps Tab over the whole dialog on purpose, so a toast's Undo or ✕ stays reachable; ownership was tracked over the panel alone. Tabbing to that ✕ therefore read as "the user left the dialog", and since removing a toast fires no `focusin` to re-arm, closing afterwards skipped the restore and left the focus on <body>. Before this hook existed the restore was unconditional, so it was a regression. **A dialog stacked above us is still ours.** A nested `ui/Modal` portals into its own host, so it is outside the outer dialog's root however wide that scope is drawn — widening alone could not fix it. Both closing in one commit left the focus on <body>: the outer skipped its restore, and the child's own target (a control inside the outer panel) was already detached, because passive cleanups run parent-first. Ownership now means "inside my dialog, or inside a modal layer above it", which is what the rule always intended. **The wizard disagreed with `ui/Modal` on its first line.** `trapTab(e, panel)`, with neither the dialog-root scope (so its own toast host was outside the cycle — the connection notice never auto-dismisses, and its ✕ was unreachable from the keyboard) nor the `container` argument the JSDoc exists for: `panel.contains( panel)` is true, so focus sitting ON the tabIndex=-1 panel matched no branch and a Shift+Tab walked into the app behind the scrim. Both call sites now pass the same three arguments. **The toast handover was a render-phase read-modify-write.** A `useMemo` read a module global that the next line overwrote; React re-invokes a component body and every `useMemo` factory in it on a StrictMode double render, and the LAST invocation commits — so the second pass re-read what the first had just written, the takeover host classified its OWN new toast as inherited, and the dev build behaved exactly like the code round 5 replaced. Snapshotted through a ref keyed on `isTop`, so a repeated invocation of one render is a no-op. And the fourth `aria-modal` shell, `Welcome`'s screenshot lightbox, is finally swept into the same contract: it declared itself a modal dialog while leaving the focus on the thumbnail behind an 80%-black scrim and letting Tab walk the landing page underneath. The headline fix of the previous commit — StrictMode's re-mount taking the focus off an `autoFocus` field — had no test at all; deleting it left all 1009 green. It has one now. 9 tests, mutation-checked against 8 mutations, each red on the test that names it.
926 lines
37 KiB
TypeScript
926 lines
37 KiB
TypeScript
import { useEffect, useRef, useState } from "react";
|
|
import { useHistorySubview, type SubviewUrl } from "../lib/history";
|
|
import { useTranslation } from "react-i18next";
|
|
import {
|
|
ArrowRight,
|
|
Check,
|
|
Clapperboard,
|
|
Clock,
|
|
Code2,
|
|
Download,
|
|
Expand,
|
|
Filter,
|
|
Inbox,
|
|
Link2Off,
|
|
ListVideo,
|
|
Lock,
|
|
MailWarning,
|
|
PlayCircle,
|
|
Search,
|
|
ShieldAlert,
|
|
X,
|
|
type LucideIcon,
|
|
} from "lucide-react";
|
|
|
|
// Siftlode is open source; the landing footer links to the public repository.
|
|
const REPO_URL = "https://git.b1fr0st.eu/peter/siftlode";
|
|
import { api, deadResetLink, loginBlocked, type LoginBlocked } from "../lib/api";
|
|
import { HttpError } from "../lib/api";
|
|
import { setLanguage, type LangCode } from "../i18n";
|
|
import LanguageSwitcher from "./LanguageSwitcher";
|
|
import { Button } from "./ui/Button";
|
|
import { trapTab, useDialogChrome } from "./ui/dialogFocus";
|
|
import { inputCls } from "./ui/form";
|
|
import { entryHash, entrySearch } from "../lib/entryUrl";
|
|
import type { VerifyEntry } from "../lib/useVerifyEntry";
|
|
|
|
const EMAIL_RE = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
|
|
const PASSWORD_MIN = 10;
|
|
|
|
export type Mode = "signin" | "register" | "forgot" | "reset" | "resend";
|
|
|
|
// The card's sub-views are real history entries, so browser/mouse Back leaves one the way it leaves
|
|
// any other page — they used to be plain state, and Back silently changed only the address bar.
|
|
// "signin" is the root (no param) and "reset" is deliberately NOT mirrored: that view is only
|
|
// reachable with the one-time token from the #reset fragment, so a bookmarked ?m=reset would open a
|
|
// form that cannot submit.
|
|
export const MODE_URL: SubviewUrl<Mode> = {
|
|
key: "m",
|
|
encode: (m: Mode) => (m === "signin" || m === "reset" ? null : m),
|
|
decode: (raw: string) =>
|
|
raw === "register" || raw === "forgot" || raw === "resend" ? (raw as Mode) : null,
|
|
};
|
|
|
|
// Per-mode i18n keys for the card title and the submit button. A flat map (vs nested ternaries)
|
|
// keeps adding a new mode a one-line change and makes a missing key a compile error.
|
|
const TITLE_KEY: Record<Mode, string> = {
|
|
signin: "welcome.auth.signinTitle",
|
|
register: "welcome.auth.createTitle",
|
|
forgot: "welcome.auth.forgotTitle",
|
|
reset: "welcome.auth.resetTitle",
|
|
resend: "welcome.auth.resendTitle",
|
|
};
|
|
const SUBMIT_KEY: Record<Mode, string> = {
|
|
signin: "welcome.auth.signinButton",
|
|
register: "welcome.auth.createButton",
|
|
forgot: "welcome.auth.forgotButton",
|
|
reset: "welcome.auth.resetButton",
|
|
resend: "welcome.auth.resendButton",
|
|
};
|
|
|
|
// Public landing + authentication. One scrollable page: a hero with the auth card (email+
|
|
// password, Google, explicit demo) over a short marketing pitch with feature cards. Shown
|
|
// whenever the user isn't signed in (see App.tsx). The auth forms talk to /auth/* (see the
|
|
// backend); errors are surfaced inline (the api calls use the quiet flag).
|
|
export default function Welcome({ verify }: { verify: VerifyEntry }) {
|
|
const { t, i18n } = useTranslation();
|
|
// Which screenshot (if any) is open in the full-size lightbox.
|
|
const [zoomed, setZoomed] = useState<{ src: string; label: string } | null>(null);
|
|
const open = (src: string, label: string) => setZoomed({ src, label });
|
|
return (
|
|
<div className="min-h-screen bg-bg text-fg overflow-y-auto">
|
|
<header className="flex items-center justify-between px-5 sm:px-8 py-4">
|
|
<div className="text-xl font-bold tracking-tight">
|
|
Sift<span className="text-accent">lode</span>
|
|
</div>
|
|
<LanguageSwitcher value={i18n.language as LangCode} onChange={setLanguage} />
|
|
</header>
|
|
|
|
<main className="max-w-6xl mx-auto px-5 sm:px-8 pb-16">
|
|
{/* Hero: pitch + auth card */}
|
|
<section className="grid lg:grid-cols-2 gap-10 items-center py-8 lg:py-14">
|
|
<div className="max-w-xl">
|
|
<h1 className="text-3xl sm:text-4xl font-bold tracking-tight leading-tight">
|
|
{t("welcome.hero.title")}
|
|
</h1>
|
|
<p className="text-muted mt-4 text-lg leading-relaxed">{t("welcome.hero.subtitle")}</p>
|
|
<p className="text-sm text-muted mt-4">{t("welcome.hero.trust")}</p>
|
|
</div>
|
|
<AuthCard verify={verify} />
|
|
</section>
|
|
|
|
{/* App preview */}
|
|
<Preview
|
|
src="/welcome/feed.webp"
|
|
label={t("welcome.preview.feed")}
|
|
className="aspect-video"
|
|
onOpen={open}
|
|
/>
|
|
|
|
{/* Open source — Siftlode's code is public; nudge visitors to read it or self-host. The
|
|
footer keeps a compact link too. */}
|
|
<a
|
|
href={REPO_URL}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="group mt-8 flex flex-col items-center gap-x-4 gap-y-2 rounded-2xl border border-accent/25 bg-accent/6 px-5 py-4 text-center sm:flex-row sm:text-left hover:border-accent/50 transition"
|
|
>
|
|
<span className="grid place-items-center w-10 h-10 rounded-xl bg-accent/15 text-accent shrink-0">
|
|
<Code2 className="w-5 h-5" />
|
|
</span>
|
|
<span className="flex-1">
|
|
<span className="block font-semibold">{t("welcome.openSource.title")}</span>
|
|
<span className="block text-sm text-muted leading-relaxed">
|
|
{t("welcome.openSource.body")}
|
|
</span>
|
|
</span>
|
|
<span className="inline-flex items-center gap-1 text-sm font-medium text-accent whitespace-nowrap">
|
|
{t("welcome.openSource.link")}
|
|
<ArrowRight className="w-4 h-4 transition group-hover:translate-x-0.5" />
|
|
</span>
|
|
</a>
|
|
|
|
{/* Features */}
|
|
<section className="mt-14">
|
|
<h2 className="text-2xl font-semibold text-center">{t("welcome.features.heading")}</h2>
|
|
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4 mt-8">
|
|
{FEATURES.map((f) => (
|
|
<FeatureCard key={f.key} icon={f.icon} k={f.key} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Gallery — one shot per module; click any to view it full size. */}
|
|
<section className="mt-12">
|
|
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{GALLERY.map((g) => (
|
|
<Preview
|
|
key={g.key}
|
|
src={g.src}
|
|
label={t(`welcome.preview.${g.key}`)}
|
|
className="aspect-video"
|
|
onOpen={open}
|
|
/>
|
|
))}
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
{zoomed && <Lightbox src={zoomed.src} label={zoomed.label} onClose={() => setZoomed(null)} />}
|
|
|
|
<footer className="border-t border-border py-6 text-center text-xs text-muted flex flex-col sm:flex-row gap-3 justify-center items-center">
|
|
<span>
|
|
Sift<span className="text-accent">lode</span>
|
|
</span>
|
|
<span className="hidden sm:inline">·</span>
|
|
<a href="/privacy" className="hover:text-fg transition">
|
|
{t("common.privacyPolicy")}
|
|
</a>
|
|
<a href="/terms" className="hover:text-fg transition">
|
|
{t("common.termsOfService")}
|
|
</a>
|
|
<a
|
|
href={REPO_URL}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-1.5 hover:text-fg transition"
|
|
>
|
|
<Code2 className="w-3.5 h-3.5" />
|
|
{t("common.sourceCode")}
|
|
</a>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// The screenshot gallery below the hero — one shot per module, each opening full-size in the
|
|
// lightbox. Order roughly follows the nav rail; the feed leads as the hero above the fold.
|
|
const GALLERY: { key: string; src: string }[] = [
|
|
{ key: "channels", src: "/welcome/channels.webp" },
|
|
{ key: "playlists", src: "/welcome/playlists.webp" },
|
|
{ key: "search", src: "/welcome/search.webp" },
|
|
{ key: "player", src: "/welcome/player.webp" },
|
|
{ key: "downloads", src: "/welcome/downloads.webp" },
|
|
{ key: "plex", src: "/welcome/plex.webp" },
|
|
];
|
|
|
|
const FEATURES: { key: string; icon: LucideIcon }[] = [
|
|
{ key: "readable", icon: Filter },
|
|
{ key: "neverMiss", icon: Inbox },
|
|
{ key: "search", icon: Search },
|
|
{ key: "playlists", icon: ListVideo },
|
|
{ key: "player", icon: PlayCircle },
|
|
{ key: "downloads", icon: Download },
|
|
{ key: "plex", icon: Clapperboard },
|
|
{ key: "private", icon: Lock },
|
|
];
|
|
|
|
function FeatureCard({ icon: Icon, k }: { icon: LucideIcon; k: string }) {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div className="glass-card rounded-2xl p-5">
|
|
<div className="w-10 h-10 rounded-xl bg-accent/15 text-accent grid place-items-center mb-3">
|
|
<Icon className="w-5 h-5" />
|
|
</div>
|
|
<h3 className="font-semibold">{t(`welcome.features.${k}.title`)}</h3>
|
|
<p className="text-sm text-muted leading-relaxed mt-1">{t(`welcome.features.${k}.body`)}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Image with a graceful fallback: if the file isn't present yet, show a tasteful placeholder
|
|
// frame instead of a broken image (the demo screenshots drop into frontend/public/welcome/).
|
|
// When loaded it's a button that opens the full-size lightbox (onOpen).
|
|
function Preview({
|
|
src,
|
|
label,
|
|
className,
|
|
onOpen,
|
|
}: {
|
|
src: string;
|
|
label: string;
|
|
className?: string;
|
|
onOpen?: (src: string, label: string) => void;
|
|
}) {
|
|
const [failed, setFailed] = useState(false);
|
|
if (failed) {
|
|
return (
|
|
<div className={`glass-card rounded-2xl overflow-hidden ${className ?? ""}`}>
|
|
<div className="w-full h-full grid place-items-center bg-linear-to-br from-accent/10 to-card text-muted text-sm p-6 text-center">
|
|
{label}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => onOpen?.(src, label)}
|
|
aria-label={label}
|
|
className={`group relative glass-card rounded-2xl overflow-hidden block cursor-zoom-in ${className ?? ""}`}
|
|
>
|
|
<img
|
|
src={src}
|
|
alt={label}
|
|
loading="lazy"
|
|
onError={() => setFailed(true)}
|
|
className="w-full h-full object-cover object-top"
|
|
/>
|
|
<span className="absolute inset-0 grid place-items-center bg-black/0 opacity-0 transition group-hover:bg-black/30 group-hover:opacity-100">
|
|
<Expand className="w-6 h-6 text-white drop-shadow-lg" />
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
// Full-size image viewer: a dimmed, blurred backdrop with the screenshot fit to the viewport
|
|
// (aspect ratio preserved via object-contain). Closes on backdrop click, the ✕, or Escape.
|
|
function Lightbox({ src, label, onClose }: { src: string; label: string; onClose: () => void }) {
|
|
const { t } = useTranslation();
|
|
// The fourth `aria-modal` shell in the app, and the one the round-5 extraction did not sweep in:
|
|
// it declared itself a modal dialog while leaving focus on the thumbnail behind an 80%-black
|
|
// scrim, announcing nothing, and letting Tab walk the landing page underneath — the ✕ reachable
|
|
// only after tabbing past every remaining gallery shot (deep-review round 6). The contract comes
|
|
// from the same place `ui/Modal` and the wizard get theirs; the body-scroll lock moved with it.
|
|
const panelRef = useRef<HTMLDivElement>(null);
|
|
useDialogChrome(panelRef);
|
|
useEffect(() => {
|
|
const onKey = (e: KeyboardEvent) => {
|
|
if (e.key === "Escape") onClose();
|
|
const panel = panelRef.current;
|
|
if (e.key === "Tab" && panel) trapTab(e, panel, panel);
|
|
};
|
|
window.addEventListener("keydown", onKey);
|
|
return () => window.removeEventListener("keydown", onKey);
|
|
}, [onClose]);
|
|
return (
|
|
<div
|
|
ref={panelRef}
|
|
tabIndex={-1}
|
|
className="fixed inset-0 z-popover grid place-items-center bg-black/80 overlay-backdrop p-4 sm:p-8 outline-none"
|
|
onClick={onClose}
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label={label}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
aria-label={t("common.close")}
|
|
className="absolute top-4 right-4 p-2 rounded-full glass-card glass-hover text-fg"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
<figure
|
|
className="flex max-h-full max-w-full flex-col items-center gap-3"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<img
|
|
src={src}
|
|
alt={label}
|
|
className="max-h-[82vh] max-w-[92vw] w-auto h-auto rounded-xl border border-border object-contain shadow-2xl"
|
|
/>
|
|
<figcaption className="text-sm text-muted">{label}</figcaption>
|
|
</figure>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// One answer per reset token, however many times React mounts this card. StrictMode double-invokes
|
|
// effects in dev and the shell remounts the card as the session probe settles — measured in UAT on
|
|
// 2026-09-05: FOUR probes went out for one opened link. That would burn the endpoint's per-IP budget
|
|
// after a couple of reloads and silently drop back to drawing the form unchecked. Holding the
|
|
// in-flight promise means a remount joins the request already running instead of starting another.
|
|
const resetTokenChecks = new Map<string, Promise<boolean>>();
|
|
|
|
function checkResetToken(token: string): Promise<boolean> {
|
|
let pending = resetTokenChecks.get(token);
|
|
if (!pending) {
|
|
pending = api
|
|
.checkPasswordReset(token)
|
|
.then((r) => r.ok)
|
|
// A probe that FAILED says nothing about the token, so it answers "go ahead" and forgets
|
|
// itself: a network blip must never be cached as "this link is dead".
|
|
.catch(() => {
|
|
resetTokenChecks.delete(token);
|
|
return true;
|
|
});
|
|
resetTokenChecks.set(token, pending);
|
|
}
|
|
return pending;
|
|
}
|
|
|
|
function AuthCard({ verify }: { verify: VerifyEntry }) {
|
|
const { t } = useTranslation();
|
|
// The entry URL is snapshotted once at import time (lib/entryUrl) rather than here, so nothing can
|
|
// rewrite the address bar out from under this card before it mounts — and so the App-level hook and
|
|
// this card read the SAME values regardless of which mounts first. Clearing the address bar is that
|
|
// hook's job now, since it is the one thing that runs on every visit, signed in or not.
|
|
//
|
|
// State, not a const: once the token has been spent the reset view must stop being the card's
|
|
// root, or a Back from the "password changed" screen lands on a form whose token is already used.
|
|
const [resetToken, setResetToken] = useState<string | null>(() => entryHash.get("reset"));
|
|
// The Google access-request notice, off the FRAGMENT (see lib/entryUrl): it names the address now,
|
|
// and an address in the query string would land in every reverse-proxy access log. `linked` is set
|
|
// only when the request already existed under ANOTHER spelling of the same mailbox — the case worth
|
|
// explaining; the same spelling twice is just a repeat.
|
|
const bounced = entryHash.get("access"); // Google denied → "requested" | "denied"
|
|
const bouncedEmail = entryHash.get("email");
|
|
const bouncedLinked = entryHash.get("linked");
|
|
const deleted = entrySearch.get("deleted"); // self-service account deletion just completed
|
|
// Google login outcome → "suspended" | "oauth_cancelled". State (not a const) so it clears on the
|
|
// first deliberate action, like the verify banner — otherwise it lingers stalely on later screens.
|
|
const [login, setLogin] = useState<string | null>(() => entrySearch.get("login"));
|
|
// The verification outcome is confirmed in App (above the signed-in branch) and handed down, so
|
|
// one emailed link behaves the same whether or not this browser already holds a session.
|
|
const verifyOutcome = verify.outcome;
|
|
|
|
const { view: mode, open: setMode } = useHistorySubview<Mode>(
|
|
resetToken ? "reset" : "signin",
|
|
MODE_URL,
|
|
);
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState("");
|
|
// Whether to offer "Continue with Google" — hidden when the instance has no Google OAuth
|
|
// configured. Optimistic (most instances have it); the rare Google-less instance just sees it
|
|
// disappear once the config loads.
|
|
const [googleEnabled, setGoogleEnabled] = useState(true);
|
|
useEffect(() => {
|
|
api
|
|
.authConfig()
|
|
.then((c) => setGoogleEnabled(c.google_enabled))
|
|
.catch(() => {});
|
|
}, []);
|
|
const [done, setDone] = useState<string>(""); // success/info message replacing the form
|
|
// Why password sign-in refused, when the server named a state worth a screen rather than a red line
|
|
// (E9.5 S4). It REPLACES the form: in all three of those states the password was already proven
|
|
// correct, so there is nothing to retype — leaving the form up would only invite a pointless retry.
|
|
const [blocked, setBlocked] = useState<LoginBlocked | null>(null);
|
|
// The emailed reset link turned out to be spent, expired, or to belong to an account that no longer
|
|
// exists. Same reasoning as `blocked`: the form cannot succeed, so it must not be on screen.
|
|
const [deadReset, setDeadReset] = useState(false);
|
|
// Ask whether the `#reset=` token is still usable BEFORE drawing the form, and hold the card blank
|
|
// until the answer lands. Reported 2026-09-05: deleting an account and then opening its reset link
|
|
// rendered a full "set a new password" form that could only ever answer 400 — the user finds out
|
|
// after typing. This is advisory (the confirm below stays the authority); a check that errors is
|
|
// treated as "go ahead", never as "dead", so a broken probe cannot lock anyone out of a live link.
|
|
const [checkingReset, setCheckingReset] = useState(() => entryHash.get("reset") !== null);
|
|
useEffect(() => {
|
|
const token = entryHash.get("reset");
|
|
if (!token) return;
|
|
let live = true;
|
|
void checkResetToken(token).then((ok) => {
|
|
if (!live) return;
|
|
if (!ok) {
|
|
setDeadReset(true);
|
|
setResetToken(null); // and stop the reset view being the card's root, so Back can't return
|
|
}
|
|
setCheckingReset(false);
|
|
});
|
|
return () => {
|
|
live = false;
|
|
};
|
|
}, []);
|
|
// `done` and `error` belong to the view that produced them, and the render is `done ? msg : form`
|
|
// — without this, Back out of a submitted form would show the old success message under the
|
|
// previous view's title. Clearing on view change covers both Back/Forward and the mode links.
|
|
useEffect(() => {
|
|
setDone("");
|
|
setError("");
|
|
setBlocked(null);
|
|
setDeadReset(false);
|
|
}, [mode]);
|
|
|
|
// Explicit demo entry (replaces the old hidden probe): a labelled email field, still gated
|
|
// by the demo whitelist server-side.
|
|
const [showDemo, setShowDemo] = useState(false);
|
|
const [demoEmail, setDemoEmail] = useState("");
|
|
const [demoBusy, setDemoBusy] = useState(false);
|
|
const [demoError, setDemoError] = useState("");
|
|
|
|
const reset = () => {
|
|
setError("");
|
|
setDone("");
|
|
setBlocked(null);
|
|
setDeadReset(false);
|
|
// The verify/login banners are one-time entry notices — dismiss once the user takes any
|
|
// deliberate action (mode switch, CTA, submit) so they don't linger stalely on later screens.
|
|
verify.dismiss();
|
|
setLogin(null);
|
|
};
|
|
|
|
// Shared by the expired-link banner CTA and the sign-in "didn't get the email?" link.
|
|
const goResend = () => {
|
|
reset();
|
|
setMode("resend");
|
|
};
|
|
|
|
// Used by the "verified, but your password was revoked" banner — the only way back into that
|
|
// account is a reset link, so put the user one click from it.
|
|
const goForgot = () => {
|
|
reset();
|
|
setMode("forgot");
|
|
};
|
|
|
|
async function onSubmit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
reset();
|
|
const mail = email.trim().toLowerCase();
|
|
if (
|
|
(mode === "signin" || mode === "register" || mode === "forgot" || mode === "resend") &&
|
|
!EMAIL_RE.test(mail)
|
|
) {
|
|
setError(t("welcome.auth.invalidEmail"));
|
|
return;
|
|
}
|
|
if ((mode === "register" || mode === "reset") && password.length < PASSWORD_MIN) {
|
|
setError(t("welcome.auth.weakPassword", { min: PASSWORD_MIN }));
|
|
return;
|
|
}
|
|
setBusy(true);
|
|
try {
|
|
if (mode === "signin") {
|
|
await api.passwordLogin(mail, password);
|
|
window.location.reload();
|
|
return;
|
|
}
|
|
if (mode === "register") {
|
|
await api.register(mail, password);
|
|
setDone(t("welcome.auth.registerDone"));
|
|
} else if (mode === "forgot") {
|
|
await api.requestPasswordReset(mail);
|
|
setDone(t("welcome.auth.forgotDone"));
|
|
} else if (mode === "resend") {
|
|
await api.resendVerification(mail);
|
|
setDone(t("welcome.auth.resendDone"));
|
|
} else if (mode === "reset") {
|
|
await api.confirmPasswordReset(resetToken ?? "", password);
|
|
setResetToken(null); // single-use: the reset view is no longer a place to come back to
|
|
setDone(t("welcome.auth.resetDone"));
|
|
}
|
|
} catch (err) {
|
|
// An account-shaped refusal becomes a named screen; `invalid` / `rate_limited` stay a line
|
|
// under the form, because there the form IS the next step.
|
|
const refusal = err instanceof HttpError ? loginBlocked(err.detailData) : null;
|
|
if (refusal && PANEL_REASONS.has(refusal.reason)) {
|
|
setBlocked(refusal);
|
|
return;
|
|
}
|
|
// The token died between the pre-flight check and this submit — or was never checked, because
|
|
// the probe itself failed. Either way the answer is the same screen, not a red line.
|
|
if (mode === "reset" && err instanceof HttpError && deadResetLink(err.detailData)) {
|
|
setDeadReset(true);
|
|
setResetToken(null);
|
|
return;
|
|
}
|
|
setError(
|
|
err instanceof HttpError && err.detail ? err.detail : t("welcome.auth.genericError"),
|
|
);
|
|
} finally {
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
async function onDemo(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
setDemoError("");
|
|
const mail = demoEmail.trim().toLowerCase();
|
|
if (!EMAIL_RE.test(mail)) {
|
|
setDemoError(t("welcome.auth.invalidEmail"));
|
|
return;
|
|
}
|
|
setDemoBusy(true);
|
|
try {
|
|
const r = await api.demoLogin(mail);
|
|
if (r.authenticated) window.location.reload();
|
|
else setDemoError(t("welcome.auth.demoDenied"));
|
|
} catch {
|
|
setDemoError(t("welcome.auth.demoDenied"));
|
|
} finally {
|
|
setDemoBusy(false);
|
|
}
|
|
}
|
|
|
|
// A named state owns the card's heading while it is up, so it reads as the card's subject rather
|
|
// than a box sitting inside a heading that still says "Set a new password".
|
|
const titleKey = blocked
|
|
? `welcome.auth.blocked.${blocked.reason}.title`
|
|
: deadReset
|
|
? "welcome.auth.deadLink.title"
|
|
: TITLE_KEY[mode];
|
|
const StateIcon = blocked ? BLOCKED_ICON[blocked.reason] : deadReset ? Link2Off : null;
|
|
|
|
return (
|
|
<div className="glass rounded-2xl p-6 sm:p-7 w-full max-w-md lg:justify-self-end">
|
|
<h2 className="text-lg font-semibold mb-1 flex items-center gap-2.5">
|
|
{StateIcon && (
|
|
<span className="w-8 h-8 rounded-xl bg-warn/15 text-warn grid place-items-center shrink-0">
|
|
<StateIcon className="w-[18px] h-[18px]" />
|
|
</span>
|
|
)}
|
|
{t(titleKey)}
|
|
</h2>
|
|
|
|
{/* One-time status banners from a redirect (Google-denied, email verification). */}
|
|
{verifyOutcome === "ok" && <Banner tone="ok">{t("welcome.auth.verifyOk")}</Banner>}
|
|
{verifyOutcome === "ok_reset" && (
|
|
<Banner tone="warn">
|
|
{t("welcome.auth.verifyOkReset")}{" "}
|
|
<Button variant="link" onClick={goForgot}>
|
|
{t("welcome.auth.verifyOkResetCta")}
|
|
</Button>
|
|
</Banner>
|
|
)}
|
|
{/* No resend CTA here, unlike the invalid banner below: the token was NOT spent — we simply
|
|
could not reach the server — so pushing the user to request a fresh link would act on a
|
|
statement we know to be false (DX-16). Retrying the same link is the correct next move. */}
|
|
{verifyOutcome === "unreachable" && (
|
|
<Banner tone="warn">{t("welcome.auth.verifyUnreachable")}</Banner>
|
|
)}
|
|
{verifyOutcome === "invalid" && (
|
|
<Banner tone="warn">
|
|
{t("welcome.auth.verifyInvalid")}{" "}
|
|
<Button variant="link" onClick={goResend}>
|
|
{t("welcome.auth.resendCta")}
|
|
</Button>
|
|
</Banner>
|
|
)}
|
|
{bounced === "requested" &&
|
|
(bouncedEmail ? (
|
|
<Banner tone="ok">
|
|
<span className="block">{t("welcome.auth.accessRequestedFor")}</span>
|
|
<Address value={bouncedEmail} />
|
|
<span className="block">{t("welcome.auth.accessRequestedReview")}</span>
|
|
</Banner>
|
|
) : (
|
|
<Banner tone="ok">{t("welcome.auth.accessRequested")}</Banner>
|
|
))}
|
|
{/* The alias insight, stated only when it applies: Google answered with one spelling of a
|
|
mailbox whose request is already on file under another. Silence here is what let the
|
|
2026-09-03 registrant believe nothing had been recorded at all. */}
|
|
{bounced === "requested" && bouncedLinked && (
|
|
<Banner tone="warn">
|
|
<span className="block">{t("welcome.auth.accessLinked")}</span>
|
|
<Address value={bouncedLinked} />
|
|
<span className="block">{t("welcome.auth.accessLinkedTail")}</span>
|
|
</Banner>
|
|
)}
|
|
{bounced === "denied" && <Banner tone="warn">{t("welcome.auth.accessDenied")}</Banner>}
|
|
{login === "suspended" && <Banner tone="warn">{t("welcome.auth.suspended")}</Banner>}
|
|
{login === "oauth_cancelled" && (
|
|
<Banner tone="warn">{t("welcome.auth.oauthCancelled")}</Banner>
|
|
)}
|
|
{deleted && <Banner tone="ok">{t("welcome.auth.deleted")}</Banner>}
|
|
|
|
{blocked ? (
|
|
<BlockedPanel blocked={blocked} onResend={goResend} onBack={() => setBlocked(null)} />
|
|
) : deadReset ? (
|
|
<StatePanel
|
|
body={t("welcome.auth.deadLink.body")}
|
|
cta={{ label: t("welcome.auth.deadLink.cta"), onClick: goForgot }}
|
|
onBack={() => {
|
|
reset();
|
|
setMode("signin");
|
|
}}
|
|
/>
|
|
) : checkingReset ? (
|
|
// Blank rather than the form: showing a form we may be about to withdraw is the flicker this
|
|
// whole check exists to remove.
|
|
<p className="mt-3 text-sm text-muted">{t("welcome.auth.working")}</p>
|
|
) : done ? (
|
|
<div className="mt-3">
|
|
<p className="text-sm text-fg/80 leading-relaxed">{done}</p>
|
|
<button
|
|
onClick={() => {
|
|
setMode("signin");
|
|
setDone("");
|
|
}}
|
|
className="mt-4 text-sm text-accent hover:underline"
|
|
>
|
|
{t("welcome.auth.backToSignin")}
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<form onSubmit={onSubmit} className="flex flex-col gap-3 mt-3">
|
|
{mode !== "reset" && (
|
|
<input
|
|
type="email"
|
|
autoComplete="email"
|
|
required
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
placeholder={t("welcome.auth.email")}
|
|
className={inputCls}
|
|
/>
|
|
)}
|
|
{mode !== "forgot" && mode !== "resend" && (
|
|
<input
|
|
type="password"
|
|
autoComplete={mode === "signin" ? "current-password" : "new-password"}
|
|
required
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
placeholder={
|
|
mode === "reset" || mode === "register"
|
|
? t("welcome.auth.newPassword", { min: PASSWORD_MIN })
|
|
: t("welcome.auth.password")
|
|
}
|
|
className={inputCls}
|
|
/>
|
|
)}
|
|
{error && <p className="text-xs text-danger">{error}</p>}
|
|
<button
|
|
type="submit"
|
|
disabled={busy}
|
|
className="px-4 py-2.5 rounded-xl font-semibold btn-primary disabled:opacity-50 transition"
|
|
>
|
|
{busy ? t("welcome.auth.working") : t(SUBMIT_KEY[mode])}
|
|
</button>
|
|
</form>
|
|
|
|
{/* A confirmation mail can be slow, filtered, or — before E9.5 S6 — never sent at all for a
|
|
repeat sign-up. Offered right under the form rather than below the mode switches: it is
|
|
the second thing a stuck person needs, after the password they just tried. */}
|
|
{mode === "signin" && (
|
|
<button
|
|
onClick={goResend}
|
|
className="mt-3 block w-full text-center text-xs text-muted hover:text-fg"
|
|
>
|
|
{t("welcome.auth.resendLink")}
|
|
</button>
|
|
)}
|
|
|
|
{/* Mode switches */}
|
|
<div className="flex items-center justify-between mt-3 text-xs">
|
|
{mode === "signin" ? (
|
|
<>
|
|
<Button
|
|
variant="link"
|
|
onClick={() => {
|
|
reset();
|
|
setMode("register");
|
|
}}
|
|
>
|
|
{t("welcome.auth.createLink")}
|
|
</Button>
|
|
<button
|
|
onClick={() => {
|
|
reset();
|
|
setMode("forgot");
|
|
}}
|
|
className="text-muted hover:text-fg"
|
|
>
|
|
{t("welcome.auth.forgotLink")}
|
|
</button>
|
|
</>
|
|
) : (
|
|
<Button
|
|
variant="link"
|
|
onClick={() => {
|
|
reset();
|
|
setMode("signin");
|
|
}}
|
|
>
|
|
{t("welcome.auth.backToSignin")}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{mode === "signin" && (
|
|
<>
|
|
<div className="flex items-center gap-3 my-4 text-2xs uppercase tracking-wide text-muted">
|
|
<span className="h-px flex-1 bg-border" />
|
|
{t("welcome.auth.or")}
|
|
<span className="h-px flex-1 bg-border" />
|
|
</div>
|
|
{googleEnabled && (
|
|
<a
|
|
href="/auth/login"
|
|
className="block text-center px-4 py-2.5 rounded-xl text-sm font-semibold bg-card border border-border hover:border-accent transition"
|
|
>
|
|
{t("welcome.auth.google")}
|
|
</a>
|
|
)}
|
|
{!showDemo ? (
|
|
<button
|
|
onClick={() => setShowDemo(true)}
|
|
className="w-full mt-2 px-4 py-2.5 rounded-xl text-sm bg-card border border-border hover:border-accent transition"
|
|
>
|
|
{t("welcome.auth.tryDemo")}
|
|
</button>
|
|
) : (
|
|
<form onSubmit={onDemo} className="mt-2 flex flex-col gap-2">
|
|
<p className="text-2xs text-muted">{t("welcome.auth.demoHint")}</p>
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="email"
|
|
value={demoEmail}
|
|
onChange={(e) => setDemoEmail(e.target.value)}
|
|
placeholder={t("welcome.auth.demoEmail")}
|
|
className={inputCls}
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={demoBusy}
|
|
className="shrink-0 px-3 py-2.5 rounded-xl text-sm font-semibold bg-card border border-border hover:border-accent disabled:opacity-50 transition"
|
|
>
|
|
{demoBusy ? t("welcome.auth.working") : t("welcome.auth.demoEnter")}
|
|
</button>
|
|
</div>
|
|
{demoError && <p className="text-xs text-danger">{demoError}</p>}
|
|
</form>
|
|
)}
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// An email address the user has to READ and compare, character by character — the recorded address on
|
|
// a blocked-sign-in panel, the mailbox a request was filed under. Monospaced and breakable because
|
|
// that comparison is the whole job: a dot or a `+tag` in a proportional font is exactly what nobody
|
|
// noticed on 2026-09-03.
|
|
function Address({ value }: { value: string }) {
|
|
return <span className="block font-mono font-medium break-all my-0.5">{value}</span>;
|
|
}
|
|
|
|
// Which refusals earn a screen of their own. The other two (`invalid`, `rate_limited`) are answered
|
|
// BEFORE the password is proven, carry no account detail, and leave the form as the next step — a
|
|
// line under it is the honest size for them.
|
|
const PANEL_REASONS = new Set<LoginBlocked["reason"]>([
|
|
"email_unverified",
|
|
"pending_approval",
|
|
"suspended",
|
|
]);
|
|
|
|
const BLOCKED_ICON: Partial<Record<LoginBlocked["reason"], LucideIcon>> = {
|
|
email_unverified: MailWarning,
|
|
pending_approval: Clock,
|
|
suspended: ShieldAlert,
|
|
};
|
|
|
|
// The frame every named state in this card shares: a sentence, whatever detail that state can give,
|
|
// then the way out. The icon and title sit in the card's own h2 (see titleKey/StateIcon) so a state
|
|
// reads as the card's subject. One frame, because two states that mean "this form cannot succeed"
|
|
// should not drift apart in shape.
|
|
function StatePanel({
|
|
body,
|
|
cta,
|
|
onBack,
|
|
children,
|
|
}: {
|
|
body: string;
|
|
cta?: { label: string; onClick: () => void };
|
|
onBack: () => void;
|
|
children?: React.ReactNode;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
// Announced and focused, because this panel REPLACES the form the user just submitted: without a
|
|
// live region a screen reader reports nothing at all, and without the focus move the button they
|
|
// were standing on is unmounted, dropping focus to <body> so Tab restarts at the top of the page.
|
|
// The Banner in this same file got `role="status"` for the same reason; the panel is the louder
|
|
// half — it is the whole answer to a submit — so it announces assertively.
|
|
const heading = useRef<HTMLParagraphElement>(null);
|
|
useEffect(() => heading.current?.focus(), []);
|
|
return (
|
|
<div className="mt-3 flex flex-col gap-4" role="alert" aria-live="assertive">
|
|
<p
|
|
ref={heading}
|
|
tabIndex={-1}
|
|
className="text-sm text-fg/80 leading-relaxed focus:outline-hidden"
|
|
>
|
|
{body}
|
|
</p>
|
|
{children}
|
|
<div className="flex items-center justify-between gap-3">
|
|
<Button variant="link" className="text-sm" onClick={onBack}>
|
|
{t("welcome.auth.backToSignin")}
|
|
</Button>
|
|
{cta && (
|
|
<button
|
|
onClick={cta.onClick}
|
|
className="shrink-0 px-3 py-2 rounded-xl text-xs font-semibold bg-card border border-border hover:border-accent transition"
|
|
>
|
|
{cta.label}
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// The named state behind a 403, in place of the sign-in form (E9.5 S4). It says WHICH mailbox the
|
|
// account is on and WHICH of the two gates is still shut, because the flat "awaiting admin approval"
|
|
// string it replaces was true and useless: it never revealed that the address the account carried was
|
|
// a different spelling of the one the user had just typed.
|
|
function BlockedPanel({
|
|
blocked,
|
|
onResend,
|
|
onBack,
|
|
}: {
|
|
blocked: LoginBlocked;
|
|
onResend: () => void;
|
|
onBack: () => void;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
const { reason, email, emailVerified, approved, operator } = blocked;
|
|
// Suspension is not a gate that will open on its own, so the checklist would be a lie there.
|
|
const gated = reason !== "suspended";
|
|
return (
|
|
<StatePanel
|
|
body={t(`welcome.auth.blocked.${reason}.body`)}
|
|
cta={
|
|
reason === "email_unverified"
|
|
? { label: t("welcome.auth.resendCta"), onClick: onResend }
|
|
: undefined
|
|
}
|
|
onBack={onBack}
|
|
>
|
|
{gated && (
|
|
<div className="rounded-xl border border-border bg-card/60 px-3.5 py-3 flex flex-col gap-2">
|
|
<Gate done={emailVerified === true} k="email" />
|
|
<Gate done={approved === true} k="approval" />
|
|
</div>
|
|
)}
|
|
|
|
{email && (
|
|
<div className="border-l-2 border-border pl-3 flex flex-col gap-0.5">
|
|
<span className="text-2xs uppercase tracking-wide text-muted">
|
|
{t("welcome.auth.blocked.addressLabel")}
|
|
</span>
|
|
<span className="text-sm">
|
|
<Address value={email} />
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{operator && (
|
|
<p className="text-xs text-muted leading-relaxed">
|
|
{t("welcome.auth.blocked.operator", { contact: operator })}
|
|
</p>
|
|
)}
|
|
</StatePanel>
|
|
);
|
|
}
|
|
|
|
// One row of the two-gate checklist. Both states get their own full sentence rather than a shared
|
|
// label plus a status word: Hungarian puts them together differently, and gluing translated
|
|
// fragments is how a bilingual UI ends up reading like neither language.
|
|
function Gate({ done, k }: { done: boolean; k: "email" | "approval" }) {
|
|
const { t } = useTranslation();
|
|
const Icon = done ? Check : Clock;
|
|
return (
|
|
<span className={`flex items-center gap-2 text-xs ${done ? "text-fg/80" : "text-muted"}`}>
|
|
<Icon className={`w-4 h-4 shrink-0 ${done ? "text-success" : ""}`} />
|
|
{t(`welcome.auth.blocked.gate.${k}${done ? "Done" : "Pending"}`)}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
// `role="status"` because these appear in response to something that just happened (a verification
|
|
// link, a denied Google sign-in, a completed deletion) rather than being part of the card at rest —
|
|
// without it a screen-reader user gets no announcement that anything changed.
|
|
function Banner({ tone, children }: { tone: "ok" | "warn"; children: React.ReactNode }) {
|
|
const cls = tone === "ok" ? "bg-accent/15 text-fg" : "bg-warn/15 text-fg";
|
|
return (
|
|
<div role="status" className={`rounded-xl px-3 py-2 text-xs leading-relaxed mt-3 ${cls}`}>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|