@thunderid/react 1.4.1 → 1.6.0

package/dist/components/admin/UserCreate/BaseUserCreate.d.ts

@@ -0,0 +1,78 @@
+import { Preferences, SelectOption } from '@thunderid/browser';
+import { FC, ReactNode } from 'react';
+import { UserCreateField } from './userCreateFields';
+/**
+ * The user {@link BaseUserCreate} submits. The organization unit is added by the caller.
+ */
+export interface UserCreateSubmission {
+    attributes: Record<string, string>;
+    type: string;
+}
+/**
+ * What {@link BaseUserCreate} hands its `children` render function, so the form can be built with any UI.
+ */
+export interface BaseUserCreateRenderProps {
+    error: string | null;
+    /**
+     * The attributes to collect.
+     */
+    fields: UserCreateField[];
+    /**
+     * Sets one attribute.
+     */
+    handleInputChange: (name: string, value: string) => void;
+    /**
+     * Submits the chosen type and the non-empty attributes. Does nothing while they are not valid.
+     */
+    handleSubmit: () => void;
+    /**
+     * Chooses the user type.
+     */
+    handleTypeChange: (type: string) => void;
+    isSubmitting: boolean;
+    /**
+     * Whether a type is chosen and every required attribute has a value.
+     */
+    isValid: boolean;
+    onCancel?: () => void;
+    /**
+     * The chosen user type.
+     */
+    type: string;
+    userTypes: SelectOption[];
+    /**
+     * The attribute values, keyed by attribute name.
+     */
+    values: Record<string, string>;
+}
+export interface BaseUserCreateProps {
+    /**
+     * Renders custom UI in place of the default form. Receives the fields, the values and their
+     * setters, the user types, the submit handler and the submission state.
+     */
+    children?: (props: BaseUserCreateRenderProps) => ReactNode;
+    className?: string;
+    description?: string;
+    error?: string | null;
+    /**
+     * Attributes to collect.
+     * @default username, email, given_name, family_name and password
+     */
+    fields?: UserCreateField[];
+    isSubmitting?: boolean;
+    onCancel?: () => void;
+    onSubmit: (user: UserCreateSubmission) => void;
+    preferences?: Preferences;
+    title?: string;
+    /**
+     * The user types to choose from. The first one is selected by default.
+     */
+    userTypes: SelectOption[];
+}
+/**
+ * A form that collects a new user's type and attributes. Holds no data of its own: pass the user
+ * types and handle the submission.
+ */
+declare const BaseUserCreate: FC<BaseUserCreateProps>;
+export default BaseUserCreate;
+//# sourceMappingURL=BaseUserCreate.d.ts.map

package/dist/components/admin/UserCreate/BaseUserCreate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseUserCreate.d.ts","sourceRoot":"","sources":["../../../../src/components/admin/UserCreate/BaseUserCreate.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAC,WAAW,EAAE,YAAY,EAAC,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAc,EAAE,EAA2B,SAAS,EAAW,MAAM,OAAO,CAAC;AACpF,OAAO,EAA6B,eAAe,EAAC,MAAM,oBAAoB,CAAC;AAU/E;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,IAAI,EAAE,MAAM,CAAC;CACd;AAED;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;OAEG;IACH,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B;;OAEG;IACH,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD;;OAEG;IACH,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB;;OAEG;IACH,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,YAAY,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,YAAY,EAAE,CAAC;IAC1B;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChC;AAED,MAAM,WAAW,mBAAmB;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,yBAAyB,KAAK,SAAS,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB;;;OAGG;IACH,MAAM,CAAC,EAAE,eAAe,EAAE,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC/C,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,SAAS,EAAE,YAAY,EAAE,CAAC;CAC3B;AAED;;;GAGG;AACH,QAAA,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA8G3C,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/admin/UserCreate/BaseUserCreate.js

