feat: public events/polls, friends graph, captcha, SSE hardening, and admin UX

Ship product gaps: register/vote pages, friend add/accept/decline/remove, email verify TTL, captcha on login/forgot, soft-fail user actions, SSE abort/shared client, Commando Centrum error toasts, admin delete for events/polls, and IT/NL i18n fills.

Co-authored-by: Cursor <[email protected]>

src/components/auth/captcha-widget.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import Script from "next/script";
+
+export type CaptchaPublicConfig = {
+	provider: string;
+	siteKey?: string;
+	field?: string;
+};
+
+/** Renders Turnstile / reCAPTCHA widget + script when a provider is configured. */
+export function CaptchaWidget({
+	captcha,
+	nonce,
+	className,
+}: {
+	captcha: CaptchaPublicConfig;
+	nonce?: string;
+	className?: string;
+}) {
+	const showCaptcha = captcha.provider !== "none" && !!captcha.siteKey;
+	if (!showCaptcha) return null;
+
+	return (
+		<div className={className}>
+			{captcha.provider === "turnstile" ? (
+				<>
+					<Script
+						src="https://challenges.cloudflare.com/turnstile/v0/api.js"
+						async
+						defer
+						nonce={nonce}
+					/>
+					<div className="cf-turnstile" data-sitekey={captcha.siteKey} />
+				</>
+			) : null}
+			{captcha.provider === "recaptcha" ? (
+				<>
+					<Script
+						src="https://www.google.com/recaptcha/api.js"
+						async
+						defer
+						nonce={nonce}
+					/>
+					<div className="g-recaptcha" data-sitekey={captcha.siteKey} />
+				</>
+			) : null}
+		</div>
+	);
+}
+
+/** Read the provider token from a form (widget injects a hidden input). */
+export function readCaptchaToken(
+	form: HTMLFormElement,
+	captcha: CaptchaPublicConfig,
+): string {
+	if (captcha.provider === "none" || !captcha.field) return "";
+	const fd = new FormData(form);
+	return String(fd.get(captcha.field) ?? "").normalize("NFC");
+}

src/components/auth/home-login-form.tsx

@@ -3,8 +3,19 @@
 import { signIn } from "next-auth/react";
 import { type FormEvent, useState } from "react";
 import { precheckLogin } from "@/actions/auth-precheck";
+import {
+	CaptchaWidget,
+	type CaptchaPublicConfig,
+	readCaptchaToken,
+} from "@/components/auth/captcha-widget";
 
