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

package/template/src/routes/dashboard/index.tsx

@@ -0,0 +1,128 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { useState } from "react";
+import {
+	buttonClass,
+	DashboardShell,
+	linkClass,
+	mutedTextClass,
+	PageAlert,
+} from "@/components/shells";
+import * as m from "@/paraglide/messages";
+import {
+	getDemoCheckoutMethods,
+	startDemoPurchase,
+} from "@/server/demo-checkout";
+import { cn } from "@/utils/cn";
+
+const methodsQuery = {
+	queryKey: ["demo-checkout-methods"],
+	queryFn: () => getDemoCheckoutMethods(),
+};
+
+export const Route = createFileRoute("/dashboard/")({
+	component: DashboardOverview,
+	// The checkout panel renders this query during SSR. Await it so streamed
+	// query data cannot change its loading text before the client hydrates.
+	loader: ({ context }) => context.queryClient.ensureQueryData(methodsQuery),
+});
+
+function DashboardOverview() {
+	const { session } = Route.useRouteContext();
+	const u = session.user;
+	const [checkoutError, setCheckoutError] = useState<string | null>(null);
+
+	const methods = useQuery(methodsQuery);
+
+	const start = useMutation({
+		mutationFn: (provider: "stripe" | "creem" | "nowpayments") =>
+			startDemoPurchase({ data: { provider } }),
+		onSuccess: (r) => {
+			if (r.ok) {
+				window.location.href = r.url;
+				return;
+			}
+			setCheckoutError(
+				r.code === "disabled"
+					? "That payment method is disabled."
+					: "That payment method is not configured.",
+			);
+		},
+		onError: () => setCheckoutError("Could not start checkout."),
+	});
+
+	const rails = methods.data
+		? (["stripe", "creem", "nowpayments"] as const).filter(
+				(k) => methods.data[k],
+			)
+		: [];
+
+	return (
+		<DashboardShell title={m.dashboard_overview_title()}>
+			<section className="space-y-3 text-sm">
+				<p>
+					<span className="text-muted-foreground">
+						{m.dashboard_signed_in_as()}
+					</span>{" "}
+					<strong>{u.name}</strong> ({u.email})
+				</p>
+				<ul className="list-inside list-disc space-y-1 text-foreground">
+					<li>
+						{m.dashboard_email_verified()}:{" "}
+						{u.emailVerified ? m.yes() : m.dashboard_email_unverified()}
+					</li>
+					<li>
+						{m.dashboard_two_factor()}:{" "}
+						{u.twoFactorEnabled ? m.enabled() : m.off()}
+					</li>
+					<li>
+						{m.dashboard_role()}: {u.role ?? "user"}
+					</li>
+				</ul>
+				<p className="pt-4">
+					{m.dashboard_manage_account()}{" "}
+					<Link to="/dashboard/account" className={linkClass}>
+						{m.nav_account()}
+					</Link>
+					.
+				</p>
+				{u.role === "admin" || u.role === "superadmin" ? (
+					<p>
+						<Link to="/admin/users" className={linkClass}>
+							{m.dashboard_open_admin()}
+						</Link>
+					</p>
+				) : null}
+			</section>
+
+			<section className="mt-10 space-y-3 border-t border-border pt-8 text-sm">
+				<h2 className="text-lg font-medium">{m.dashboard_demo_checkout()}</h2>
+				<p className={mutedTextClass}>{m.dashboard_demo_checkout_blurb()}</p>
+				<p className={mutedTextClass}>{m.dashboard_demo_amount()}</p>
+				{checkoutError ? <PageAlert>{checkoutError}</PageAlert> : null}
+				{methods.isLoading ? (
+					<p className={mutedTextClass}>…</p>
+				) : rails.length === 0 ? (
+					<p className={mutedTextClass}>{m.dashboard_no_rails()}</p>
+				) : (
+					<div className="flex flex-wrap gap-2">
+						{rails.map((provider) => (
+							<button
+								key={provider}
+								type="button"
+								className={cn(buttonClass, "max-w-xs")}
+								disabled={start.isPending}
+								onClick={() => {
+									setCheckoutError(null);
+									start.mutate(provider);
+								}}
+							>
+								{m.dashboard_pay_with({ provider })}
+							</button>
+						))}
+					</div>
+				)}
+			</section>
+		</DashboardShell>
+	);
+}

