@nubitio/admin 1.1.0 → 1.1.2

package/dist/index.cjs

@@ -16,7 +16,7 @@ var __copyProps = (to, from, except, desc) => {
 	}
 	return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
 	value: mod,
 	enumerable: true
 }) : target, mod));
@@ -26,8 +26,8 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
 react = __toESM(react, 1);
 let _nubitio_ui = require("@nubitio/ui");
-let _tanstack_react_query = require("@tanstack/react-query");
 let _nubitio_core = require("@nubitio/core");
+let _tanstack_react_query = require("@tanstack/react-query");
 let _nubitio_crud = require("@nubitio/crud");
 let _nubitio_hydra = require("@nubitio/hydra");
 //#region packages/admin/FeatureHubLayout.tsx
@@ -148,50 +148,54 @@ function ActionPopover({ action }) {
 	});
 }
 function UserMenuPopover({ renderUserMenu }) {
+	const strings = (0, _nubitio_ui.useUiStrings)();
 	const { open, toggle, setOpen, containerRef } = (0, _nubitio_ui.useFloatingPanel)();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "nb-admin-header-popover",
 		ref: containerRef,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.IconButton, {
 			icon: "ph ph-user-circle",
-			label: "User menu",
+			label: strings.userMenu,
 			"aria-expanded": open,
 			onClick: toggle
 		}), open && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: "nb-admin-header-popover__panel",
 			role: "dialog",
-			"aria-label": "User menu",
+			"aria-label": strings.userMenu,
 			children: renderUserMenu({ close: () => setOpen(false) })
 		})]
 	});
 }
-const AdminHeader = ({ title, menuToggleEnabled, toggleMenu, className, actions = [], renderUserMenu, renderThemeSwitcher }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
-	className: ["nb-admin-header-component", className].filter(Boolean).join(" "),
-	children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: "nb-admin-header-toolbar",
-		role: "toolbar",
-		"aria-label": "Main toolbar",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "nb-admin-header-toolbar__before",
-			children: [menuToggleEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.IconButton, {
-				className: "nb-admin-menu-button",
-				icon: "ph ph-list",
-				label: "Toggle menu",
-				onClick: toggleMenu
-			}), title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "nb-admin-header-title",
-				children: title
+const AdminHeader = ({ title, menuToggleEnabled, toggleMenu, className, actions = [], renderUserMenu, renderThemeSwitcher }) => {
+	const strings = (0, _nubitio_ui.useUiStrings)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("header", {
+		className: ["nb-admin-header-component", className].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "nb-admin-header-toolbar",
+			role: "toolbar",
+			"aria-label": strings.mainToolbar,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "nb-admin-header-toolbar__before",
+				children: [menuToggleEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.IconButton, {
+					className: "nb-admin-menu-button",
+					icon: "ph ph-list",
+					label: strings.toggleMenu,
+					onClick: toggleMenu
+				}), title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "nb-admin-header-title",
+					children: title
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "nb-admin-header-toolbar__after",
+				children: [
+					renderThemeSwitcher?.(),
+					actions.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionPopover, { action }, action.id)),
+					renderUserMenu && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UserMenuPopover, { renderUserMenu })
+				]
 			})]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "nb-admin-header-toolbar__after",
-			children: [
-				renderThemeSwitcher?.(),
-				actions.map((action) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionPopover, { action }, action.id)),
-				renderUserMenu && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(UserMenuPopover, { renderUserMenu })
-			]
-		})]
-	})
-});
+		})
+	});
+};
 //#endregion
 //#region packages/admin/useScreenSize.ts
 let handlers = [];
