@0x0501/mystack 0.0.0-stage → 0.1.0-bootstrap.0

package/template/src/__tests__/user-update-guard.test.ts

@@ -0,0 +1,109 @@
+/**
+ * Seam: `user.update.before` must refuse server-controlled columns.
+ *
+ * Better Auth merges a before-hook result over the original data, so
+ * stripping keys is a silent no-op. The guard refuses instead.
+ */
+import { drizzleAdapter } from "@better-auth/drizzle-adapter";
+import { betterAuth } from "better-auth";
+import { admin } from "better-auth/plugins";
+import { eq } from "drizzle-orm";
+import { describe, expect, it } from "vitest";
+import { userUpdateGuard } from "@/lib/user-update-guard";
+import { AUTH_DDL, cookieHeaders } from "./auth-harness";
+import { createTestDatabase, hasTestDatabase } from "./test-db";
+
+describe("userUpdateGuard", () => {
+	it("refuses role and ban fields", () => {
+		expect(() => userUpdateGuard({ role: "admin" })).toThrow(
+			/cannot be changed/i,
+		);
+		expect(() => userUpdateGuard({ banned: true })).toThrow(
+			/cannot be changed/i,
+		);
+		expect(() =>
+			userUpdateGuard({ banReason: "x", banExpires: new Date() }),
+		).toThrow(/cannot be changed/i);
+	});
+
+	it("refuses tokensRevokedAt", () => {
+		expect(() => userUpdateGuard({ tokensRevokedAt: new Date() })).toThrow(
+			/cannot be changed/i,
+		);
+	});
+});
+
+const EMAIL = "ada@example.com";
+const PW = "Passw0rd!";
+
+async function makeAuth() {
+	const db = await createTestDatabase(AUTH_DDL);
+	const auth = betterAuth({
+		baseURL: "http://localhost:3000",
+		secret: "user-update-guard-test-secret",
+		telemetry: { enabled: false },
+		database: drizzleAdapter(db, { provider: "pg" }),
+		emailAndPassword: { enabled: true },
+		plugins: [admin()],
+		databaseHooks: {
+			user: { update: { before: async (data) => userUpdateGuard(data) } },
+		},
+	});
+	return { auth, db };
+}
+
+async function signedUp(auth: Awaited<ReturnType<typeof makeAuth>>["auth"]) {
+	const res = await auth.api.signUpEmail({
+		body: { email: EMAIL, password: PW, name: "Ada" },
+		returnHeaders: true,
+	});
+	return cookieHeaders(res.headers);
+}
+
+async function rowOf(db: Awaited<ReturnType<typeof makeAuth>>["db"]) {
+	const { user } = await import("@/db/auth.schema");
+	const [row] = await db
+		.select({ name: user.name, role: user.role, banned: user.banned })
+		.from(user)
+		.where(eq(user.email, EMAIL));
+	return row;
+}
+
+/**
+ * The unit tests above prove the function refuses. They pass just as happily
+ * against a build where the hook was never registered — and in that build the
+ * account-owner endpoint writes `role` straight through. So this drives the
+ * real Better Auth endpoint instead.
+ */
+describe.skipIf(!hasTestDatabase)("updating your own account", () => {
+	it("still allows an ordinary profile edit", async () => {
+		const { auth, db } = await makeAuth();
+		const headers = await signedUp(auth);
+
+		await auth.api.updateUser({ body: { name: "Ada Lovelace" }, headers });
+
+		expect((await rowOf(db)).name).toBe("Ada Lovelace");
+	});
+
+	it("cannot promote itself through the account-owner endpoint", async () => {
+		const { auth, db } = await makeAuth();
+		const headers = await signedUp(auth);
+
+		await expect(
+			auth.api.updateUser({ body: { role: "admin" } as never, headers }),
+		).rejects.toThrow();
+
+		expect((await rowOf(db)).role).not.toBe("admin");
+	});
+
+	it("cannot ban itself through the account-owner endpoint", async () => {
+		const { auth, db } = await makeAuth();
+		const headers = await signedUp(auth);
+
+		await expect(
+			auth.api.updateUser({ body: { banned: true } as never, headers }),
+		).rejects.toThrow();
+
+		expect((await rowOf(db)).banned).toBeFalsy();
+	});
+});

package/template/src/components/LocaleSwitcher.tsx