-export function HomeLoginForm() {
+export function HomeLoginForm({
+	captcha = { provider: "none" },
+	nonce,
+}: {
+	captcha?: CaptchaPublicConfig;
+	nonce?: string;
+} = {}) {
 	const [username, setUsername] = useState("");
 	const [password, setPassword] = useState("");
 	const [code, setCode] = useState("");
@@ -12,17 +23,26 @@ export function HomeLoginForm() {
 	const [error, setError] = useState<string | null>(null);
 	const [pending, setPending] = useState(false);
 
-	async function onSubmit(e: FormEvent) {
+	async function onSubmit(e: FormEvent<HTMLFormElement>) {
 		e.preventDefault();
 		setError(null);
 		setPending(true);
 		try {
 			if (!needs2fa) {
-				const pre = await precheckLogin(username, password);
+				const captchaToken = readCaptchaToken(e.currentTarget, captcha);
+				const pre = await precheckLogin(username, password, captchaToken);
 				if (pre === "invalid") {
 					setError("Invalid username or password");
 					return;
 				}
+				if (pre === "captcha") {
+					setError("Captcha verification failed. Please try again.");
+					return;
+				}
+				if (pre === "unverified") {
+					setError("Please verify your email before signing in.");
+					return;
+				}
 				if (pre === "twofactor") {
 					setNeeds2fa(true);
 					return;
@@ -52,7 +72,10 @@ export function HomeLoginForm() {
 			className="relative flex flex-col gap-6 rounded-lg bg-gray-100 p-3 dark:bg-gray-800"
 		>
 			<fieldset className="flex w-full flex-col gap-1">
-				<label htmlFor="login-username" className="block font-semibold text-gray-700 dark:text-gray-200">
+				<label
+					htmlFor="login-username"
+					className="block font-semibold text-gray-700 dark:text-gray-200"
+				>
 					Username
 				</label>
 				<input
@@ -68,7 +91,10 @@ export function HomeLoginForm() {
 				/>
 			</fieldset>
 			<fieldset className="flex w-full flex-col gap-1">
-				<label htmlFor="login-password" className="block font-semibold text-gray-700 dark:text-gray-200">
+				<label
+					htmlFor="login-password"
+					className="block font-semibold text-gray-700 dark:text-gray-200"
+				>
 					Password
 				</label>
 				<input
@@ -85,7 +111,10 @@ export function HomeLoginForm() {
 			</fieldset>
 			{needs2fa ? (
 				<fieldset className="flex w-full flex-col gap-1">
-					<label htmlFor="login-2fa" className="block font-semibold text-gray-700 dark:text-gray-200">
+					<label
+						htmlFor="login-2fa"
+						className="block font-semibold text-gray-700 dark:text-gray-200"
+					>
 						2FA Code
 					</label>
 					<input
@@ -99,7 +128,9 @@ export function HomeLoginForm() {
 						style={{ borderColor: "#e5e7eb", borderWidth: "4px" }}
 					/>
 				</fieldset>
-			) : null}
+			) : (
+				<CaptchaWidget captcha={captcha} nonce={nonce} />
+			)}
 			{error ? (
 				<p className="m-0 text-center text-sm text-red-600 dark:text-red-400">
 					{error}

src/components/auth/login-form.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import Link from "next/link";
+import { signIn } from "next-auth/react";
+import { useTranslations } from "next-intl";
+import { type FormEvent, useState } from "react";
+import { precheckLogin } from "@/actions/auth-precheck";
+import {
+	CaptchaWidget,
+	type CaptchaPublicConfig,
+	readCaptchaToken,
+} from "@/components/auth/captcha-widget";
+import { ContentCard } from "@/components/public/ui";
+
+export function LoginForm({
+	captcha = { provider: "none" },
+	nonce,
+}: {
+	captcha?: CaptchaPublicConfig;
+	nonce?: string;
+}) {
+	const t = useTranslations("pages.login");
+	const [username, setUsername] = useState("");
+	const [password, setPassword] = useState("");
+	const [code, setCode] = useState("");
+	const [needs2fa, setNeeds2fa] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	const [pending, setPending] = useState(false);
+
+	async function onSubmit(e: FormEvent<HTMLFormElement>) {
+		e.preventDefault();
+		setError(null);
+		setPending(true);
+		try {
+			if (!needs2fa) {
+				const captchaToken = readCaptchaToken(e.currentTarget, captcha);
+				const pre = await precheckLogin(username, password, captchaToken);
+				if (pre === "invalid") {
+					setError(t("errorInvalidCredentials"));
+					return;
+				}
+				if (pre === "captcha") {
+					setError(t("errorCaptcha"));
+					return;
+				}
+				if (pre === "unverified") {
+					setError(t("errorUnverified"));
+					return;
+				}
+				if (pre === "twofactor") {
+					setNeeds2fa(true);
+					return;
+				}
+			}
+			const res = await signIn("credentials", {
+				username,
+				password,
+				code,
+				redirect: false,
+			});
+			if (!res || res.error) {
+				setError(
+					needs2fa ? t("errorInvalid2fa") : t("errorInvalidCredentials"),
+				);
+				return;
+			}
+			window.location.href = "/";
+		} finally {
+			setPending(false);
+		}
+	}
+
+	return (
+		<main style={{ maxWidth: 420, margin: "2rem auto" }}>
+			<ContentCard
+				icon={needs2fa ? "🔒" : "🔑"}
+				title={t("title")}
+				subtitle={needs2fa ? t("subtitle2fa") : t("subtitle")}
+			>
+				<form onSubmit={onSubmit} style={{ display: "grid", gap: "0.7rem" }}>
+					<input
+						value={username}
+						onChange={(e) => setUsername(e.target.value)}
+						placeholder={t("usernamePlaceholder")}
+						autoComplete="username"
+						disabled={needs2fa}
+					/>
+					<input
+						type="password"
+						value={password}
+						onChange={(e) => setPassword(e.target.value)}
+						placeholder={t("passwordPlaceholder")}
+						autoComplete="current-password"
+						disabled={needs2fa}
+					/>
+					{needs2fa ? (
+						<input
+							value={code}
+							onChange={(e) => setCode(e.target.value)}
+							placeholder={t("codePlaceholder")}
+							inputMode="numeric"
+							autoComplete="one-time-code"
+							// biome-ignore lint/a11y/noAutofocus: focus the only relevant field in the 2FA step
+							autoFocus
+						/>
+					) : (
+						<CaptchaWidget captcha={captcha} nonce={nonce} />
+					)}
+					<button type="submit" className="btn btn-primary" disabled={pending}>
+						{pending ? t("pleaseWait") : needs2fa ? t("verify") : t("signIn")}
+					</button>
+				</form>
+
+				{!needs2fa ? (
+					<>
+						<div
+							style={{
+								display: "flex",
+								alignItems: "center",
+								gap: "0.5rem",
+								margin: "1rem 0",
+							}}
+						>
+							<span
+								style={{
+									flex: 1,
+									height: 1,
+									background: "var(--border-color)",
+								}}
+							/>
+							<span className="muted">{t("or")}</span>
+							<span
+								style={{
+									flex: 1,
+									height: 1,
+									background: "var(--border-color)",
+								}}
+							/>
+						</div>
+						<div style={{ display: "grid", gap: "0.5rem" }}>
+							<button
+								type="button"
+								className="btn btn-outline"
+								onClick={() => signIn("discord", { callbackUrl: "/" })}
+							>
+								{t("continueWithDiscord")}
+							</button>
+							<button
+								type="button"
+								className="btn btn-outline"
+								onClick={() => signIn("google", { callbackUrl: "/" })}
+							>
+								{t("continueWithGoogle")}
+							</button>
+						</div>
+					</>
+				) : null}
+
+				{error ? (
+					<p
+						style={{
+							color: "var(--color-danger)",
+							textAlign: "center",
+							marginBottom: 0,
+						}}
+					>
+						{error}
+					</p>
+				) : null}
+				<p
+					className="muted"
+					style={{ textAlign: "center", marginBottom: 0, marginTop: "1rem" }}
+				>
+					{t("noAccount")} <Link href="/register">{t("createOne")}</Link> ·{" "}
+					<Link href="/forgot">{t("forgotPassword")}</Link>
+				</p>
+			</ContentCard>
+		</main>
+	);
+}