@@ -257,6 +261,7 @@ const getIconClassName = (icon) => {
 };
 const AdminSidebarMenu = ({ items, compactMode = false, selectedItemChanged, openMenu, footer }) => {
 	const [expandedItemKeys, setExpandedItemKeys] = (0, react.useState)(/* @__PURE__ */ new Set());
+	const strings = (0, _nubitio_ui.useUiStrings)();
 	const { isLarge } = useScreenSize();
 	const location = (0, react_router_dom.useLocation)();
 	(0, react.useEffect)(() => {
@@ -307,7 +312,7 @@ const AdminSidebarMenu = ({ items, compactMode = false, selectedItemChanged, ope
 			className: "nb-admin-menu-container theme-dependent",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
 				className: "nb-admin-menu__nav",
-				"aria-label": "Main navigation",
+				"aria-label": strings.mainNavigation,
 				children: items.map((item) => {
 					const selected = isSelected(item.path);
 					const containsSelected = parentContainsSelected(item);
@@ -371,6 +376,7 @@ const AdminSidebarMenu = ({ items, compactMode = false, selectedItemChanged, ope
 //#region packages/admin/AdminShell.tsx
 const AdminShell = ({ title, menuItems, headerActions, renderUserMenu, renderThemeSwitcher, footer, children }) => {
 	const navigate = (0, react_router_dom.useNavigate)();
+	const strings = (0, _nubitio_ui.useUiStrings)();
 	const { isXSmall, isLarge } = useScreenSize();
 	const [menuStatus, setMenuStatus] = (0, react.useState)(null);
 	const getDefaultMenuOpenState = (0, react.useCallback)(() => isLarge ? 2 : 1, [isLarge]);
@@ -438,7 +444,7 @@ const AdminShell = ({ title, menuItems, headerActions, renderUserMenu, renderThe
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
 					className: "nb-admin-shell__panel",
-					"aria-label": "Main menu",
+					"aria-label": strings.mainMenu,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AdminSidebarMenu, {
 						items: menuItems,
 						compactMode: isCompact,
@@ -450,13 +456,13 @@ const AdminShell = ({ title, menuItems, headerActions, renderUserMenu, renderThe
 				!isLarge && isMenuOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					className: "nb-admin-shell__scrim",
 					type: "button",
-					"aria-label": "Close menu",
+					"aria-label": strings.closeMenu,
 					onClick: closeMenuFromOverlay
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("main", {
 					className: "nb-admin-shell__content content",
 					tabIndex: 0,
-					"aria-label": title ? `${title} content` : "Main content",
+					"aria-label": title ? `${title} content` : strings.mainContent,
 					children
 				})
 			]
@@ -464,6 +470,35 @@ const AdminShell = ({ title, menuItems, headerActions, renderUserMenu, renderThe
 	});
 };
 //#endregion
+//#region packages/admin/auth/csrfFetch.ts
+const MUTATING_METHODS = /* @__PURE__ */ new Set([
+	"POST",
+	"PUT",
+	"PATCH",
+	"DELETE"
+]);
+/**
+* `fetch` that echoes the double-submit CSRF cookie as `X-CSRF-Token` on
+* state-changing requests.
+*
+* The backend rejects cookie-authenticated POST/PUT/PATCH/DELETE that lack it
+* (`nubit_admin.auth.csrf_protection`, on by default), so the auth pages' own
+* calls — logout, change password, TOTP, session revocation — need it exactly
+* as the CRUD client does. Reads, and requests made before login has issued the
+* cookie, pass through untouched.
+*/
+function csrfFetch(input, init = {}) {
+	const method = (init.method ?? "GET").toUpperCase();
+	const token = MUTATING_METHODS.has(method) ? (0, _nubitio_core.readCsrfToken)() : void 0;
+	if (token === void 0) return fetch(input, init);
+	const headers = new Headers(init.headers);
+	if (!headers.has(_nubitio_core.DEFAULT_CSRF_HEADER_NAME)) headers.set(_nubitio_core.DEFAULT_CSRF_HEADER_NAME, token);
+	return fetch(input, {
+		...init,
+		headers
+	});
+}
+//#endregion
 //#region packages/admin/auth/SessionContext.tsx
 const SessionContext = (0, react.createContext)(null);
 function joinApiPath$7(apiBaseUrl, path) {
@@ -478,9 +513,10 @@ function SessionProvider({ apiBaseUrl = "/api/", mePath = "me", logoutPath = "au
 				setSession({ status: "anonymous" });
 				return;
 			}
+			const profile = await response.json();
 			setSession({
 				status: "authenticated",
-				profile: await response.json()
+				profile
 			});
 		} catch {
 			setSession({ status: "anonymous" });
@@ -490,7 +526,7 @@ function SessionProvider({ apiBaseUrl = "/api/", mePath = "me", logoutPath = "au
 		refresh();
 	}, [refresh]);
 	const logout = (0, react.useCallback)(async () => {
-		await fetch(joinApiPath$7(apiBaseUrl, logoutPath), {
+		await csrfFetch(joinApiPath$7(apiBaseUrl, logoutPath), {
 			method: "POST",
 			credentials: "include"
 		});
@@ -551,9 +587,10 @@ function useFeatureConfig(featureKey) {
 //#endregion
 //#region packages/admin/features/FeatureGate.tsx
 function FeatureGate({ featureKey, ...props }) {
+	const enabled = useFeature(featureKey);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.FeatureGate, {
 		featureKey,
-		enabled: useFeature(featureKey),
+		enabled,
 		...props
 	});
 }
@@ -601,10 +638,13 @@ function PlanPanel({ plans, currentPlanId, subscriptionStatus, trialEndsAt, onSe
 	const currentBadge = labels?.currentBadge ?? "Current plan";
 	const selectingLabel = labels?.selecting ?? "Updating…";
 	let statusLine = null;
-	if (subscriptionStatus === "trialing" && trialEndsAt) statusLine = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-		className: "nb-plan-panel__status",
-		children: (labels?.trialEnds ?? "Trial ends {date}").replace("{date}", formatTrialEnds(trialEndsAt))
-	});
+	if (subscriptionStatus === "trialing" && trialEndsAt) {
+		const trialTemplate = labels?.trialEnds ?? "Trial ends {date}";
+		statusLine = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: "nb-plan-panel__status",
+			children: trialTemplate.replace("{date}", formatTrialEnds(trialEndsAt))
+		});
+	}
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 		className: `nb-plan-panel${className ? ` ${className}` : ""}`,
 		"aria-labelledby": "plan-panel-title",
@@ -1000,7 +1040,7 @@ function ForgotPasswordPage({ apiBaseUrl = "/api/" }) {
 		event.preventDefault();
 		setBusy(true);
 		try {
-			await fetch(joinApiPath$5(apiBaseUrl, "auth/password/forgot"), {
+			await csrfFetch(joinApiPath$5(apiBaseUrl, "auth/password/forgot"), {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
 				credentials: "include",
@@ -1076,7 +1116,7 @@ function ResetPasswordPage({ apiBaseUrl = "/api/" }) {
 		setBusy(true);
 		setError(null);
 		try {
-			const response = await fetch(joinApiPath$4(apiBaseUrl, "auth/password/reset"), {
+			const response = await csrfFetch(joinApiPath$4(apiBaseUrl, "auth/password/reset"), {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
 				credentials: "include",
@@ -1086,7 +1126,8 @@ function ResetPasswordPage({ apiBaseUrl = "/api/" }) {
 				})
 			});
 			if (!response.ok) {
-				setError((await response.json().catch(() => null))?.message ?? "Reset failed");
+				const payload = await response.json().catch(() => null);
+				setError(payload?.message ?? "Reset failed");
 				return;
 			}
 			setDone(true);
@@ -1168,13 +1209,14 @@ function AcceptInvitationPage({ apiBaseUrl = "/api/" }) {
 	const [busy, setBusy] = (0, react.useState)(false);
 	(0, react.useEffect)(() => {
 		let cancelled = false;
-		fetch(joinApiPath$3(apiBaseUrl, `invitations/${token}`), { credentials: "include" }).then(async (response) => {
+		csrfFetch(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);
+			const payload = await response.json();
+			setEmail(payload.email ?? null);
 		}).catch(() => {
 			if (!cancelled) setError("Network error");
 		});
@@ -1187,14 +1229,15 @@ function AcceptInvitationPage({ apiBaseUrl = "/api/" }) {
 		setBusy(true);
 		setError(null);
 		try {
-			const response = await fetch(joinApiPath$3(apiBaseUrl, `invitations/${token}/accept`), {
+			const response = await csrfFetch(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");
+				const payload = await response.json().catch(() => null);
+				setError(payload?.message ?? "Could not accept the invitation");
 				return;
 			}
 			setDone(true);
@@ -1294,7 +1337,10 @@ function AccountPage({ apiBaseUrl = "/api/" }) {
 		})]);
 		if (signal?.aborted) return;
 		if (totpResponse.ok) setTotp(await totpResponse.json());
-		if (sessionResponse.ok) setSessions((await sessionResponse.json()).sessions ?? []);
+		if (sessionResponse.ok) {
+			const payload = await sessionResponse.json();
+			setSessions(payload.sessions ?? []);
+		}
 	}, [apiBaseUrl]);
 	(0, react.useEffect)(() => {
 		const controller = new AbortController();
@@ -1306,7 +1352,7 @@ function AccountPage({ apiBaseUrl = "/api/" }) {
 	const changePassword = async (event) => {
 		event.preventDefault();
 		setPasswordMessage(null);
-		const response = await fetch(joinApiPath$2(apiBaseUrl, "auth/change-password"), {
+		const response = await csrfFetch(joinApiPath$2(apiBaseUrl, "auth/change-password"), {
 			method: "POST",
 			headers: { "Content-Type": "application/json" },
 			credentials: "include",
@@ -1316,7 +1362,8 @@ function AccountPage({ apiBaseUrl = "/api/" }) {
 			})
 		});
 		if (!response.ok) {
-			setPasswordMessage((await response.json().catch(() => null))?.message ?? "Could not change password");
+			const payload = await response.json().catch(() => null);
+			setPasswordMessage(payload?.message ?? "Could not change password");
 			return;
 		}
 		setCurrentPassword("");
@@ -1326,12 +1373,13 @@ function AccountPage({ apiBaseUrl = "/api/" }) {
 	};
 	const beginTotp = async () => {
 		setTotpMessage(null);
-		const response = await fetch(joinApiPath$2(apiBaseUrl, "auth/totp"), {
+		const response = await csrfFetch(joinApiPath$2(apiBaseUrl, "auth/totp"), {
 			method: "POST",
 			credentials: "include"
 		});
 		if (!response.ok) {
-			setTotpMessage((await response.json().catch(() => null))?.message ?? "Could not start enrolment");
+			const payload = await response.json().catch(() => null);
+			setTotpMessage(payload?.message ?? "Could not start enrolment");
 			return;
 		}
 		const payload = await response.json();
@@ -1340,14 +1388,15 @@ function AccountPage({ apiBaseUrl = "/api/" }) {
 	};
 	const confirmTotp = async (event) => {
 		event.preventDefault();
-		const response = await fetch(joinApiPath$2(apiBaseUrl, "auth/totp/confirm"), {
+		const response = await csrfFetch(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");
+			const payload = await response.json().catch(() => null);
+			setTotpMessage(payload?.message ?? "That code is not valid");
 			return;
 		}
 		setTotpCode("");
@@ -1357,14 +1406,15 @@ function AccountPage({ apiBaseUrl = "/api/" }) {
 	};
 	const disableTotp = async (event) => {
 		event.preventDefault();
-		const response = await fetch(joinApiPath$2(apiBaseUrl, "auth/totp"), {
+		const response = await csrfFetch(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");
+			const payload = await response.json().catch(() => null);
+			setTotpMessage(payload?.message ?? "Could not disable the second factor");
 			return;
 		}
 		setTotpCode("");
@@ -1372,7 +1422,7 @@ function AccountPage({ apiBaseUrl = "/api/" }) {
 		await load();
 	};
 	const revokeSession = async (id) => {
-		await fetch(joinApiPath$2(apiBaseUrl, `auth/sessions/${id}`), {
+		await csrfFetch(joinApiPath$2(apiBaseUrl, `auth/sessions/${id}`), {
 			method: "DELETE",
 			credentials: "include"
 		});
@@ -1558,7 +1608,8 @@ function initialValues(fields) {
 	return Object.fromEntries(fields.map((field) => [field.name, field.defaultValue ?? ""]));
 }
 function RegisterPage({ fields, onRegistered, apiBaseUrl = "/api/", registerPath = "auth/register", title = "Create account", hint, submitLabel = "Create account", busyLabel = "Creating…", loginLink, loginPrompt = "Already have an account?" }) {
-	const [values, setValues] = (0, react.useState)((0, react.useMemo)(() => initialValues(fields), [fields]));
+	const defaults = (0, react.useMemo)(() => initialValues(fields), [fields]);
+	const [values, setValues] = (0, react.useState)(defaults);
 	const [error, setError] = (0, react.useState)(null);
 	const [busy, setBusy] = (0, react.useState)(false);
 	const setValue = (name, value) => {
@@ -1572,7 +1623,7 @@ function RegisterPage({ fields, onRegistered, apiBaseUrl = "/api/", registerPath
 		setBusy(true);
 		setError(null);
 		try {
-			const response = await fetch(joinApiPath$1(apiBaseUrl, registerPath), {
+			const response = await csrfFetch(joinApiPath$1(apiBaseUrl, registerPath), {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
 				credentials: "include",
@@ -1716,9 +1767,10 @@ function useRuntimeConfig({ apiBaseUrl = "/api/", path = "runtime-config", enabl
 				setState({ status: "error" });
 				return;
 			}
+			const config = await response.json();
 			setState({
 				status: "ready",
-				config: await response.json()
+				config
 			});
 		} catch {
 			setState({ status: "error" });
@@ -2059,6 +2111,7 @@ function resolveShellMenu(config, ctx) {
 }
 function NubitAuthenticatedApp({ config }) {
 	const session = useSession();
+	const strings = (0, _nubitio_ui.useUiStrings)();
 	const { runtime, toasts, dismiss } = useAppRuntime();
 	const apiBaseUrl = config.apiBaseUrl ?? "/api/";
 	const homePath = config.homePath ?? config.routes[0]?.path ?? "/";
@@ -2075,7 +2128,7 @@ function NubitAuthenticatedApp({ config }) {
 	if (session.session.status === "loading") return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		style: { padding: 24 },
 		"aria-busy": "true",
-		"aria-label": "Loading session",
+		"aria-label": strings.loadingSession,
 		children: [
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.Skeleton, {
 				variant: "rect",
@@ -2126,6 +2179,7 @@ function NubitAuthenticatedApp({ config }) {
 				baseUrl: apiBaseUrl,
 				refreshPath: "auth/refresh",
 				loginPath: "auth/login",
+				getCsrfToken: () => (0, _nubitio_core.readCsrfToken)(),
 				onUnauthorized: () => {
 					session.logout();
 				}