@nubitio/admin 1.1.1 → 1.1.2

package/dist/index.mjs

@@ -1,9 +1,9 @@
 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, { 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 { Badge, Button, Card, EmptyState, FeatureGate as FeatureGate$1, FormField, IconButton, Skeleton, TextField, ThemeProvider, ThemeSwitcher, useFloatingPanel, useUiStrings } from "@nubitio/ui";
+import { CoreConfigProvider, CoreProvider, DEFAULT_CSRF_HEADER_NAME, MercureProvider, readCsrfToken, useCoreHttpClient, useMercureSubscription } from "@nubitio/core";
 import { QueryClient, QueryClientProvider, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { CoreConfigProvider, CoreProvider, MercureProvider, useCoreHttpClient, useMercureSubscription } from "@nubitio/core";
 import { DevToolsProvider, SessionPermissionsProvider, SmartCrudRolesProvider, isDevEnvironment, useDevTools } from "@nubitio/crud";
 import { HydraResourceSchemaProvider, HydraResourceStoreProvider, SchemaProvider } from "@nubitio/hydra";
 //#region packages/admin/FeatureHubLayout.tsx
@@ -124,50 +124,54 @@ function ActionPopover({ action }) {
 	});
 }
 function UserMenuPopover({ renderUserMenu }) {
+	const strings = useUiStrings();
 	const { open, toggle, setOpen, containerRef } = useFloatingPanel();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "nb-admin-header-popover",
 		ref: containerRef,
 		children: [/* @__PURE__ */ jsx(IconButton, {
 			icon: "ph ph-user-circle",
-			label: "User menu",
+			label: strings.userMenu,
 			"aria-expanded": open,
 			onClick: toggle
 		}), open && /* @__PURE__ */ 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__ */ jsx("header", {
-	className: ["nb-admin-header-component", className].filter(Boolean).join(" "),
-	children: /* @__PURE__ */ jsxs("div", {
-		className: "nb-admin-header-toolbar",
-		role: "toolbar",
-		"aria-label": "Main toolbar",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "nb-admin-header-toolbar__before",
-			children: [menuToggleEnabled && /* @__PURE__ */ jsx(IconButton, {
-				className: "nb-admin-menu-button",
-				icon: "ph ph-list",
-				label: "Toggle menu",
-				onClick: toggleMenu
-			}), title && /* @__PURE__ */ jsx("div", {
-				className: "nb-admin-header-title",
-				children: title
+const AdminHeader = ({ title, menuToggleEnabled, toggleMenu, className, actions = [], renderUserMenu, renderThemeSwitcher }) => {
+	const strings = useUiStrings();
+	return /* @__PURE__ */ jsx("header", {
+		className: ["nb-admin-header-component", className].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "nb-admin-header-toolbar",
+			role: "toolbar",
+			"aria-label": strings.mainToolbar,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "nb-admin-header-toolbar__before",
+				children: [menuToggleEnabled && /* @__PURE__ */ jsx(IconButton, {
+					className: "nb-admin-menu-button",
+					icon: "ph ph-list",
+					label: strings.toggleMenu,
+					onClick: toggleMenu
+				}), title && /* @__PURE__ */ jsx("div", {
+					className: "nb-admin-header-title",
+					children: title
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "nb-admin-header-toolbar__after",
+				children: [
+					renderThemeSwitcher?.(),
+					actions.map((action) => /* @__PURE__ */ jsx(ActionPopover, { action }, action.id)),
+					renderUserMenu && /* @__PURE__ */ jsx(UserMenuPopover, { renderUserMenu })
+				]
 			})]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "nb-admin-header-toolbar__after",
-			children: [
-				renderThemeSwitcher?.(),
-				actions.map((action) => /* @__PURE__ */ jsx(ActionPopover, { action }, action.id)),
-				renderUserMenu && /* @__PURE__ */ jsx(UserMenuPopover, { renderUserMenu })
-			]
-		})]
-	})
-});
+		})
+	});
+};
 //#endregion
 //#region packages/admin/useScreenSize.ts
 let handlers = [];
