@vonall/auth 0.2.0 → 0.3.0

package/dist/ui/DeletionTab.svelte.d.ts

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    agents?: boolean;
+};
+declare const DeletionTab: import("svelte").Component<$$ComponentProps, {}, "">;
+type DeletionTab = ReturnType<typeof DeletionTab>;
+export default DeletionTab;

package/dist/ui/EinladungErstellen.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { Copy, Share2 } from "@lucide/svelte";
+	import { toast } from "svelte-sonner";
+	import { Button } from "../components/ui/button/index.js";
+	import { Input } from "../components/ui/input/index.js";
+	import { m } from "../messages.js";
+	import { createEinladung, getOffeneEinladungen } from "../remote/einladung.remote.js";
+	import { authUi } from "./context.js";
+	import { messageOf } from "../util/messageOf.js";
+
+	/** Creates an Einladung (a link, optionally sent by email) and shows the link once; in the settings and for the admin. */
+	const { appName } = authUi();
+	const mail = $derived((await getOffeneEinladungen()).mail);
+
+	let email = $state("");
+	let busy = $state(false);
+	let link = $state<string | null>(null);
+
+	const text = $derived(m().invitationText(appName, link ?? ""));
+
+	async function create(event: SubmitEvent) {
+		event.preventDefault();
+		busy = true;
+		try {
+			const result = await createEinladung({ email: email.trim() || null });
+			link = result.link;
+			if (result.mailFehler) toast.error(m().shareYourself(result.mailFehler));
+			else if (email.trim()) toast.success(m().invitationSentTo(email.trim()));
+			email = "";
+		} catch (e) {
+			toast.error(messageOf(e, m().invitationNotCreated));
+		} finally {
+			busy = false;
+		}
+	}
+
+	async function copy() {
+		if (!link) return;
+		try {
+			await navigator.clipboard.writeText(text);
+			toast.success(m().linkCopied);
+		} catch {
+			toast.error(m().copyLinkFailed);
+		}
+	}
+
+	async function share() {
+		try {
+			await navigator.share({ title: appName, text });
+		} catch {
+			// cancelled or not supported: the copy button remains
+		}
+	}
+</script>
+
+<form onsubmit={create} class="flex flex-wrap gap-2">
+	{#if mail}
+		<Input type="email" bind:value={email} placeholder={m().emailOptional} autocomplete="off" class="min-w-56 flex-1" />
+	{/if}
+	<Button type="submit" disabled={busy} class="cursor-pointer">{busy ? m().creating : m().createInvitation}</Button>
+</form>
+
+{#if link}
+	<div class="grid gap-2 rounded-lg bg-muted p-3">
+		<code class="text-xs break-all">{link}</code>
+		<div class="flex gap-2">
+			<Button size="sm" variant="secondary" onclick={copy} class="cursor-pointer"><Copy size={14} /> {m().copy}</Button>
+			{#if typeof navigator !== "undefined" && "share" in navigator}
+				<Button size="sm" variant="secondary" onclick={share} class="cursor-pointer"><Share2 size={14} /> {m().share}</Button>
+			{/if}
+		</div>
+		<p class="text-xs text-muted-foreground">{m().linkShownOnce}</p>
+	</div>
+{/if}

package/dist/ui/EinladungErstellen.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const EinladungErstellen: import("svelte").Component<Record<string, never>, {}, "">;
+type EinladungErstellen = ReturnType<typeof EinladungErstellen>;
+export default EinladungErstellen;

package/dist/ui/EinladungPage.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	import { page } from "$app/state";
+	import { Button } from "../components/ui/button/index.js";
+	import * as Card from "../components/ui/card/index.js";
+	import { m } from "../messages.js";
+	import { authUi } from "./context.js";
+	import { href } from "./href.js";
+
+	/** The page an Einladung link opens (`einladungLoad` gives `data`); `tagline` is the Product's one sentence about itself. */
+	let { data, tagline }: { data: { fehler: string | null; einladung: { inviterName: string } | null; eingeloggt: boolean }; tagline: string } = $props();
+	const { appName } = authUi();
+
+	const loginLink = $derived(`${href("/auth/login")}?redirectTo=${encodeURIComponent(page.url.pathname)}`);
+</script>
+
+<svelte:head><title>{m().invitationTitle} · {appName}</title></svelte:head>
+
+<div class="flex min-h-svh flex-col items-center justify-center bg-muted p-6">
+	<Card.Root class="w-full max-w-sm">
+		<Card.Header class="text-center">
+			<Card.Title class="text-xl">{m().invitationTo(appName)}</Card.Title>
+			{#if data.einladung}
+				<Card.Description>{m().invitesYou(data.einladung.inviterName)}</Card.Description>
+			{/if}
+		</Card.Header>
+		<Card.Content class="grid gap-4 text-sm">
+			{#if data.fehler}
+				<p class="text-center">{data.fehler}. {m().askForNewLink}</p>
+				<Button href={href("/")} variant="outline">{m().toStartPage}</Button>
+			{:else if data.eingeloggt}
+				<p class="text-center">{m().alreadyHaveAccountNoInvite}</p>
+				<Button href={href("/home")}>{m().openApp(appName)}</Button>
+			{:else}
+				<p>{tagline}</p>
+				<div class="grid gap-2">
+					<Button href={href("/auth/signup")}>{m().createAccount}</Button>
+					<Button href={loginLink} variant="outline">{m().iHaveAnAccount}</Button>
+				</div>
+			{/if}
+		</Card.Content>
+	</Card.Root>
+</div>

package/dist/ui/EinladungPage.svelte.d.ts

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    data: {
+        fehler: string | null;
+        einladung: {
+            inviterName: string;
+        } | null;
+        eingeloggt: boolean;
+    };
+    tagline: string;
+};
+declare const EinladungPage: import("svelte").Component<$$ComponentProps, {}, "">;
+type EinladungPage = ReturnType<typeof EinladungPage>;
+export default EinladungPage;

package/dist/ui/IconGithub.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { SVGAttributes } from "svelte/elements";
+	let { class: className = "size-5 mr-2", ...restProps }: SVGAttributes<SVGElement> = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	class={className}
+	fill="currentColor"
+	{...restProps}
+>
+		<path
+			d="M12 0.297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.387.6.113.82-.258.82-.577 
+                                        0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.757-1.333-1.757-1.09-.745.083-.729.083-.729 
+                                        1.205.084 1.84 1.236 1.84 1.236 1.07 1.835 2.807 1.305 3.495.997.108-.776.418-1.305.76-1.605-2.665-.3-5.467-1.334-5.467-5.93 
+                                        0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.522.105-3.176 0 0 1.005-.322 3.3 1.23a11.5 11.5 0 0 1 3-.405c1.02.005 
+                                        2.045.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.654.24 2.873.12 3.176.765.84 
+                                        1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.429.372.81 1.103.81 2.222 
+                                        0 1.606-.015 2.896-.015 3.286 0 .315.21.694.825.576C20.565 22.092 
+                                        24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+		/>
+	</svg>

package/dist/ui/IconGithub.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SVGAttributes } from "svelte/elements";
+declare const IconGithub: import("svelte").Component<SVGAttributes<SVGElement>, {}, "">;
+type IconGithub = ReturnType<typeof IconGithub>;
+export default IconGithub;

package/dist/ui/IconGoogle.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { SVGAttributes } from "svelte/elements";
+	let { class: className = "size-5 mr-2", ...restProps }: SVGAttributes<SVGElement> = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 24 24"
+	class={className}
+	{...restProps}
+>
+		<path
+			d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+			fill="currentColor"
+		/>
+	</svg>

package/dist/ui/IconGoogle.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SVGAttributes } from "svelte/elements";
+declare const IconGoogle: import("svelte").Component<SVGAttributes<SVGElement>, {}, "">;
+type IconGoogle = ReturnType<typeof IconGoogle>;
+export default IconGoogle;

package/dist/ui/InvitationsTab.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { X } from "@lucide/svelte";
+	import { toast } from "svelte-sonner";
+	import * as Tabs from "../components/ui/tabs/index.js";
+	import { m } from "../messages.js";
+	import { getOffeneEinladungen, withdrawEinladung } from "../remote/einladung.remote.js";
+	import { authUi } from "./context.js";
+	import EinladungErstellen from "./EinladungErstellen.svelte";
+	import { messageOf } from "../util/messageOf.js";
+
+	/** Signup is invite only: here a user creates Einladungen and sees the open ones. */
+	const { locale } = authUi();
+	const offen = $derived(await getOffeneEinladungen());
+	const datum = new Intl.DateTimeFormat(locale, { day: "numeric", month: "long" });
+
+	async function withdraw(einladungId: string) {
+		try {
+			await withdrawEinladung({ einladungId });
+			toast.success(m().invitationWithdrawn);
+		} catch (e) {
+			toast.error(messageOf(e, m().invitationNotWithdrawn));
+		}
+	}
+</script>
+
+<Tabs.Content value="invitations" class="panel mt-6 grid gap-4 p-6 md:p-8">
+	<div class="space-y-1">
+		<h3 class="text-lg font-medium">{m().inviteSomeone}</h3>
+		<p class="text-sm text-muted-foreground">{m().inviteIntro}</p>
+	</div>
+
+	<EinladungErstellen />
+
+	{#if offen.einladungen.length > 0}
+		<ul class="grid gap-2 text-sm">
+			{#each offen.einladungen as e (e.id)}
+				<li class="flex items-center justify-between gap-2">
+					<span class="text-muted-foreground">{e.email ?? m().linkWord} · {m().validUntil(datum.format(new Date(e.expiresAt)))}</span>
+					<button type="button" class="text-muted-foreground hover:text-destructive" aria-label={m().withdrawInvitation} onclick={() => withdraw(e.id)}>
+						<X size={14} />
+					</button>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</Tabs.Content>

package/dist/ui/InvitationsTab.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const InvitationsTab: import("svelte").Component<Record<string, never>, {}, "">;
+type InvitationsTab = ReturnType<typeof InvitationsTab>;
+export default InvitationsTab;

package/dist/ui/LinksTab.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { Link2, Unlink } from "@lucide/svelte";
+	import { goto } from "$app/navigation";
+	import { page } from "$app/state";
+	import { toast } from "svelte-sonner";
+	import { Button } from "../components/ui/button/index.js";
+	import * as Tabs from "../components/ui/tabs/index.js";
+	import { m } from "../messages.js";
+	import { getLinkedAccounts } from "../remote/app_user.remote.js";
+	import { authUi } from "./context.js";
+	import IconGithub from "./IconGithub.svelte";
+	import IconGoogle from "./IconGoogle.svelte";
+	import { isSessionNotFresh, reauthPath } from "../util/fresh.js";
+
+	const { authClient } = authUi();
+	const linkedAccounts = $derived(getLinkedAccounts());
+	const providersData = $derived(page.data.providers as { github?: boolean; google?: boolean } | undefined);
+
+	const providers = $derived([
+		...(providersData?.github ? [{ id: "github", name: "GitHub", component: IconGithub }] : []),
+		...(providersData?.google ? [{ id: "google", name: "Google", component: IconGoogle }] : []),
+	]);
+
+	async function link(provider: string) {
+		const res = await authClient.linkSocial({ provider, callbackURL: window.location.href });
+		if (res?.error) toast.error(res.error.message || m().providerNotLinked(provider));
+	}
+
+	async function unlink(provider: string) {
+		const accountId = linkedAccounts.current?.find((acc) => acc.providerId === provider)?.id;
+		if (!accountId) return;
+		const res = await authClient.unlinkAccount({ accountId, providerId: provider });
+
+		if (isSessionNotFresh(res?.error)) {
+			// better-auth lets only a login from the last day unlink an account
+			await goto(reauthPath(`${page.url.pathname}?tab=links`));
+		} else if (res?.error) {
+			toast.error(res.error.message || m().providerNotUnlinked(provider));
+		} else {
+			toast.success(m().providerUnlinked(provider));
+			linkedAccounts.refresh();
+		}
+	}
+
+	function isLinked(providerId: string) {
+		return linkedAccounts.current?.some((acc) => acc.providerId === providerId);
+	}
+</script>
+
+<Tabs.Content value="links" class="panel mt-6 p-6 md:p-8">
+	<div class="space-y-6">
+		<div class="space-y-1">
+			<h3 class="text-lg font-medium">{m().linkedAccounts}</h3>
+			<p class="text-sm text-muted-foreground">{m().linkedIntro}</p>
+		</div>
+
+		<div class="grid gap-4">
+			{#each providers as provider (provider.id)}
+				{@const linked = isLinked(provider.id)}
+				<div class="flex items-center justify-between rounded-lg border bg-muted/30 p-4">
+					<div class="flex items-center gap-4">
+						<div class="flex items-center justify-center rounded-md border bg-background p-2">
+							<provider.component class="size-5" />
+						</div>
+						<div>
+							<p class="font-medium">{provider.name}</p>
+							<p class="text-xs text-muted-foreground">{linked ? m().linked : m().notLinked}</p>
+						</div>
+					</div>
+
+					{#if linked}
+						<Button variant="outline" size="sm" class="cursor-pointer text-destructive hover:text-destructive" onclick={() => unlink(provider.id)}>
+							<Unlink class="mr-2 size-4" />
+							{m().unlink}
+						</Button>
+					{:else}
+						<Button class="cursor-pointer" variant="outline" size="sm" onclick={() => link(provider.id)}>
+							<Link2 class="mr-2 size-4" />
+							{m().link}
+						</Button>
+					{/if}
+				</div>
+			{/each}
+
+			{#if providers.length === 0}
+				<p class="text-sm text-muted-foreground">{m().noSocialLogin}</p>
+			{/if}
+			<p class="text-xs text-muted-foreground">{m().autoLinkNote}</p>
+		</div>
+	</div>
+</Tabs.Content>

package/dist/ui/LinksTab.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const LinksTab: import("svelte").Component<Record<string, never>, {}, "">;
+type LinksTab = ReturnType<typeof LinksTab>;
+export default LinksTab;

package/dist/ui/LoginForm.svelte

@@ -0,0 +1,220 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { LoaderCircle } from "@lucide/svelte";
+	import { goto } from "$app/navigation";
+	import { page } from "$app/state";
+	import { toast } from "svelte-sonner";
+	import { Button } from "../components/ui/button/index.js";
+	import * as Card from "../components/ui/card/index.js";
+	import { Input } from "../components/ui/input/index.js";
+	import { Label } from "../components/ui/label/index.js";
+	import { m } from "../messages.js";
+	import { authUi } from "./context.js";
+	import { href } from "./href.js";
+	import SocialButton from "./SocialButton.svelte";
+	import Verify2FAForm from "./Verify2FAForm.svelte";
+	import { cn } from "../utils.js";
+	import { messageOf } from "../util/messageOf.js";
+	import { sameSitePath } from "../util/sameSite.js";
+
+	/**
+	 * The login page: email and password (with two-factor and the forgotten password), the social logins that have keys
+	 * (`authLayoutLoad`). `footer` is the Product's line under the card (e.g. its privacy policy).
+	 */
+	const { class: className, footer, ...restProps }: { class?: string; footer?: Snippet } = $props();
+	const { authClient, appName, signupMode } = authUi();
+
+	let email = $state("");
+	let password = $state("");
+	let loading = $state(false);
+	let errorMessage = $state("");
+
+	let show2FAInput = $state(false);
+	let showForgotPassword = $state(false);
+	let forgotPasswordEmail = $state("");
+	let sendingResetLink = $state(false);
+
+	const providers = $derived(page.data.providers as { github?: boolean; google?: boolean } | undefined);
+	const mail = $derived(page.data.mail as boolean);
+
+	const urlError = $derived(page.url.searchParams.get("error"));
+	// A new account through GitHub or Google was refused: why depends on the signup mode
+	const noNewAccount = $derived(signupMode === "open" ? m().noNewAccountOpen : m().noNewAccountInvite);
+	const URL_ERRORS = $derived<Record<string, string>>({
+		account_not_linked: m().accountNotLinked,
+		unable_to_create_user: noNewAccount,
+		forbidden: noNewAccount,
+		session_not_fresh: m().loginTooOld,
+	});
+
+	const displayError = $derived(urlError ? (URL_ERRORS[urlError.toLowerCase()] ?? urlError) : errorMessage);
+
+	async function requestPasswordReset(e: SubmitEvent) {
+		e.preventDefault();
+		if (!forgotPasswordEmail || !forgotPasswordEmail.includes("@")) {
+			toast.error(m().invalidEmailDot);
+			return;
+		}
+		sendingResetLink = true;
+		try {
+			const res = await authClient.requestPasswordReset({ email: forgotPasswordEmail, redirectTo: `${window.location.origin}/auth/reset-password` });
+			if (res.error) {
+				toast.error(res.error.message || m().resetLinkNotSent);
+			} else {
+				toast.success(m().resetLinkSent);
+				showForgotPassword = false;
+				forgotPasswordEmail = "";
+			}
+		} catch (err) {
+			toast.error(messageOf(err, m().resetLinkNotRequested));
+		} finally {
+			sendingResetLink = false;
+		}
+	}
+
+	// An AI assistant (MCP client) sent the user here to authorise it; the query is signed by the OAuth provider.
+	// Sign-in then carries it along (the OAuth provider client plugin) and the server answers with the next step's URL
+	// (consent page or the client's callback), which the auth client follows by itself.
+	const oauthRequest = $derived(page.url.searchParams.has("sig") && page.url.searchParams.has("client_id"));
+	// Only same-site paths, e.g. back to an Einladung after logging in
+	const redirectTo = $derived(sameSitePath(page.url.searchParams.get("redirectTo"), page.url.origin));
+
+	async function next(data?: { redirect?: boolean; url?: string } | null) {
+		if (data?.redirect && data.url) return; // the auth client navigates to data.url
+		if (oauthRequest) {
+			// Fallback: with a session, the authorize endpoint continues the flow in the browser
+			const query = [...page.url.searchParams].filter(([key]) => key !== "sig" && key !== "exp");
+			window.location.href = `/api/auth/oauth2/authorize?${query.map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join("&")}`;
+			return;
+		}
+		// A new login: queries cached before it (one that sent here to log in again resolved empty) load again
+		await goto(redirectTo ?? href("/home"), { replaceState: true, refreshAll: true });
+	}
+
+	async function signIn(e: SubmitEvent) {
+		e.preventDefault();
+		await authClient.signIn.email(
+			{ email, password },
+			{
+				onRequest: () => {
+					loading = true;
+					errorMessage = "";
+				},
+				onSuccess: async (ctx) => {
+					loading = false;
+					const data = ctx.data as { twoFactorRedirect?: boolean; redirect?: boolean; url?: string } | null;
+					if (data?.twoFactorRedirect) show2FAInput = true;
+					else await next(data);
+				},
+				onError: async (ctx) => {
+					loading = false;
+					// Signup mode open: the address isn't confirmed yet; better-auth has just sent a new link
+					errorMessage = ctx.error.code === "EMAIL_NOT_VERIFIED" ? m().confirmEmailFirst : (ctx.error.message ?? "");
+				},
+			},
+		);
+	}
+</script>
+
+<div class={cn("flex flex-col gap-6", className)} {...restProps}>
+	<Card.Root>
+		<Card.Header class="text-center">
+			<Card.Title class="text-xl">{m().welcomeBack}</Card.Title>
+			<Card.Description>{m().logInTo(appName)}</Card.Description>
+		</Card.Header>
+		<Card.Content>
+			{#if show2FAInput}
+				<Verify2FAForm
+					onSuccess={async (data) => {
+						await next(data);
+						show2FAInput = false;
+					}}
+					onCancel={() => {
+						show2FAInput = false;
+						errorMessage = "";
+					}}
+				/>
+			{:else if showForgotPassword}
+				<form onsubmit={requestPasswordReset}>
+					<div class="grid gap-6">
+						<div class="space-y-2 text-center">
+							<h3 class="text-lg font-medium">{m().forgotPassword}</h3>
+							<p class="text-sm text-muted-foreground">{m().forgotIntro}</p>
+						</div>
+						<div class="grid gap-3">
+							<Label for="resetEmail">{m().email}</Label>
+							<Input id="resetEmail" type="email" bind:value={forgotPasswordEmail} placeholder={m().emailPlaceholder} required />
+						</div>
+						<div class="flex flex-col gap-2">
+							<Button type="submit" class="w-full cursor-pointer" disabled={sendingResetLink}>
+								{#if sendingResetLink}<LoaderCircle class="mr-2 h-4 w-4 animate-spin" />{/if}
+								{m().sendTheLink}
+							</Button>
+							<Button
+								type="button"
+								variant="outline"
+								class="w-full cursor-pointer"
+								onclick={() => {
+									showForgotPassword = false;
+									errorMessage = "";
+								}}
+							>
+								{m().backToLogin}
+							</Button>
+						</div>
+					</div>
+				</form>
+			{:else}
+				<form onsubmit={signIn}>
+					<div class="grid gap-6">
+						{#if providers?.github || providers?.google}
+							<div class="flex flex-col gap-4">
+								{#if providers.github}<SocialButton provider="github" callbackURL={redirectTo ?? "/home"} />{/if}
+								{#if providers.google}<SocialButton provider="google" callbackURL={redirectTo ?? "/home"} />{/if}
+							</div>
+							<div class="after:border-border relative text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t">
+								<span class="bg-card text-muted-foreground relative z-10 px-2">{m().orWithEmail}</span>
+							</div>
+						{/if}
+						<div class="grid gap-6">
+							<div class="grid gap-3">
+								<Label for="email">{m().email}</Label>
+								<Input id="email" name="email" bind:value={email} type="email" placeholder={m().emailPlaceholder} required autocomplete="username" />
+							</div>
+							<div class="grid gap-3">
+								<div class="flex items-center">
+									<Label for="password">{m().password}</Label>
+									{#if mail}
+										<button
+											type="button"
+											onclick={() => {
+												showForgotPassword = true;
+												errorMessage = "";
+											}}
+											class="ml-auto cursor-pointer border-0 bg-transparent p-0 text-sm text-muted-foreground underline-offset-4 hover:text-foreground hover:underline"
+										>
+											{m().forgotPassword}
+										</button>
+									{/if}
+								</div>
+								<Input id="password" name="password" type="password" bind:value={password} required autocomplete="current-password" />
+							</div>
+							{#if displayError}
+								<div class="rounded-md text-center text-sm text-destructive">{displayError}</div>
+							{/if}
+							<Button type="submit" class="w-full cursor-pointer" disabled={loading}>
+								{#if loading}<LoaderCircle class="mr-2 h-4 w-4 animate-spin" />{/if}
+								{m().logIn}
+							</Button>
+						</div>
+						<div class="text-center text-sm">
+							{m().noAccountYet}
+							<a href={href("/auth/signup")} class="underline underline-offset-4">{m().signUp}</a>
+						</div>
+					</div>
+				</form>
+			{/if}
+		</Card.Content>
+	</Card.Root>
+	{@render footer?.()}
+</div>

package/dist/ui/LoginForm.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    class?: string;
+    footer?: Snippet;
+};
+declare const LoginForm: import("svelte").Component<$$ComponentProps, {}, "">;
+type LoginForm = ReturnType<typeof LoginForm>;
+export default LoginForm;

package/dist/ui/MobileSettingsMenu.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { ChevronRight } from "@lucide/svelte";
+	import * as Avatar from "../components/ui/avatar/index.js";
+	import { m } from "../messages.js";
+	import type { AppUserClient } from "../types.js";
+	import type { SettingsTabDef } from "./tabs.js";
+	import { displayInitials } from "../util/names.js";
+
+	let { user, memberSince, tabs, onSelectTab }: { user: AppUserClient; memberSince: string; tabs: SettingsTabDef[]; onSelectTab: (tabName: string) => void } = $props();
+</script>
+
+<section class="panel flex items-center gap-4 p-5">
+	<Avatar.Root class="size-14">
+		{#if user.image}<Avatar.Image src={user.image} alt="" />{/if}
+		<Avatar.Fallback class="bg-primary/10 text-xl font-semibold text-primary">{displayInitials(user)}</Avatar.Fallback>
+	</Avatar.Root>
+	<div class="min-w-0">
+		<span class="section-kicker">{m().profile}</span>
+		<h1 class="truncate text-xl font-semibold">{user.name}</h1>
+		<p class="mt-0.5 truncate text-xs text-muted-foreground">{#if memberSince}{m().memberSince(memberSince)}{:else}{user.email}{/if}</p>
+	</div>
+</section>
+
+<section class="panel divide-y px-4">
+	{#each tabs as tab (tab.id)}
+		<button onclick={() => onSelectTab(tab.id)} class="flex w-full cursor-pointer items-center gap-4 py-3.5 text-left">
+			<span class="grid size-9 place-items-center rounded-lg {tab.id === 'deletion' ? 'bg-destructive/10 text-destructive' : 'bg-primary/10 text-primary'}">
+				<tab.icon size={20} />
+			</span>
+			<span class="grid min-w-0 flex-1">
+				<strong class="text-sm font-medium">{tab.label}</strong>
+				<small class="text-xs text-muted-foreground">{tab.hint}</small>
+			</span>
+			<ChevronRight size={18} class="text-muted-foreground" />
+		</button>
+	{/each}
+</section>

package/dist/ui/MobileSettingsMenu.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { AppUserClient } from "../types.js";
+import type { SettingsTabDef } from "./tabs.js";
+type $$ComponentProps = {
+    user: AppUserClient;
+    memberSince: string;
+    tabs: SettingsTabDef[];
+    onSelectTab: (tabName: string) => void;
+};
+declare const MobileSettingsMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type MobileSettingsMenu = ReturnType<typeof MobileSettingsMenu>;
+export default MobileSettingsMenu;