@nubitio/admin 0.11.3 → 1.0.0-rc.1

package/dist/index.mjs

@@ -1,10 +1,10 @@
-import { BrowserRouter, Link, NavLink, Navigate, Outlet, Route, Routes, useLocation, useNavigate } from "react-router-dom";
+import { BrowserRouter, Link, NavLink, Navigate, Outlet, Route, Routes, useLocation, useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { Badge, Button, Card, EmptyState, FeatureGate as FeatureGate$1, IconButton, TextField, ThemeProvider, ThemeSwitcher, useFloatingPanel } from "@nubitio/ui";
+import React, { Component, createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import { Badge, Button, Card, EmptyState, FeatureGate as FeatureGate$1, FormField, IconButton, Skeleton, TextField, ThemeProvider, ThemeSwitcher, useFloatingPanel } from "@nubitio/ui";
 import { QueryClient, QueryClientProvider, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { CoreConfigProvider, CoreProvider, MercureProvider, useCoreHttpClient, useMercureSubscription } from "@nubitio/core";
-import { DevToolsProvider, SmartCrudRolesProvider, isDevEnvironment, useDevTools } from "@nubitio/crud";
+import { DevToolsProvider, SessionPermissionsProvider, SmartCrudRolesProvider, isDevEnvironment, useDevTools } from "@nubitio/crud";
 import { HydraResourceSchemaProvider, HydraResourceStoreProvider, SchemaProvider } from "@nubitio/hydra";
 //#region packages/admin/FeatureHubLayout.tsx
 function normalizeIcon(icon) {
@@ -440,14 +440,14 @@ const AdminShell = ({ title, menuItems, headerActions, renderUserMenu, renderThe
 //#endregion
 //#region packages/admin/auth/SessionContext.tsx
 const SessionContext = createContext(null);
-function joinApiPath$3(apiBaseUrl, path) {
+function joinApiPath$7(apiBaseUrl, path) {
 	return `${apiBaseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
 }
 function SessionProvider({ apiBaseUrl = "/api/", mePath = "me", logoutPath = "auth/logout", children }) {
 	const [session, setSession] = useState({ status: "loading" });
 	const refresh = useCallback(async () => {
 		try {
-			const response = await fetch(joinApiPath$3(apiBaseUrl, mePath), { credentials: "include" });
+			const response = await fetch(joinApiPath$7(apiBaseUrl, mePath), { credentials: "include" });
 			if (!response.ok) {
 				setSession({ status: "anonymous" });
 				return;
@@ -464,7 +464,7 @@ function SessionProvider({ apiBaseUrl = "/api/", mePath = "me", logoutPath = "au
 		refresh();
 	}, [refresh]);
 	const logout = useCallback(async () => {
-		await fetch(joinApiPath$3(apiBaseUrl, logoutPath), {
+		await fetch(joinApiPath$7(apiBaseUrl, logoutPath), {
 			method: "POST",
 			credentials: "include"
 		});
@@ -830,12 +830,15 @@ function NotificationPanel({ title = "Notifications", emptyTitle = "You're all c
 }
 //#endregion
 //#region packages/admin/auth/LoginPage.tsx
-function joinApiPath$2(apiBaseUrl, path) {
+function joinApiPath$6(apiBaseUrl, path) {
 	return `${apiBaseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
 }
-function LoginPage({ onLoggedIn, apiBaseUrl = "/api/", loginPath = "auth/login", title = "Nubit Admin", hint, defaultUsername = "" }) {
+const TOTP_REQUIRED = "second factor required.";
+function LoginPage({ onLoggedIn, apiBaseUrl = "/api/", loginPath = "auth/login", title = "Nubit Admin", hint, defaultUsername = "", oidcProviders = [], forgotPasswordTo = "/forgot-password" }) {
 	const [username, setUsername] = useState(defaultUsername);
 	const [password, setPassword] = useState("");
+	const [totpCode, setTotpCode] = useState("");
+	const [needsTotp, setNeedsTotp] = useState(false);
 	const [error, setError] = useState(null);
 	const [busy, setBusy] = useState(false);
 	const submit = async (event) => {
@@ -843,17 +846,25 @@ function LoginPage({ onLoggedIn, apiBaseUrl = "/api/", loginPath = "auth/login",
 		setBusy(true);
 		setError(null);
 		try {
-			const response = await fetch(joinApiPath$2(apiBaseUrl, loginPath), {
+			const body = {
+				username,
+				password
+			};
+			if (totpCode !== "") body.totpCode = totpCode;
+			const response = await fetch(joinApiPath$6(apiBaseUrl, loginPath), {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
 				credentials: "include",
-				body: JSON.stringify({
-					username,
-					password
-				})
+				body: JSON.stringify(body)
 			});
 			if (!response.ok) {
-				setError((await response.json().catch(() => null))?.message ?? "Login failed");
+				const message = (await response.json().catch(() => null))?.message ?? "Login failed";
+				if (message.toLowerCase() === TOTP_REQUIRED) {
+					setNeedsTotp(true);
+					setError("Enter the code from your authenticator app.");
+					return;
+				}
+				setError(message);
 				return;
 			}
 			onLoggedIn();
@@ -890,24 +901,41 @@ function LoginPage({ onLoggedIn, apiBaseUrl = "/api/", loginPath = "auth/login",
 					},
 					children: hint
 				}),
-				/* @__PURE__ */ jsx(TextField, {
-					placeholder: "Email",
-					value: username,
-					autoComplete: "username",
-					onChange: (e) => setUsername(e.target.value)
+				/* @__PURE__ */ jsx(FormField, {
+					label: "Email",
+					children: /* @__PURE__ */ jsx(TextField, {
+						placeholder: "Email",
+						value: username,
+						autoComplete: "username",
+						onChange: (e) => setUsername(e.target.value)
+					})
 				}),
-				/* @__PURE__ */ jsx(TextField, {
-					placeholder: "Password",
-					type: "password",
-					value: password,
-					autoComplete: "current-password",
-					onChange: (e) => setPassword(e.target.value)
+				/* @__PURE__ */ jsx(FormField, {
+					label: "Password",
+					children: /* @__PURE__ */ jsx(TextField, {
+						placeholder: "Password",
+						type: "password",
+						value: password,
+						autoComplete: "current-password",
+						onChange: (e) => setPassword(e.target.value)
+					})
+				}),
+				needsTotp && /* @__PURE__ */ jsx(FormField, {
+					label: "Authenticator code",
+					children: /* @__PURE__ */ jsx(TextField, {
+						placeholder: "123456",
+						value: totpCode,
+						autoComplete: "one-time-code",
+						inputMode: "numeric",
+						onChange: (e) => setTotpCode(e.target.value)
+					})
 				}),
 				error && /* @__PURE__ */ jsx("p", {
 					style: {
 						margin: 0,
 						color: "var(--error-color, #dc2626)"
 					},
+					role: "alert",
 					children: error
 				}),
 				/* @__PURE__ */ jsx(Button, {
@@ -915,12 +943,587 @@ function LoginPage({ onLoggedIn, apiBaseUrl = "/api/", loginPath = "auth/login",
 					type: "submit",
 					disabled: busy,
 					children: busy ? "Signing in…" : "Sign in"
+				}),
+				/* @__PURE__ */ jsx(Link, {
+					to: forgotPasswordTo,
+					style: { fontSize: "0.875rem" },
+					children: "Forgot password?"
+				}),
+				oidcProviders.map((provider) => /* @__PURE__ */ jsx(Button, {
+					variant: "secondary",
+					type: "button",
+					onClick: () => {
+						window.location.assign(joinApiPath$6(apiBaseUrl, `auth/oidc/${provider.id}/redirect`));
+					},
+					children: provider.label
+				}, provider.id))
+			]
+		}) })
+	});
+}
+//#endregion
+//#region packages/admin/auth/ForgotPasswordPage.tsx
+function joinApiPath$5(apiBaseUrl, path) {
+	return `${apiBaseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
+}
+function ForgotPasswordPage({ apiBaseUrl = "/api/" }) {
+	const [username, setUsername] = useState("");
+	const [sent, setSent] = useState(false);
+	const [busy, setBusy] = useState(false);
+	const submit = async (event) => {
+		event.preventDefault();
+		setBusy(true);
+		try {
+			await fetch(joinApiPath$5(apiBaseUrl, "auth/password/forgot"), {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				credentials: "include",
+				body: JSON.stringify({ username })
+			});
+			setSent(true);
+		} finally {
+			setBusy(false);
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "grid",
+			placeItems: "center",
+			minHeight: "100vh"
+		},
+		children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs("form", {
+			onSubmit: submit,
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 12,
+				width: 320,
+				padding: 8
+			},
+			children: [
+				/* @__PURE__ */ jsx("h2", {
+					style: { margin: 0 },
+					children: "Reset password"
+				}),
+				sent ? /* @__PURE__ */ jsx("p", {
+					style: {
+						margin: 0,
+						color: "var(--text-secondary)"
+					},
+					children: "If that address has an account, a reset link is on its way."
+				}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FormField, {
+					label: "Email",
+					children: /* @__PURE__ */ jsx(TextField, {
+						value: username,
+						autoComplete: "username",
+						onChange: (e) => setUsername(e.target.value)
+					})
+				}), /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					type: "submit",
+					disabled: busy || username === "",
+					children: busy ? "Sending…" : "Send reset link"
+				})] }),
+				/* @__PURE__ */ jsx(Link, {
+					to: "/",
+					style: { fontSize: "0.875rem" },
+					children: "Back to sign in"
 				})
 			]
 		}) })
 	});
 }
 //#endregion
+//#region packages/admin/auth/ResetPasswordPage.tsx
+function joinApiPath$4(apiBaseUrl, path) {
+	return `${apiBaseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
+}
+function ResetPasswordPage({ apiBaseUrl = "/api/" }) {
+	const [params] = useSearchParams();
+	const token = params.get("token") ?? "";
+	const [password, setPassword] = useState("");
+	const [error, setError] = useState(null);
+	const [done, setDone] = useState(false);
+	const [busy, setBusy] = useState(false);
+	const submit = async (event) => {
+		event.preventDefault();
+		setBusy(true);
+		setError(null);
+		try {
+			const response = await fetch(joinApiPath$4(apiBaseUrl, "auth/password/reset"), {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				credentials: "include",
+				body: JSON.stringify({
+					token,
+					password
+				})
+			});
+			if (!response.ok) {
+				setError((await response.json().catch(() => null))?.message ?? "Reset failed");
+				return;
+			}
+			setDone(true);
+		} catch {
+			setError("Network error");
+		} finally {
+			setBusy(false);
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "grid",
+			placeItems: "center",
+			minHeight: "100vh"
+		},
+		children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs("form", {
+			onSubmit: submit,
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 12,
+				width: 320,
+				padding: 8
+			},
+			children: [/* @__PURE__ */ jsx("h2", {
+				style: { margin: 0 },
+				children: "Choose a new password"
+			}), done ? /* @__PURE__ */ jsxs("p", {
+				style: { margin: 0 },
+				children: [
+					"Password updated.",
+					" ",
+					/* @__PURE__ */ jsx(Link, {
+						to: "/",
+						style: { fontSize: "0.875rem" },
+						children: "Sign in"
+					})
+				]
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(FormField, {
+					label: "New password",
+					children: /* @__PURE__ */ jsx(TextField, {
+						type: "password",
+						value: password,
+						autoComplete: "new-password",
+						minLength: 8,
+						onChange: (e) => setPassword(e.target.value)
+					})
+				}),
+				error && /* @__PURE__ */ jsx("p", {
+					style: {
+						margin: 0,
+						color: "var(--error-color, #dc2626)"
+					},
+					role: "alert",
+					children: error
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					type: "submit",
+					disabled: busy || token === "" || password.length < 8,
+					children: busy ? "Saving…" : "Update password"
+				})
+			] })]
+		}) })
+	});
+}
+//#endregion
+//#region packages/admin/auth/AcceptInvitationPage.tsx
+function joinApiPath$3(apiBaseUrl, path) {
+	return `${apiBaseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
+}
+function AcceptInvitationPage({ apiBaseUrl = "/api/" }) {
+	const { token = "" } = useParams();
+	const [email, setEmail] = useState(null);
+	const [password, setPassword] = useState("");
+	const [error, setError] = useState(null);
+	const [done, setDone] = useState(false);
+	const [busy, setBusy] = useState(false);
+	useEffect(() => {
+		let cancelled = false;
+		fetch(joinApiPath$3(apiBaseUrl, `invitations/${token}`), { credentials: "include" }).then(async (response) => {
+			if (cancelled) return;
+			if (!response.ok) {
+				setError("This invitation is no longer valid.");
+				return;
+			}
+			setEmail((await response.json()).email ?? null);
+		}).catch(() => {
+			if (!cancelled) setError("Network error");
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [apiBaseUrl, token]);
+	const submit = async (event) => {
+		event.preventDefault();
+		setBusy(true);
+		setError(null);
+		try {
+			const response = await fetch(joinApiPath$3(apiBaseUrl, `invitations/${token}/accept`), {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				credentials: "include",
+				body: JSON.stringify({ password })
+			});
+			if (!response.ok) {
+				setError((await response.json().catch(() => null))?.message ?? "Could not accept the invitation");
+				return;
+			}
+			setDone(true);
+		} catch {
+			setError("Network error");
+		} finally {
+			setBusy(false);
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "grid",
+			placeItems: "center",
+			minHeight: "100vh"
+		},
+		children: /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs("form", {
+			onSubmit: submit,
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 12,
+				width: 320,
+				padding: 8
+			},
+			children: [/* @__PURE__ */ jsx("h2", {
+				style: { margin: 0 },
+				children: "Join"
+			}), done ? /* @__PURE__ */ jsxs("p", {
+				style: { margin: 0 },
+				children: [
+					"Account created.",
+					" ",
+					/* @__PURE__ */ jsx(Link, {
+						to: "/",
+						style: { fontSize: "0.875rem" },
+						children: "Sign in"
+					})
+				]
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+				email && /* @__PURE__ */ jsx("p", {
+					style: {
+						margin: 0,
+						color: "var(--text-secondary)"
+					},
+					children: email
+				}),
+				/* @__PURE__ */ jsx(FormField, {
+					label: "Password",
+					children: /* @__PURE__ */ jsx(TextField, {
+						type: "password",
+						value: password,
+						autoComplete: "new-password",
+						minLength: 8,
+						onChange: (e) => setPassword(e.target.value)
+					})
+				}),
+				error && /* @__PURE__ */ jsx("p", {
+					style: {
+						margin: 0,
+						color: "var(--error-color, #dc2626)"
+					},
+					role: "alert",
+					children: error
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					type: "submit",
+					disabled: busy || password.length < 8,
+					children: busy ? "Creating…" : "Create account"
+				})
+			] })]
+		}) })
+	});
+}
+//#endregion
+//#region packages/admin/auth/AccountPage.tsx
+function joinApiPath$2(apiBaseUrl, path) {
+	return `${apiBaseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
+}
+function AccountPage({ apiBaseUrl = "/api/" }) {
+	const { username, refresh } = useSession();
+	const [currentPassword, setCurrentPassword] = useState("");
+	const [newPassword, setNewPassword] = useState("");
+	const [passwordMessage, setPasswordMessage] = useState(null);
+	const [totp, setTotp] = useState(null);
+	const [totpCode, setTotpCode] = useState("");
+	const [totpSecret, setTotpSecret] = useState(null);
+	const [totpMessage, setTotpMessage] = useState(null);
+	const [sessions, setSessions] = useState([]);
+	const load = useCallback(async (signal) => {
+		const [totpResponse, sessionResponse] = await Promise.all([fetch(joinApiPath$2(apiBaseUrl, "auth/totp"), {
+			credentials: "include",
+			signal
+		}), fetch(joinApiPath$2(apiBaseUrl, "auth/sessions"), {
+			credentials: "include",
+			signal
+		})]);
+		if (signal?.aborted) return;
+		if (totpResponse.ok) setTotp(await totpResponse.json());
+		if (sessionResponse.ok) setSessions((await sessionResponse.json()).sessions ?? []);
+	}, [apiBaseUrl]);
+	useEffect(() => {
+		const controller = new AbortController();
+		load(controller.signal).catch((error) => {
+			if (!(error instanceof DOMException && error.name === "AbortError")) throw error;
+		});
+		return () => controller.abort();
+	}, [load]);
+	const changePassword = async (event) => {
+		event.preventDefault();
+		setPasswordMessage(null);
+		const response = await fetch(joinApiPath$2(apiBaseUrl, "auth/change-password"), {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			credentials: "include",
+			body: JSON.stringify({
+				currentPassword,
+				newPassword
+			})
+		});
+		if (!response.ok) {
+			setPasswordMessage((await response.json().catch(() => null))?.message ?? "Could not change password");
+			return;
+		}
+		setCurrentPassword("");
+		setNewPassword("");
+		setPasswordMessage("Password updated.");
+		await refresh();
+	};
+	const beginTotp = async () => {
+		setTotpMessage(null);
+		const response = await fetch(joinApiPath$2(apiBaseUrl, "auth/totp"), {
+			method: "POST",
+			credentials: "include"
+		});
+		if (!response.ok) {
+			setTotpMessage((await response.json().catch(() => null))?.message ?? "Could not start enrolment");
+			return;
+		}
+		const payload = await response.json();
+		setTotpSecret(payload.uri ?? payload.secret ?? null);
+		await load();
+	};
+	const confirmTotp = async (event) => {
+		event.preventDefault();
+		const response = await fetch(joinApiPath$2(apiBaseUrl, "auth/totp/confirm"), {
+			method: "POST",
+			headers: { "Content-Type": "application/json" },
+			credentials: "include",
+			body: JSON.stringify({ code: totpCode })
+		});
+		if (!response.ok) {
+			setTotpMessage((await response.json().catch(() => null))?.message ?? "That code is not valid");
+			return;
+		}
+		setTotpCode("");
+		setTotpSecret(null);
+		setTotpMessage("Authenticator enrolled.");
+		await load();
+	};
+	const disableTotp = async (event) => {
+		event.preventDefault();
+		const response = await fetch(joinApiPath$2(apiBaseUrl, "auth/totp"), {
+			method: "DELETE",
+			headers: { "Content-Type": "application/json" },
+			credentials: "include",
+			body: JSON.stringify({ code: totpCode })
+		});
+		if (!response.ok) {
+			setTotpMessage((await response.json().catch(() => null))?.message ?? "Could not disable the second factor");
+			return;
+		}
+		setTotpCode("");
+		setTotpMessage("Second factor removed.");
+		await load();
+	};
+	const revokeSession = async (id) => {
+		await fetch(joinApiPath$2(apiBaseUrl, `auth/sessions/${id}`), {
+			method: "DELETE",
+			credentials: "include"
+		});
+		await load();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		style: {
+			display: "grid",
+			gap: 24,
+			maxWidth: 480,
+			padding: 24
+		},
+		children: [
+			/* @__PURE__ */ jsx("h1", {
+				style: { margin: 0 },
+				children: "Account"
+			}),
+			/* @__PURE__ */ jsx("p", {
+				style: {
+					margin: 0,
+					color: "var(--text-secondary)"
+				},
+				children: username
+			}),
+			/* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs("form", {
+				onSubmit: changePassword,
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: 12,
+					padding: 8
+				},
+				children: [
+					/* @__PURE__ */ jsx("h2", {
+						style: {
+							margin: 0,
+							fontSize: "1rem"
+						},
+						children: "Password"
+					}),
+					/* @__PURE__ */ jsx(FormField, {
+						label: "Current password",
+						children: /* @__PURE__ */ jsx(TextField, {
+							type: "password",
+							value: currentPassword,
+							autoComplete: "current-password",
+							onChange: (e) => setCurrentPassword(e.target.value)
+						})
+					}),
+					/* @__PURE__ */ jsx(FormField, {
+						label: "New password",
+						children: /* @__PURE__ */ jsx(TextField, {
+							type: "password",
+							value: newPassword,
+							autoComplete: "new-password",
+							minLength: 8,
+							onChange: (e) => setNewPassword(e.target.value)
+						})
+					}),
+					passwordMessage && /* @__PURE__ */ jsx("p", {
+						style: { margin: 0 },
+						children: passwordMessage
+					}),
+					/* @__PURE__ */ jsx(Button, {
+						variant: "primary",
+						type: "submit",
+						disabled: newPassword.length < 8,
+						children: "Update password"
+					})
+				]
+			}) }),
+			/* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: 12,
+					padding: 8
+				},
+				children: [
+					/* @__PURE__ */ jsx("h2", {
+						style: {
+							margin: 0,
+							fontSize: "1rem"
+						},
+						children: "Authenticator"
+					}),
+					/* @__PURE__ */ jsx("p", {
+						style: {
+							margin: 0,
+							color: "var(--text-secondary)"
+						},
+						children: totp?.enrolled ? "A second factor is enrolled on this account." : "No second factor yet."
+					}),
+					totpSecret && /* @__PURE__ */ jsx("p", {
+						style: {
+							margin: 0,
+							wordBreak: "break-all",
+							fontSize: "0.75rem"
+						},
+						children: totpSecret
+					}),
+					/* @__PURE__ */ jsxs("form", {
+						onSubmit: totp?.enrolled ? disableTotp : totpSecret ? confirmTotp : beginTotp,
+						style: {
+							display: "flex",
+							flexDirection: "column",
+							gap: 12
+						},
+						children: [
+							(totp?.enrolled || totpSecret) && /* @__PURE__ */ jsx(FormField, {
+								label: "Authenticator code",
+								children: /* @__PURE__ */ jsx(TextField, {
+									value: totpCode,
+									autoComplete: "one-time-code",
+									inputMode: "numeric",
+									onChange: (e) => setTotpCode(e.target.value)
+								})
+							}),
+							totpMessage && /* @__PURE__ */ jsx("p", {
+								style: { margin: 0 },
+								children: totpMessage
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								variant: "secondary",
+								type: "submit",
+								children: totp?.enrolled ? "Disable" : totpSecret ? "Confirm" : "Enrol"
+							})
+						]
+					})
+				]
+			}) }),
+			/* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					flexDirection: "column",
+					gap: 12,
+					padding: 8
+				},
+				children: [
+					/* @__PURE__ */ jsx("h2", {
+						style: {
+							margin: 0,
+							fontSize: "1rem"
+						},
+						children: "Sessions"
+					}),
+					sessions.length === 0 && /* @__PURE__ */ jsx("p", {
+						style: {
+							margin: 0,
+							color: "var(--text-secondary)"
+						},
+						children: "No other sessions."
+					}),
+					sessions.map((session) => /* @__PURE__ */ jsxs("div", {
+						style: {
+							display: "flex",
+							justifyContent: "space-between",
+							gap: 12,
+							alignItems: "center"
+						},
+						children: [/* @__PURE__ */ jsx("span", {
+							style: { fontSize: "0.875rem" },
+							children: session.lastUsedAt ?? session.createdAt ?? `Session ${session.id}`
+						}), /* @__PURE__ */ jsx(Button, {
+							variant: "secondary",
+							size: "sm",
+							type: "button",
+							onClick: () => void revokeSession(session.id),
+							children: "Revoke"
+						})]
+					}, session.id))
+				]
+			}) })
+		]
+	});
+}
+//#endregion
 //#region packages/admin/auth/RegisterPage.tsx
 function joinApiPath$1(apiBaseUrl, path) {
 	return `${apiBaseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
@@ -1288,6 +1891,54 @@ function NubitDevToolsPanel() {
 	});
 }
 //#endregion
+//#region packages/admin/app/ErrorBoundary.tsx
+/**
+* Keeps a thrown field renderer from taking the whole admin down with it.
+*/
+var ErrorBoundary = class extends Component {
+	state = { error: null };
+	static getDerivedStateFromError(error) {
+		return { error };
+	}
+	componentDidCatch(error, info) {
+		console.error("Nubit admin render error", error, info.componentStack);
+	}
+	render() {
+		if (!this.state.error) return this.props.children;
+		return /* @__PURE__ */ jsxs("div", {
+			role: "alert",
+			style: {
+				padding: 24,
+				maxWidth: 480
+			},
+			children: [
+				/* @__PURE__ */ jsx("h1", {
+					style: {
+						margin: "0 0 8px",
+						fontSize: "1.25rem"
+					},
+					children: "Something went wrong"
+				}),
+				/* @__PURE__ */ jsx("p", {
+					style: {
+						margin: "0 0 16px",
+						color: "var(--text-secondary)"
+					},
+					children: "Reload the page. If it happens again, the last action is in the browser console."
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					onClick: () => {
+						this.setState({ error: null });
+						window.location.reload();
+					},
+					children: "Reload"
+				})
+			]
+		});
+	}
+};
+//#endregion
 //#region packages/admin/app/filterMenuByRoles.ts
 function hasAnyRole(required, roles) {
 	if (required === void 0) return true;
@@ -1336,20 +1987,28 @@ function defaultUserMenu({ username, close, logout }) {
 			gap: 8,
 			minWidth: 180
 		},
-		children: [/* @__PURE__ */ jsx("span", {
-			style: {
-				color: "var(--text-secondary)",
-				fontSize: "0.875rem"
-			},
-			children: username ?? "User"
-		}), /* @__PURE__ */ jsx("button", {
-			type: "button",
-			onClick: () => {
-				close();
-				logout();
-			},
-			children: "Sign out"
-		})]
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				style: {
+					color: "var(--text-secondary)",
+					fontSize: "0.875rem"
+				},
+				children: username ?? "User"
+			}),
+			/* @__PURE__ */ jsx(Link, {
+				to: "/account",
+				onClick: close,
+				children: "Account"
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => {
+					close();
+					logout();
+				},
+				children: "Sign out"
+			})
+		]
 	});
 }
 function buildMenuContext(session) {
@@ -1386,7 +2045,25 @@ function NubitAuthenticatedApp({ config }) {
 	const renderThemeSwitcher = config.renderThemeSwitcher ?? (() => /* @__PURE__ */ jsx(ThemeSwitcher, {}));
 	const renderUserMenu = config.renderUserMenu ?? defaultUserMenu;
 	const Wrapper = config.Wrapper ?? React.Fragment;
-	if (session.session.status === "loading") return null;
+	const profile = session.session.status === "authenticated" ? session.session.profile : void 0;
+	if (session.session.status === "loading") return /* @__PURE__ */ jsxs("div", {
+		style: { padding: 24 },
+		"aria-busy": "true",
+		"aria-label": "Loading session",
+		children: [
+			/* @__PURE__ */ jsx(Skeleton, {
+				variant: "rect",
+				height: 32,
+				width: "33%"
+			}),
+			/* @__PURE__ */ jsx("div", { style: { height: 16 } }),
+			/* @__PURE__ */ jsx(Skeleton, {
+				variant: "rect",
+				height: 256
+			})
+		]
+	});
+	const hasAccountRoute = config.routes.some((route) => route.path === "/account");
 	const shell = /* @__PURE__ */ jsx(AdminShell, {
 		title: config.title,
 		menuItems,
@@ -1397,54 +2074,86 @@ function NubitAuthenticatedApp({ config }) {
 			...menuContext,
 			close
 		}),
-		children: /* @__PURE__ */ jsxs(Routes, { children: [/* @__PURE__ */ jsx(Route, {
-			path: "/",
-			element: /* @__PURE__ */ jsx(Navigate, {
-				to: homePath,
-				replace: true
+		children: /* @__PURE__ */ jsxs(Routes, { children: [
+			/* @__PURE__ */ jsx(Route, {
+				path: "/",
+				element: /* @__PURE__ */ jsx(Navigate, {
+					to: homePath,
+					replace: true
+				})
+			}),
+			config.routes.map((route) => /* @__PURE__ */ jsx(Route, {
+				path: route.path,
+				element: route.element
+			}, route.path)),
+			!hasAccountRoute && /* @__PURE__ */ jsx(Route, {
+				path: "/account",
+				element: /* @__PURE__ */ jsx(AccountPage, { apiBaseUrl })
 			})
-		}), config.routes.map((route) => /* @__PURE__ */ jsx(Route, {
-			path: route.path,
-			element: route.element
-		}, route.path))] })
+		] })
 	});
 	const devToolsEnabled = config.devTools ?? isDevEnvironment();
-	const authenticated = /* @__PURE__ */ jsx(DevToolsProvider, {
+	const authenticated = /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(DevToolsProvider, {
 		enabled: devToolsEnabled,
 		children: /* @__PURE__ */ jsx(CoreProvider, {
 			http: {
 				baseUrl: apiBaseUrl,
 				refreshPath: "auth/refresh",
-				loginPath: "auth/login"
+				loginPath: "auth/login",
+				onUnauthorized: () => {
+					session.logout();
+				}
 			},
 			runtime,
 			children: /* @__PURE__ */ jsx(CoreConfigProvider, {
 				apiBaseUrl,
 				locale: config.locale ?? "en",
-				timezone: config.timezone ?? "UTC",
+				timezone: profile?.timeZone ?? config.timezone ?? "UTC",
 				currency: config.currency ?? "USD",
-				children: /* @__PURE__ */ jsxs(SmartCrudRolesProvider, {
+				children: /* @__PURE__ */ jsx(SmartCrudRolesProvider, {
 					roles: session.roles,
-					children: [
-						/* @__PURE__ */ jsx(BrowserRouter, { children: /* @__PURE__ */ jsx(Wrapper, { children: config.hydra === false ? shell : /* @__PURE__ */ jsx(MercureProvider, { children: /* @__PURE__ */ jsx(SchemaProvider, { children: /* @__PURE__ */ jsx(HydraResourceSchemaProvider, { children: /* @__PURE__ */ jsx(HydraResourceStoreProvider, { children: shell }) }) }) }) }) }),
-						/* @__PURE__ */ jsx(ToastHost, {
-							toasts,
-							onDismiss: dismiss
-						}),
-						devToolsEnabled && /* @__PURE__ */ jsx(NubitDevToolsPanel, {})
-					]
+					children: /* @__PURE__ */ jsxs(SessionPermissionsProvider, {
+						permissions: profile?.permissions,
+						limits: profile?.limits,
+						children: [
+							/* @__PURE__ */ jsx(BrowserRouter, { children: /* @__PURE__ */ jsx(Wrapper, { children: config.hydra === false ? shell : /* @__PURE__ */ jsx(MercureProvider, { children: /* @__PURE__ */ jsx(SchemaProvider, { children: /* @__PURE__ */ jsx(HydraResourceSchemaProvider, { children: /* @__PURE__ */ jsx(HydraResourceStoreProvider, { children: shell }) }) }) }) }) }),
+							/* @__PURE__ */ jsx(ToastHost, {
+								toasts,
+								onDismiss: dismiss
+							}),
+							devToolsEnabled && /* @__PURE__ */ jsx(NubitDevToolsPanel, {})
+						]
+					})
 				})
 			})
 		})
-	});
-	if (session.session.status === "authenticated") return authenticated;
-	return /* @__PURE__ */ jsx(BrowserRouter, { children: /* @__PURE__ */ jsx(LoginPage, {
-		apiBaseUrl,
-		title: config.login?.title ?? config.title,
-		hint: config.login?.hint,
-		defaultUsername: config.login?.defaultUsername,
-		onLoggedIn: () => void session.refresh()
 	}) });
+	if (session.session.status === "authenticated") return authenticated;
+	return /* @__PURE__ */ jsx(BrowserRouter, { children: /* @__PURE__ */ jsxs(Routes, { children: [
+		/* @__PURE__ */ jsx(Route, {
+			path: "/forgot-password",
+			element: /* @__PURE__ */ jsx(ForgotPasswordPage, { apiBaseUrl })
+		}),
+		/* @__PURE__ */ jsx(Route, {
+			path: "/reset-password",
+			element: /* @__PURE__ */ jsx(ResetPasswordPage, { apiBaseUrl })
+		}),
+		/* @__PURE__ */ jsx(Route, {
+			path: "/invitations/:token/accept",
+			element: /* @__PURE__ */ jsx(AcceptInvitationPage, { apiBaseUrl })
+		}),
+		/* @__PURE__ */ jsx(Route, {
+			path: "*",
+			element: /* @__PURE__ */ jsx(LoginPage, {
+				apiBaseUrl,
+				title: config.login?.title ?? config.title,
+				hint: config.login?.hint,
+				defaultUsername: config.login?.defaultUsername,
+				oidcProviders: config.login?.oidcProviders,
+				onLoggedIn: () => void session.refresh()
+			})
+		})
+	] }) });
 }
 function createNubitApp(config) {
 	const queryClient = config.queryClient ?? new QueryClient({ defaultOptions: { queries: {
@@ -1467,4 +2176,4 @@ function createNubitApp(config) {
 	return { App };
 }
 //#endregion
-export { AdminHeader, AdminShell, AdminSidebarMenu, FeatureGate, FeatureHubLayout, LoginPage, NotificationPanel, NubitDevToolsPanel, PlanPanel, QuotaUsageBanner, RegisterPage, SessionProvider, StaticSessionProvider, ToastHost, createNubitApp, filterMenuByRoles, hasAnyRole, parseQuotaError, quotaErrorToastMessage, quotaUsageAboveGrid, useAppRuntime, useFeature, useFeatureConfig, useNotifications, useQuotaUsage, useRuntimeConfig, useScreenSize, useScreenSizeClass, useSession };
+export { AcceptInvitationPage, AccountPage, AdminHeader, AdminShell, AdminSidebarMenu, FeatureGate, FeatureHubLayout, ForgotPasswordPage, LoginPage, NotificationPanel, NubitDevToolsPanel, PlanPanel, QuotaUsageBanner, RegisterPage, ResetPasswordPage, SessionProvider, StaticSessionProvider, ToastHost, createNubitApp, filterMenuByRoles, hasAnyRole, parseQuotaError, quotaErrorToastMessage, quotaUsageAboveGrid, useAppRuntime, useFeature, useFeatureConfig, useNotifications, useQuotaUsage, useRuntimeConfig, useScreenSize, useScreenSizeClass, useSession };