@byline/admin 5.2.0 → 6.0.0

package/dist/modules/admin-roles/components/permissions.jsx

@@ -0,0 +1,239 @@
+'use client';
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+/**
+ * Inline per-role ability editor. Renders below the role-details
+ * header on the role detail page — full-width, no drawer.
+ *
+ * Mode-switched: defaults to **view** (checkboxes disabled, no edit
+ * affordances). Click Edit to switch to **edit** mode — checkboxes
+ * become interactive, per-group "Select all / Clear" buttons appear,
+ * and a Save button materialises once the selection diverges from the
+ * stored set. Cancel reverts the local set and returns to view mode.
+ *
+ * The View toggle is disabled while there are unsaved changes — this
+ * is the explicit-intent equivalent of a confirm dialog and keeps the
+ * UX honest about whether changes have been persisted.
+ *
+ * Vid-less by design (see Phase B notes): abilities live in
+ * `byline_admin_permissions`, not on the role row, so editing them
+ * does not bump the role's `vid`. Last-writer-wins on a per-role basis.
+ *
+ * Stable override handles: see `permissions.module.css`.
+ */
+import { useMemo, useState } from 'react';
+import { useTranslation } from '@byline/i18n/react';
+import { Alert, Button, Checkbox, LoaderEllipsis } from '@byline/ui/react';
+import cx from 'clsx';
+import { useBylineAdminServices } from '../../../services/admin-services-context.js';
+import styles from './permissions.module.css';
+function setsEqual(a, b) {
+    if (a.size !== b.size)
+        return false;
+    for (const item of a)
+        if (!b.has(item))
+            return false;
+    return true;
+}
+function GroupSection({ group, selected, mode, saving, onToggle, onSelectAll, onClearAll, }) {
+    const { t } = useTranslation('byline-admin');
+    const groupKeys = useMemo(() => group.abilities.map((a) => a.key), [group.abilities]);
+    const selectedInGroup = groupKeys.filter((key) => selected.has(key)).length;
+    const isEdit = mode === 'edit';
+    return (<div className={cx('byline-role-permissions-group', styles.group)}>
+      <div className={cx('byline-role-permissions-group-head', styles['group-head'])}>
+        <div>
+          <span className={cx('byline-role-permissions-group-name', styles['group-name'])}>
+            {group.group}
+          </span>
+          <span className={cx('muted', 'byline-role-permissions-group-count', styles['group-count'])}>
+            {t('adminRoles.permissions.groupCount', {
+            selected: selectedInGroup,
+            total: group.abilities.length,
+            mode,
+        })}
+          </span>
+        </div>
+        {isEdit ? (<div className={cx('byline-role-permissions-group-buttons', styles['group-buttons'])}>
+            <Button size="xs" intent="secondary" type="button" disabled={saving || selectedInGroup === group.abilities.length} onClick={() => onSelectAll(groupKeys)}>
+              {t('adminRoles.permissions.selectAll')}
+            </Button>
+            <Button size="xs" intent="secondary" type="button" disabled={saving || selectedInGroup === 0} onClick={() => onClearAll(groupKeys)}>
+              {t('adminRoles.permissions.clear')}
+            </Button>
+          </div>) : null}
+      </div>
+      <div className={cx('byline-role-permissions-grid', styles.grid)}>
+        {group.abilities.map((ability) => (<div key={ability.key} className={cx('byline-role-permissions-row', styles.row)}>
+            <Checkbox id={`ability-${ability.key}`} name={`ability-${ability.key}`} checked={selected.has(ability.key)} disabled={!isEdit || saving} onCheckedChange={(checked) => onToggle(ability.key, checked === true)} 
+        // Override the uikit Checkbox container's `width: 100%` so it
+        // shrinks to its button width — otherwise the external label
+        // is pushed away by an empty 100%-wide container.
+        containerClasses={cx('byline-role-permissions-checkbox-auto', styles['checkbox-auto'])} componentClasses={cx('byline-role-permissions-checkbox-auto', styles['checkbox-auto'])}/>
+            <label htmlFor={`ability-${ability.key}`} className={cx('byline-role-permissions-label', styles.label, isEdit && ['byline-role-permissions-label-edit', styles['label-edit']])}>
+              <div className={cx('byline-role-permissions-label-head', styles['label-head'])}>
+                <span className={cx('byline-role-permissions-label-name', styles['label-name'])}>
+                  {ability.label}
+                </span>
+                <code className={cx('byline-role-permissions-key', styles.key)}>{ability.key}</code>
+              </div>
+              {ability.description ? (<p className={cx('muted', 'byline-role-permissions-description', styles.description)}>
+                  {ability.description}
+                </p>) : null}
+            </label>
+          </div>))}
+      </div>
+    </div>);
+}
+export function RolePermissions({ role, registered, initialAbilities, onSaved, }) {
+    const { setRoleAbilities } = useBylineAdminServices();
+    const { t } = useTranslation('byline-admin');
+    const [mode, setMode] = useState('view');
+    const [initialSet, setInitialSet] = useState(() => new Set(initialAbilities));
+    const [selected, setSelected] = useState(() => new Set(initialAbilities));
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    const isDirty = !setsEqual(selected, initialSet);
+    const totalSelected = selected.size;
+    function handleToggle(key, checked) {
+        if (mode !== 'edit')
+            return;
+        setSelected((current) => {
+            const next = new Set(current);
+            if (checked)
+                next.add(key);
+            else
+                next.delete(key);
+            return next;
+        });
+    }
+    function handleSelectAll(groupKeys) {
+        setSelected((current) => {
+            const next = new Set(current);
+            for (const key of groupKeys)
+                next.add(key);
+            return next;
+        });
+    }
+    function handleClearAll(groupKeys) {
+        setSelected((current) => {
+            const next = new Set(current);
+            for (const key of groupKeys)
+                next.delete(key);
+            return next;
+        });
+    }
+    function handleCancel() {
+        setSelected(new Set(initialSet));
+        setError(null);
+        setMode('view');
+    }
+    function handleEnterEdit() {
+        setError(null);
+        setMode('edit');
+    }
+    function handleEnterView() {
+        // Disabled while dirty (the toggle's `disabled` prop guards this) —
+        // belt-and-suspenders so a stray click can't slip through.
+        if (isDirty)
+            return;
+        setError(null);
+        setMode('view');
+    }
+    async function handleSave() {
+        if (saving)
+            return;
+        setSaving(true);
+        setError(null);
+        try {
+            const response = await setRoleAbilities({
+                data: { id: role.id, abilities: Array.from(selected) },
+            });
+            // Reset baseline to the authoritative stored set — guards against
+            // any dedupe/normalisation the server might apply.
+            const storedSet = new Set(response.abilities);
+            setInitialSet(storedSet);
+            setSelected(new Set(storedSet));
+            onSaved?.(response);
+        }
+        catch (err) {
+            const code = getErrorCode(err);
+            if (code === 'admin.permissions.roleNotFound') {
+                setError(t('adminRoles.permissions.errors.roleNotFound'));
+            }
+            else if (code === 'admin.permissions.abilityUnregistered') {
+                setError(t('adminRoles.permissions.errors.abilityUnregistered'));
+            }
+            else {
+                setError(t('adminRoles.permissions.errors.fallback'));
+            }
+        }
+        finally {
+            setSaving(false);
+        }
+    }
+    const isEdit = mode === 'edit';
+    return (<div className={cx('byline-role-permissions-wrap', styles.wrap)}>
+      <div className={cx('byline-role-permissions-toolbar', styles.toolbar)}>
+        <ModeToggle mode={mode} dirty={isDirty} saving={saving} onView={handleEnterView} onEdit={handleEnterEdit}/>
+        <p className={cx('muted', 'byline-role-permissions-counter', styles.counter)}>
+          {t('adminRoles.permissions.counter', {
+            selected: totalSelected,
+            total: registered.total,
+            mode,
+            role: role.name,
+        })}
+        </p>
+        {isEdit && isDirty ? (<div className={cx('byline-role-permissions-actions', styles.actions)}>
+            <Button type="button" intent="secondary" size="xs" onClick={handleCancel} disabled={saving} className={cx('byline-role-permissions-action', styles.action)}>
+              {t('common.actions.cancel')}
+            </Button>
+            <Button type="button" intent="primary" size="xs" onClick={() => void handleSave()} disabled={saving} className={cx('byline-role-permissions-action', styles.action)}>
+              {saving ? <LoaderEllipsis size={30}/> : t('common.actions.save')}
+            </Button>
+          </div>) : null}
+      </div>
+
+      {error ? <Alert intent="danger">{error}</Alert> : null}
+
+      <div className={cx('byline-role-permissions-groups', styles.groups)}>
+        {registered.groups.map((group) => (<GroupSection key={group.group} group={group} selected={selected} mode={mode} saving={saving} onToggle={handleToggle} onSelectAll={handleSelectAll} onClearAll={handleClearAll}/>))}
+      </div>
+    </div>);
+}
+function ModeToggle({ mode, dirty, saving, onView, onEdit }) {
+    const { t } = useTranslation('byline-admin');
+    // Segmented two-state toggle. View is disabled while dirty so the
+    // user has to commit to Save or Cancel — avoids accidentally
+    // discarding a draft selection.
+    const isView = mode === 'view';
+    const isEdit = mode === 'edit';
+    const viewDisabled = dirty || saving;
+    const editDisabled = saving;
+    return (<div role="group" aria-label={t('adminRoles.permissions.modeAriaLabel')} className={cx('byline-role-permissions-mode-toggle', styles['mode-toggle'])}>
+      <button type="button" onClick={onView} disabled={viewDisabled} className={cx('byline-role-permissions-mode-button', styles['mode-button'], isView && ['byline-role-permissions-mode-button-active', styles['mode-button-active']], viewDisabled &&
+            !isView && [
+            'byline-role-permissions-mode-button-disabled',
+            styles['mode-button-disabled'],
+        ])}>
+        {t('adminRoles.permissions.viewMode')}
+      </button>
+      <button type="button" onClick={onEdit} disabled={editDisabled} className={cx('byline-role-permissions-mode-button', 'byline-role-permissions-mode-button-divider', styles['mode-button'], styles['mode-button-divider'], isEdit && ['byline-role-permissions-mode-button-active', styles['mode-button-active']], editDisabled &&
+            !isEdit && [
+            'byline-role-permissions-mode-button-disabled',
+            styles['mode-button-disabled'],
+        ])}>
+        {t('adminRoles.permissions.editMode')}
+      </button>
+    </div>);
+}
+function getErrorCode(err) {
+    return typeof err?.code === 'string'
+        ? err.code
+        : null;
+}

