@protobase/ui 0.3.4 → 0.4.1

package/dist/account/account-pages.js

@@ -0,0 +1,20 @@
+import { KeyRound, ShieldCheck } from "lucide-react";
+//#region src/account/account-pages.ts
+const accountSecurityPath = "/-/account";
+const signInPolicyPath = "/-/sign-in-policy";
+/** The app's own pages for the signed-in person, at the end of the profile menu: their sign-in, and for admins the policy. */
+const accountMenuItems = (basePath, path, admin) => [{
+	id: "account-security",
+	label: "Sign-in & security",
+	icon: KeyRound,
+	href: `${basePath}${accountSecurityPath}`,
+	active: path === accountSecurityPath
+}, ...admin ? [{
+	id: "sign-in-policy",
+	label: "Sign-in policy",
+	icon: ShieldCheck,
+	href: `${basePath}${signInPolicyPath}`,
+	active: path === signInPolicyPath
+}] : []];
+//#endregion
+export { accountMenuItems, accountSecurityPath, signInPolicyPath };

package/dist/account/account-section.js

@@ -0,0 +1,31 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/account/account-section.tsx
+/** One part of the account page: a title with its status, what it is, and its controls. */
+const AccountSection = ({ title, status, description, children }) => /* @__PURE__ */ jsxs("section", {
+	"aria-label": title,
+	className: "rounded-lg border bg-background p-4 sm:p-5",
+	children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap items-center gap-2",
+			children: [/* @__PURE__ */ jsx("h2", {
+				className: "text-[15px] font-semibold",
+				children: title
+			}), status]
+		}),
+		/* @__PURE__ */ jsx("p", {
+			className: "mt-1 text-[13px] text-muted-foreground",
+			children: description
+		}),
+		children && /* @__PURE__ */ jsx("div", {
+			className: "mt-4",
+			children
+		})
+	]
+});
+const SectionError = ({ message }) => message ? /* @__PURE__ */ jsx("p", {
+	role: "alert",
+	className: "mb-3 text-xs font-medium text-danger-text",
+	children: message
+}) : null;
+//#endregion
+export { AccountSection, SectionError };

package/dist/account/account-security-page.js

@@ -0,0 +1,59 @@
+import { Spinner } from "../primitives/spinner.js";
+import { PageHeader } from "../app-shell/page-header.js";
+import { authMessage } from "../auth/auth-messages.js";
+import { useAuth } from "../auth/auth-provider.js";
+import { PasskeysSection } from "./passkeys-section.js";
+import { TwoFactorSection } from "./two-factor-section.js";
+import { useCallback, useEffect, useState } from "react";
+import { AuthError } from "@protobase/client";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/account/account-security-page.tsx
+/** The signed-in person's passkeys and two-factor authentication, within what the sign-in policy allows. */
+const AccountSecurityPage = ({ email }) => {
+	const { session } = useAuth();
+	const { account } = session;
+	const [loaded, setLoaded] = useState();
+	const [error, setError] = useState();
+	const reload = useCallback(() => {
+		Promise.all([account.signInMethods(), account.passkeys()]).then(([methods, passkeys]) => setLoaded({
+			methods,
+			passkeys
+		}), (failure) => setError(failure instanceof AuthError ? authMessage(failure) : "Could not read your sign-in methods"));
+	}, [account]);
+	useEffect(reload, [reload]);
+	const thenReload = (change) => change.then((result) => (reload(), result));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mx-auto flex w-full max-w-3xl flex-col gap-4 px-4 py-6 md:px-6",
+		children: [/* @__PURE__ */ jsx(PageHeader, {
+			title: "Sign-in & security",
+			subtitle: email
+		}), loaded ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(PasskeysSection, {
+			rule: loaded.methods.policy.passkey,
+			passkeys: loaded.passkeys,
+			onAdd: () => thenReload(account.addPasskey()),
+			onRename: (id, name) => thenReload(account.renamePasskey(id, name)),
+			onRemove: (id) => thenReload(account.removePasskey(id))
+		}), /* @__PURE__ */ jsx(TwoFactorSection, {
+			rule: loaded.methods.policy.twoFactor,
+			enabled: loaded.methods.account.twoFactor,
+			authenticatorApp: loaded.methods.account.authenticatorApp,
+			mail: loaded.methods.mail,
+			needsPassword: loaded.methods.account.password,
+			onStartApp: (password) => account.startAuthenticatorApp(password),
+			onConfirmApp: (code) => account.confirmAuthenticatorApp(code),
+			onEmailedCodes: (password) => account.turnOnEmailedCodes(password),
+			onTurnOff: (password) => account.turnOffTwoFactor(password),
+			onNewBackupCodes: (password) => account.newBackupCodes(password),
+			onChanged: reload
+		})] }) : error ? /* @__PURE__ */ jsx("p", {
+			role: "alert",
+			className: "text-[13px] text-danger-text",
+			children: error
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 text-[13px] text-muted-foreground",
+			children: [/* @__PURE__ */ jsx(Spinner, {}), " Loading"]
+		})]
+	});
+};
+//#endregion
+export { AccountSecurityPage };