package/template/src/routes/dashboard/route.tsx

@@ -0,0 +1,17 @@
+import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
+
+export const Route = createFileRoute("/dashboard")({
+	// `session` comes from the root route's beforeLoad (one read per request);
+	// re-returning it only narrows it to signed-in for the subtree below.
+	beforeLoad: ({ context: { session } }) => {
+		if (!session?.user) {
+			throw redirect({ to: "/sign-in" });
+		}
+		return { session };
+	},
+	// Private area — keep the whole dashboard subtree out of search indexes.
+	head: () => ({
+		meta: [{ name: "robots", content: "noindex, nofollow" }],
+	}),
+	component: () => <Outlet />,
+});

package/template/src/routes/forgot-password.tsx

@@ -0,0 +1,65 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { useState } from "react";
+import {
+	AuthShell,
+	buttonClass,
+	Field,
+	inputClass,
+	linkClass,
+	PageAlert,
+} from "@/components/shells";
+import { authClient } from "@/lib/auth-client";
+import { NOINDEX_META, pageTitle } from "@/lib/site";
+import * as m from "@/paraglide/messages";
+
+export const Route = createFileRoute("/forgot-password")({
+	head: () => ({
+		meta: [...NOINDEX_META, { title: pageTitle(m.auth_forgot_title()) }],
+	}),
+	component: ForgotPasswordPage,
+});
+
+function ForgotPasswordPage() {
+	const [email, setEmail] = useState("");
+	const [message, setMessage] = useState<string | null>(null);
+	const [pending, setPending] = useState(false);
+
+	async function onSubmit(e: React.FormEvent) {
+		e.preventDefault();
+		setPending(true);
+		setMessage(null);
+		await authClient.requestPasswordReset({
+			email,
+			redirectTo: `${window.location.origin}/reset-password`,
+		});
+		setPending(false);
+		// Same copy whether or not the address exists.
+		setMessage(m.auth_reset_link_sent());
+	}
+
+	return (
+		<AuthShell title={m.auth_forgot_title()}>
+			<form onSubmit={onSubmit}>
+				<Field label={m.field_email()}>
+					<input
+						className={inputClass}
+						type="email"
+						autoComplete="email"
+						required
+						value={email}
+						onChange={(ev) => setEmail(ev.target.value)}
+					/>
+				</Field>
+				{message ? <PageAlert tone="info">{message}</PageAlert> : null}
+				<button type="submit" className={buttonClass} disabled={pending}>
+					{pending ? m.auth_sending() : m.auth_send_reset_link()}
+				</button>
+			</form>
+			<p className="mt-4 text-center text-sm">
+				<Link to="/sign-in" className={linkClass}>
+					{m.auth_back_to_sign_in()}
+				</Link>
+			</p>
+		</AuthShell>
+	);
+}

package/template/src/routes/index.tsx