@@ -0,0 +1,113 @@
+import useTheme_default from "../../../contexts/Theme/useTheme.js";
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import Button_default from "../../primitives/Button/Button.js";
+import Alert_default from "../../primitives/Alert/Alert.js";
+import TextField_default from "../../primitives/TextField/TextField.js";
+import Select_default from "../../primitives/Select/Select.js";
+import AdminSection_styles_default from "../shared/AdminSection.styles.js";
+import AdminSection_default from "../shared/AdminSection.js";
+import { DEFAULT_USER_CREATE_FIELDS } from "./userCreateFields.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/admin/UserCreate/BaseUserCreate.tsx
+/**
+* A form that collects a new user's type and attributes. Holds no data of its own: pass the user
+* types and handle the submission.
+*/
+const BaseUserCreate = ({ children, className, description, error = null, fields = DEFAULT_USER_CREATE_FIELDS, isSubmitting = false, onCancel, onSubmit, preferences, title, userTypes }) => {
+	const { theme, colorScheme } = useTheme_default();
+	const styles = AdminSection_styles_default(theme, colorScheme);
+	const { t } = useTranslation_default(preferences?.i18n);
+	const [chosenType, setType] = useState("");
+	const type = chosenType || (userTypes[0]?.value ?? "");
+	const [values, setValues] = useState({});
+	const isComplete = Boolean(type) && fields.every((field) => !field.required || Boolean(values[field.name]?.trim()));
+	const setValue = (name, value) => setValues((previous) => ({
+		...previous,
+		[name]: value
+	}));
+	const submit = () => {
+		if (!isComplete) return;
+		onSubmit({
+			attributes: Object.fromEntries(Object.entries(values).filter(([, value]) => value.trim() !== "")),
+			type
+		});
+	};
+	const handleSubmit = (event) => {
+		event.preventDefault();
+		submit();
+	};
+	if (children) return /* @__PURE__ */ jsx("div", {
+		className,
+		children: children({
+			error,
+			fields,
+			handleInputChange: setValue,
+			handleSubmit: submit,
+			handleTypeChange: setType,
+			isSubmitting,
+			isValid: isComplete,
+			onCancel,
+			type,
+			userTypes,
+			values
+		})
+	});
+	return /* @__PURE__ */ jsx(AdminSection_default, {
+		block: "user-create",
+		className,
+		title: title ?? t("admin.users.create.title"),
+		description,
+		preferences,
+		children: /* @__PURE__ */ jsxs("form", {
+			className: styles["form"],
+			onSubmit: handleSubmit,
+			noValidate: true,
+			children: [
+				error && /* @__PURE__ */ jsx(Alert_default, {
+					variant: "error",
+					role: "alert",
+					children: error
+				}),
+				/* @__PURE__ */ jsx(Select_default, {
+					label: t("admin.users.create.fields.type"),
+					name: "type",
+					required: true,
+					value: type,
+					options: userTypes,
+					onChange: (event) => setType(event.target.value)
+				}),
+				fields.map((field) => /* @__PURE__ */ jsx(TextField_default, {
+					name: field.name,
+					type: field.type ?? "text",
+					label: field.label ?? t(`admin.users.create.fields.${field.name}`),
+					required: field.required,
+					autoComplete: field.type === "password" ? "new-password" : "off",
+					value: values[field.name] ?? "",
+					onChange: (event) => setValue(field.name, event.target.value)
+				}, field.name)),
+				/* @__PURE__ */ jsxs("div", {
+					className: styles["formActions"],
+					children: [onCancel && /* @__PURE__ */ jsx(Button_default, {
+						type: "button",
+						variant: "text",
+						onClick: onCancel,
+						disabled: isSubmitting,
+						children: t("admin.common.actions.cancel")
+					}), /* @__PURE__ */ jsx(Button_default, {
+						type: "submit",
+						loading: isSubmitting,
+						disabled: !isComplete || isSubmitting,
+						children: t("admin.users.create.submit")
+					})]
+				})
+			]
+		})
+	});
+};
+var BaseUserCreate_default = BaseUserCreate;
+
+//#endregion
+export { BaseUserCreate_default as default };
+//# sourceMappingURL=BaseUserCreate.js.map

