@byline/admin 5.1.4 → 5.2.0

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

@@ -1,239 +0,0 @@
-'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

@@ -1,148 +0,0 @@
-'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

@@ -1,206 +0,0 @@
-'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;
-}