package/dist/modules/admin-roles/components/update.jsx

@@ -0,0 +1,148 @@
+'use client';
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+/**
+ * Role details drawer form.
+ *
+ * Mirrors the admin-users update pattern: TanStack Form + Zod, blur-then-
+ * change validation, diff-against-original patch, optimistic concurrency
+ * via `vid`. `machine_name` is read-only here — it is captured at create
+ * time and immutable thereafter.
+ */
+import { useMemo, useState } from 'react';
+import { revalidateLogic, useForm } from '@tanstack/react-form-start';
+import { useTranslation } from '@byline/i18n/react';
+import { Alert, Button, Input, LoaderEllipsis, TextArea } from '@byline/ui/react';
+import cx from 'clsx';
+import { z } from 'zod';
+import { useBylineAdminServices } from '../../../services/admin-services-context.js';
+import styles from './update.module.css';
+const MAX_NAME = 128;
+const MAX_DESCRIPTION = 2000;
+function defaultsFrom(role) {
+    return {
+        name: role.name,
+        description: role.description ?? '',
+    };
+}
+/** Build a patch object containing only fields whose values differ from the original role. */
+function buildPatch(values, role) {
+    const patch = {};
+    const normaliseText = (value) => (value.trim().length > 0 ? value : null);
+    const nextDescription = normaliseText(values.description);
+    const nextName = values.name.trim();
+    if (nextName !== role.name)
+        patch.name = nextName;
+    if (nextDescription !== role.description)
+        patch.description = nextDescription;
+    return patch;
+}
+export function UpdateRole({ role, onClose, onSuccess }) {
+    const { updateAdminRole } = useBylineAdminServices();
+    const { t } = useTranslation('byline-admin');
+    const [formError, setFormError] = useState(null);
+    const [successMessage, setSuccessMessage] = useState(null);
+    const updateRoleSchema = useMemo(() => z.object({
+        name: z
+            .string()
+            .min(1, t('adminRoles.create.errors.nameRequired'))
+            .max(MAX_NAME, t('adminRoles.create.errors.nameTooLong', { max: MAX_NAME })),
+        description: z
+            .string()
+            .max(MAX_DESCRIPTION, t('adminRoles.create.errors.descriptionTooLong', { max: MAX_DESCRIPTION })),
+    }), [t]);
+    const form = useForm({
+        defaultValues: defaultsFrom(role),
+        validationLogic: revalidateLogic({
+            mode: 'blur',
+            modeAfterSubmission: 'change',
+        }),
+        validators: {
+            onDynamic: updateRoleSchema,
+        },
+        onSubmit: async ({ value }) => {
+            setFormError(null);
+            setSuccessMessage(null);
+            const patch = buildPatch(value, role);
+            if (Object.keys(patch).length === 0) {
+                setSuccessMessage(t('common.feedback.noChanges'));
+                return;
+            }
+            try {
+                const updated = await updateAdminRole({
+                    data: { id: role.id, vid: role.vid, patch },
+                });
+                setSuccessMessage(t('common.feedback.saved'));
+                onSuccess?.(updated);
+            }
+            catch (err) {
+                const code = getErrorCode(err);
+                if (code === 'admin.roles.versionConflict') {
+                    setFormError(t('adminRoles.update.errors.versionConflict'));
+                    return;
+                }
+                if (code === 'admin.roles.notFound') {
+                    setFormError(t('adminRoles.update.errors.notFound'));
+                    return;
+                }
+                setFormError(t('common.errors.couldNotSave'));
+            }
+        },
+    });
+    return (<div className={cx('byline-role-update-wrap', styles.wrap)}>
+      <form method="post" noValidate onSubmit={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            void form.handleSubmit();
+        }} className={cx('byline-role-update-form', styles.form)}>
+        {formError ? <Alert intent="danger">{formError}</Alert> : null}
+        {successMessage ? <Alert intent="success">{successMessage}</Alert> : null}
+
+        <form.Field name="name">
+          {(field) => (<Input label={t('adminRoles.fields.name')} id="role-name" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.currentTarget.value)} error={field.state.meta.errors.length > 0} errorText={firstError(field.state.meta.errors)} required/>)}
+        </form.Field>
+
+        <Input label={t('adminRoles.fields.machineName')} id="role-machine-name" name="machine_name" value={role.machine_name} readOnly disabled helpText={t('adminRoles.update.fields.machineNameHelp')}/>
+
+        <form.Field name="description">
+          {(field) => (<TextArea label={t('adminRoles.fields.description')} id="role-description" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.currentTarget.value)} error={field.state.meta.errors.length > 0} errorText={firstError(field.state.meta.errors)} rows={3}/>)}
+        </form.Field>
+
+        <div className={cx('byline-role-update-actions', styles.actions)}>
+          <Button type="button" intent="secondary" size="sm" onClick={onClose} className={cx('byline-role-update-action', styles.action)}>
+            {successMessage ? t('common.actions.close') : t('common.actions.cancel')}
+          </Button>
+          <form.Subscribe selector={(state) => ({
+            canSubmit: state.canSubmit,
+            isSubmitting: state.isSubmitting,
+        })}>
+            {({ canSubmit, isSubmitting }) => (<Button size="sm" intent="primary" type="submit" disabled={!canSubmit || isSubmitting} className={cx('byline-role-update-action', styles.action)}>
+                {isSubmitting === true ? <LoaderEllipsis size={42}/> : t('common.actions.save')}
+              </Button>)}
+          </form.Subscribe>
+        </div>
+      </form>
+    </div>);
+}
+function firstError(errors) {
+    for (const err of errors) {
+        if (typeof err === 'string')
+            return err;
+        if (err && typeof err === 'object' && 'message' in err) {
+            const msg = err.message;
+            if (typeof msg === 'string')
+                return msg;
+        }
+    }
+    return undefined;
+}
+function getErrorCode(err) {
+    return typeof err?.code === 'string'
+        ? err.code
+        : null;
+}