@@ -0,0 +1,85 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { LocaleSwitcher } from "@/components/LocaleSwitcher";
+import { ThemeToggle } from "@/components/ThemeToggle";
+import {
+	buttonPrimaryClass,
+	buttonSecondaryClass,
+	linkClass,
+	mutedTextClass,
+} from "@/components/ui/styles";
+import { DEFAULT_DESCRIPTION, DEFAULT_TITLE, SITE_NAME } from "@/lib/site";
+import * as m from "@/paraglide/messages";
+import { cn } from "@/utils/cn";
+
+export const Route = createFileRoute("/")({
+	head: () => ({
+		meta: [
+			{ title: DEFAULT_TITLE },
+			{ name: "description", content: DEFAULT_DESCRIPTION },
+			{ property: "og:title", content: DEFAULT_TITLE },
+			{ property: "og:description", content: DEFAULT_DESCRIPTION },
+			{ name: "twitter:title", content: DEFAULT_TITLE },
+			{ name: "twitter:description", content: DEFAULT_DESCRIPTION },
+			{ name: "application-name", content: SITE_NAME },
+		],
+	}),
+	component: Home,
+});
+
+function Home() {
+	return (
+		<div className="page" data-testid="home-page">
+			<header className="mb-10 flex flex-wrap items-center justify-between gap-3">
+				<p className="text-sm text-muted-foreground" data-testid="home-eyebrow">
+					{m.app_name()}
+				</p>
+				<div className="flex flex-wrap items-center gap-3">
+					<LocaleSwitcher />
+					<ThemeToggle />
+				</div>
+			</header>
+
+			<section data-testid="home-hero">
+				<h1
+					className="text-2xl font-medium tracking-tight text-foreground sm:text-3xl"
+					data-testid="home-title"
+				>
+					{m.home_tagline()}
+				</h1>
+				<p
+					className={cn(mutedTextClass, "mt-3 max-w-prose leading-relaxed")}
+					data-testid="home-blurb"
+				>
+					{m.home_blurb()}
+				</p>
+
+				<nav
+					className="mt-8 flex flex-wrap items-center gap-3"
+					aria-label={m.nav_primary()}
+					data-testid="home-nav"
+				>
+					<Link
+						to="/sign-in"
+						className={buttonPrimaryClass}
+						data-testid="nav-sign-in"
+					>
+						{m.nav_sign_in()}
+					</Link>
+					<Link
+						to="/sign-up"
+						className={buttonSecondaryClass}
+						data-testid="nav-sign-up"
+					>
+						{m.nav_sign_up()}
+					</Link>
+					<Link to="/dashboard" className={linkClass}>
+						{m.nav_dashboard()}
+					</Link>
+					<Link to="/admin/users" className={linkClass}>
+						{m.nav_admin()}
+					</Link>
+				</nav>
+			</section>
+		</div>
+	);
+}

package/template/src/routes/oauth/consent.tsx

@@ -0,0 +1,77 @@
+import { createFileRoute, Link } from "@tanstack/react-router";
+import { useState } from "react";
+import {
+	AuthShell,
+	buttonClass,
+	buttonSecondaryClass,
+	linkClass,
+	mutedTextClass,
+	PageAlert,
+} from "@/components/shells";
+import { authClient } from "@/lib/auth-client";
+import { NOINDEX_META, pageTitle } from "@/lib/site";
+import * as m from "@/paraglide/messages";
+import { cn } from "@/utils/cn";
+
+export const Route = createFileRoute("/oauth/consent")({
+	// Keep the signed OAuth query intact for consent.
+	validateSearch: (search: Record<string, unknown>) => search,
+	head: () => ({
+		meta: [...NOINDEX_META, { title: pageTitle(m.auth_consent_title()) }],
+	}),
+	component: ConsentPage,
+});
+
+function ConsentPage() {
+	const [error, setError] = useState<string | null>(null);
+	const [pending, setPending] = useState(false);
+
+	async function decide(accept: boolean) {
+		setPending(true);
+		setError(null);
+		// Better Auth requires the signed query as oauth_query.
+		const oauth_query = window.location.search.replace(/^\?/, "");
+		try {
+			// Plugin requires the signed query forwarded as oauth_query.
+			await (
+				authClient.oauth2.consent as (body: {
+					accept: boolean;
+					oauth_query: string;
+				}) => Promise<unknown>
+			)({ accept, oauth_query });
+		} catch (e) {
+			setError(e instanceof Error ? e.message : m.auth_consent_failed());
+			setPending(false);
+		}
+	}
+
+	return (
+		<AuthShell title={m.auth_consent_title()}>
+			<p className={cn(mutedTextClass, "mb-4")}>{m.auth_consent_blurb()}</p>
+			{error ? <PageAlert>{error}</PageAlert> : null}
+			<div className="flex flex-col gap-2">
+				<button
+					type="button"
+					className={buttonClass}
+					disabled={pending}
+					onClick={() => void decide(true)}
+				>
+					{m.auth_consent_approve()}
+				</button>
+				<button
+					type="button"
+					className={cn(buttonSecondaryClass, "w-full")}
+					disabled={pending}
+					onClick={() => void decide(false)}
+				>
+					{m.auth_consent_deny()}
+				</button>
+			</div>
+			<p className="mt-4 text-center text-sm">
+				<Link to="/dashboard" className={linkClass}>
+					{m.auth_back_to_dashboard()}
+				</Link>
+			</p>
+		</AuthShell>
+	);
+}