@@ -0,0 +1,79 @@
+import { Menu } from "@base-ui/react/menu";
+import { useLocation } from "@tanstack/react-router";
+import { LOCALE_COOKIE, writeLocaleCookie } from "@/lib/locale-cookie";
+import * as m from "@/paraglide/messages";
+import { getLocale, locales } from "@/paraglide/runtime";
+import { cn } from "@/utils/cn";
+import { samePageLocaleHref } from "@/utils/same-page-locale-href";
+
+const LABEL: Record<string, () => string> = {
+	en: () => m.locale_en(),
+	de: () => m.locale_de(),
+};
+
+/**
+ * Language switcher: menu of real same-page localized anchors (path, query,
+ * hash preserved) plus a locale cookie write. Primary control is not a button
+ * that only calls setLocale.
+ */
+export function LocaleSwitcher({
+	variant = "button",
+}: {
+	variant?: "button" | "bare";
+} = {}) {
+	const location = useLocation();
+	const current = getLocale();
+	const bare = variant === "bare";
+
+	return (
+		<Menu.Root>
+			<Menu.Trigger
+				aria-label={m.language_label()}
+				data-testid="locale-switcher"
+				className={cn(
+					"ui-locale-trigger",
+					!bare && "ui-locale-trigger--button",
+				)}
+			>
+				<span className="font-medium uppercase">{current}</span>
+			</Menu.Trigger>
+			<Menu.Portal>
+				<Menu.Positioner
+					side="bottom"
+					align="end"
+					sideOffset={6}
+					className="ui-positioner"
+				>
+					<Menu.Popup
+						className="ui-menu-popup"
+						data-testid="locale-switcher-menu"
+					>
+						{locales.map((locale) => (
+							<Menu.LinkItem
+								key={locale}
+								href={samePageLocaleHref({
+									pathname: location.pathname,
+									search: location.searchStr,
+									hash: location.hash ? `#${location.hash}` : "",
+									locale,
+								})}
+								hrefLang={locale}
+								aria-current={locale === current ? "true" : undefined}
+								onClick={() => {
+									writeLocaleCookie(locale);
+								}}
+								className="ui-menu-item"
+								data-testid={`locale-link-${locale}`}
+								data-locale-cookie={LOCALE_COOKIE}
+							>
+								{LABEL[locale]?.() ?? locale}
+							</Menu.LinkItem>
+						))}
+					</Menu.Popup>
+				</Menu.Positioner>
+			</Menu.Portal>
+		</Menu.Root>
+	);
+}
+
+export default LocaleSwitcher;

package/template/src/components/ThemeToggle.tsx

@@ -0,0 +1,47 @@
+import { useTheme } from "@/hooks/use-theme";
+import type { ThemePreference } from "@/lib/theme";
+import * as m from "@/paraglide/messages";
+import { cn } from "@/utils/cn";
+
+const OPTIONS: ThemePreference[] = ["light", "dark", "system"];
+
+function labelFor(option: ThemePreference): string {
+	switch (option) {
+		case "light":
+			return m.theme_light();
+		case "dark":
+			return m.theme_dark();
+		default:
+			return m.theme_system();
+	}
+}
+
+/** Default presentation of the Headless theme behavior. */
+export function ThemeToggle({ className }: { className?: string }) {
+	const { preference, setTheme, mounted } = useTheme();
+
+	return (
+		<fieldset
+			className={cn("m-0 inline-flex gap-1 border-0 p-0", className)}
+			data-testid="theme-toggle"
+		>
+			<legend className="sr-only">{m.theme_label()}</legend>
+			{OPTIONS.map((option) => {
+				const active = mounted ? preference === option : option === "system";
+				return (
+					<button
+						key={option}
+						type="button"
+						data-testid={`theme-${option}`}
+						data-active={active ? "true" : "false"}
+						aria-pressed={active}
+						onClick={() => setTheme(option)}
+						className="ui-theme-option"
+					>
+						{labelFor(option)}
+					</button>
+				);
+			})}
+		</fieldset>
+	);
+}

package/template/src/components/auth/social.tsx