package/dist/components/admin/UserCreate/BaseUserCreate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseUserCreate.js","names":["BaseUserCreate: FC<BaseUserCreateProps>","useTheme","styles: Record<string, string>","useStyles","useTranslation","type: string","isComplete: boolean","AdminSection","Alert","Select","TextField","Button"],"sources":["../../../../src/components/admin/UserCreate/BaseUserCreate.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {Preferences, SelectOption} from '@thunderid/browser';\nimport {ChangeEvent, FC, FormEvent, ReactElement, ReactNode, useState} from 'react';\nimport {DEFAULT_USER_CREATE_FIELDS, UserCreateField} from './userCreateFields';\nimport useTheme from '../../../contexts/Theme/useTheme';\nimport useTranslation from '../../../hooks/useTranslation';\nimport Alert from '../../primitives/Alert/Alert';\nimport Button from '../../primitives/Button/Button';\nimport Select from '../../primitives/Select/Select';\nimport TextField from '../../primitives/TextField/TextField';\nimport AdminSection from '../shared/AdminSection';\nimport useStyles from '../shared/AdminSection.styles';\n\n/**\n * The user {@link BaseUserCreate} submits. The organization unit is added by the caller.\n */\nexport interface UserCreateSubmission {\n  attributes: Record<string, string>;\n  type: string;\n}\n\n/**\n * What {@link BaseUserCreate} hands its `children` render function, so the form can be built with any UI.\n */\nexport interface BaseUserCreateRenderProps {\n  error: string | null;\n  /**\n   * The attributes to collect.\n   */\n  fields: UserCreateField[];\n  /**\n   * Sets one attribute.\n   */\n  handleInputChange: (name: string, value: string) => void;\n  /**\n   * Submits the chosen type and the non-empty attributes. Does nothing while they are not valid.\n   */\n  handleSubmit: () => void;\n  /**\n   * Chooses the user type.\n   */\n  handleTypeChange: (type: string) => void;\n  isSubmitting: boolean;\n  /**\n   * Whether a type is chosen and every required attribute has a value.\n   */\n  isValid: boolean;\n  onCancel?: () => void;\n  /**\n   * The chosen user type.\n   */\n  type: string;\n  userTypes: SelectOption[];\n  /**\n   * The attribute values, keyed by attribute name.\n   */\n  values: Record<string, string>;\n}\n\nexport interface BaseUserCreateProps {\n  /**\n   * Renders custom UI in place of the default form. Receives the fields, the values and their\n   * setters, the user types, the submit handler and the submission state.\n   */\n  children?: (props: BaseUserCreateRenderProps) => ReactNode;\n  className?: string;\n  description?: string;\n  error?: string | null;\n  /**\n   * Attributes to collect.\n   * @default username, email, given_name, family_name and password\n   */\n  fields?: UserCreateField[];\n  isSubmitting?: boolean;\n  onCancel?: () => void;\n  onSubmit: (user: UserCreateSubmission) => void;\n  preferences?: Preferences;\n  title?: string;\n  /**\n   * The user types to choose from. The first one is selected by default.\n   */\n  userTypes: SelectOption[];\n}\n\n/**\n * A form that collects a new user's type and attributes. Holds no data of its own: pass the user\n * types and handle the submission.\n */\nconst BaseUserCreate: FC<BaseUserCreateProps> = ({\n  children,\n  className,\n  description,\n  error = null,\n  fields = DEFAULT_USER_CREATE_FIELDS,\n  isSubmitting = false,\n  onCancel,\n  onSubmit,\n  preferences,\n  title,\n  userTypes,\n}: BaseUserCreateProps): ReactElement => {\n  const {theme, colorScheme} = useTheme();\n  const styles: Record<string, string> = useStyles(theme, colorScheme);\n  const {t} = useTranslation(preferences?.i18n);\n  const [chosenType, setType] = useState<string>('');\n  const type: string = chosenType || (userTypes[0]?.value ?? '');\n  const [values, setValues] = useState<Record<string, string>>({});\n\n  const isComplete: boolean =\n    Boolean(type) && fields.every((field: UserCreateField) => !field.required || Boolean(values[field.name]?.trim()));\n\n  const setValue = (name: string, value: string): void =>\n    setValues((previous: Record<string, string>) => ({...previous, [name]: value}));\n\n  const submit = (): void => {\n    if (!isComplete) {\n      return;\n    }\n\n    const attributes: Record<string, string> = Object.fromEntries(\n      Object.entries(values).filter(([, value]: [string, string]) => value.trim() !== ''),\n    );\n\n    onSubmit({attributes, type});\n  };\n\n  const handleSubmit = (event: FormEvent<HTMLFormElement>): void => {\n    event.preventDefault();\n    submit();\n  };\n\n  if (children) {\n    return (\n      <div className={className}>\n        {children({\n          error,\n          fields,\n          handleInputChange: setValue,\n          handleSubmit: submit,\n          handleTypeChange: setType,\n          isSubmitting,\n          isValid: isComplete,\n          onCancel,\n          type,\n          userTypes,\n          values,\n        })}\n      </div>\n    );\n  }\n\n  return (\n    <AdminSection\n      block=\"user-create\"\n      className={className}\n      title={title ?? t('admin.users.create.title')}\n      description={description}\n      preferences={preferences}\n    >\n      <form className={styles['form']} onSubmit={handleSubmit} noValidate>\n        {error && (\n          <Alert variant=\"error\" role=\"alert\">\n            {error}\n          </Alert>\n        )}\n        <Select\n          label={t('admin.users.create.fields.type')}\n          name=\"type\"\n          required\n          value={type}\n          options={userTypes}\n          onChange={(event: ChangeEvent<HTMLSelectElement>): void => setType(event.target.value)}\n        />\n        {fields.map((field: UserCreateField) => (\n          <TextField\n            key={field.name}\n            name={field.name}\n            type={field.type ?? 'text'}\n            label={field.label ?? t(`admin.users.create.fields.${field.name}`)}\n            required={field.required}\n            autoComplete={field.type === 'password' ? 'new-password' : 'off'}\n            value={values[field.name] ?? ''}\n            onChange={(event: ChangeEvent<HTMLInputElement>): void => setValue(field.name, event.target.value)}\n          />\n        ))}\n        <div className={styles['formActions']}>\n          {onCancel && (\n            <Button type=\"button\" variant=\"text\" onClick={onCancel} disabled={isSubmitting}>\n              {t('admin.common.actions.cancel')}\n            </Button>\n          )}\n          <Button type=\"submit\" loading={isSubmitting} disabled={!isComplete || isSubmitting}>\n            {t('admin.users.create.submit')}\n          </Button>\n        </div>\n      </form>\n    </AdminSection>\n  );\n};\n\nexport default BaseUserCreate;\n"],"mappings":";;;;;;;;;;;;;;;;;AA0FA,MAAMA,kBAA2C,EAC/C,UACA,WACA,aACA,QAAQ,MACR,SAAS,4BACT,eAAe,OACf,UACA,UACA,aACA,OACA,gBACuC;CACvC,MAAM,EAAC,OAAO,gBAAeC,kBAAU;CACvC,MAAMC,SAAiCC,4BAAU,OAAO,YAAY;CACpE,MAAM,EAAC,MAAKC,uBAAe,aAAa,KAAK;CAC7C,MAAM,CAAC,YAAY,WAAW,SAAiB,GAAG;CAClD,MAAMC,OAAe,eAAe,UAAU,IAAI,SAAS;CAC3D,MAAM,CAAC,QAAQ,aAAa,SAAiC,EAAE,CAAC;CAEhE,MAAMC,aACJ,QAAQ,KAAK,IAAI,OAAO,OAAO,UAA2B,CAAC,MAAM,YAAY,QAAQ,OAAO,MAAM,OAAO,MAAM,CAAC,CAAC;CAEnH,MAAM,YAAY,MAAc,UAC9B,WAAW,cAAsC;EAAC,GAAG;GAAW,OAAO;EAAM,EAAE;CAEjF,MAAM,eAAqB;AACzB,MAAI,CAAC,WACH;AAOF,WAAS;GAAC,YAJiC,OAAO,YAChD,OAAO,QAAQ,OAAO,CAAC,QAAQ,GAAG,WAA6B,MAAM,MAAM,KAAK,GAAG,CACpF;GAEqB;GAAK,CAAC;;CAG9B,MAAM,gBAAgB,UAA4C;AAChE,QAAM,gBAAgB;AACtB,UAAQ;;AAGV,KAAI,SACF,QACE,oBAAC;EAAe;YACb,SAAS;GACR;GACA;GACA,mBAAmB;GACnB,cAAc;GACd,kBAAkB;GAClB;GACA,SAAS;GACT;GACA;GACA;GACA;GACD,CAAC;GACE;AAIV,QACE,oBAACC;EACC,OAAM;EACK;EACX,OAAO,SAAS,EAAE,2BAA2B;EAChC;EACA;YAEb,qBAAC;GAAK,WAAW,OAAO;GAAS,UAAU;GAAc;;IACtD,SACC,oBAACC;KAAM,SAAQ;KAAQ,MAAK;eACzB;MACK;IAEV,oBAACC;KACC,OAAO,EAAE,iCAAiC;KAC1C,MAAK;KACL;KACA,OAAO;KACP,SAAS;KACT,WAAW,UAAgD,QAAQ,MAAM,OAAO,MAAM;MACtF;IACD,OAAO,KAAK,UACX,oBAACC;KAEC,MAAM,MAAM;KACZ,MAAM,MAAM,QAAQ;KACpB,OAAO,MAAM,SAAS,EAAE,6BAA6B,MAAM,OAAO;KAClE,UAAU,MAAM;KAChB,cAAc,MAAM,SAAS,aAAa,iBAAiB;KAC3D,OAAO,OAAO,MAAM,SAAS;KAC7B,WAAW,UAA+C,SAAS,MAAM,MAAM,MAAM,OAAO,MAAM;OAP7F,MAAM,KAQX,CACF;IACF,qBAAC;KAAI,WAAW,OAAO;gBACpB,YACC,oBAACC;MAAO,MAAK;MAAS,SAAQ;MAAO,SAAS;MAAU,UAAU;gBAC/D,EAAE,8BAA8B;OAC1B,EAEX,oBAACA;MAAO,MAAK;MAAS,SAAS;MAAc,UAAU,CAAC,cAAc;gBACnE,EAAE,4BAA4B;OACxB;MACL;;IACD;GACM;;AAInB,6BAAe"}