package/dist/account/backup-codes.js

@@ -0,0 +1,44 @@
+import { Button } from "../primitives/button.js";
+import { useState } from "react";
+import { Check, Copy, Download } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/account/backup-codes.tsx
+/** The backup codes, shown once, with ways to keep them: each works once instead of a code from the app. */
+const BackupCodes = ({ codes }) => {
+	const [copied, setCopied] = useState(false);
+	const text = `${codes.join("\n")}\n`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-3",
+		children: [/* @__PURE__ */ jsx("ul", {
+			"aria-label": "Backup codes",
+			className: "grid grid-cols-2 gap-x-4 gap-y-1 rounded-md border bg-surface p-3 font-mono text-[13px]",
+			children: codes.map((code) => /* @__PURE__ */ jsx("li", { children: code }, code))
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-wrap gap-2",
+			children: [/* @__PURE__ */ jsxs(Button, {
+				size: "sm",
+				onClick: () => {
+					navigator.clipboard.writeText(text).then(() => {
+						setCopied(true);
+						setTimeout(() => setCopied(false), 2e3);
+					});
+				},
+				children: [copied ? /* @__PURE__ */ jsx(Check, { className: "size-3.5 text-success" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3.5" }), copied ? "Copied" : "Copy"]
+			}), /* @__PURE__ */ jsxs(Button, {
+				size: "sm",
+				onClick: () => saveText(text, "backup-codes.txt"),
+				children: [/* @__PURE__ */ jsx(Download, { className: "size-3.5" }), "Download"]
+			})]
+		})]
+	});
+};
+const saveText = (text, name) => {
+	const url = URL.createObjectURL(new Blob([text], { type: "text/plain" }));
+	Object.assign(document.createElement("a"), {
+		href: url,
+		download: name
+	}).click();
+	URL.revokeObjectURL(url);
+};
+//#endregion
+export { BackupCodes };

package/dist/account/passkeys-section.js

@@ -0,0 +1,141 @@
+import { Badge } from "../primitives/badge.js";
+import { Input } from "../primitives/input.js";
+import { authMessage } from "../auth/auth-messages.js";
+import { formatDate } from "../format/date.js";
+import { Button } from "../primitives/button.js";
+import { Dialog } from "../primitives/dialog.js";
+import { AccountSection, SectionError } from "./account-section.js";
+import { useState } from "react";
+import { KeyRound, Plus } from "lucide-react";
+import { AuthError } from "@protobase/client";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/account/passkeys-section.tsx
+const descriptions = {
+	allowed: "Sign in with Face ID, Touch ID, Windows Hello, your phone or a security key instead of a password.",
+	required: "This app requires a passkey for every account. Sign in with Face ID, Touch ID, Windows Hello, your phone or a security key.",
+	forbidden: "Your admin turned passkeys off for this app, so they cannot be used to sign in."
+};
+const PasskeysSection = ({ rule, passkeys, onAdd, onRename, onRemove }) => {
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState();
+	const [editing, setEditing] = useState();
+	const [name, setName] = useState("");
+	const keepLast = rule === "required" && passkeys.length <= 1;
+	const attempt = async (action) => {
+		setBusy(true);
+		setError(void 0);
+		try {
+			await action();
+			setEditing(void 0);
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(authMessage(failure));
+		}
+		setBusy(false);
+	};
+	return /* @__PURE__ */ jsxs(AccountSection, {
+		title: "Passkeys",
+		status: rule === "required" && /* @__PURE__ */ jsx(Badge, {
+			tone: "blue",
+			children: "Required"
+		}),
+		description: descriptions[rule],
+		children: [
+			/* @__PURE__ */ jsx(SectionError, { message: editing ? void 0 : error }),
+			passkeys.length > 0 && /* @__PURE__ */ jsx("ul", {
+				className: "mb-3 divide-y rounded-md border",
+				children: passkeys.map((passkey) => /* @__PURE__ */ jsxs("li", {
+					className: "flex flex-wrap items-center gap-3 px-3 py-2.5",
+					children: [
+						/* @__PURE__ */ jsx(KeyRound, { className: "size-4 shrink-0 text-muted-foreground" }),
+						/* @__PURE__ */ jsxs("span", {
+							className: "min-w-0 flex-1",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "block truncate text-[13px] font-medium",
+								children: passkey.name ?? "Passkey"
+							}), /* @__PURE__ */ jsxs("span", {
+								className: "block text-xs text-muted-foreground",
+								children: [
+									passkey.createdAt ? `Added ${formatDate(Date.parse(passkey.createdAt))}` : "Added earlier",
+									" · ",
+									passkey.backedUp ? "Synced across your devices" : "On one device"
+								]
+							})]
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "flex gap-1",
+							children: [/* @__PURE__ */ jsx(Button, {
+								size: "sm",
+								variant: "ghost",
+								onClick: () => {
+									setName(passkey.name ?? "");
+									setEditing({
+										kind: "rename",
+										passkey
+									});
+								},
+								children: "Rename"
+							}), /* @__PURE__ */ jsx(Button, {
+								size: "sm",
+								variant: "ghost",
+								disabled: keepLast,
+								title: keepLast ? "Passkeys are required: add another one before removing this one." : void 0,
+								onClick: () => setEditing({
+									kind: "remove",
+									passkey
+								}),
+								children: "Remove"
+							})]
+						})
+					]
+				}, passkey.id))
+			}),
+			rule !== "forbidden" && /* @__PURE__ */ jsxs(Button, {
+				loading: busy && !editing,
+				onClick: () => void attempt(onAdd),
+				children: [/* @__PURE__ */ jsx(Plus, { className: "size-3.5" }), "Add a passkey"]
+			}),
+			editing?.kind === "rename" && /* @__PURE__ */ jsxs(Dialog, {
+				title: "Rename passkey",
+				description: "A name that tells you where this passkey lives, such as the device or password manager.",
+				onClose: () => setEditing(void 0),
+				actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+					onClick: () => setEditing(void 0),
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					loading: busy,
+					disabled: !name.trim(),
+					onClick: () => void attempt(() => onRename(editing.passkey.id, name.trim())),
+					children: "Save"
+				})] }),
+				children: [/* @__PURE__ */ jsxs("label", {
+					className: "flex flex-col gap-1.5 text-[13px] font-medium",
+					children: ["Name", /* @__PURE__ */ jsx(Input, {
+						autoFocus: true,
+						value: name,
+						maxLength: 60,
+						onChange: (event) => setName(event.target.value)
+					})]
+				}), /* @__PURE__ */ jsx(SectionError, { message: error })]
+			}),
+			editing?.kind === "remove" && /* @__PURE__ */ jsx(Dialog, {
+				title: "Remove passkey?",
+				description: `${editing.passkey.name ?? "This passkey"} will no longer sign you in here. It stays on the device until you delete it there.`,
+				onClose: () => setEditing(void 0),
+				actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+					onClick: () => setEditing(void 0),
+					children: "Cancel"
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "danger",
+					loading: busy,
+					onClick: () => void attempt(() => onRemove(editing.passkey.id)),
+					children: "Remove"
+				})] }),
+				children: error && /* @__PURE__ */ jsx(SectionError, { message: error })
+			})
+		]
+	});
+};
+//#endregion
+export { PasskeysSection };