package/template/src/routes/reset-password.tsx

@@ -0,0 +1,78 @@
+import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import {
+	AuthShell,
+	buttonClass,
+	Field,
+	inputClass,
+	linkClass,
+	PageAlert,
+} from "@/components/shells";
+import { authClient } from "@/lib/auth-client";
+import { NOINDEX_META, pageTitle } from "@/lib/site";
+import * as m from "@/paraglide/messages";
+
+export const Route = createFileRoute("/reset-password")({
+	validateSearch: (search: Record<string, unknown>) => ({
+		token: typeof search.token === "string" ? search.token : "",
+	}),
+	head: () => ({
+		meta: [...NOINDEX_META, { title: pageTitle(m.auth_reset_title()) }],
+	}),
+	component: ResetPasswordPage,
+});
+
+function ResetPasswordPage() {
+	const { token } = Route.useSearch();
+	const navigate = useNavigate();
+	const [password, setPassword] = useState("");
+	const [error, setError] = useState<string | null>(null);
+	const [pending, setPending] = useState(false);
+
+	async function onSubmit(e: React.FormEvent) {
+		e.preventDefault();
+		if (!token) {
+			setError(m.auth_missing_reset_token());
+			return;
+		}
+		setPending(true);
+		setError(null);
+		const { error: err } = await authClient.resetPassword({
+			newPassword: password,
+			token,
+		});
+		setPending(false);
+		if (err) {
+			setError(err.message ?? m.auth_reset_failed());
+			return;
+		}
+		void navigate({ to: "/sign-in" });
+	}
+
+	return (
+		<AuthShell title={m.auth_reset_title()}>
+			<form onSubmit={onSubmit}>
+				<Field label={m.field_new_password()} hint={m.auth_password_hint()}>
+					<input
+						className={inputClass}
+						type="password"
+						autoComplete="new-password"
+						required
+						minLength={8}
+						value={password}
+						onChange={(ev) => setPassword(ev.target.value)}
+					/>
+				</Field>
+				{error ? <PageAlert>{error}</PageAlert> : null}
+				<button type="submit" className={buttonClass} disabled={pending}>
+					{pending ? m.auth_saving() : m.auth_update_password()}
+				</button>
+			</form>
+			<p className="mt-4 text-center text-sm">
+				<Link to="/sign-in" className={linkClass}>
+					{m.auth_back_to_sign_in()}
+				</Link>
+			</p>
+		</AuthShell>
+	);
+}

package/template/src/routes/sign-in.tsx

