@nubitio/admin 0.5.22 → 0.5.23

package/dist/index.cjs

@@ -389,14 +389,14 @@ const AdminShell = ({ title, menuItems, headerActions, renderUserMenu, renderThe
 //#endregion
 //#region packages/admin/auth/SessionContext.tsx
 const SessionContext = (0, react.createContext)(null);
-function joinApiPath$2(apiBaseUrl, path) {
+function joinApiPath$3(apiBaseUrl, path) {
 	return `${apiBaseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
 }
 function SessionProvider({ apiBaseUrl = "/api/", mePath = "me", logoutPath = "auth/logout", children }) {
 	const [session, setSession] = (0, react.useState)({ status: "loading" });
 	const refresh = (0, react.useCallback)(async () => {
 		try {
-			const response = await fetch(joinApiPath$2(apiBaseUrl, mePath), { credentials: "include" });
+			const response = await fetch(joinApiPath$3(apiBaseUrl, mePath), { credentials: "include" });
 			if (!response.ok) {
 				setSession({ status: "anonymous" });
 				return;
@@ -413,7 +413,7 @@ function SessionProvider({ apiBaseUrl = "/api/", mePath = "me", logoutPath = "au
 		refresh();
 	}, [refresh]);
 	const logout = (0, react.useCallback)(async () => {
-		await fetch(joinApiPath$2(apiBaseUrl, logoutPath), {
+		await fetch(joinApiPath$3(apiBaseUrl, logoutPath), {
 			method: "POST",
 			credentials: "include"
 		});
@@ -482,7 +482,7 @@ function FeatureGate({ featureKey, ...props }) {
 }
 //#endregion
 //#region packages/admin/auth/LoginPage.tsx
-function joinApiPath$1(apiBaseUrl, path) {
+function joinApiPath$2(apiBaseUrl, path) {
 	return `${apiBaseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
 }
 function LoginPage({ onLoggedIn, apiBaseUrl = "/api/", loginPath = "auth/login", title = "Nubit Admin", hint, defaultUsername = "" }) {
@@ -495,7 +495,7 @@ function LoginPage({ onLoggedIn, apiBaseUrl = "/api/", loginPath = "auth/login",
 		setBusy(true);
 		setError(null);
 		try {
-			const response = await fetch(joinApiPath$1(apiBaseUrl, loginPath), {
+			const response = await fetch(joinApiPath$2(apiBaseUrl, loginPath), {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
 				credentials: "include",
@@ -573,6 +573,125 @@ function LoginPage({ onLoggedIn, apiBaseUrl = "/api/", loginPath = "auth/login",
 	});
 }
 //#endregion
+//#region packages/admin/auth/RegisterPage.tsx
+function joinApiPath$1(apiBaseUrl, path) {
+	return `${apiBaseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
+}
+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 [error, setError] = (0, react.useState)(null);
+	const [busy, setBusy] = (0, react.useState)(false);
+	const setValue = (name, value) => {
+		setValues((current) => ({
+			...current,
+			[name]: value
+		}));
+	};
+	const submit = async (event) => {
+		event.preventDefault();
+		setBusy(true);
+		setError(null);
+		try {
+			const response = await fetch(joinApiPath$1(apiBaseUrl, registerPath), {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				credentials: "include",
+				body: JSON.stringify(values)
+			});
+			const body = await response.json().catch(() => null);
+			if (!response.ok) {
+				setError(body?.error ?? body?.message ?? "Registration failed");
+				return;
+			}
+			onRegistered();
+		} catch {
+			setError("Network error");
+		} finally {
+			setBusy(false);
+		}
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		style: {
+			display: "grid",
+			placeItems: "center",
+			minHeight: "100vh"
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.Card, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+			onSubmit: submit,
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				gap: 12,
+				width: 360,
+				padding: 8
+			},
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+					style: { margin: 0 },
+					children: title
+				}),
+				hint && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					style: {
+						margin: 0,
+						color: "var(--text-secondary)"
+					},
+					children: hint
+				}),
+				fields.map((field) => {
+					const type = field.type ?? "text";
+					if (type === "select") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+						value: values[field.name] ?? "",
+						onChange: (e) => setValue(field.name, e.target.value),
+						style: { width: "100%" },
+						"aria-label": field.placeholder ?? field.name,
+						children: (field.options ?? []).map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+							value: option.value,
+							children: option.label
+						}, option.value))
+					}, field.name);
+					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.TextField, {
+						placeholder: field.placeholder,
+						type: type === "password" ? "password" : type === "email" ? "email" : "text",
+						value: values[field.name] ?? "",
+						autoComplete: field.autoComplete,
+						onChange: (e) => setValue(field.name, e.target.value)
+					}, field.name);
+				}),
+				error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					style: {
+						margin: 0,
+						color: "var(--error-color, #dc2626)"
+					},
+					children: error
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_nubitio_ui.Button, {
+					variant: "primary",
+					type: "submit",
+					disabled: busy,
+					children: busy ? busyLabel : submitLabel
+				}),
+				loginLink && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
+					style: {
+						margin: 0,
+						color: "var(--text-secondary)"
+					},
+					children: [
+						loginPrompt,
+						" ",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_router_dom.Link, {
+							to: loginLink.to,
+							children: loginLink.label
+						})
+					]
+				})
+			]
+		}) })
+	});
+}
+//#endregion
 //#region packages/admin/runtime/useAppRuntime.ts
 function useAppRuntime() {
 	const [toasts, setToasts] = (0, react.useState)([]);
@@ -842,6 +961,7 @@ exports.AdminShell = AdminShell;
 exports.AdminSidebarMenu = AdminSidebarMenu;
 exports.FeatureGate = FeatureGate;
 exports.LoginPage = LoginPage;
+exports.RegisterPage = RegisterPage;
 exports.SessionProvider = SessionProvider;
 exports.StaticSessionProvider = StaticSessionProvider;
 exports.ToastHost = ToastHost;

package/dist/index.d.cts

@@ -186,6 +186,49 @@ declare function LoginPage({
   defaultUsername
 }: LoginPageProps): import("react").JSX.Element;
 //#endregion
+//#region packages/admin/auth/RegisterPage.d.ts
+type RegisterFieldType = 'text' | 'email' | 'password' | 'select';
+interface RegisterSelectOption {
+  value: string;
+  label: string;
+}
+interface RegisterField {
+  /** JSON body key sent to the register endpoint. */
+  name: string;
+  placeholder?: string;
+  type?: RegisterFieldType;
+  defaultValue?: string;
+  autoComplete?: string;
+  options?: RegisterSelectOption[];
+}
+interface RegisterPageProps {
+  fields: RegisterField[];
+  onRegistered: () => void;
+  apiBaseUrl?: string;
+  registerPath?: string;
+  title?: string;
+  hint?: string;
+  submitLabel?: string;
+  busyLabel?: string;
+  loginLink?: {
+    to: string;
+    label: string;
+  };
+  loginPrompt?: string;
+}
+declare function RegisterPage({
+  fields,
+  onRegistered,
+  apiBaseUrl,
+  registerPath,
+  title,
+  hint,
+  submitLabel,
+  busyLabel,
+  loginLink,
+  loginPrompt
+}: RegisterPageProps): import("react").JSX.Element;
+//#endregion
 //#region packages/admin/runtime/useAppRuntime.d.ts
 type NotificationType = 'success' | 'error' | 'warning' | 'info';
 type ToastItem = {
@@ -307,4 +350,4 @@ declare function hasAnyRole(required: string | string[] | undefined, roles: stri
  */
 declare function filterMenuByRoles(items: NubitAppMenuItem[], roles: string[]): AdminMenuItem[];
 //#endregion
-export { AdminHeader, type AdminHeaderAction, type AdminHeaderProps, type AdminMenuItem, type AdminMenuSubItem, AdminShell, type AdminShellProps, AdminSidebarMenu, type AdminSidebarMenuProps, type AdminSidebarMenuSelectEvent, type AppProfile, type CreateNubitAppConfig, FeatureGate, type FeatureGateProps, LoginPage, type LoginPageProps, type NotificationType, type NubitApp, type NubitAppMenuContext, type NubitAppMenuItem, type NubitAppMenuSubItem, type NubitAppRoute, type NubitAppUserMenuContext, type RuntimeConfig, type RuntimeConfigState, type SessionContextValue, type SessionFeatureEntitlement, type SessionProfile, SessionProvider, type SessionProviderConfig, type SessionState, type SessionTenant, StaticSessionProvider, ToastHost, type ToastHostProps, type ToastItem, type UseRuntimeConfigOptions, createNubitApp, filterMenuByRoles, hasAnyRole, useAppRuntime, useFeature, useFeatureConfig, useRuntimeConfig, useScreenSize, useScreenSizeClass, useSession };
+export { AdminHeader, type AdminHeaderAction, type AdminHeaderProps, type AdminMenuItem, type AdminMenuSubItem, AdminShell, type AdminShellProps, AdminSidebarMenu, type AdminSidebarMenuProps, type AdminSidebarMenuSelectEvent, type AppProfile, type CreateNubitAppConfig, FeatureGate, type FeatureGateProps, LoginPage, type LoginPageProps, type NotificationType, type NubitApp, type NubitAppMenuContext, type NubitAppMenuItem, type NubitAppMenuSubItem, type NubitAppRoute, type NubitAppUserMenuContext, type RegisterField, type RegisterFieldType, RegisterPage, type RegisterPageProps, type RegisterSelectOption, type RuntimeConfig, type RuntimeConfigState, type SessionContextValue, type SessionFeatureEntitlement, type SessionProfile, SessionProvider, type SessionProviderConfig, type SessionState, type SessionTenant, StaticSessionProvider, ToastHost, type ToastHostProps, type ToastItem, type UseRuntimeConfigOptions, createNubitApp, filterMenuByRoles, hasAnyRole, useAppRuntime, useFeature, useFeatureConfig, useRuntimeConfig, useScreenSize, useScreenSizeClass, useSession };

package/dist/index.d.mts

@@ -186,6 +186,49 @@ declare function LoginPage({
   defaultUsername
 }: LoginPageProps): import("react").JSX.Element;
 //#endregion
+//#region packages/admin/auth/RegisterPage.d.ts
+type RegisterFieldType = 'text' | 'email' | 'password' | 'select';
+interface RegisterSelectOption {
+  value: string;
+  label: string;
+}
+interface RegisterField {
+  /** JSON body key sent to the register endpoint. */
+  name: string;
+  placeholder?: string;
+  type?: RegisterFieldType;
+  defaultValue?: string;
+  autoComplete?: string;
+  options?: RegisterSelectOption[];
+}
+interface RegisterPageProps {
+  fields: RegisterField[];
+  onRegistered: () => void;
+  apiBaseUrl?: string;
+  registerPath?: string;
+  title?: string;
+  hint?: string;
+  submitLabel?: string;
+  busyLabel?: string;
+  loginLink?: {
+    to: string;
+    label: string;
+  };
+  loginPrompt?: string;
+}
+declare function RegisterPage({
+  fields,
+  onRegistered,
+  apiBaseUrl,
+  registerPath,
+  title,
+  hint,
+  submitLabel,
+  busyLabel,
+  loginLink,
+  loginPrompt
+}: RegisterPageProps): import("react").JSX.Element;
+//#endregion
 //#region packages/admin/runtime/useAppRuntime.d.ts
 type NotificationType = 'success' | 'error' | 'warning' | 'info';
 type ToastItem = {
@@ -307,4 +350,4 @@ declare function hasAnyRole(required: string | string[] | undefined, roles: stri
  */
 declare function filterMenuByRoles(items: NubitAppMenuItem[], roles: string[]): AdminMenuItem[];
 //#endregion
-export { AdminHeader, type AdminHeaderAction, type AdminHeaderProps, type AdminMenuItem, type AdminMenuSubItem, AdminShell, type AdminShellProps, AdminSidebarMenu, type AdminSidebarMenuProps, type AdminSidebarMenuSelectEvent, type AppProfile, type CreateNubitAppConfig, FeatureGate, type FeatureGateProps, LoginPage, type LoginPageProps, type NotificationType, type NubitApp, type NubitAppMenuContext, type NubitAppMenuItem, type NubitAppMenuSubItem, type NubitAppRoute, type NubitAppUserMenuContext, type RuntimeConfig, type RuntimeConfigState, type SessionContextValue, type SessionFeatureEntitlement, type SessionProfile, SessionProvider, type SessionProviderConfig, type SessionState, type SessionTenant, StaticSessionProvider, ToastHost, type ToastHostProps, type ToastItem, type UseRuntimeConfigOptions, createNubitApp, filterMenuByRoles, hasAnyRole, useAppRuntime, useFeature, useFeatureConfig, useRuntimeConfig, useScreenSize, useScreenSizeClass, useSession };
+export { AdminHeader, type AdminHeaderAction, type AdminHeaderProps, type AdminMenuItem, type AdminMenuSubItem, AdminShell, type AdminShellProps, AdminSidebarMenu, type AdminSidebarMenuProps, type AdminSidebarMenuSelectEvent, type AppProfile, type CreateNubitAppConfig, FeatureGate, type FeatureGateProps, LoginPage, type LoginPageProps, type NotificationType, type NubitApp, type NubitAppMenuContext, type NubitAppMenuItem, type NubitAppMenuSubItem, type NubitAppRoute, type NubitAppUserMenuContext, type RegisterField, type RegisterFieldType, RegisterPage, type RegisterPageProps, type RegisterSelectOption, type RuntimeConfig, type RuntimeConfigState, type SessionContextValue, type SessionFeatureEntitlement, type SessionProfile, SessionProvider, type SessionProviderConfig, type SessionState, type SessionTenant, StaticSessionProvider, ToastHost, type ToastHostProps, type ToastItem, type UseRuntimeConfigOptions, createNubitApp, filterMenuByRoles, hasAnyRole, useAppRuntime, useFeature, useFeatureConfig, useRuntimeConfig, useScreenSize, useScreenSizeClass, useSession };

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
-import { BrowserRouter, Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom";
+import { BrowserRouter, Link, Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom";
 import { Badge, Button, Card, FeatureGate as FeatureGate$1, IconButton, TextField, ThemeProvider, ThemeSwitcher, useFloatingPanel } from "@nubitio/ui";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
@@ -365,14 +365,14 @@ const AdminShell = ({ title, menuItems, headerActions, renderUserMenu, renderThe
 //#endregion
 //#region packages/admin/auth/SessionContext.tsx
 const SessionContext = createContext(null);
-function joinApiPath$2(apiBaseUrl, path) {
+function joinApiPath$3(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$2(apiBaseUrl, mePath), { credentials: "include" });
+			const response = await fetch(joinApiPath$3(apiBaseUrl, mePath), { credentials: "include" });
 			if (!response.ok) {
 				setSession({ status: "anonymous" });
 				return;
@@ -389,7 +389,7 @@ function SessionProvider({ apiBaseUrl = "/api/", mePath = "me", logoutPath = "au
 		refresh();
 	}, [refresh]);
 	const logout = useCallback(async () => {
-		await fetch(joinApiPath$2(apiBaseUrl, logoutPath), {
+		await fetch(joinApiPath$3(apiBaseUrl, logoutPath), {
 			method: "POST",
 			credentials: "include"
 		});
@@ -458,7 +458,7 @@ function FeatureGate({ featureKey, ...props }) {
 }
 //#endregion
 //#region packages/admin/auth/LoginPage.tsx
-function joinApiPath$1(apiBaseUrl, path) {
+function joinApiPath$2(apiBaseUrl, path) {
 	return `${apiBaseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
 }
 function LoginPage({ onLoggedIn, apiBaseUrl = "/api/", loginPath = "auth/login", title = "Nubit Admin", hint, defaultUsername = "" }) {
@@ -471,7 +471,7 @@ function LoginPage({ onLoggedIn, apiBaseUrl = "/api/", loginPath = "auth/login",
 		setBusy(true);
 		setError(null);
 		try {
-			const response = await fetch(joinApiPath$1(apiBaseUrl, loginPath), {
+			const response = await fetch(joinApiPath$2(apiBaseUrl, loginPath), {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
 				credentials: "include",
@@ -549,6 +549,125 @@ function LoginPage({ onLoggedIn, apiBaseUrl = "/api/", loginPath = "auth/login",
 	});
 }
 //#endregion
+//#region packages/admin/auth/RegisterPage.tsx
+function joinApiPath$1(apiBaseUrl, path) {
+	return `${apiBaseUrl.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
+}
+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 [error, setError] = useState(null);
+	const [busy, setBusy] = useState(false);
+	const setValue = (name, value) => {
+		setValues((current) => ({
+			...current,
+			[name]: value
+		}));
+	};
+	const submit = async (event) => {
+		event.preventDefault();
+		setBusy(true);
+		setError(null);
+		try {
+			const response = await fetch(joinApiPath$1(apiBaseUrl, registerPath), {
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				credentials: "include",
+				body: JSON.stringify(values)
+			});
+			const body = await response.json().catch(() => null);
+			if (!response.ok) {
+				setError(body?.error ?? body?.message ?? "Registration failed");
+				return;
+			}
+			onRegistered();
+		} 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: 360,
+				padding: 8
+			},
+			children: [
+				/* @__PURE__ */ jsx("h2", {
+					style: { margin: 0 },
+					children: title
+				}),
+				hint && /* @__PURE__ */ jsx("p", {
+					style: {
+						margin: 0,
+						color: "var(--text-secondary)"
+					},
+					children: hint
+				}),
+				fields.map((field) => {
+					const type = field.type ?? "text";
+					if (type === "select") return /* @__PURE__ */ jsx("select", {
+						value: values[field.name] ?? "",
+						onChange: (e) => setValue(field.name, e.target.value),
+						style: { width: "100%" },
+						"aria-label": field.placeholder ?? field.name,
+						children: (field.options ?? []).map((option) => /* @__PURE__ */ jsx("option", {
+							value: option.value,
+							children: option.label
+						}, option.value))
+					}, field.name);
+					return /* @__PURE__ */ jsx(TextField, {
+						placeholder: field.placeholder,
+						type: type === "password" ? "password" : type === "email" ? "email" : "text",
+						value: values[field.name] ?? "",
+						autoComplete: field.autoComplete,
+						onChange: (e) => setValue(field.name, e.target.value)
+					}, field.name);
+				}),
+				error && /* @__PURE__ */ jsx("p", {
+					style: {
+						margin: 0,
+						color: "var(--error-color, #dc2626)"
+					},
+					children: error
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					type: "submit",
+					disabled: busy,
+					children: busy ? busyLabel : submitLabel
+				}),
+				loginLink && /* @__PURE__ */ jsxs("p", {
+					style: {
+						margin: 0,
+						color: "var(--text-secondary)"
+					},
+					children: [
+						loginPrompt,
+						" ",
+						/* @__PURE__ */ jsx(Link, {
+							to: loginLink.to,
+							children: loginLink.label
+						})
+					]
+				})
+			]
+		}) })
+	});
+}
+//#endregion
 //#region packages/admin/runtime/useAppRuntime.ts
 function useAppRuntime() {
 	const [toasts, setToasts] = useState([]);
@@ -813,4 +932,4 @@ function createNubitApp(config) {
 	return { App };
 }
 //#endregion
-export { AdminHeader, AdminShell, AdminSidebarMenu, FeatureGate, LoginPage, SessionProvider, StaticSessionProvider, ToastHost, createNubitApp, filterMenuByRoles, hasAnyRole, useAppRuntime, useFeature, useFeatureConfig, useRuntimeConfig, useScreenSize, useScreenSizeClass, useSession };
+export { AdminHeader, AdminShell, AdminSidebarMenu, FeatureGate, LoginPage, RegisterPage, SessionProvider, StaticSessionProvider, ToastHost, createNubitApp, filterMenuByRoles, hasAnyRole, useAppRuntime, useFeature, useFeatureConfig, useRuntimeConfig, useScreenSize, useScreenSizeClass, useSession };

package/package.json

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