package/dist/components/admin/UserCreate/UserCreate.d.ts

@@ -0,0 +1,40 @@
+import { ManagedUser } from '@thunderid/browser';
+import { FC } from 'react';
+import { BaseUserCreateProps } from './BaseUserCreate';
+import { InviteUserProps } from '../../auth/InviteUser/InviteUser';
+export type UserCreateProps = Omit<BaseUserCreateProps, 'error' | 'isSubmitting' | 'onSubmit' | 'userTypes'> & {
+    /**
+     * Props passed to `InviteUser` when `mode` is `invite`.
+     */
+    inviteProps?: InviteUserProps;
+    /**
+     * How the user is added.
+     * - `api` creates the user directly through the management API.
+     * - `invite` runs the invite user flow, which asks the person to finish setting up their account.
+     *   Only available where flows run.
+     * @default 'api'
+     */
+    mode?: 'api' | 'invite';
+    /**
+     * Called with the created user. Not called in `invite` mode, where the flow reports progress
+     * through `inviteProps.onFlowChange`.
+     */
+    onCreated?: (user: ManagedUser) => void;
+    /**
+     * Organization unit the user is created in. Defaults to the signed-in user's organization unit.
+     */
+    ouId?: string;
+};
+/**
+ * Adds a user, either directly through the management API or by inviting them through the invite
+ * user flow.
+ *
+ * @example
+ * ```tsx
+ * <UserCreate onCreated={(user) => navigate(`/users/${user.id}`)} />
+ * <UserCreate mode="invite" />
+ * ```
+ */
+declare const UserCreate: FC<UserCreateProps>;
+export default UserCreate;
+//# sourceMappingURL=UserCreate.d.ts.map

package/dist/components/admin/UserCreate/UserCreate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserCreate.d.ts","sourceRoot":"","sources":["../../../../src/components/admin/UserCreate/UserCreate.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA2B,WAAW,EAAgC,MAAM,oBAAoB,CAAC;AACxG,OAAO,EAAC,EAAE,EAAwB,MAAM,OAAO,CAAC;AAChD,OAAuB,EAAC,mBAAmB,EAAuB,MAAM,kBAAkB,CAAC;AAI3F,OAAmB,EAAC,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAG7E,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,WAAW,CAAC,GAAG;IAC7G;;OAEG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAC;IACxB;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACxC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;;;;;;;GASG;AACH,QAAA,MAAM,UAAU,EAAE,EAAE,CAAC,eAAe,CA8CnC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/admin/UserCreate/UserCreate.js

