@contember/react-client-tenant 2.2.0-alpha.3 → 2.2.0-alpha.5

package/dist/types/types/Identity.d.ts

@@ -1,20 +1,59 @@
+/**
+ * What the identity may do, as the tenant API reports it (`me { permissions }`).
+ *
+ * Advisory: it mirrors the ACL the resolvers enforce so a UI can stop offering what it cannot
+ * deliver. Never treat a `true` here as authorization — the operation is checked again when called.
+ */
+export interface IdentityGlobalPermissions {
+    readonly canCreateProject: boolean;
+    readonly canDeployEntrypoint: boolean;
+    /** Read `configuration`, which throws rather than answering an empty value. */
+    readonly canViewConfiguration: boolean;
+    readonly canListIdentityProviders: boolean;
+    readonly canListMailTemplates: boolean;
+    readonly canManageConfiguration: boolean;
+    readonly canViewAuthLog: boolean;
+    /** List every person. Without it `persons` still answers, narrowed to the projects the caller administers. */
+    readonly canListPersons: boolean;
+    readonly canListGlobalApiKeys: boolean;
+    readonly canCreateGlobalApiKey: boolean;
+}
+/** Same contract as {@link IdentityGlobalPermissions}, scoped to one project. */
+export interface ProjectPermissions {
+    readonly canViewMembers: boolean;
+    readonly canAddMember: boolean;
+    readonly canUpdateMember: boolean;
+    readonly canRemoveMember: boolean;
+    readonly canViewSecrets: boolean;
+    /** Distinct from viewing: a project admin commonly has one and not the other. */
+    readonly canSetSecret: boolean;
+    readonly canCreateApiKey: boolean;
+    readonly canUpdate: boolean;
+}
 export interface Identity {
     readonly id: string;
     readonly roles: readonly string[];
     readonly person?: Person;
     readonly projects: IdentityProject[];
-    readonly permissions: {
-        readonly canCreateProject: boolean;
-    };
+    readonly permissions: IdentityGlobalPermissions;
 }
 export interface Person {
     readonly id: string;
     readonly email?: string;
+    readonly name?: string;
     readonly otpEnabled: boolean;
+    readonly emailOtpEnabled: boolean;
+    /** The person's own opt-in; `undefined` means "follow the tenant policy". Says nothing on its own — see `passwordlessAvailable`. */
+    readonly passwordlessEnabled?: boolean;
+    /** Whether passwordless sign-in actually works right now: the tenant policy resolved against `passwordlessEnabled`, as `signIn` resolves it. */
+    readonly passwordlessAvailable: boolean;
+    /** Whether `passwordlessEnabled` is what decides `passwordlessAvailable`. False under an `always`/`never` policy, where a toggle would change nothing. */
+    readonly passwordlessSelfManaged: boolean;
 }
 export interface IdentityProject {
     readonly slug: string;
     readonly name: string;
     readonly roles: readonly string[];
+    readonly permissions: ProjectPermissions;
 }
 //# sourceMappingURL=Identity.d.ts.map