package/dist/account/password-dialog.js

@@ -0,0 +1,58 @@
+import { Input } from "../primitives/input.js";
+import { authMessage } from "../auth/auth-messages.js";
+import { Button } from "../primitives/button.js";
+import { Dialog } from "../primitives/dialog.js";
+import { useState } from "react";
+import { AuthError } from "@protobase/client";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/account/password-dialog.tsx
+/** Confirms a change to the account's sign-in, with the password when it has one. */
+const PasswordDialog = ({ title, description, confirmLabel, danger, needsPassword, onConfirm, onClose }) => {
+	const [password, setPassword] = useState("");
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState();
+	const confirm = async () => {
+		setBusy(true);
+		setError(void 0);
+		try {
+			await onConfirm(needsPassword ? password : void 0);
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(authMessage(failure));
+			setBusy(false);
+		}
+	};
+	return /* @__PURE__ */ jsxs(Dialog, {
+		title,
+		description,
+		onClose,
+		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+			onClick: onClose,
+			children: "Cancel"
+		}), /* @__PURE__ */ jsx(Button, {
+			variant: danger ? "danger" : "primary",
+			loading: busy,
+			disabled: needsPassword && !password,
+			onClick: () => void confirm(),
+			children: confirmLabel
+		})] }),
+		children: [needsPassword && /* @__PURE__ */ jsxs("label", {
+			className: "flex flex-col gap-1.5 text-[13px] font-medium",
+			children: ["Your password", /* @__PURE__ */ jsx(Input, {
+				type: "password",
+				autoComplete: "current-password",
+				autoFocus: true,
+				value: password,
+				invalid: Boolean(error),
+				onChange: (event) => setPassword(event.target.value),
+				onKeyDown: (event) => event.key === "Enter" && password && void confirm()
+			})]
+		}), error && /* @__PURE__ */ jsx("p", {
+			role: "alert",
+			className: "mt-2 text-xs font-medium text-danger-text",
+			children: error
+		})]
+	});
+};
+//#endregion
+export { PasswordDialog };