@@ -0,0 +1,53 @@
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import useCreateUser_default from "../../../hooks/management/users/useCreateUser.js";
+import useGetUserTypes_default from "../../../hooks/management/users/useGetUserTypes.js";
+import InviteUser_default from "../../auth/InviteUser/InviteUser.js";
+import BaseUserCreate_default from "./BaseUserCreate.js";
+import useDefaultOuId_default from "../shared/useDefaultOuId.js";
+import { toManagementErrorMessage } from "@thunderid/browser";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/admin/UserCreate/UserCreate.tsx
+/**
+* Adds a user, either directly through the management API or by inviting them through the invite
+* user flow.
+*
+* @example
+* ```tsx
+* <UserCreate onCreated={(user) => navigate(`/users/${user.id}`)} />
+* <UserCreate mode="invite" />
+* ```
+*/
+const UserCreate = ({ inviteProps, mode = "api", onCreated, ouId, preferences,...rest }) => {
+	const { t } = useTranslation_default(preferences?.i18n);
+	const resolvedOuId = useDefaultOuId_default(ouId);
+	const { data: userTypes } = useGetUserTypes_default({ limit: 100 }, { enabled: mode === "api" });
+	const { error, isLoading, mutate } = useCreateUser_default({ onSuccess: onCreated });
+	const options = useMemo(() => (userTypes?.types ?? []).map((userType) => ({
+		label: userType.displayName ?? userType.handle,
+		value: userType.handle
+	})), [userTypes]);
+	if (mode === "invite") return /* @__PURE__ */ jsx(InviteUser_default, { ...inviteProps });
+	const handleSubmit = ({ attributes, type }) => {
+		if (!resolvedOuId) return;
+		mutate({
+			attributes,
+			ouId: resolvedOuId,
+			type
+		});
+	};
+	return /* @__PURE__ */ jsx(BaseUserCreate_default, {
+		userTypes: options,
+		onSubmit: handleSubmit,
+		isSubmitting: isLoading,
+		error: resolvedOuId ? toManagementErrorMessage(t, error, "admin.users.create.error") : t("admin.common.errors.no_ou"),
+		preferences,
+		...rest
+	});
+};
+var UserCreate_default = UserCreate;
+
+//#endregion
+export { UserCreate_default as default };
+//# sourceMappingURL=UserCreate.js.map

package/dist/components/admin/UserCreate/UserCreate.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserCreate.js","names":["UserCreate: FC<UserCreateProps>","useTranslation","resolvedOuId: string | undefined","useDefaultOuId","useGetUserTypes","useCreateUser","options: SelectOption[]","InviteUser","BaseUserCreate"],"sources":["../../../../src/components/admin/UserCreate/UserCreate.tsx"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\nimport {toManagementErrorMessage, ManagedUser, ManagedUserType, SelectOption} from '@thunderid/browser';\nimport {FC, ReactElement, useMemo} from 'react';\nimport BaseUserCreate, {BaseUserCreateProps, UserCreateSubmission} from './BaseUserCreate';\nimport useCreateUser from '../../../hooks/management/users/useCreateUser';\nimport useGetUserTypes from '../../../hooks/management/users/useGetUserTypes';\nimport useTranslation from '../../../hooks/useTranslation';\nimport InviteUser, {InviteUserProps} from '../../auth/InviteUser/InviteUser';\nimport useDefaultOuId from '../shared/useDefaultOuId';\n\nexport type UserCreateProps = Omit<BaseUserCreateProps, 'error' | 'isSubmitting' | 'onSubmit' | 'userTypes'> & {\n  /**\n   * Props passed to `InviteUser` when `mode` is `invite`.\n   */\n  inviteProps?: InviteUserProps;\n  /**\n   * How the user is added.\n   * - `api` creates the user directly through the management API.\n   * - `invite` runs the invite user flow, which asks the person to finish setting up their account.\n   *   Only available where flows run.\n   * @default 'api'\n   */\n  mode?: 'api' | 'invite';\n  /**\n   * Called with the created user. Not called in `invite` mode, where the flow reports progress\n   * through `inviteProps.onFlowChange`.\n   */\n  onCreated?: (user: ManagedUser) => void;\n  /**\n   * Organization unit the user is created in. Defaults to the signed-in user's organization unit.\n   */\n  ouId?: string;\n};\n\n/**\n * Adds a user, either directly through the management API or by inviting them through the invite\n * user flow.\n *\n * @example\n * ```tsx\n * <UserCreate onCreated={(user) => navigate(`/users/${user.id}`)} />\n * <UserCreate mode=\"invite\" />\n * ```\n */\nconst UserCreate: FC<UserCreateProps> = ({\n  inviteProps,\n  mode = 'api',\n  onCreated,\n  ouId,\n  preferences,\n  ...rest\n}: UserCreateProps): ReactElement => {\n  const {t} = useTranslation(preferences?.i18n);\n  const resolvedOuId: string | undefined = useDefaultOuId(ouId);\n  const {data: userTypes} = useGetUserTypes({limit: 100}, {enabled: mode === 'api'});\n  const {error, isLoading, mutate} = useCreateUser({onSuccess: onCreated});\n\n  const options: SelectOption[] = useMemo(\n    () =>\n      (userTypes?.types ?? []).map((userType: ManagedUserType) => ({\n        label: userType.displayName ?? userType.handle,\n        value: userType.handle,\n      })),\n    [userTypes],\n  );\n\n  if (mode === 'invite') {\n    return <InviteUser {...inviteProps} />;\n  }\n\n  const handleSubmit = ({attributes, type}: UserCreateSubmission): void => {\n    if (!resolvedOuId) {\n      return;\n    }\n\n    void mutate({attributes, ouId: resolvedOuId, type});\n  };\n\n  return (\n    <BaseUserCreate\n      userTypes={options}\n      onSubmit={handleSubmit}\n      isSubmitting={isLoading}\n      error={\n        resolvedOuId ? toManagementErrorMessage(t, error, 'admin.users.create.error') : t('admin.common.errors.no_ou')\n      }\n      preferences={preferences}\n      {...rest}\n    />\n  );\n};\n\nexport default UserCreate;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA8CA,MAAMA,cAAmC,EACvC,aACA,OAAO,OACP,WACA,MACA,YACA,GAAG,WACgC;CACnC,MAAM,EAAC,MAAKC,uBAAe,aAAa,KAAK;CAC7C,MAAMC,eAAmCC,uBAAe,KAAK;CAC7D,MAAM,EAAC,MAAM,cAAaC,wBAAgB,EAAC,OAAO,KAAI,EAAE,EAAC,SAAS,SAAS,OAAM,CAAC;CAClF,MAAM,EAAC,OAAO,WAAW,WAAUC,sBAAc,EAAC,WAAW,WAAU,CAAC;CAExE,MAAMC,UAA0B,eAE3B,WAAW,SAAS,EAAE,EAAE,KAAK,cAA+B;EAC3D,OAAO,SAAS,eAAe,SAAS;EACxC,OAAO,SAAS;EACjB,EAAE,EACL,CAAC,UAAU,CACZ;AAED,KAAI,SAAS,SACX,QAAO,oBAACC,sBAAW,GAAI,cAAe;CAGxC,MAAM,gBAAgB,EAAC,YAAY,WAAsC;AACvE,MAAI,CAAC,aACH;AAGF,EAAK,OAAO;GAAC;GAAY,MAAM;GAAc;GAAK,CAAC;;AAGrD,QACE,oBAACC;EACC,WAAW;EACX,UAAU;EACV,cAAc;EACd,OACE,eAAe,yBAAyB,GAAG,OAAO,2BAA2B,GAAG,EAAE,4BAA4B;EAEnG;EACb,GAAI;GACJ;;AAIN,yBAAe"}

