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

package/src/components/forms/LoginForm.tsx

@@ -12,6 +12,8 @@ export type LoginFormValues = {
 	email: string
 	password: string
 	otpToken: string
+	/** Alternative to `otpToken` for a user who lost their authenticator. */
+	backupCode: string
 }
 
 export type LoginFormErrorCode =
@@ -58,6 +60,7 @@ export const LoginForm = ({ children, expiration = DEFAULT_LOGIN_EXPIRATION, onS
 				email: '',
 				password: '',
 				otpToken: '',
+				backupCode: '',
 			}}
 			validate={({ values, state }) => {
 				const errors: LoginFormError[] = []
@@ -72,7 +75,8 @@ export const LoginForm = ({ children, expiration = DEFAULT_LOGIN_EXPIRATION, onS
 				} else if (values.password.length < 6) {
 					errors.push({ code: 'INVALID_VALUE', field: 'password' })
 				}
-				if (!values.otpToken && state === 'otp-required') {
+				// In the otp-required step either an otpToken or a backup code will do.
+				if (!values.otpToken && !values.backupCode && state === 'otp-required') {
 					errors.push({ code: 'FIELD_REQUIRED', field: 'otpToken' })
 				} else if (values.otpToken && !values.otpToken.match(/^\d{6}$/)) {
 					errors.push({ code: 'INVALID_VALUE', field: 'otpToken' })
@@ -84,6 +88,7 @@ export const LoginForm = ({ children, expiration = DEFAULT_LOGIN_EXPIRATION, onS
 					email: values.email!,
 					password: values.password!,
 					otpToken: values.otpToken || undefined,
+					backupCode: values.backupCode || undefined,
 					expiration: expiration,
 				})
 

package/src/components/forms/PasswordlessSignInForm.tsx

@@ -10,6 +10,8 @@ import { TenantForm } from './TenantForm.js'
 export type PasswordlessSignInFormValues = {
 	token: string
 	otpToken: string
+	/** Alternative to `otpToken` for a user who lost their authenticator. */
+	backupCode: string
 }
 
 export type PasswordlessSignInFormErrorCode =
@@ -63,12 +65,14 @@ export const PasswordlessSignInForm = (
 			initialValues={useMemo(() => ({
 				token: token ?? '',
 				otpToken: '',
+				backupCode: '',
 			}), [token])}
 			validate={({ values, state }) => {
 				if (!values.token) {
 					return [{ code: 'FIELD_REQUIRED', field: 'token' }]
 				}
-				if (!values.otpToken && state === 'otp-required') {
+				// In the otp-required step either an otpToken or a backup code will do.
+				if (!values.otpToken && !values.backupCode && state === 'otp-required') {
 					return [{ code: 'FIELD_REQUIRED', field: 'otpToken' }]
 				} else if (values.otpToken && !values.otpToken.match(/^\d{6}$/)) {
 					return [{ code: 'INVALID_VALUE', field: 'otpToken' }]
@@ -81,6 +85,7 @@ export const PasswordlessSignInForm = (
 					expiration,
 					token: values.token,
 					mfaOtp: values.otpToken || undefined,
+					backupCode: values.backupCode || undefined,
 					validationType,
 				})
 				if (!result.ok && result.error === 'OTP_REQUIRED') {

package/src/components/forms/SetProjectSecretForm.tsx

@@ -0,0 +1,67 @@
+import { ReactElement } from 'react'
+import { SetProjectSecretErrorCode } from '@contember/graphql-client-tenant'
+import { TenantForm } from './TenantForm.js'
+import { FormContextValue, FormError, FormState } from '../../types/index.js'
+import { useForm } from '../../contexts.js'
+import { useSetProjectSecretMutation } from '../../hooks/index.js'
+
+export type SetProjectSecretFormValues = {
+	key: string
+	value: string
+}
+
+export type SetProjectSecretFormErrorCode =
+	| SetProjectSecretErrorCode
+	| 'FIELD_REQUIRED'
+	| 'UNKNOWN_ERROR'
+
+export type SetProjectSecretFormState = FormState
+
+export type SetProjectSecretFormError = FormError<SetProjectSecretFormValues, SetProjectSecretFormErrorCode>
+
+export type SetProjectSecretFormContextValue = FormContextValue<SetProjectSecretFormValues, SetProjectSecretFormErrorCode>
+
+export interface SetProjectSecretFormProps {
+	children: ReactElement
+	projectSlug: string
+	onSuccess?: () => void
+}
+
+export const useSetProjectSecretForm = useForm as () => SetProjectSecretFormContextValue
+
+export const SetProjectSecretForm = ({ children, onSuccess, projectSlug }: SetProjectSecretFormProps) => {
+	const setProjectSecret = useSetProjectSecretMutation()
+	return (
+		<TenantForm<SetProjectSecretFormContextValue>
+			onSuccess={onSuccess}
+			errorMapping={errorToField}
+			initialValues={{
+				key: '',
+				value: '',
+			}}
+			validate={({ values }) => {
+				const errors: SetProjectSecretFormError[] = []
+				if (!values.key) {
+					errors.push({ code: 'FIELD_REQUIRED', field: 'key' })
+				}
+				if (!values.value) {
+					errors.push({ code: 'FIELD_REQUIRED', field: 'value' })
+				}
+				return errors
+			}}
+			execute={async ({ values }) => {
+				return await setProjectSecret({
+					projectSlug,
+					key: values.key,
+					value: values.value,
+				})
+			}}
+		>
+			{children}
+		</TenantForm>
+	)
+}
+
+const errorToField: Record<SetProjectSecretErrorCode, keyof SetProjectSecretFormValues | undefined> = {
+	PROJECT_NOT_FOUND: undefined,
+}

package/src/components/forms/SignUpForm.tsx

@@ -0,0 +1,91 @@
+import { ReactElement, useCallback, useMemo } from 'react'
+import { SignUpErrorCode } from '@contember/graphql-client-tenant'
+import { TenantForm } from './TenantForm.js'
+import { FormContextValue, FormError, FormState } from '../../types/forms.js'
+import { useForm } from '../../contexts.js'
+import { SignUpMutationResult, useSignUpMutation } from '../../hooks/index.js'
+
+export type SignUpFormValues = {
+	email: string
+	password: string
+	passwordConfirmation: string
+	name: string
+}
+
+export type SignUpFormErrorCode =
+	| SignUpErrorCode
+	| 'FIELD_REQUIRED'
+	| 'INVALID_VALUE'
+	| 'PASSWORD_MISMATCH'
+	| 'UNKNOWN_ERROR'
+
+export type SignUpFormState = FormState
+
+export type SignUpFormError = FormError<SignUpFormValues, SignUpFormErrorCode>
+
+export type SignUpFormContextValue = FormContextValue<SignUpFormValues, SignUpFormErrorCode>
+
+export interface SignUpFormProps {
+	children: ReactElement
+	/** Tenant roles for the new identity. Only a caller allowed to grant them may pass this. */
+	roles?: readonly string[]
+	captchaToken?: string
+	onSuccess?: (args: { result: SignUpMutationResult }) => void
+}
+
+export const useSignUpForm = useForm as () => SignUpFormContextValue
+
+/**
+ * Open registration. Note that `signUp` only creates the account — it does not
+ * sign anyone in, so a host app usually follows a success with `LoginForm` or,
+ * when e-mail verification is required, with a "check your inbox" screen.
+ */
+export const SignUpForm = ({ children, onSuccess, roles, captchaToken }: SignUpFormProps) => {
+	const signUp = useSignUpMutation()
+	return (
+		<TenantForm<SignUpFormContextValue, SignUpMutationResult>
+			onSuccess={onSuccess}
+			errorMapping={errorToField}
+			initialValues={useMemo(() => ({
+				email: '',
+				password: '',
+				passwordConfirmation: '',
+				name: '',
+			}), [])}
+			validate={({ values }) => {
+				const errors: SignUpFormError[] = []
+				if (!values.email) {
+					errors.push({ code: 'FIELD_REQUIRED', field: 'email' })
+				} else if (!values.email.match(/^.+@.+$/)) {
+					errors.push({ code: 'INVALID_VALUE', field: 'email' })
+				}
+				if (!values.password) {
+					errors.push({ code: 'FIELD_REQUIRED', field: 'password' })
+				} else if (values.password !== values.passwordConfirmation) {
+					// Strength is the server's call (config.password) — only the typo check is ours.
+					errors.push({ code: 'PASSWORD_MISMATCH', field: 'passwordConfirmation' })
+				}
+				return errors
+			}}
+			execute={useCallback(async ({ values }) => {
+				return await signUp({
+					email: values.email,
+					password: values.password,
+					name: values.name || undefined,
+					roles,
+					captchaToken,
+				})
+			}, [signUp, roles, captchaToken])}
+		>
+			{children}
+		</TenantForm>
+	)
+}
+
+const errorToField: Record<SignUpErrorCode, keyof SignUpFormValues | undefined> = {
+	EMAIL_ALREADY_EXISTS: 'email',
+	INVALID_EMAIL_FORMAT: 'email',
+	TOO_WEAK: 'password',
+	INVALID_CAPTCHA: undefined,
+	RATE_LIMIT_EXCEEDED: undefined,
+}

package/src/components/forms/TenantForm.tsx

@@ -1,6 +1,7 @@
 import { ComponentType, ReactElement, useCallback, useEffect, useState } from 'react'
 import { Slot } from '@radix-ui/react-slot'
 import { FormContextValue } from '../../types/forms.js'
+import { toFormErrorCode } from '../../types/forbidden.js'
 import { FormContext } from '../../contexts.js'
 import { useReferentiallyStableCallback } from '@contember/react-utils'
 
@@ -82,10 +83,13 @@ export const TenantForm = <T extends FormContextValue<any, any, any>, OkResult =
 				onSuccess?.({ result: 'result' in response ? response.result : undefined as OkResult })
 			}
 		} catch (e) {
-			console.error(e)
+			const code = toFormErrorCode(e)
+			if (code !== 'FORBIDDEN') {
+				console.error(e)
+			}
 			setState('error')
 			setErrors([{
-				code: 'UNKNOWN_ERROR',
+				code,
 				developerMessage: typeof e === 'string'
 					? e
 					: (e && typeof e === 'object' && 'message' in e && typeof e.message === 'string')

package/src/components/forms/index.ts

@@ -1,4 +1,5 @@
 export * from './CreateApiKeyForm.js'
+export * from './CreateGlobalApiKeyForm.js'
 export * from './CreateSessionTokenForm.js'
 export * from './ChangeMyPasswordForm.js'
 export * from './InviteForm.js'
@@ -13,3 +14,10 @@ export * from './PasswordlessSignInInitForm.js'
 export * from './OtpPrepareForm.js'
 export * from './OtpConfirmForm.js'
 export * from './UpdateProjectMemberForm.js'
+export * from './AddProjectMemberForm.js'
+export * from './ChangeMyProfileForm.js'
+export * from './ChangeProfileForm.js'
+export * from './ChangePasswordForm.js'
+export * from './EmailOtpConfirmForm.js'
+export * from './SetProjectSecretForm.js'
+export * from './SignUpForm.js'

package/src/components/triggers/DisableEmailOtpTrigger.tsx

@@ -0,0 +1,27 @@
+import { ReactElement, useCallback } from 'react'
+import { DisableEmailOtpErrorCode } from '@contember/graphql-client-tenant'
+import { useDisableEmailOtpMutation } from '../../hooks/index.js'
+import { TenantActionErrorArgs, TenantActionTrigger } from './TenantActionTrigger.js'
+import { useIdentityMethods } from '../../contexts.js'
+
+export interface DisableEmailOtpTriggerProps {
+	children: ReactElement
+	onSuccess?: () => void
+	onError?: (args: TenantActionErrorArgs<DisableEmailOtpErrorCode>) => void
+}
+
+export const DisableEmailOtpTrigger = ({ onSuccess, ...props }: DisableEmailOtpTriggerProps) => {
+	const disableEmailOtp = useDisableEmailOtpMutation()
+	const { refreshIdentity } = useIdentityMethods()
+
+	return (
+		<TenantActionTrigger
+			execute={useCallback(() => disableEmailOtp({}), [disableEmailOtp])}
+			onSuccess={() => {
+				refreshIdentity()
+				onSuccess?.()
+			}}
+			{...props}
+		/>
+	)
+}

package/src/components/triggers/DisableMyPasswordlessTrigger.tsx

@@ -0,0 +1,27 @@
+import { ReactElement, useCallback } from 'react'
+import { ToggleMyPasswordlessErrorCode } from '@contember/graphql-client-tenant'
+import { useDisableMyPasswordlessMutation } from '../../hooks/index.js'
+import { TenantActionErrorArgs, TenantActionTrigger } from './TenantActionTrigger.js'
+import { useIdentityMethods } from '../../contexts.js'
+
+export interface DisableMyPasswordlessTriggerProps {
+	children: ReactElement
+	onSuccess?: () => void
+	onError?: (args: TenantActionErrorArgs<ToggleMyPasswordlessErrorCode>) => void
+}
+
+export const DisableMyPasswordlessTrigger = ({ onSuccess, ...props }: DisableMyPasswordlessTriggerProps) => {
+	const disablePasswordless = useDisableMyPasswordlessMutation()
+	const { refreshIdentity } = useIdentityMethods()
+
+	return (
+		<TenantActionTrigger
+			execute={useCallback(() => disablePasswordless({}), [disablePasswordless])}
+			onSuccess={() => {
+				refreshIdentity()
+				onSuccess?.()
+			}}
+			{...props}
+		/>
+	)
+}

package/src/components/triggers/DisableOtpTrigger.tsx

@@ -1,12 +1,13 @@
 import { ReactElement, useCallback } from 'react'
+import { DisableOtpErrorCode } from '@contember/graphql-client-tenant'
 import { useDisableOtpMutation } from '../../hooks/index.js'
-import { TenantActionTrigger } from './TenantActionTrigger.js'
+import { TenantActionErrorArgs, TenantActionTrigger } from './TenantActionTrigger.js'
 import { useIdentityMethods } from '../../contexts.js'
 
 export interface DisableOtpTriggerProps {
 	children: ReactElement
 	onSuccess?: () => void
-	onError?: (e: unknown) => void
+	onError?: (args: TenantActionErrorArgs<DisableOtpErrorCode>) => void
 }
 
 export const DisableOtpTrigger = ({ onSuccess, ...props }: DisableOtpTriggerProps) => {

package/src/components/triggers/DisablePersonTrigger.tsx

@@ -0,0 +1,18 @@
+import { ReactElement, useCallback } from 'react'
+import { DisablePersonErrorCode } from '@contember/graphql-client-tenant'
+import { TenantActionErrorArgs, TenantActionTrigger } from './TenantActionTrigger.js'
+import { DisablePersonMutationVariables, useDisablePersonMutation } from '../../hooks/index.js'
+
+export type DisablePersonTriggerProps =
+	& DisablePersonMutationVariables
+	& {
+		children: ReactElement
+		onSuccess?: () => void
+		onError?: (args: TenantActionErrorArgs<DisablePersonErrorCode>) => void
+	}
+
+export const DisablePersonTrigger = ({ personId, ...props }: DisablePersonTriggerProps) => {
+	const disablePerson = useDisablePersonMutation()
+	const execute = useCallback(async () => await disablePerson({ personId }), [disablePerson, personId])
+	return <TenantActionTrigger {...props} execute={execute} />
+}

package/src/components/triggers/EnableMyPasswordlessTrigger.tsx

@@ -0,0 +1,27 @@
+import { ReactElement, useCallback } from 'react'
+import { ToggleMyPasswordlessErrorCode } from '@contember/graphql-client-tenant'
+import { useEnableMyPasswordlessMutation } from '../../hooks/index.js'
+import { TenantActionErrorArgs, TenantActionTrigger } from './TenantActionTrigger.js'
+import { useIdentityMethods } from '../../contexts.js'
+
+export interface EnableMyPasswordlessTriggerProps {
+	children: ReactElement
+	onSuccess?: () => void
+	onError?: (args: TenantActionErrorArgs<ToggleMyPasswordlessErrorCode>) => void
+}
+
+export const EnableMyPasswordlessTrigger = ({ onSuccess, ...props }: EnableMyPasswordlessTriggerProps) => {
+	const enablePasswordless = useEnableMyPasswordlessMutation()
+	const { refreshIdentity } = useIdentityMethods()
+
+	return (
+		<TenantActionTrigger
+			execute={useCallback(() => enablePasswordless({}), [enablePasswordless])}
+			onSuccess={() => {
+				refreshIdentity()
+				onSuccess?.()
+			}}
+			{...props}
+		/>
+	)
+}

package/src/components/triggers/EnablePersonTrigger.tsx

@@ -0,0 +1,18 @@
+import { ReactElement, useCallback } from 'react'
+import { EnablePersonErrorCode } from '@contember/graphql-client-tenant'
+import { TenantActionErrorArgs, TenantActionTrigger } from './TenantActionTrigger.js'
+import { EnablePersonMutationVariables, useEnablePersonMutation } from '../../hooks/index.js'
+
+export type EnablePersonTriggerProps =
+	& EnablePersonMutationVariables
+	& {
+		children: ReactElement
+		onSuccess?: () => void
+		onError?: (args: TenantActionErrorArgs<EnablePersonErrorCode>) => void
+	}
+
+export const EnablePersonTrigger = ({ personId, ...props }: EnablePersonTriggerProps) => {
+	const enablePerson = useEnablePersonMutation()
+	const execute = useCallback(async () => await enablePerson({ personId }), [enablePerson, personId])
+	return <TenantActionTrigger {...props} execute={execute} />
+}

package/src/components/triggers/ForceSignOutPersonTrigger.tsx

@@ -0,0 +1,18 @@
+import { ReactElement, useCallback } from 'react'
+import { ForceSignOutPersonErrorCode } from '@contember/graphql-client-tenant'
+import { TenantActionErrorArgs, TenantActionTrigger } from './TenantActionTrigger.js'
+import { ForceSignOutPersonMutationVariables, useForceSignOutPersonMutation } from '../../hooks/index.js'
+
+export type ForceSignOutPersonTriggerProps =
+	& ForceSignOutPersonMutationVariables
+	& {
+		children: ReactElement
+		onSuccess?: () => void
+		onError?: (args: TenantActionErrorArgs<ForceSignOutPersonErrorCode>) => void
+	}
+
+export const ForceSignOutPersonTrigger = ({ personId, reason, ...props }: ForceSignOutPersonTriggerProps) => {
+	const forceSignOutPerson = useForceSignOutPersonMutation()
+	const execute = useCallback(async () => await forceSignOutPerson({ personId, reason }), [forceSignOutPerson, personId, reason])
+	return <TenantActionTrigger {...props} execute={execute} />
+}

package/src/components/triggers/InitEmailOtpTrigger.tsx

@@ -0,0 +1,17 @@
+import { ReactElement, useCallback } from 'react'
+import { InitEmailOtpErrorCode } from '@contember/graphql-client-tenant'
+import { useInitEmailOtpMutation } from '../../hooks/index.js'
+import { TenantActionErrorArgs, TenantActionTrigger } from './TenantActionTrigger.js'
+
+export interface InitEmailOtpTriggerProps {
+	children: ReactElement
+	onSuccess?: () => void
+	onError?: (args: TenantActionErrorArgs<InitEmailOtpErrorCode>) => void
+}
+
+// No identity refresh — this only mails the code, nothing about the identity changed yet.
+export const InitEmailOtpTrigger = (props: InitEmailOtpTriggerProps) => {
+	const initEmailOtp = useInitEmailOtpMutation()
+
+	return <TenantActionTrigger execute={useCallback(() => initEmailOtp({}), [initEmailOtp])} {...props} />
+}

package/src/components/triggers/RegenerateBackupCodesTrigger.tsx

@@ -0,0 +1,22 @@
+import { ReactElement, useCallback } from 'react'
+import { RegenerateBackupCodesErrorCode } from '@contember/graphql-client-tenant'
+import { RegenerateBackupCodesMutationResult, useRegenerateBackupCodesMutation } from '../../hooks/index.js'
+import { TenantActionErrorArgs, TenantActionTrigger } from './TenantActionTrigger.js'
+
+export interface RegenerateBackupCodesTriggerProps {
+	children: ReactElement
+	/** The result carries the new codes — show them once, they are not retrievable later. */
+	onSuccess?: (args: { result: RegenerateBackupCodesMutationResult }) => void
+	onError?: (args: TenantActionErrorArgs<RegenerateBackupCodesErrorCode>) => void
+}
+
+export const RegenerateBackupCodesTrigger = (props: RegenerateBackupCodesTriggerProps) => {
+	const regenerateBackupCodes = useRegenerateBackupCodesMutation()
+
+	return (
+		<TenantActionTrigger<RegenerateBackupCodesMutationResult, RegenerateBackupCodesErrorCode>
+			execute={useCallback(() => regenerateBackupCodes({}), [regenerateBackupCodes])}
+			{...props}
+		/>
+	)
+}

package/src/components/triggers/RemoveProjectMemberTrigger.tsx

@@ -1,5 +1,6 @@
 import { ReactElement, useCallback } from 'react'
-import { TenantActionTrigger } from './TenantActionTrigger.js'
+import { RemoveProjectMemberErrorCode } from '@contember/graphql-client-tenant'
+import { TenantActionErrorArgs, TenantActionTrigger } from './TenantActionTrigger.js'
 import { RemoveProjectMemberMutationVariables, useRemoveProjectMemberMutation } from '../../hooks/index.js'
 
 export type RemoveProjectMemberTriggerProps =
@@ -7,7 +8,7 @@ export type RemoveProjectMemberTriggerProps =
 	& {
 		children: ReactElement
 		onSuccess?: () => void
-		onError?: (e: unknown) => void
+		onError?: (args: TenantActionErrorArgs<RemoveProjectMemberErrorCode>) => void
 	}
 
 export const RemoveProjectMemberTrigger = ({ identityId, projectSlug, ...props }: RemoveProjectMemberTriggerProps) => {

package/src/components/triggers/ResetPersonMfaTrigger.tsx

@@ -0,0 +1,18 @@
+import { ReactElement, useCallback } from 'react'
+import { ResetPersonMfaErrorCode } from '@contember/graphql-client-tenant'
+import { TenantActionErrorArgs, TenantActionTrigger } from './TenantActionTrigger.js'
+import { ResetPersonMfaMutationVariables, useResetPersonMfaMutation } from '../../hooks/index.js'
+
+export type ResetPersonMfaTriggerProps =
+	& ResetPersonMfaMutationVariables
+	& {
+		children: ReactElement
+		onSuccess?: () => void
+		onError?: (args: TenantActionErrorArgs<ResetPersonMfaErrorCode>) => void
+	}
+
+export const ResetPersonMfaTrigger = ({ personId, ...props }: ResetPersonMfaTriggerProps) => {
+	const resetPersonMfa = useResetPersonMfaMutation()
+	const execute = useCallback(async () => await resetPersonMfa({ personId }), [personId, resetPersonMfa])
+	return <TenantActionTrigger {...props} execute={execute} />
+}

package/src/components/triggers/RevokeSessionTrigger.tsx

@@ -0,0 +1,18 @@
+import { ReactElement, useCallback } from 'react'
+import { RevokeSessionErrorCode } from '@contember/graphql-client-tenant'
+import { TenantActionErrorArgs, TenantActionTrigger } from './TenantActionTrigger.js'
+import { RevokeSessionMutationVariables, useRevokeSessionMutation } from '../../hooks/index.js'
+
+export type RevokeSessionTriggerProps =
+	& RevokeSessionMutationVariables
+	& {
+		children: ReactElement
+		onSuccess?: () => void
+		onError?: (args: TenantActionErrorArgs<RevokeSessionErrorCode>) => void
+	}
+
+export const RevokeSessionTrigger = ({ sessionId, ...props }: RevokeSessionTriggerProps) => {
+	const revokeSession = useRevokeSessionMutation()
+	const execute = useCallback(async () => await revokeSession({ sessionId }), [revokeSession, sessionId])
+	return <TenantActionTrigger {...props} execute={execute} />
+}

package/src/components/triggers/TenantActionTrigger.tsx

@@ -2,14 +2,19 @@ import { Slot } from '@radix-ui/react-slot'
 import { ComponentType, MouseEventHandler, ReactElement, useMemo, useState } from 'react'
 import { composeEventHandlers } from '@radix-ui/primitive'
 import { useReferentiallyStableCallback } from '@contember/react-utils'
+import { toFormErrorCode } from '../../types/forbidden.js'
+import { FormErrorCode } from '../../types/forms.js'
 
 const SlotButton = Slot as ComponentType<React.ButtonHTMLAttributes<HTMLButtonElement>>
 
+/** What an action's `onError` receives. `code` is `FORBIDDEN` when the API refused, not when it failed. */
+export type TenantActionErrorArgs<Error extends string = never> = { code: Error | FormErrorCode; error: unknown }
+
 export interface TenantActionTriggerProps<OkResult, Error extends string> {
 	children: ReactElement
 	onClick?: MouseEventHandler<HTMLButtonElement>
 	onSuccess?: (args: { result: OkResult }) => void
-	onError?: (args: { code: Error | 'UNKNOWN_ERROR'; error: unknown }) => void
+	onError?: (args: TenantActionErrorArgs<Error>) => void
 	execute: () => Promise<({ ok: true } & (OkResult extends undefined ? {} : { result: OkResult })) | { ok: false; error?: Error }>
 }
 
@@ -33,9 +38,12 @@ export const TenantActionTrigger = <OkResult, Error extends string>(
 				onError?.({ code: response.error ?? 'UNKNOWN_ERROR', error: response })
 			}
 		} catch (e) {
-			console.error(e)
+			const code = toFormErrorCode(e)
+			if (code !== 'FORBIDDEN') {
+				console.error(e)
+			}
 			setSubmitting(false)
-			onError?.({ code: 'UNKNOWN_ERROR', error: e })
+			onError?.({ code, error: e })
 		}
 	}, [execute, onError, onSuccess])
 

package/src/components/triggers/index.ts

@@ -1,3 +1,14 @@
+export * from './DisableEmailOtpTrigger.js'
+export * from './DisableMyPasswordlessTrigger.js'
 export * from './DisableOtpTrigger.js'
+export * from './DisablePersonTrigger.js'
+export * from './EnableMyPasswordlessTrigger.js'
+export * from './EnablePersonTrigger.js'
+export * from './ForceSignOutPersonTrigger.js'
+export * from './InitEmailOtpTrigger.js'
 export * from './LogoutTrigger.js'
+export * from './RegenerateBackupCodesTrigger.js'
 export * from './RemoveProjectMemberTrigger.js'
+export * from './ResetPersonMfaTrigger.js'
+export * from './RevokeSessionTrigger.js'
+export * from './TenantActionTrigger.js'

package/src/hooks/mutations/auth/index.ts

@@ -1,3 +1,4 @@
 export * from './useChangeMyPasswordMutation.js'
 export * from './useSignInMutation.js'
 export * from './useSignOutMutation.js'
+export * from './useSignUpMutation.js'

package/src/hooks/mutations/auth/useSignUpMutation.ts

@@ -0,0 +1,28 @@
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { ModelType } from 'graphql-ts-client-api'
+import { createTenantMutation } from '../../useTenantMutation.js'
+
+const signUpMutationResult = TenantApi.signUpResult$
+	.person(TenantApi.person$.id.email.name.identity(TenantApi.identity$$))
+
+export type SignUpMutationResult = ModelType<typeof signUpMutationResult>
+
+/**
+ * Registers a new person. Whether the resulting account can sign in right away
+ * depends on `config.signup.requireEmailVerification`.
+ *
+ * `error.recommendedAction` tells a UI what to offer on EMAIL_ALREADY_EXISTS,
+ * and `weakPasswordReasons` explains a TOO_WEAK rejection — both are worth
+ * surfacing rather than collapsing into a generic message.
+ */
+export const signUpMutation = TenantApi.mutation$
+	.signUp(
+		TenantApi
+			.signUpResponse$$
+			.error(TenantApi.signUpError$.code.developerMessage.weakPasswordReasons.recommendedAction)
+			.result(signUpMutationResult),
+		options => options.alias('mutation'),
+	)
+
+export const useSignUpMutation = createTenantMutation(signUpMutation)
+export type SignUpMutationVariables = Parameters<ReturnType<typeof useSignUpMutation>>[0]

package/src/hooks/mutations/emailOtp/index.ts

@@ -0,0 +1,3 @@
+export * from './useConfirmEmailOtpMutation.js'
+export * from './useDisableEmailOtpMutation.js'
+export * from './useInitEmailOtpMutation.js'

package/src/hooks/mutations/emailOtp/useConfirmEmailOtpMutation.ts

@@ -0,0 +1,19 @@
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { ModelType } from 'graphql-ts-client-api'
+import { createTenantMutation } from '../../useTenantMutation.js'
+
+const confirmEmailOtpResult = TenantApi.confirmEmailOtpResult$$
+
+export type ConfirmEmailOtpMutationResult = ModelType<typeof confirmEmailOtpResult>
+
+export const confirmEmailOtpMutation = TenantApi.mutation$
+	.confirmEmailOtp(
+		TenantApi
+			.confirmEmailOtpResponse$$
+			.error(TenantApi.confirmEmailOtpError$$)
+			.result(confirmEmailOtpResult),
+		options => options.alias('mutation'),
+	)
+
+export const useConfirmEmailOtpMutation = createTenantMutation(confirmEmailOtpMutation)
+export type ConfirmEmailOtpMutationVariables = Parameters<ReturnType<typeof useConfirmEmailOtpMutation>>[0]

package/src/hooks/mutations/emailOtp/useDisableEmailOtpMutation.ts

@@ -0,0 +1,13 @@
+import * as TenantApi from '@contember/graphql-client-tenant'
+import { createTenantMutation } from '../../useTenantMutation.js'
+
+export const disableEmailOtpMutation = TenantApi.mutation$
+	.disableEmailOtp(
+		TenantApi
+			.disableEmailOtpResponse$$
+			.error(TenantApi.disableEmailOtpError$$),
+		options => options.alias('mutation'),
+	)
+
+export const useDisableEmailOtpMutation = createTenantMutation(disableEmailOtpMutation)
+export type DisableEmailOtpMutationVariables = Parameters<ReturnType<typeof useDisableEmailOtpMutation>>[0]