@@ -0,0 +1,90 @@
+import { useState } from "react";
+import { buttonClass, mutedTextClass } from "@/components/shells";
+import { authClient } from "@/lib/auth-client";
+import * as m from "@/paraglide/messages";
+import { afterAuthTarget } from "@/utils/auth-redirect";
+import { cn } from "@/utils/cn";
+
+/** "or" hairline between the credentials form and social / passkey options. */
+export function AuthDivider() {
+	return (
+		// No `role="separator"`: a separator carries no children, and the word
+		// "or" is content a reader needs. The hairlines are decoration.
+		<div className="mt-6 flex items-center gap-3">
+			<span aria-hidden="true" className="h-px flex-1 bg-border" />
+			<span className={cn(mutedTextClass, "text-xs uppercase tracking-wide")}>
+				{m.auth_or()}
+			</span>
+			<span aria-hidden="true" className="h-px flex-1 bg-border" />
+		</div>
+	);
+}
+
+/**
+ * GitHub OAuth entry. Success resumes a mid-authorize flow (or ?redirect);
+ * failures bounce back with Better Auth's error handling.
+ */
+export function GithubButton({ label }: { label: string }) {
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	return (
+		<div className="flex w-full flex-col gap-2">
+			<button
+				type="button"
+				disabled={busy}
+				className={cn(buttonClass, "w-full")}
+				onClick={() => {
+					setBusy(true);
+					setError(null);
+					void authClient.signIn
+						.social({
+							provider: "github",
+							callbackURL: afterAuthTarget(),
+							errorCallbackURL: `${window.location.pathname}${window.location.search}`,
+						})
+						.then(({ error: authError }) => {
+							if (authError)
+								setError(authError.message ?? m.auth_github_failed());
+						})
+						.catch((err) => {
+							setError(
+								err instanceof Error ? err.message : m.auth_github_failed(),
+							);
+						})
+						.finally(() => {
+							setBusy(false);
+						});
+				}}
+			>
+				{busy ? m.auth_redirecting() : label}
+			</button>
+			{error ? (
+				<p className="text-center text-xs text-red-600 dark:text-red-400">
+					{error}
+				</p>
+			) : null}
+		</div>
+	);
+}
+
+/** Passkey sign-in entry. */
+export function PasskeyButton({
+	label,
+	disabled,
+	onClick,
+}: {
+	label: string;
+	disabled?: boolean;
+	onClick: () => void;
+}) {
+	return (
+		<button
+			type="button"
+			disabled={disabled}
+			className={cn(buttonClass, "w-full")}
+			onClick={onClick}
+		>
+			{label}
+		</button>
+	);
+}

package/template/src/components/auth/turnstile.tsx

@@ -0,0 +1,67 @@
+import {
+	type TurnstileInstance,
+	Turnstile as TurnstileWidget,
+} from "@marsidev/react-turnstile";
+import {
+	forwardRef,
+	useEffect,
+	useImperativeHandle,
+	useRef,
+	useState,
+} from "react";
+import { CAPTCHA_ENABLED, TURNSTILE_SITE_KEY } from "@/lib/captcha";
+
+export type TurnstileHandle = { reset: () => void };
+
+/** The site's current dark-mode state: the `.dark` class the theme toggle sets
+ * on `<html>` (SSR-safe — reports "light" before the DOM exists). */
+const readSiteTheme = (): "light" | "dark" =>
+	typeof document !== "undefined" &&
+	document.documentElement.classList.contains("dark")
+		? "dark"
+		: "light";
+
+function useSiteTheme(): "light" | "dark" {
+	const [theme, setTheme] = useState<"light" | "dark">(readSiteTheme);
+	useEffect(() => {
+		const root = document.documentElement;
+		const sync = () => setTheme(readSiteTheme());
+		const observer = new MutationObserver(sync);
+		observer.observe(root, { attributes: true, attributeFilter: ["class"] });
+		sync();
+		return () => observer.disconnect();
+	}, []);
+	return theme;
+}
+
+/**
+ * Cloudflare Turnstile widget. Renders only when CAPTCHA_ENABLED (production
+ * with a site key). Call `reset()` after each submit — tokens are single-use.
+ */
+export const Turnstile = forwardRef<
+	TurnstileHandle,
+	{ onToken: (token: string | null) => void }
+>(function Turnstile({ onToken }, ref) {
+	const widget = useRef<TurnstileInstance>(undefined);
+	const theme = useSiteTheme();
+
+	useImperativeHandle(ref, () => ({
+		reset() {
+			widget.current?.reset();
+			onToken(null);
+		},
+	}));
+
+	if (!CAPTCHA_ENABLED) return null;
+	return (
+		<TurnstileWidget
+			ref={widget}
+			siteKey={TURNSTILE_SITE_KEY as string}
+			onSuccess={(token) => onToken(token)}
+			onError={() => onToken(null)}
+			onExpire={() => onToken(null)}
+			options={{ theme }}
+			className="mt-1"
+		/>
+	);
+});

package/template/src/components/root/navigation-progress.tsx