package/dist/components/admin/UserCreate/userCreateFields.d.ts

@@ -0,0 +1,20 @@
+/**
+ * A user attribute collected by {@link BaseUserCreate}.
+ */
+export interface UserCreateField {
+    /**
+     * Label shown for the field. Defaults to the translation of `admin.users.create.fields.<name>`.
+     */
+    label?: string;
+    /**
+     * Attribute name, as defined in the user type schema.
+     */
+    name: string;
+    required?: boolean;
+    type?: 'text' | 'email' | 'password' | 'tel';
+}
+/**
+ * The attributes `UserCreate` collects when no `fields` are given.
+ */
+export declare const DEFAULT_USER_CREATE_FIELDS: UserCreateField[];
+//# sourceMappingURL=userCreateFields.d.ts.map

package/dist/components/admin/UserCreate/userCreateFields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"userCreateFields.d.ts","sourceRoot":"","sources":["../../../../src/components/admin/UserCreate/userCreateFields.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,KAAK,CAAC;CAC9C;AAED;;GAEG;AACH,eAAO,MAAM,0BAA0B,EAAE,eAAe,EAMvD,CAAC"}

package/dist/components/admin/UserCreate/userCreateFields.js

@@ -0,0 +1,25 @@
+//#region src/components/admin/UserCreate/userCreateFields.ts
+/**
+* The attributes `UserCreate` collects when no `fields` are given.
+*/
+const DEFAULT_USER_CREATE_FIELDS = [
+	{
+		name: "username",
+		required: true
+	},
+	{
+		name: "email",
+		required: true,
+		type: "email"
+	},
+	{ name: "given_name" },
+	{ name: "family_name" },
+	{
+		name: "password",
+		type: "password"
+	}
+];
+
+//#endregion
+export { DEFAULT_USER_CREATE_FIELDS };
+//# sourceMappingURL=userCreateFields.js.map

package/dist/components/admin/UserCreate/userCreateFields.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"userCreateFields.js","names":["DEFAULT_USER_CREATE_FIELDS: UserCreateField[]"],"sources":["../../../../src/components/admin/UserCreate/userCreateFields.ts"],"sourcesContent":["// Copyright 2026 The ThunderID Authors\n// SPDX-License-Identifier: Apache-2.0\n\n/**\n * A user attribute collected by {@link BaseUserCreate}.\n */\nexport interface UserCreateField {\n  /**\n   * Label shown for the field. Defaults to the translation of `admin.users.create.fields.<name>`.\n   */\n  label?: string;\n  /**\n   * Attribute name, as defined in the user type schema.\n   */\n  name: string;\n  required?: boolean;\n  type?: 'text' | 'email' | 'password' | 'tel';\n}\n\n/**\n * The attributes `UserCreate` collects when no `fields` are given.\n */\nexport const DEFAULT_USER_CREATE_FIELDS: UserCreateField[] = [\n  {name: 'username', required: true},\n  {name: 'email', required: true, type: 'email'},\n  {name: 'given_name'},\n  {name: 'family_name'},\n  {name: 'password', type: 'password'},\n];\n"],"mappings":";;;;AAsBA,MAAaA,6BAAgD;CAC3D;EAAC,MAAM;EAAY,UAAU;EAAK;CAClC;EAAC,MAAM;EAAS,UAAU;EAAM,MAAM;EAAQ;CAC9C,EAAC,MAAM,cAAa;CACpB,EAAC,MAAM,eAAc;CACrB;EAAC,MAAM;EAAY,MAAM;EAAW;CACrC"}