@@ -0,0 +1,174 @@
+import { createFileRoute, Link, redirect } from "@tanstack/react-router";
+import { useEffect, useRef, useState } from "react";
+import {
+	AuthDivider,
+	GithubButton,
+	PasskeyButton,
+} from "@/components/auth/social";
+import { Turnstile, type TurnstileHandle } from "@/components/auth/turnstile";
+import {
+	AuthShell,
+	buttonClass,
+	Field,
+	inputClass,
+	linkClass,
+	mutedTextClass,
+	PageAlert,
+} from "@/components/shells";
+import { authClient } from "@/lib/auth-client";
+import { CAPTCHA_ENABLED } from "@/lib/captcha";
+import { GITHUB_OAUTH_ENABLED } from "@/lib/github";
+import { NOINDEX_META, pageTitle } from "@/lib/site";
+import * as m from "@/paraglide/messages";
+import { afterAuthTarget, localizedAuthPath } from "@/utils/auth-redirect";
+
+export const Route = createFileRoute("/sign-in")({
+	// Pass-through search so signed OAuth queries survive login.
+	validateSearch: (search: Record<string, unknown>) => search,
+	beforeLoad: ({ context: { session } }) => {
+		if (session?.user) {
+			throw redirect({ to: "/dashboard" });
+		}
+	},
+	head: () => ({
+		meta: [...NOINDEX_META, { title: pageTitle(m.auth_sign_in_title()) }],
+	}),
+	component: SignInPage,
+});
+
+function afterAuth(): void {
+	if (typeof window === "undefined") return;
+	window.location.href = afterAuthTarget();
+}
+
+function SignInPage() {
+	const [email, setEmail] = useState("");
+	const [password, setPassword] = useState("");
+	const [error, setError] = useState<string | null>(null);
+	const [pending, setPending] = useState(false);
+	const [captchaToken, setCaptchaToken] = useState<string | null>(null);
+	const turnstile = useRef<TurnstileHandle>(null);
+
+	// Passkey conditional UI: browser may offer a saved passkey from autofill.
+	useEffect(() => {
+		let cancelled = false;
+		const check =
+			window.PublicKeyCredential?.isConditionalMediationAvailable?.();
+		if (!check) return;
+		void check.then((available) => {
+			if (!available || cancelled) return;
+			void authClient.signIn.passkey({ autoFill: true }).then((result) => {
+				if (!cancelled && !result.error) afterAuth();
+			});
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, []);
+
+	async function onSubmit(e: React.FormEvent) {
+		e.preventDefault();
+		setPending(true);
+		setError(null);
+		if (CAPTCHA_ENABLED && !captchaToken) {
+			setError(m.auth_captcha_required());
+			setPending(false);
+			return;
+		}
+		const { error: err } = await authClient.signIn.email({
+			email,
+			password,
+			// Locale-aware so verification / error returns stay on the same language URL.
+			callbackURL: localizedAuthPath("/sign-in"),
+			fetchOptions: {
+				headers: { "x-captcha-response": captchaToken ?? "" },
+			},
+		});
+		turnstile.current?.reset();
+		setPending(false);
+		if (err) {
+			setError(err.message ?? m.auth_sign_in_failed());
+			return;
+		}
+		afterAuth();
+	}
+
+	return (
+		<AuthShell title={m.auth_sign_in_title()}>
+			<form onSubmit={onSubmit}>
+				<Field label={m.field_email()}>
+					<input
+						className={inputClass}
+						type="email"
+						autoComplete="username webauthn"
+						required
+						value={email}
+						onChange={(ev) => setEmail(ev.target.value)}
+					/>
+				</Field>
+				<Field label={m.field_password()}>
+					<input
+						className={inputClass}
+						type="password"
+						autoComplete="current-password"
+						required
+						value={password}
+						onChange={(ev) => setPassword(ev.target.value)}
+					/>
+				</Field>
+				<Turnstile ref={turnstile} onToken={setCaptchaToken} />
+				{error ? <PageAlert>{error}</PageAlert> : null}
+				<button
+					type="submit"
+					className={buttonClass}
+					disabled={pending || (CAPTCHA_ENABLED && !captchaToken)}
+				>
+					{pending ? m.auth_signing_in() : m.nav_sign_in()}
+				</button>
+			</form>
+
+			<AuthDivider />
+			<div className="mt-4 flex flex-col gap-2">
+				{GITHUB_OAUTH_ENABLED ? (
+					<GithubButton label={m.auth_continue_github()} />
+				) : null}
+				<PasskeyButton
+					label={m.auth_use_passkey()}
+					disabled={pending}
+					onClick={() => {
+						setPending(true);
+						setError(null);
+						void authClient.signIn
+							.passkey()
+							.then(({ error: err }) => {
+								if (err) {
+									setError(err.message ?? m.auth_passkey_failed());
+									return;
+								}
+								afterAuth();
+							})
+							.catch((err) => {
+								setError(
+									err instanceof Error ? err.message : m.auth_passkey_failed(),
+								);
+							})
+							.finally(() => {
+								setPending(false);
+							});
+					}}
+				/>
+			</div>
+
+			<p className={`mt-4 text-center ${mutedTextClass}`}>
+				{m.auth_no_account()}{" "}
+				<Link to="/sign-up" className={linkClass}>
+					{m.nav_sign_up()}
+				</Link>
+				{" · "}
+				<Link to="/forgot-password" className={linkClass}>
+					{m.auth_forgot_title()}
+				</Link>
+			</p>
+		</AuthShell>
+	);
+}