package/dist/modules/admin-users/components/create.jsx

@@ -0,0 +1,206 @@
+'use client';
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+/**
+ * Create-admin-user drawer form.
+ *
+ * Rendered inside the list-view drawer. Same TanStack Form + Zod shape
+ * as the AccountDetails form — fields, blur-then-change validation,
+ * form-level alerts for errors that don't map onto a single field. On
+ * success the parent list-view navigates to the new user's detail page
+ * so the admin can finish configuring (roles, initial enablement).
+ *
+ * Extension point: future props (e.g. a `roles` array once the
+ * admin-roles module lands) plug in here — the list-route loader
+ * already runs in parallel, so adding a side-data fetch is a one-line
+ * change in the loader and a prop here.
+ */
+import { useMemo, useState } from 'react';
+import { revalidateLogic, useForm } from '@tanstack/react-form-start';
+import { passwordSchema } from '@byline/core/validation';
+import { useTranslation } from '@byline/i18n/react';
+import { Alert, Button, Checkbox, Input, LoaderEllipsis } from '@byline/ui/react';
+import cx from 'clsx';
+import { z } from 'zod';
+import { translateValidationError } from '../../../lib/translate-validation-error.js';
+import { useBylineAdminServices } from '../../../services/admin-services-context.js';
+import styles from './create.module.css';
+const MAX_NAME = 100;
+const MAX_USERNAME = 100;
+const MAX_EMAIL = 254;
+const initialValues = {
+    email: '',
+    password: '',
+    given_name: '',
+    family_name: '',
+    username: '',
+    is_super_admin: false,
+    // Sensible defaults for an admin-created row. A brand-new admin user
+    // is almost always meant to sign in straight away; the admin picks
+    // whether they arrive pre-verified.
+    is_enabled: true,
+    is_email_verified: false,
+};
+function normaliseText(value) {
+    return value.trim().length > 0 ? value : null;
+}
+export function CreateAdminUser({ onClose, onSuccess }) {
+    const { createAdminUser } = useBylineAdminServices();
+    const { t } = useTranslation('byline-admin');
+    const [formError, setFormError] = useState(null);
+    // Schema rebuilt per-render so error messages reflect the active
+    // locale; wrapped in useMemo([t]) to keep validator identity stable.
+    const createAdminUserFormSchema = useMemo(() => z.object({
+        email: z
+            .email({ message: t('account.update.errors.invalidEmail') })
+            .min(3)
+            .max(MAX_EMAIL, t('account.update.errors.emailTooLong', { max: MAX_EMAIL })),
+        password: passwordSchema,
+        given_name: z
+            .string()
+            .max(MAX_NAME, t('account.update.errors.givenNameTooLong', { max: MAX_NAME })),
+        family_name: z
+            .string()
+            .max(MAX_NAME, t('account.update.errors.familyNameTooLong', { max: MAX_NAME })),
+        username: z
+            .string()
+            .max(MAX_USERNAME, t('account.update.errors.usernameTooLong', { max: MAX_USERNAME })),
+        is_super_admin: z.boolean(),
+        is_enabled: z.boolean(),
+        is_email_verified: z.boolean(),
+    }), [t]);
+    const form = useForm({
+        defaultValues: initialValues,
+        validationLogic: revalidateLogic({
+            mode: 'blur',
+            modeAfterSubmission: 'change',
+        }),
+        validators: {
+            onDynamic: createAdminUserFormSchema,
+        },
+        onSubmit: async ({ value }) => {
+            setFormError(null);
+            try {
+                const created = await createAdminUser({
+                    data: {
+                        email: value.email,
+                        password: value.password,
+                        given_name: normaliseText(value.given_name),
+                        family_name: normaliseText(value.family_name),
+                        username: normaliseText(value.username),
+                        is_super_admin: value.is_super_admin,
+                        is_enabled: value.is_enabled,
+                        is_email_verified: value.is_email_verified,
+                    },
+                });
+                // Clear the form so the next drawer open starts fresh — the
+                // list-view shows the success as a toast and keeps the drawer
+                // closed until the user clicks "+" again.
+                form.reset(initialValues);
+                onSuccess?.(created);
+            }
+            catch (err) {
+                const code = getErrorCode(err);
+                if (code === 'admin.users.emailInUse') {
+                    const message = t('account.update.errors.emailInUse');
+                    form.setFieldMeta('email', (meta) => ({
+                        ...meta,
+                        errorMap: { ...meta.errorMap, onServer: message },
+                        errors: [message],
+                    }));
+                    return;
+                }
+                setFormError(t('adminUsers.create.errors.fallback'));
+            }
+        },
+    });
+    return (<div className={cx('byline-user-create-wrap', styles.wrap)}>
+      <form method="post" noValidate onSubmit={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            void form.handleSubmit();
+        }} className={cx('byline-user-create-form', styles.form)}>
+        {formError ? <Alert intent="danger">{formError}</Alert> : null}
+
+        <div className={cx('byline-user-create-grid', styles.grid)}>
+          <form.Field name="given_name">
+            {(field) => (<Input label={t('account.update.fields.givenName')} id="new-given-name" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.currentTarget.value)} error={field.state.meta.errors.length > 0} errorText={firstError(field.state.meta.errors)} autoComplete="given-name"/>)}
+          </form.Field>
+
+          <form.Field name="family_name">
+            {(field) => (<Input label={t('account.update.fields.familyName')} id="new-family-name" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.currentTarget.value)} error={field.state.meta.errors.length > 0} errorText={firstError(field.state.meta.errors)} autoComplete="family-name"/>)}
+          </form.Field>
+        </div>
+
+        <form.Field name="username">
+          {(field) => (<Input label={t('account.update.fields.username')} id="new-username" name={field.name} value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.currentTarget.value)} error={field.state.meta.errors.length > 0} errorText={firstError(field.state.meta.errors)} helpText={t('adminUsers.create.fields.usernameHelp')} autoComplete="username"/>)}
+        </form.Field>
+
+        <form.Field name="email">
+          {(field) => (<Input label={t('common.fields.email')} id="new-email" name={field.name} type="email" value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.currentTarget.value)} error={field.state.meta.errors.length > 0} errorText={firstError(field.state.meta.errors)} autoComplete="email" required/>)}
+        </form.Field>
+
+        <form.Field name="password">
+          {(field) => (<Input label={t('adminUsers.create.fields.password')} id="new-password" name={field.name} type="password" value={field.state.value} onBlur={field.handleBlur} onChange={(e) => field.handleChange(e.currentTarget.value)} error={field.state.meta.errors.length > 0} errorText={translateValidationError(t, firstError(field.state.meta.errors))} helpText={t('adminUsers.create.fields.passwordHelp')} autoComplete="new-password" required/>)}
+        </form.Field>
+
+        <div className={cx('byline-user-create-flags', styles.flags)}>
+          <form.Field name="is_enabled">
+            {(field) => (<Checkbox id="new-is-enabled" name={field.name} label={t('adminUsers.create.flags.enabledLabel')} checked={field.state.value} onCheckedChange={(checked) => field.handleChange(checked === true)} helpText={t('adminUsers.create.flags.enabledHelp')}/>)}
+          </form.Field>
+
+          <form.Field name="is_email_verified">
+            {(field) => (<Checkbox id="new-is-email-verified" name={field.name} label={t('adminUsers.create.flags.emailVerifiedLabel')} checked={field.state.value} onCheckedChange={(checked) => field.handleChange(checked === true)} helpText={t('adminUsers.create.flags.emailVerifiedHelp')}/>)}
+          </form.Field>
+
+          <form.Field name="is_super_admin">
+            {(field) => (<Checkbox id="new-is-super-admin" name={field.name} label={t('adminUsers.create.flags.superAdminLabel')} checked={field.state.value} onCheckedChange={(checked) => field.handleChange(checked === true)} helpText={t('adminUsers.create.flags.superAdminHelp')}/>)}
+          </form.Field>
+        </div>
+
+        <div className={cx('byline-user-create-actions', styles.actions)}>
+          <Button type="button" intent="secondary" size="sm" onClick={onClose} className={cx('byline-user-create-action', styles.action)}>
+            {t('common.actions.cancel')}
+          </Button>
+          <form.Subscribe selector={(state) => ({
+            canSubmit: state.canSubmit,
+            isSubmitting: state.isSubmitting,
+        })}>
+            {({ canSubmit, isSubmitting }) => (<Button size="sm" intent="primary" type="submit" disabled={!canSubmit || isSubmitting} className={cx('byline-user-create-action', styles.action)}>
+                {isSubmitting === true ? <LoaderEllipsis size={42}/> : t('common.actions.save')}
+              </Button>)}
+          </form.Subscribe>
+        </div>
+      </form>
+    </div>);
+}
+function firstError(errors) {
+    for (const err of errors) {
+        if (typeof err === 'string')
+            return err;
+        if (err && typeof err === 'object' && 'message' in err) {
+            const msg = err.message;
+            if (typeof msg === 'string')
+                return msg;
+        }
+    }
+    return undefined;
+}
+function getErrorCode(err) {
+    if (err && typeof err === 'object') {
+        const e = err;
+        if (typeof e.code === 'string')
+            return e.code;
+        if (e.cause && typeof e.cause === 'object' && 'code' in e.cause) {
+            const cause = e.cause;
+            if (typeof cause.code === 'string')
+                return cause.code;
+        }
+    }
+    return null;
+}