@@ -0,0 +1,32 @@
+import { useRouterState } from "@tanstack/react-router";
+import { useEffect, useState } from "react";
+import * as m from "@/paraglide/messages";
+
+/** beforeLoad can block before a child's pending boundary is available. */
+export function NavigationProgress() {
+	const waiting = useRouterState({
+		select: (state) =>
+			state.isLoading &&
+			!state.matches.some((match) => match.status === "pending"),
+	});
+	const [visible, setVisible] = useState(false);
+
+	useEffect(() => {
+		if (!waiting) {
+			setVisible(false);
+			return;
+		}
+		const timer = window.setTimeout(() => setVisible(true), 150);
+		return () => window.clearTimeout(timer);
+	}, [waiting]);
+
+	if (!waiting || !visible) return null;
+	return (
+		<div
+			className="fixed inset-x-0 top-0 z-50 border-b border-border bg-background px-4 py-2 text-sm text-muted-foreground"
+			role="status"
+		>
+			{m.common_loading()}
+		</div>
+	);
+}

package/template/src/components/root/not-found.tsx

@@ -0,0 +1,20 @@
+import { Link } from "@tanstack/react-router";
+import { buttonPrimaryClass, mutedTextClass } from "@/components/ui/styles";
+import * as m from "@/paraglide/messages";
+
+export function NotFound() {
+	return (
+		<div className="page py-24 text-center">
+			<p className="text-5xl text-muted-foreground">404</p>
+			<h1 className="mt-3 text-xl font-medium">{m.common_not_found()}</h1>
+			<p className={`mt-2 ${mutedTextClass}`}>
+				The page you are looking for does not exist or has moved.
+			</p>
+			<div className="mt-8 flex justify-center">
+				<Link to="/" className={buttonPrimaryClass}>
+					{m.nav_home()}
+				</Link>
+			</div>
+		</div>
+	);
+}

package/template/src/components/root/pending.tsx

@@ -0,0 +1,9 @@
+import * as m from "@/paraglide/messages";
+
+export function RoutePending() {
+	return (
+		<div className="page text-muted-foreground" role="status">
+			{m.common_loading()}
+		</div>
+	);
+}

package/template/src/components/root/root-document.tsx

@@ -0,0 +1,37 @@
+import { TanStackDevtools } from "@tanstack/react-devtools";
+import { HeadContent, Scripts } from "@tanstack/react-router";
+import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
+import type { ReactNode } from "react";
+import TanStackQueryDevtools from "@/integrations/tanstack-query/devtools";
+import { getLocale } from "@/paraglide/runtime";
+
+export function RootDocument({ children }: { children: ReactNode }) {
+	const locale = getLocale();
+
+	return (
+		<html lang={locale} suppressHydrationWarning>
+			<head>
+				<HeadContent />
+			</head>
+			<body>
+				{/* Base UI portal stacking root — isolation: isolate (styles.css .root) */}
+				<div className="root" id="app">
+					<main className="flex flex-1 flex-col">{children}</main>
+				</div>
+				{import.meta.env.DEV ? (
+					<TanStackDevtools
+						config={{ position: "bottom-right" }}
+						plugins={[
+							{
+								name: "Tanstack Router",
+								render: <TanStackRouterDevtoolsPanel />,
+							},
+							TanStackQueryDevtools,
+						]}
+					/>
+				) : null}
+				<Scripts />
+			</body>
+		</html>
+	);
+}

package/template/src/components/root/root-error.tsx

@@ -0,0 +1,34 @@
+import { Link } from "@tanstack/react-router";
+import {
+	buttonPrimaryClass,
+	buttonSecondaryClass,
+	mutedTextClass,
+} from "@/components/ui/styles";
+import * as m from "@/paraglide/messages";
+
+export function RootError({
+	error,
+	reset,
+}: {
+	error: unknown;
+	reset: () => void;
+}) {
+	const message =
+		error instanceof Error ? error.message : "Something went wrong.";
+
+	return (
+		<div className="page py-24 text-center">
+			<p className="text-sm text-destructive">{m.common_error()}</p>
+			<h1 className="mt-2 text-xl font-medium">{m.common_something_wrong()}</h1>
+			<p className={`mt-2 ${mutedTextClass}`}>{message}</p>
+			<div className="mt-8 flex flex-wrap justify-center gap-2">
+				<button type="button" className={buttonPrimaryClass} onClick={reset}>
+					Try again
+				</button>
+				<Link to="/" className={buttonSecondaryClass}>
+					{m.nav_home()}
+				</Link>
+			</div>
+		</div>
+	);
+}