@@ -233,6 +237,7 @@ const getIconClassName = (icon) => {
 };
 const AdminSidebarMenu = ({ items, compactMode = false, selectedItemChanged, openMenu, footer }) => {
 	const [expandedItemKeys, setExpandedItemKeys] = useState(/* @__PURE__ */ new Set());
+	const strings = useUiStrings();
 	const { isLarge } = useScreenSize();
 	const location = useLocation();
 	useEffect(() => {
@@ -283,7 +288,7 @@ const AdminSidebarMenu = ({ items, compactMode = false, selectedItemChanged, ope
 			className: "nb-admin-menu-container theme-dependent",
 			children: /* @__PURE__ */ 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);
@@ -347,6 +352,7 @@ const AdminSidebarMenu = ({ items, compactMode = false, selectedItemChanged, ope
 //#region packages/admin/AdminShell.tsx
 const AdminShell = ({ title, menuItems, headerActions, renderUserMenu, renderThemeSwitcher, footer, children }) => {
 	const navigate = useNavigate();
+	const strings = useUiStrings();
 	const { isXSmall, isLarge } = useScreenSize();
 	const [menuStatus, setMenuStatus] = useState(null);
 	const getDefaultMenuOpenState = useCallback(() => isLarge ? 2 : 1, [isLarge]);
@@ -414,7 +420,7 @@ const AdminShell = ({ title, menuItems, headerActions, renderUserMenu, renderThe
 			children: [
 				/* @__PURE__ */ jsx("aside", {
 					className: "nb-admin-shell__panel",
-					"aria-label": "Main menu",
+					"aria-label": strings.mainMenu,
 					children: /* @__PURE__ */ jsx(AdminSidebarMenu, {
 						items: menuItems,
 						compactMode: isCompact,
@@ -426,13 +432,13 @@ const AdminShell = ({ title, menuItems, headerActions, renderUserMenu, renderThe
 				!isLarge && isMenuOpen && /* @__PURE__ */ jsx("button", {
 					className: "nb-admin-shell__scrim",
 					type: "button",
-					"aria-label": "Close menu",
+					"aria-label": strings.closeMenu,
 					onClick: closeMenuFromOverlay
 				}),
 				/* @__PURE__ */ 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
 				})
 			]
@@ -440,6 +446,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) ? readCsrfToken() : void 0;
+	if (token === void 0) return fetch(input, init);
+	const headers = new Headers(init.headers);
+	if (!headers.has(DEFAULT_CSRF_HEADER_NAME)) headers.set(DEFAULT_CSRF_HEADER_NAME, token);
+	return fetch(input, {
+		...init,
+		headers
+	});
+}
+//#endregion
 //#region packages/admin/auth/SessionContext.tsx
 const SessionContext = createContext(null);
 function joinApiPath$7(apiBaseUrl, path) {
@@ -454,9 +489,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" });
@@ -466,7 +502,7 @@ function SessionProvider({ apiBaseUrl = "/api/", mePath = "me", logoutPath = "au
 		refresh();
 	}, [refresh]);
 	const logout = useCallback(async () => {
-		await fetch(joinApiPath$7(apiBaseUrl, logoutPath), {
+		await csrfFetch(joinApiPath$7(apiBaseUrl, logoutPath), {
 			method: "POST",
 			credentials: "include"
 		});
@@ -527,9 +563,10 @@ function useFeatureConfig(featureKey) {
 //#endregion
 //#region packages/admin/features/FeatureGate.tsx
 function FeatureGate({ featureKey, ...props }) {
+	const enabled = useFeature(featureKey);
 	return /* @__PURE__ */ jsx(FeatureGate$1, {
 		featureKey,
-		enabled: useFeature(featureKey),
+		enabled,
 		...props
 	});
 }
@@ -577,10 +614,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__ */ 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__ */ jsx("p", {
+			className: "nb-plan-panel__status",
+			children: trialTemplate.replace("{date}", formatTrialEnds(trialEndsAt))
+		});
+	}
 	return /* @__PURE__ */ jsxs("section", {
 		className: `nb-plan-panel${className ? ` ${className}` : ""}`,
 		"aria-labelledby": "plan-panel-title",
@@ -976,7 +1016,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",
@@ -1052,7 +1092,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",
@@ -1062,7 +1102,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);
@@ -1144,13 +1185,14 @@ function AcceptInvitationPage({ apiBaseUrl = "/api/" }) {
 	const [busy, setBusy] = useState(false);
 	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");
 		});
@@ -1163,14 +1205,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);
@@ -1270,7 +1313,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]);
 	useEffect(() => {
 		const controller = new AbortController();
@@ -1282,7 +1328,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",
@@ -1292,7 +1338,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("");
@@ -1302,12 +1349,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();
@@ -1316,14 +1364,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("");
@@ -1333,14 +1382,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("");
@@ -1348,7 +1398,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"
 		});
@@ -1534,7 +1584,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] = useState(useMemo(() => initialValues(fields), [fields]));
+	const defaults = useMemo(() => initialValues(fields), [fields]);
+	const [values, setValues] = useState(defaults);
 	const [error, setError] = useState(null);
 	const [busy, setBusy] = useState(false);
 	const setValue = (name, value) => {
@@ -1548,7 +1599,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",
@@ -1692,9 +1743,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" });
@@ -2035,6 +2087,7 @@ function resolveShellMenu(config, ctx) {
 }
 function NubitAuthenticatedApp({ config }) {
 	const session = useSession();
+	const strings = useUiStrings();
 	const { runtime, toasts, dismiss } = useAppRuntime();
 	const apiBaseUrl = config.apiBaseUrl ?? "/api/";
 	const homePath = config.homePath ?? config.routes[0]?.path ?? "/";
@@ -2051,7 +2104,7 @@ function NubitAuthenticatedApp({ config }) {
 	if (session.session.status === "loading") return /* @__PURE__ */ jsxs("div", {
 		style: { padding: 24 },
 		"aria-busy": "true",
-		"aria-label": "Loading session",
+		"aria-label": strings.loadingSession,
 		children: [
 			/* @__PURE__ */ jsx(Skeleton, {
 				variant: "rect",
@@ -2102,6 +2155,7 @@ function NubitAuthenticatedApp({ config }) {
 				baseUrl: apiBaseUrl,
 				refreshPath: "auth/refresh",
 				loginPath: "auth/login",
+				getCsrfToken: () => readCsrfToken(),
 				onUnauthorized: () => {
 					session.logout();
 				}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nubitio/admin",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "type": "module",
   "description": "Admin shell layout components: responsive sidebar, header, and screen size utilities for Nubit apps.",
   "license": "MIT",
@@ -53,9 +53,12 @@
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0",
     "react-router-dom": "^6.0.0 || ^7.0.0",
-    "@nubitio/core": "^1.1.1",
-    "@nubitio/crud": "^1.1.1",
-    "@nubitio/ui": "^1.1.1",
-    "@nubitio/hydra": "^1.1.1"
+    "@nubitio/core": "^1.1.2",
+    "@nubitio/crud": "^1.1.2",
+    "@nubitio/hydra": "^1.1.2",
+    "@nubitio/ui": "^1.1.2"
+  },
+  "devDependencies": {
+    "react-router-dom": "^6.30.6"
   }
 }