package/dist/types/types/Identity.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Identity.d.ts","sourceRoot":"","sources":["../../../src/types/Identity.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,QAAQ;IACxB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAA;IACjC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,QAAQ,EAAE,eAAe,EAAE,CAAA;IACpC,QAAQ,CAAC,WAAW,EAAE;QACrB,QAAQ,CAAC,gBAAgB,EAAE,OAAO,CAAA;KAClC,CAAA;CACD;AAED,MAAM,WAAW,MAAM;IACtB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAA;CAC5B;AAED,MAAM,WAAW,eAAe;IAC/B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAA;CACjC"}
+{"version":3,"file":"Identity.d.ts","sourceRoot":"","sources":["../../../src/types/Identity.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,WAAW,yBAAyB;IACzC,QAAQ,CAAC,gBAAgB,EAAE,OAAO,CAAA;IAClC,QAAQ,CAAC,mBAAmB,EAAE,OAAO,CAAA;IACrC,+EAA+E;IAC/E,QAAQ,CAAC,oBAAoB,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,wBAAwB,EAAE,OAAO,CAAA;IAC1C,QAAQ,CAAC,oBAAoB,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,sBAAsB,EAAE,OAAO,CAAA;IACxC,QAAQ,CAAC,cAAc,EAAE,OAAO,CAAA;IAChC,8GAA8G;IAC9G,QAAQ,CAAC,cAAc,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,oBAAoB,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,qBAAqB,EAAE,OAAO,CAAA;CACvC;AAED,iFAAiF;AACjF,MAAM,WAAW,kBAAkB;IAClC,QAAQ,CAAC,cAAc,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,eAAe,EAAE,OAAO,CAAA;IACjC,QAAQ,CAAC,eAAe,EAAE,OAAO,CAAA;IACjC,QAAQ,CAAC,cAAc,EAAE,OAAO,CAAA;IAChC,iFAAiF;IACjF,QAAQ,CAAC,YAAY,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,eAAe,EAAE,OAAO,CAAA;IACjC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAA;CAC3B;AAED,MAAM,WAAW,QAAQ;IACxB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAA;IACjC,QAAQ,CAAC,MAAM,CAAC,EAAE,MAAM,CAAA;IACxB,QAAQ,CAAC,QAAQ,EAAE,eAAe,EAAE,CAAA;IACpC,QAAQ,CAAC,WAAW,EAAE,yBAAyB,CAAA;CAC/C;AAED,MAAM,WAAW,MAAM;IACtB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAA;IACnB,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,UAAU,EAAE,OAAO,CAAA;IAC5B,QAAQ,CAAC,eAAe,EAAE,OAAO,CAAA;IACjC,oIAAoI;IACpI,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,gJAAgJ;IAChJ,QAAQ,CAAC,qBAAqB,EAAE,OAAO,CAAA;IACvC,0JAA0J;IAC1J,QAAQ,CAAC,uBAAuB,EAAE,OAAO,CAAA;CACzC;AAED,MAAM,WAAW,eAAe;IAC/B,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,KAAK,EAAE,SAAS,MAAM,EAAE,CAAA;IACjC,QAAQ,CAAC,WAAW,EAAE,kBAAkB,CAAA;CACxC"}

package/dist/types/types/forbidden.d.ts

@@ -0,0 +1,21 @@
+import { FormErrorCode } from './forms.js';
+/**
+ * Tells a permission rejection apart from a genuine failure.
+ *
+ * The listing queries return an empty result when the caller may not see
+ * anything, but the configuration queries (`configuration`, `authPolicies`,
+ * `identityProviders`, `mailTemplates`) throw instead. Their resolvers call
+ * `requireAccess`, which raises a `ForbiddenError` carrying
+ * `extensions.code = 'ForbiddenError'` — that is what this matches.
+ *
+ * A view can then say "you do not have access to this" instead of showing a
+ * failure the user cannot act on.
+ */
+export declare const isForbiddenError: (error: unknown) => boolean;
+/**
+ * Classifies an error thrown by a mutation. Unlike the queries above, a denied mutation always
+ * throws — it never answers `ok: false` — so without this split every denial would reach the user
+ * as "something went wrong, please try again later", which is advice they cannot act on.
+ */
+export declare const toFormErrorCode: (error: unknown) => FormErrorCode;
+//# sourceMappingURL=forbidden.d.ts.map

package/dist/types/types/forbidden.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"forbidden.d.ts","sourceRoot":"","sources":["../../../src/types/forbidden.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAE1C;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,gBAAgB,UAAW,OAAO,KAAG,OAQjD,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,UAAW,OAAO,KAAG,aAAwE,CAAA"}

package/dist/types/types/forms.d.ts

@@ -1,7 +1,12 @@
 import { SetStateAction } from 'react';
 export type FormState = 'loading' | 'initial' | 'submitting' | 'error' | 'success';
 type FormValueType = Record<string, unknown>;
-export type FormErrorCode = 'UNKNOWN_ERROR';
+/**
+ * Codes any form can raise, whatever it submits. `FORBIDDEN` is separate from `UNKNOWN_ERROR`
+ * because a permission rejection is an answer, not a failure — the user cannot retry their way out
+ * of it, so telling them to try again later is wrong.
+ */
+export type FormErrorCode = 'UNKNOWN_ERROR' | 'FORBIDDEN';
 export type FormError<V extends FormValueType, E extends string> = {
     field?: keyof V;
     code: FormErrorCode | E;

package/dist/types/types/forms.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"forms.d.ts","sourceRoot":"","sources":["../../../src/types/forms.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,SAAS,GAClB,SAAS,GACT,SAAS,GACT,YAAY,GACZ,OAAO,GACP,SAAS,CAAA;AAEZ,KAAK,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AAE5C,MAAM,MAAM,aAAa,GAAG,eAAe,CAAA;AAE3C,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,aAAa,EAAE,CAAC,SAAS,MAAM,IAAI;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC,CAAA;IACf,IAAI,EAAE,aAAa,GAAG,CAAC,CAAA;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,aAAa,EAAE,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,GAAG,KAAK;IACpG,MAAM,EAAE,CAAC,CAAA;IACT,KAAK,EAAE,SAAS,GAAG,CAAC,CAAA;IACpB,SAAS,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,IAAI,CAAA;IAC9C,QAAQ,EAAE,CAAC,CAAC,SAAS,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAA;IAC5D,MAAM,EAAE,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAA;CACzB"}
+{"version":3,"file":"forms.d.ts","sourceRoot":"","sources":["../../../src/types/forms.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,SAAS,GAClB,SAAS,GACT,SAAS,GACT,YAAY,GACZ,OAAO,GACP,SAAS,CAAA;AAEZ,KAAK,aAAa,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AAE5C;;;;GAIG;AACH,MAAM,MAAM,aAAa,GAAG,eAAe,GAAG,WAAW,CAAA;AAEzD,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,aAAa,EAAE,CAAC,SAAS,MAAM,IAAI;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC,CAAA;IACf,IAAI,EAAE,aAAa,GAAG,CAAC,CAAA;IACvB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,MAAM,WAAW,gBAAgB,CAAC,CAAC,SAAS,aAAa,EAAE,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,MAAM,GAAG,KAAK;IACpG,MAAM,EAAE,CAAC,CAAA;IACT,KAAK,EAAE,SAAS,GAAG,CAAC,CAAA;IACpB,SAAS,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,IAAI,CAAA;IAC9C,QAAQ,EAAE,CAAC,CAAC,SAAS,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAA;IAC5D,MAAM,EAAE,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAA;CACzB"}

package/dist/types/types/index.d.ts

@@ -1,3 +1,4 @@
+export * from './forbidden.js';
 export * from './forms.js';
 export * from './IdentityMethods.js';
 export * from './IdentityStateValue.js';

package/dist/types/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAA;AAC1B,cAAc,sBAAsB,CAAA;AACpC,cAAc,yBAAyB,CAAA;AACvC,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,YAAY,CAAA;AAC1B,cAAc,sBAAsB,CAAA;AACpC,cAAc,yBAAyB,CAAA;AACvC,cAAc,eAAe,CAAA;AAC7B,cAAc,UAAU,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@contember/react-client-tenant",
   "license": "Apache-2.0",
-  "version": "2.2.0-alpha.3",
+  "version": "2.2.0-alpha.5",
   "type": "module",
   "sideEffects": false,
   "main": "./dist/production/index.js",
@@ -34,9 +34,10 @@
     "directory": "packages/react-client-tenant"
   },
   "dependencies": {
-    "@contember/graphql-client-tenant": "2.2.0-alpha.3",
-    "@contember/react-client": "2.2.0-alpha.3",
-    "@contember/react-utils": "2.2.0-alpha.3",
+    "@contember/graphql-client": "2.2.0-alpha.5",
+    "@contember/graphql-client-tenant": "2.2.0-alpha.5",
+    "@contember/react-client": "2.2.0-alpha.5",
+    "@contember/react-utils": "2.2.0-alpha.5",
     "@radix-ui/primitive": "^1.1.3",
     "@radix-ui/react-slot": "^1.2.4",
     "graphql-ts-client-api": "^3.1.17"

package/src/components/forms/AddProjectMemberForm.tsx

@@ -0,0 +1,74 @@
+import { ReactElement } from 'react'
+import { TenantForm } from './TenantForm.js'
+import { FormContextValue, FormError, FormState } from '../../types/index.js'
+import { useForm } from '../../contexts.js'
+import { AddProjectMemberErrorCode, MembershipInput } from '@contember/graphql-client-tenant'
+import { useAddProjectMemberMutation } from '../../hooks/index.js'
+
+export type AddProjectMemberFormValues = {
+	identityId: string
+	memberships: readonly MembershipInput[]
+}
+
+export type AddProjectMemberFormErrorCode =
+	| AddProjectMemberErrorCode
+	| 'UNKNOWN_ERROR'
+	| 'FIELD_REQUIRED'
+
+export type AddProjectMemberFormState = FormState
+
+export type AddProjectMemberFormError = FormError<AddProjectMemberFormValues, AddProjectMemberFormErrorCode>
+
+export type AddProjectMemberFormContextValue = FormContextValue<AddProjectMemberFormValues, AddProjectMemberFormErrorCode>
+
+export interface AddProjectMemberFormProps {
+	children: ReactElement
+	projectSlug: string
+	initialMemberships?: readonly MembershipInput[]
+	onSuccess?: (args: {}) => void
+}
+
+export const useAddProjectMemberForm = useForm as () => AddProjectMemberFormContextValue
+
+export const AddProjectMemberForm = ({ children, onSuccess, projectSlug, initialMemberships }: AddProjectMemberFormProps) => {
+	const addProjectMember = useAddProjectMemberMutation()
+	return (
+		<TenantForm<AddProjectMemberFormContextValue>
+			onSuccess={onSuccess}
+			initialValues={{
+				identityId: '',
+				memberships: initialMemberships || [],
+			}}
+			validate={({ values }) => {
+				const errors: AddProjectMemberFormError[] = []
+				if (!values.identityId) {
+					errors.push({ code: 'FIELD_REQUIRED', field: 'identityId' })
+				}
+				if (values.memberships.length === 0) {
+					errors.push({ code: 'FIELD_REQUIRED', field: 'memberships' })
+				}
+				return errors
+			}}
+			execute={async ({ values }) => {
+				return await addProjectMember({
+					projectSlug,
+					identityId: values.identityId,
+					memberships: values.memberships,
+				})
+			}}
+			errorMapping={errorToField}
+		>
+			{children}
+		</TenantForm>
+	)
+}
+
+const errorToField: Record<AddProjectMemberErrorCode, keyof AddProjectMemberFormValues | undefined> = {
+	ALREADY_MEMBER: 'identityId',
+	IDENTITY_NOT_FOUND: 'identityId',
+	INVALID_MEMBERSHIP: 'memberships',
+	PROJECT_NOT_FOUND: undefined,
+	ROLE_NOT_FOUND: 'memberships',
+	VARIABLE_EMPTY: 'memberships',
+	VARIABLE_NOT_FOUND: 'memberships',
+}

package/src/components/forms/ChangeMyProfileForm.tsx

@@ -0,0 +1,73 @@
+import { ReactElement, useMemo } from 'react'
+import { ChangeMyProfileErrorCode } from '@contember/graphql-client-tenant'
+import { TenantForm } from './TenantForm.js'
+import { FormContextValue, FormError, FormState } from '../../types/index.js'
+import { useForm, useIdentityMethods } from '../../contexts.js'
+import { useChangeMyProfileMutation } from '../../hooks/index.js'
+
+export type ChangeMyProfileFormValues = {
+	email: string
+	name: string
+}
+
+export type ChangeMyProfileFormErrorCode =
+	| ChangeMyProfileErrorCode
+	| 'FIELD_REQUIRED'
+	| 'INVALID_VALUE'
+	| 'UNKNOWN_ERROR'
+
+export type ChangeMyProfileFormState = FormState
+
+export type ChangeMyProfileFormError = FormError<ChangeMyProfileFormValues, ChangeMyProfileFormErrorCode>
+
+export type ChangeMyProfileFormContextValue = FormContextValue<ChangeMyProfileFormValues, ChangeMyProfileFormErrorCode>
+
+export interface ChangeMyProfileFormProps {
+	children: ReactElement
+	/** Prefill the fields, typically from `useIdentity()`. */
+	initialValues?: Partial<ChangeMyProfileFormValues>
+	onSuccess?: () => void
+}
+
+export const useChangeMyProfileForm = useForm as () => ChangeMyProfileFormContextValue
+
+export const ChangeMyProfileForm = ({ children, onSuccess, initialValues }: ChangeMyProfileFormProps) => {
+	const changeMyProfile = useChangeMyProfileMutation()
+	const { refreshIdentity } = useIdentityMethods()
+	return (
+		<TenantForm<ChangeMyProfileFormContextValue>
+			onSuccess={async () => {
+				await refreshIdentity()
+				onSuccess?.()
+			}}
+			errorMapping={errorToField}
+			initialValues={useMemo(() => ({
+				email: initialValues?.email ?? '',
+				name: initialValues?.name ?? '',
+			}), [initialValues?.email, initialValues?.name])}
+			validate={({ values }) => {
+				const errors: ChangeMyProfileFormError[] = []
+				if (values.email && !values.email.match(/^.+@.+$/)) {
+					errors.push({ code: 'INVALID_VALUE', field: 'email' })
+				}
+				return errors
+			}}
+			execute={async ({ values }) => {
+				return await changeMyProfile({
+					// An empty e-mail means "leave unchanged"; an empty name clears it (the API maps '' to null).
+					email: values.email || undefined,
+					name: values.name,
+				})
+			}}
+		>
+			{children}
+		</TenantForm>
+	)
+}
+
+const errorToField: Record<ChangeMyProfileErrorCode, keyof ChangeMyProfileFormValues | undefined> = {
+	INVALID_EMAIL_FORMAT: 'email',
+	EMAIL_ALREADY_EXISTS: 'email',
+	NOT_A_PERSON: undefined,
+	RATE_LIMIT_EXCEEDED: undefined,
+}

package/src/components/forms/ChangePasswordForm.tsx

@@ -0,0 +1,73 @@
+import { ReactElement } from 'react'
+import { ChangePasswordErrorCode } from '@contember/graphql-client-tenant'
+import { TenantForm } from './TenantForm.js'
+import { FormContextValue, FormError, FormState } from '../../types/index.js'
+import { useForm } from '../../contexts.js'
+import { useChangePasswordMutation } from '../../hooks/index.js'
+
+export type ChangePasswordFormValues = {
+	password: string
+	passwordConfirmation: string
+}
+
+export type ChangePasswordFormErrorCode =
+	| ChangePasswordErrorCode
+	| 'FIELD_REQUIRED'
+	| 'INVALID_VALUE'
+	| 'PASSWORD_MISMATCH'
+	| 'UNKNOWN_ERROR'
+
+export type ChangePasswordFormState = FormState
+
+export type ChangePasswordFormError = FormError<ChangePasswordFormValues, ChangePasswordFormErrorCode>
+
+export type ChangePasswordFormContextValue = FormContextValue<ChangePasswordFormValues, ChangePasswordFormErrorCode>
+
+export interface ChangePasswordFormProps {
+	children: ReactElement
+	personId: string
+	onSuccess?: () => void
+}
+
+export const useChangePasswordForm = useForm as () => ChangePasswordFormContextValue
+
+export const ChangePasswordForm = ({ children, onSuccess, personId }: ChangePasswordFormProps) => {
+	const changePassword = useChangePasswordMutation()
+	return (
+		<TenantForm<ChangePasswordFormContextValue>
+			onSuccess={onSuccess}
+			errorMapping={errorToField}
+			initialValues={{
+				password: '',
+				passwordConfirmation: '',
+			}}
+			validate={({ values }) => {
+				const errors: ChangePasswordFormError[] = []
+				if (!values.password) {
+					errors.push({ code: 'FIELD_REQUIRED', field: 'password' })
+				} else if (values.password.length < 6) {
+					errors.push({ code: 'INVALID_VALUE', field: 'password' })
+				} else if (!values.passwordConfirmation) {
+					errors.push({ code: 'FIELD_REQUIRED', field: 'passwordConfirmation' })
+				} else if (values.password !== values.passwordConfirmation) {
+					errors.push({ code: 'PASSWORD_MISMATCH', field: 'passwordConfirmation' })
+				}
+				return errors
+			}}
+			execute={async ({ values }) => {
+				return await changePassword({
+					personId,
+					password: values.password,
+				})
+			}}
+		>
+			{children}
+		</TenantForm>
+	)
+}
+
+const errorToField: Partial<Record<ChangePasswordFormErrorCode, keyof ChangePasswordFormValues | undefined>> = {
+	PASSWORD_MISMATCH: 'passwordConfirmation',
+	TOO_WEAK: 'password',
+	PERSON_NOT_FOUND: undefined,
+}

package/src/components/forms/ChangeProfileForm.tsx

@@ -0,0 +1,70 @@
+import { ReactElement, useMemo } from 'react'
+import { ChangeProfileErrorCode } from '@contember/graphql-client-tenant'
+import { TenantForm } from './TenantForm.js'
+import { FormContextValue, FormError, FormState } from '../../types/index.js'
+import { useForm } from '../../contexts.js'
+import { useChangeProfileMutation } from '../../hooks/index.js'
+
+export type ChangeProfileFormValues = {
+	email: string
+	name: string
+}
+
+export type ChangeProfileFormErrorCode =
+	| ChangeProfileErrorCode
+	| 'FIELD_REQUIRED'
+	| 'INVALID_VALUE'
+	| 'UNKNOWN_ERROR'
+
+export type ChangeProfileFormState = FormState
+
+export type ChangeProfileFormError = FormError<ChangeProfileFormValues, ChangeProfileFormErrorCode>
+
+export type ChangeProfileFormContextValue = FormContextValue<ChangeProfileFormValues, ChangeProfileFormErrorCode>
+
+export interface ChangeProfileFormProps {
+	children: ReactElement
+	personId: string
+	/** Prefill the fields, typically from `usePersonQuery()`. */
+	initialValues?: Partial<ChangeProfileFormValues>
+	onSuccess?: () => void
+}
+
+export const useChangeProfileForm = useForm as () => ChangeProfileFormContextValue
+
+export const ChangeProfileForm = ({ children, onSuccess, personId, initialValues }: ChangeProfileFormProps) => {
+	const changeProfile = useChangeProfileMutation()
+	return (
+		<TenantForm<ChangeProfileFormContextValue>
+			onSuccess={onSuccess}
+			errorMapping={errorToField}
+			initialValues={useMemo(() => ({
+				email: initialValues?.email ?? '',
+				name: initialValues?.name ?? '',
+			}), [initialValues?.email, initialValues?.name])}
+			validate={({ values }) => {
+				const errors: ChangeProfileFormError[] = []
+				if (values.email && !values.email.match(/^.+@.+$/)) {
+					errors.push({ code: 'INVALID_VALUE', field: 'email' })
+				}
+				return errors
+			}}
+			execute={async ({ values }) => {
+				return await changeProfile({
+					personId,
+					// An empty e-mail means "leave unchanged"; an empty name clears it (the API maps '' to null).
+					email: values.email || undefined,
+					name: values.name,
+				})
+			}}
+		>
+			{children}
+		</TenantForm>
+	)
+}
+
+const errorToField: Record<ChangeProfileErrorCode, keyof ChangeProfileFormValues | undefined> = {
+	INVALID_EMAIL_FORMAT: 'email',
+	EMAIL_ALREADY_EXISTS: 'email',
+	PERSON_NOT_FOUND: undefined,
+}

package/src/components/forms/CreateGlobalApiKeyForm.tsx

@@ -0,0 +1,67 @@
+import { ReactElement } from 'react'
+import { TenantForm } from './TenantForm.js'
+import { FormContextValue, FormError, FormState } from '../../types/index.js'
+import { useForm } from '../../contexts.js'
+import { CreateApiKeyErrorCode } from '@contember/graphql-client-tenant'
+import { CreateGlobalApiKeyMutationResult, useCreateGlobalApiKeyMutation } from '../../hooks/index.js'
+
+export type CreateGlobalApiKeyFormValues = {
+	description: string
+	roles: readonly string[]
+}
+
+export type CreateGlobalApiKeyFormErrorCode =
+	| CreateApiKeyErrorCode
+	| 'UNKNOWN_ERROR'
+	| 'FIELD_REQUIRED'
+
+export type CreateGlobalApiKeyFormState = FormState
+
+export type CreateGlobalApiKeyFormError = FormError<CreateGlobalApiKeyFormValues, CreateGlobalApiKeyFormErrorCode>
+
+export type CreateGlobalApiKeyFormContextValue = FormContextValue<CreateGlobalApiKeyFormValues, CreateGlobalApiKeyFormErrorCode>
+
+export interface CreateGlobalApiKeyFormProps {
+	children: ReactElement
+	initialRoles?: readonly string[]
+	onSuccess?: (args: { result: CreateGlobalApiKeyMutationResult }) => void
+}
+
+export const useCreateGlobalApiKeyForm = useForm as () => CreateGlobalApiKeyFormContextValue
+
+export const CreateGlobalApiKeyForm = ({ children, onSuccess, initialRoles }: CreateGlobalApiKeyFormProps) => {
+	const createGlobalApiKey = useCreateGlobalApiKeyMutation()
+	return (
+		<TenantForm<CreateGlobalApiKeyFormContextValue, CreateGlobalApiKeyMutationResult>
+			onSuccess={onSuccess}
+			initialValues={{
+				description: '',
+				roles: initialRoles || [],
+			}}
+			validate={({ values }) => {
+				const errors: CreateGlobalApiKeyFormError[] = []
+				if (!values.description) {
+					errors.push({ code: 'FIELD_REQUIRED', field: 'description' })
+				}
+				return errors
+			}}
+			execute={async ({ values }) => {
+				return await createGlobalApiKey({
+					description: values.description,
+					roles: values.roles,
+				})
+			}}
+			errorMapping={errorToField}
+		>
+			{children}
+		</TenantForm>
+	)
+}
+
+const errorToField: Record<CreateApiKeyErrorCode, keyof CreateGlobalApiKeyFormValues | undefined> = {
+	INVALID_MEMBERSHIP: undefined,
+	PROJECT_NOT_FOUND: undefined,
+	ROLE_NOT_FOUND: 'roles',
+	VARIABLE_EMPTY: undefined,
+	VARIABLE_NOT_FOUND: undefined,
+}

package/src/components/forms/EmailOtpConfirmForm.tsx

@@ -0,0 +1,64 @@
+import { ReactElement } from 'react'
+import { ConfirmEmailOtpErrorCode } from '@contember/graphql-client-tenant'
+import { TenantForm } from './TenantForm.js'
+import { FormContextValue, FormError, FormState } from '../../types/index.js'
+import { useForm, useIdentityMethods } from '../../contexts.js'
+import { ConfirmEmailOtpMutationResult, useConfirmEmailOtpMutation } from '../../hooks/index.js'
+
+export type EmailOtpConfirmFormValues = {
+	otpToken: string
+}
+
+export type EmailOtpConfirmFormErrorCode =
+	| ConfirmEmailOtpErrorCode
+	| 'FIELD_REQUIRED'
+	| 'INVALID_VALUE'
+	| 'UNKNOWN_ERROR'
+
+export type EmailOtpConfirmFormState = FormState
+
+export type EmailOtpConfirmFormError = FormError<EmailOtpConfirmFormValues, EmailOtpConfirmFormErrorCode>
+
+export type EmailOtpConfirmFormContextValue = FormContextValue<EmailOtpConfirmFormValues, EmailOtpConfirmFormErrorCode>
+
+export interface EmailOtpConfirmFormProps {
+	children: ReactElement
+	/** The result carries freshly issued backup codes — show them once, they are not retrievable later. */
+	onSuccess?: (args: { result: ConfirmEmailOtpMutationResult }) => void
+}
+
+export const useEmailOtpConfirmForm = useForm as () => EmailOtpConfirmFormContextValue
+
+export const EmailOtpConfirmForm = ({ children, onSuccess }: EmailOtpConfirmFormProps) => {
+	const confirmEmailOtp = useConfirmEmailOtpMutation()
+	const { refreshIdentity } = useIdentityMethods()
+	return (
+		<TenantForm<EmailOtpConfirmFormContextValue, ConfirmEmailOtpMutationResult>
+			onSuccess={async args => {
+				await refreshIdentity()
+				onSuccess?.(args)
+			}}
+			initialValues={{
+				otpToken: '',
+			}}
+			validate={({ values }) => {
+				if (!values.otpToken) {
+					return [{ code: 'FIELD_REQUIRED', field: 'otpToken' }]
+				}
+				if (!values.otpToken.match(/^\d{6}$/)) {
+					return [{ code: 'INVALID_VALUE', field: 'otpToken' }]
+				}
+			}}
+			execute={async ({ values }) => {
+				return await confirmEmailOtp({
+					otpToken: values.otpToken,
+				})
+			}}
+			errorMapping={{
+				INVALID_OTP_TOKEN: 'otpToken',
+			}}
+		>
+			{children}
+		</TenantForm>
+	)
+}

package/src/components/forms/InviteForm.tsx

@@ -3,12 +3,16 @@ import { TenantForm } from './TenantForm.js'
 import { FormContextValue, FormError, FormState } from '../../types/index.js'
 import { useForm } from '../../contexts.js'
 import { InviteErrorCode, InviteOptions, MembershipInput } from '@contember/graphql-client-tenant'
-import { InviteMutationResult, useInviteMutation } from '../../hooks/index.js'
+import { InviteMutationResult, useInviteMutation, useUnmanagedInviteMutation } from '../../hooks/index.js'
 
 export type InviteFormValues = {
 	email: string
 	name: string
 	memberships: readonly MembershipInput[]
+	/** Switches to `unmanagedInvite`: create the member without sending mail. Requires `allowUnmanaged` on the form. */
+	unmanaged: boolean
+	/** Only read when `unmanaged` is set; empty means the account is created without a password. */
+	password: string
 }
 
 export type InviteFormErrorCode =
@@ -27,13 +31,23 @@ export interface InviteFormProps {
 	projectSlug: string
 	inviteOptions?: InviteOptions
 	initialMemberships?: readonly MembershipInput[]
+	/**
+	 * Lets the form submit through `unmanagedInvite` when `values.unmanaged` is
+	 * set — no invitation e-mail, optionally with a password. Off by default, so
+	 * a host app has to opt into offering it. Submitting with `values.unmanaged`
+	 * set but this off throws rather than falling back to a mailed invitation.
+	 */
+	allowUnmanaged?: boolean
 	onSuccess?: (args: { result: InviteMutationResult }) => void
 }
 
 export const useInviteForm = useForm as () => InviteFormContextValue
 
-export const InviteForm = ({ children, onSuccess, projectSlug, initialMemberships, inviteOptions }: InviteFormProps) => {
+export const InviteForm = (
+	{ children, onSuccess, projectSlug, initialMemberships, inviteOptions, allowUnmanaged }: InviteFormProps,
+) => {
 	const invite = useInviteMutation()
+	const unmanagedInvite = useUnmanagedInviteMutation()
 	return (
 		<TenantForm<InviteFormContextValue, InviteMutationResult>
 			onSuccess={onSuccess}
@@ -41,6 +55,8 @@ export const InviteForm = ({ children, onSuccess, projectSlug, initialMembership
 				email: '',
 				name: '',
 				memberships: initialMemberships || [],
+				unmanaged: false,
+				password: '',
 			}}
 			validate={({ values }) => {
 				const errors: InviteFormError[] = []
@@ -53,6 +69,24 @@ export const InviteForm = ({ children, onSuccess, projectSlug, initialMembership
 				return errors
 			}}
 			execute={async ({ values }) => {
+				if (values.unmanaged && !allowUnmanaged) {
+					// `InviteFormFields` takes its own `allowUnmanaged`, so the two can drift.
+					// Failing beats quietly mailing someone who asked for no mail.
+					throw new Error(
+						'InviteForm: values.unmanaged is set but the form was not given allowUnmanaged. Pass it to both InviteForm and InviteFormFields.',
+					)
+				}
+				if (values.unmanaged) {
+					return await unmanagedInvite({
+						email: values.email,
+						name: values.name,
+						projectSlug,
+						memberships: values.memberships,
+						// An empty password creates the account without one — the person then
+						// has to go through a password reset, which is a legitimate setup.
+						options: values.password ? { password: values.password } : undefined,
+					})
+				}
 				return await invite({
 					email: values.email,
 					name: values.name,