package/dist/components/admin/UserDetails/BaseUserDetails.d.ts

@@ -0,0 +1,72 @@
+import { ManagedUser, MembershipGroup, Preferences } from '@thunderid/browser';
+import { FC, ReactNode } from 'react';
+/**
+ * What {@link BaseUserDetails} hands its `children` render function, so the user can be shown with any UI.
+ */
+export interface BaseUserDetailsRenderProps {
+    /**
+     * The user's attributes, without the hidden ones.
+     */
+    attributes: Record<string, unknown>;
+    /**
+     * The user's display name, or an empty string while there is no user.
+     */
+    displayName: string;
+    error: string | null;
+    groups: MembershipGroup[];
+    isDeleting: boolean;
+    isLoading: boolean;
+    isUpdating: boolean;
+    /**
+     * Deletes the user. Undefined when deletion is not allowed, including for read-only users.
+     */
+    onDelete?: () => void;
+    /**
+     * Saves the given attributes. Undefined when editing is not allowed, including for read-only users.
+     */
+    onUpdate?: (attributes: Record<string, unknown>) => void;
+    user?: ManagedUser;
+}
+export interface BaseUserDetailsProps {
+    /**
+     * Controls rendered next to the user's name.
+     */
+    actions?: ReactNode;
+    /**
+     * Renders custom UI in place of the default view. Receives the user, their visible attributes and
+     * groups, the loading and error state, and the delete and update handlers.
+     */
+    children?: (props: BaseUserDetailsRenderProps) => ReactNode;
+    className?: string;
+    error?: string | null;
+    /**
+     * The groups the user belongs to.
+     */
+    groups?: MembershipGroup[];
+    /**
+     * Attribute names that are never shown, such as credentials.
+     * @default ['password']
+     */
+    hiddenAttributes?: string[];
+    isDeleting?: boolean;
+    isLoading?: boolean;
+    isUpdating?: boolean;
+    /**
+     * Deletes the user. The delete action is hidden when omitted.
+     */
+    onDelete?: () => void;
+    /**
+     * Saves edited attributes. Text attributes become editable only when set. Receives every
+     * attribute, edited or not.
+     */
+    onUpdate?: (attributes: Record<string, unknown>) => void;
+    preferences?: Preferences;
+    user?: ManagedUser;
+}
+/**
+ * Shows a user's attributes, type, organization unit and groups. Holds no data of its own: pass the
+ * user and handle deletion.
+ */
+declare const BaseUserDetails: FC<BaseUserDetailsProps>;
+export default BaseUserDetails;
+//# sourceMappingURL=BaseUserDetails.d.ts.map

package/dist/components/admin/UserDetails/BaseUserDetails.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseUserDetails.d.ts","sourceRoot":"","sources":["../../../../src/components/admin/UserDetails/BaseUserDetails.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA6B,WAAW,EAAE,eAAe,EAAE,WAAW,EAAC,MAAM,oBAAoB,CAAC;AACzG,OAAO,EAAc,EAAE,EAAgB,SAAS,EAAW,MAAM,OAAO,CAAC;AAWzE;;GAEG;AACH,MAAM,WAAW,0BAA0B;IACzC;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,eAAe,EAAE,CAAC;IAC1B,UAAU,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACzD,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,0BAA0B,KAAK,SAAS,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,eAAe,EAAE,CAAC;IAC3B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACzD,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAUD;;;GAGG;AACH,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAqK7C,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/admin/UserDetails/BaseUserDetails.js