package/dist/account/sign-in-policy-form.js

@@ -0,0 +1,108 @@
+import { cn } from "../lib/cn.js";
+import { formatDateTime } from "../format/date.js";
+import { Button } from "../primitives/button.js";
+import { policyRows, ruleLabel } from "./sign-in-policy-labels.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/account/sign-in-policy-form.tsx
+const RuleChoice = ({ row, value, onChange }) => /* @__PURE__ */ jsx("span", {
+	role: "radiogroup",
+	"aria-label": row.label,
+	className: "inline-flex h-8 shrink-0 rounded-md bg-muted p-0.5",
+	children: row.rules.map((option) => /* @__PURE__ */ jsx("button", {
+		type: "button",
+		role: "radio",
+		"aria-checked": option.value === value,
+		onClick: () => onChange(option.value),
+		className: cn("rounded px-3 text-xs font-medium transition-colors", option.value === value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"),
+		children: option.label
+	}, option.value))
+});
+const rowNote = ({ method }, draft, { mail, effective, policy }) => {
+	if (method === "emailCode" && !mail) return "Needs mail settings (PROTOBASE_SMTP_URL and PROTOBASE_MAIL_FROM): off until they are set.";
+	if (method === "password" && !mail && draft.password === "forbidden") return "Without mail settings, password sign-in stays on so nobody is locked out.";
+	if (method === "staffAccess" && !mail && draft.staffAccess === "notify") return "Needs mail settings (PROTOBASE_SMTP_URL and PROTOBASE_MAIL_FROM): staff cannot sign in until they are set.";
+	if (draft[method] === policy[method] && effective[method] !== policy[method]) return `Applies as ${ruleLabel(method, effective[method])} for now.`;
+};
+/**
+* The admin's sign-in policy: for each way to sign in, whether people may use it, must set it up, or cannot use it;
+* and, when the app has an operator provider, whether its staff may sign in as people.
+*/
+const SignInPolicyForm = ({ state, onSave, busy, error, notice }) => {
+	const [draft, setDraft] = useState(state.policy);
+	const rows = policyRows.filter(({ method }) => method !== "staffAccess" || state.operator);
+	const changed = rows.some(({ method }) => draft[method] !== state.policy[method]);
+	return /* @__PURE__ */ jsxs("form", {
+		className: "flex flex-col gap-4",
+		onSubmit: (event) => {
+			event.preventDefault();
+			onSave(draft);
+		},
+		children: [
+			/* @__PURE__ */ jsx("ul", {
+				className: "divide-y rounded-lg border bg-background",
+				children: rows.map((row) => {
+					const note = rowNote(row, draft, state);
+					return /* @__PURE__ */ jsxs("li", {
+						className: "flex flex-col gap-3 p-4 sm:flex-row sm:items-start sm:justify-between",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "min-w-0",
+							children: [
+								/* @__PURE__ */ jsx("h2", {
+									className: "text-[13px] font-semibold",
+									children: row.label
+								}),
+								/* @__PURE__ */ jsx("p", {
+									className: "mt-0.5 text-[13px] text-muted-foreground",
+									children: row.description
+								}),
+								note && /* @__PURE__ */ jsx("p", {
+									className: "mt-1.5 text-xs font-medium text-warning-text",
+									children: note
+								})
+							]
+						}), /* @__PURE__ */ jsx(RuleChoice, {
+							row,
+							value: draft[row.method],
+							onChange: (rule) => setDraft({
+								...draft,
+								[row.method]: rule
+							})
+						})]
+					}, row.method);
+				})
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "rounded-md bg-danger-soft px-3 py-2 text-xs font-medium text-danger-text",
+				children: error
+			}),
+			notice && !changed && /* @__PURE__ */ jsx("p", {
+				role: "status",
+				className: "rounded-md bg-success-soft px-3 py-2 text-xs font-medium text-success-text",
+				children: notice
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "text-xs text-muted-foreground",
+					children: state.savedAt ? `Last saved${state.savedBy ? ` by ${state.savedBy}` : ""} on ${formatDateTime(Date.parse(state.savedAt))}.` : "Never changed: everything is on, nothing is required."
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex gap-2",
+					children: [changed && /* @__PURE__ */ jsx(Button, {
+						onClick: () => setDraft(state.policy),
+						children: "Reset"
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "primary",
+						type: "submit",
+						loading: busy,
+						disabled: !changed,
+						children: "Save"
+					})]
+				})]
+			})
+		]
+	});
+};
+//#endregion
+export { SignInPolicyForm };

package/dist/account/sign-in-policy-labels.js

@@ -0,0 +1,76 @@
+//#region src/account/sign-in-policy-labels.ts
+const onOff = [{
+	value: "allowed",
+	label: "On"
+}, {
+	value: "forbidden",
+	label: "Off"
+}];
+const optionalRequiredOff = [
+	{
+		value: "allowed",
+		label: "Optional"
+	},
+	{
+		value: "required",
+		label: "Required"
+	},
+	{
+		value: "forbidden",
+		label: "Off"
+	}
+];
+/** The rows of the sign-in policy page, in order, with the rules each method takes and their words. */
+const policyRows = [
+	{
+		method: "password",
+		label: "Password",
+		description: "Sign in with the email address and a password.",
+		rules: onOff
+	},
+	{
+		method: "emailCode",
+		label: "Emailed sign-in code",
+		description: "Sign in with a one-time code mailed to the account's address.",
+		rules: onOff
+	},
+	{
+		method: "passkey",
+		label: "Passkeys",
+		description: "Sign in with Face ID, Touch ID, Windows Hello, a phone or a security key. Required: everyone adds one after signing in.",
+		rules: optionalRequiredOff
+	},
+	{
+		method: "twoFactor",
+		label: "Two-factor authentication",
+		description: "A code from an authenticator app, or an emailed one, after a password or an emailed sign-in code. Required: everyone turns it on after signing in.",
+		rules: optionalRequiredOff
+	},
+	{
+		method: "staffAccess",
+		label: "Staff sign-in as a person",
+		description: "The team that runs this app signs in as someone to help them, with a reason, for a short session. Each time is in the log below; with \"Email the person\" they are told too.",
+		rules: [
+			{
+				value: "allowed",
+				label: "On"
+			},
+			{
+				value: "notify",
+				label: "Email the person"
+			},
+			{
+				value: "forbidden",
+				label: "Off"
+			}
+		]
+	}
+];
+/** The word for `rule` in `method`'s row, for example "Optional" for an allowed passkey. Every rule the server stores has one. */
+const ruleLabel = (method, rule) => {
+	const label = policyRows.find((row) => row.method === method)?.rules.find((option) => option.value === rule)?.label;
+	if (label === void 0) throw new Error(`No label for the ${rule} rule of ${method}`);
+	return label;
+};
+//#endregion
+export { policyRows, ruleLabel };

package/dist/account/sign-in-policy-page.js