@@ -0,0 +1,173 @@
+import useTranslation_default from "../../../hooks/useTranslation.js";
+import Spinner_default from "../../primitives/Spinner/Spinner.js";
+import Button_default from "../../primitives/Button/Button.js";
+import Alert_default from "../../primitives/Alert/Alert.js";
+import TextField_default from "../../primitives/TextField/TextField.js";
+import { Avatar } from "../../primitives/Avatar/Avatar.js";
+import useAdminPartStyles_default from "../shared/useAdminPartStyles.js";
+import AdminSection_default from "../shared/AdminSection.js";
+import { ChipList, ConfirmButton, DetailList, Panel } from "../shared/AdminParts.js";
+import { resolveManagedIdentityName } from "@thunderid/browser";
+import { useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/admin/UserDetails/BaseUserDetails.tsx
+const stringify = (value) => {
+	if (value === null || value === void 0) return "";
+	return typeof value === "object" ? JSON.stringify(value) : String(value);
+};
+/**
+* Shows a user's attributes, type, organization unit and groups. Holds no data of its own: pass the
+* user and handle deletion.
+*/
+const BaseUserDetails = ({ actions, children, className, error = null, groups = [], hiddenAttributes = ["password"], isDeleting = false, isLoading = false, isUpdating = false, onDelete, onUpdate, preferences, user }) => {
+	const { t } = useTranslation_default(preferences?.i18n);
+	const styles = useAdminPartStyles_default();
+	const [draft, setDraft] = useState(null);
+	if (children) {
+		const isWritable = Boolean(user) && !user?.isReadOnly;
+		return /* @__PURE__ */ jsx("div", {
+			className,
+			children: children({
+				attributes: Object.fromEntries(Object.entries(user?.attributes ?? {}).filter(([name]) => !hiddenAttributes.includes(name))),
+				displayName: user ? resolveManagedIdentityName(user) : "",
+				error,
+				groups,
+				isDeleting,
+				isLoading,
+				isUpdating,
+				onDelete: isWritable ? onDelete : void 0,
+				onUpdate: isWritable ? onUpdate : void 0,
+				user
+			})
+		});
+	}
+	if (isLoading && !user) return /* @__PURE__ */ jsx(AdminSection_default, {
+		block: "user-details",
+		className,
+		preferences,
+		children: /* @__PURE__ */ jsxs("span", {
+			className: styles["muted"],
+			role: "status",
+			children: [
+				/* @__PURE__ */ jsx(Spinner_default, { size: "small" }),
+				" ",
+				t("admin.common.loading")
+			]
+		})
+	});
+	if (!user) return /* @__PURE__ */ jsx(AdminSection_default, {
+		block: "user-details",
+		className,
+		preferences,
+		children: /* @__PURE__ */ jsx(Alert_default, {
+			variant: "error",
+			role: "alert",
+			children: error ?? t("admin.common.errors.not_found")
+		})
+	});
+	const displayName = resolveManagedIdentityName(user);
+	const attributes = Object.entries(user.attributes ?? {}).filter(([name]) => !hiddenAttributes.includes(name));
+	const editableAttributes = attributes.filter((entry) => typeof entry[1] === "string");
+	return /* @__PURE__ */ jsxs(AdminSection_default, {
+		block: "user-details",
+		className,
+		title: displayName,
+		description: t("admin.users.details.subtitle", { type: user.type }),
+		preferences,
+		actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [actions, onDelete && !user.isReadOnly && /* @__PURE__ */ jsx(ConfirmButton, {
+			confirmText: t("admin.users.details.delete.confirm", { name: displayName }),
+			isLoading: isDeleting,
+			onConfirm: onDelete,
+			children: t("admin.users.details.delete.action")
+		})] }),
+		children: [
+			error && /* @__PURE__ */ jsx(Alert_default, {
+				variant: "error",
+				role: "alert",
+				children: error
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: styles["row"],
+				children: [/* @__PURE__ */ jsx(Avatar, {
+					name: displayName,
+					size: 48
+				}), /* @__PURE__ */ jsx("span", {
+					className: styles["muted"],
+					children: user.ouHandle ?? user.ouId
+				})]
+			}),
+			/* @__PURE__ */ jsx(Panel, {
+				title: t("admin.users.details.attributes"),
+				actions: onUpdate && !user.isReadOnly && !draft && editableAttributes.length > 0 ? /* @__PURE__ */ jsx(Button_default, {
+					variant: "outline",
+					size: "small",
+					onClick: () => setDraft(Object.fromEntries(editableAttributes)),
+					children: t("admin.users.details.edit.action")
+				}) : void 0,
+				children: draft ? /* @__PURE__ */ jsxs("form", {
+					className: styles["row"],
+					style: {
+						alignItems: "stretch",
+						flexDirection: "column"
+					},
+					onSubmit: (event) => {
+						event.preventDefault();
+						onUpdate?.({
+							...user.attributes ?? {},
+							...draft
+						});
+						setDraft(null);
+					},
+					children: [Object.keys(draft).map((name) => /* @__PURE__ */ jsx(TextField_default, {
+						name,
+						label: name,
+						"aria-label": name,
+						value: draft[name],
+						onChange: (event) => setDraft((previous) => ({
+							...previous,
+							[name]: event.target.value
+						}))
+					}, name)), /* @__PURE__ */ jsxs("div", {
+						className: styles["row"],
+						style: { justifyContent: "flex-end" },
+						children: [/* @__PURE__ */ jsx(Button_default, {
+							type: "button",
+							variant: "text",
+							disabled: isUpdating,
+							onClick: () => setDraft(null),
+							children: t("admin.common.actions.cancel")
+						}), /* @__PURE__ */ jsx(Button_default, {
+							type: "submit",
+							loading: isUpdating,
+							disabled: isUpdating,
+							children: t("admin.users.details.edit.save")
+						})]
+					})]
+				}) : attributes.length > 0 ? /* @__PURE__ */ jsx(DetailList, { items: attributes.map(([name, value]) => ({
+					label: name,
+					value: stringify(value)
+				})) }) : /* @__PURE__ */ jsx("span", {
+					className: styles["muted"],
+					children: t("admin.users.details.no_attributes")
+				})
+			}),
+			/* @__PURE__ */ jsx(Panel, {
+				title: t("admin.users.details.groups"),
+				children: /* @__PURE__ */ jsx(ChipList, {
+					label: t("admin.users.details.groups"),
+					emptyText: t("admin.users.details.no_groups"),
+					items: groups.map((group) => ({
+						id: group.id,
+						label: group.name
+					}))
+				})
+			})
+		]
+	});
+};
+var BaseUserDetails_default = BaseUserDetails;
+
+//#endregion
+export { BaseUserDetails_default as default };
+//# sourceMappingURL=BaseUserDetails.js.map