@@ -0,0 +1,72 @@
+import { Spinner } from "../primitives/spinner.js";
+import { PageHeader } from "../app-shell/page-header.js";
+import { authMessage } from "../auth/auth-messages.js";
+import { useAuth } from "../auth/auth-provider.js";
+import { SignInPolicyForm } from "./sign-in-policy-form.js";
+import { StaffSignInLog } from "./staff-sign-in-log.js";
+import { useEffect, useState } from "react";
+import { AuthError } from "@protobase/client";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/account/sign-in-policy-page.tsx
+const StaffSignIns = ({ operator }) => {
+	const { session } = useAuth();
+	const [signIns, setSignIns] = useState();
+	const [error, setError] = useState();
+	useEffect(() => {
+		session.staff.log().then(setSignIns, (failure) => setError(failure instanceof AuthError ? authMessage(failure) : "Could not read the staff sign-ins"));
+	}, [session]);
+	return /* @__PURE__ */ jsx(StaffSignInLog, {
+		operator,
+		signIns,
+		error
+	});
+};
+/**
+* The admin page for the sign-in policy; the server refuses a policy that would lock people out, and the page says why.
+* With an operator provider, the log of staff sign-ins follows the policy.
+*/
+const SignInPolicyPage = () => {
+	const { session } = useAuth();
+	const [state, setState] = useState();
+	const [busy, setBusy] = useState(false);
+	const [error, setError] = useState();
+	const [notice, setNotice] = useState();
+	useEffect(() => {
+		session.signInPolicy.read().then(setState, (failure) => setError(failure instanceof AuthError ? authMessage(failure) : "Could not read the sign-in policy"));
+	}, [session]);
+	const save = async (policy) => {
+		setBusy(true);
+		setError(void 0);
+		setNotice(void 0);
+		try {
+			setState(await session.signInPolicy.save(policy));
+			setNotice("Saved. It applies to every sign-in from now on.");
+		} catch (failure) {
+			if (!(failure instanceof AuthError)) throw failure;
+			setError(authMessage(failure));
+		}
+		setBusy(false);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mx-auto flex w-full max-w-3xl flex-col gap-4 px-4 py-6 md:px-6",
+		children: [/* @__PURE__ */ jsx(PageHeader, {
+			title: "Sign-in policy",
+			subtitle: "How people sign in to this app. Signed-in people keep their session, and are asked for what is newly required within 15 minutes."
+		}), state ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SignInPolicyForm, {
+			state,
+			busy,
+			error,
+			notice,
+			onSave: (policy) => void save(policy)
+		}, state.savedAt ?? "default"), state.operator && /* @__PURE__ */ jsx(StaffSignIns, { operator: state.operator })] }) : error ? /* @__PURE__ */ jsx("p", {
+			role: "alert",
+			className: "text-[13px] text-danger-text",
+			children: error
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 text-[13px] text-muted-foreground",
+			children: [/* @__PURE__ */ jsx(Spinner, {}), " Loading"]
+		})]
+	});
+};
+//#endregion
+export { SignInPolicyPage };

package/dist/account/staff-sign-in-log.js

@@ -0,0 +1,62 @@
+import { Badge } from "../primitives/badge.js";
+import { formatDateTime } from "../format/date.js";
+import { AccountSection, SectionError } from "./account-section.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/account/staff-sign-in-log.tsx
+const stateOf = (entry, now) => entry.endedAt ? /* @__PURE__ */ jsxs(Badge, {
+	tone: "neutral",
+	children: ["Stopped ", formatDateTime(Date.parse(entry.endedAt))]
+}) : Date.parse(entry.expiresAt) <= now ? /* @__PURE__ */ jsxs(Badge, {
+	tone: "neutral",
+	children: ["Ended ", formatDateTime(Date.parse(entry.expiresAt))]
+}) : /* @__PURE__ */ jsxs(Badge, {
+	tone: "amber",
+	children: ["Signed in until ", formatDateTime(Date.parse(entry.expiresAt))]
+});
+/** The app's log of staff sign-ins, for admins: who signed in as whom, why, and when. */
+const StaffSignInLog = ({ signIns, operator, error, now = Date.now() }) => /* @__PURE__ */ jsxs(AccountSection, {
+	title: "Staff sign-ins",
+	description: `Each time staff of ${operator} signed in as someone here, newest first.`,
+	children: [
+		/* @__PURE__ */ jsx(SectionError, { message: error }),
+		signIns && signIns.length === 0 && /* @__PURE__ */ jsx("p", {
+			className: "text-[13px] text-muted-foreground",
+			children: "No staff has signed in as anyone yet."
+		}),
+		signIns && signIns.length > 0 && /* @__PURE__ */ jsx("ul", {
+			className: "divide-y rounded-md border",
+			children: signIns.map((entry) => /* @__PURE__ */ jsxs("li", {
+				className: "flex flex-col gap-1.5 p-3",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap items-center gap-x-2 gap-y-1 text-[13px]",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "font-medium break-all",
+								children: entry.staffName ? `${entry.staffName} (${entry.staff})` : entry.staff
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground",
+								children: "as"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "font-medium break-all",
+								children: entry.user
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "text-[13px] break-words",
+						children: entry.reason
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground",
+						children: [/* @__PURE__ */ jsx("span", { children: formatDateTime(Date.parse(entry.startedAt)) }), stateOf(entry, now)]
+					})
+				]
+			}, entry.id))
+		})
+	]
+});
+//#endregion
+export { StaffSignInLog };