@byline/admin 5.1.4 → 5.2.0

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

@@ -1,126 +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
- */
-/**
- * User-roles drawer.
- *
- * Renders a flat checkbox list of every available role, pre-checked
- * from the user's current assignments. On save we wholesale-replace
- * the user's role-set via `setUserRoles`; the response carries the
- * authoritative stored set so the editor's "initial" baseline resets
- * cleanly.
- *
- * Standard drawer pattern (no view/edit mode toggle) — role lists are
- * short by design and the drawer is a short-lived edit context, not
- * a steady-state inspector. Save + Cancel are always visible; Save
- * is disabled until dirty.
- */
-import { 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 './roles.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;
-}
-export function UserRoles({ user, allRoles, initialRoleIds, onClose, onSaved }) {
-    const { setUserRoles } = useBylineAdminServices();
-    const { t } = useTranslation('byline-admin');
-    const [initialSet, setInitialSet] = useState(() => new Set(initialRoleIds));
-    const [selected, setSelected] = useState(() => new Set(initialRoleIds));
-    const [saving, setSaving] = useState(false);
-    const [error, setError] = useState(null);
-    const [successMessage, setSuccessMessage] = useState(null);
-    const isDirty = !setsEqual(selected, initialSet);
-    function handleToggle(roleId, checked) {
-        setSelected((current) => {
-            const next = new Set(current);
-            if (checked)
-                next.add(roleId);
-            else
-                next.delete(roleId);
-            return next;
-        });
-        setSuccessMessage(null);
-    }
-    async function handleSave() {
-        if (saving)
-            return;
-        setSaving(true);
-        setError(null);
-        setSuccessMessage(null);
-        try {
-            const response = await setUserRoles({
-                data: { userId: user.id, roleIds: Array.from(selected) },
-            });
-            const storedSet = new Set(response.roles.map((r) => r.id));
-            setInitialSet(storedSet);
-            setSelected(new Set(storedSet));
-            setSuccessMessage(t('common.feedback.saved'));
-            onSaved?.(response);
-        }
-        catch (err) {
-            const code = getErrorCode(err);
-            if (code === 'admin.roles.userNotFound') {
-                setError(t('adminUsers.roles.errors.userNotFound'));
-            }
-            else if (code === 'admin.roles.notFound') {
-                setError(t('adminUsers.roles.errors.roleNotFound'));
-            }
-            else {
-                setError(t('adminUsers.roles.errors.fallback'));
-            }
-        }
-        finally {
-            setSaving(false);
-        }
-    }
-    return (<div className={cx('byline-user-roles-wrap', styles.wrap)}>
-      {error ? <Alert intent="danger">{error}</Alert> : null}
-      {successMessage ? <Alert intent="success">{successMessage}</Alert> : null}
-
-      {allRoles.length === 0 ? (<p className={cx('muted', 'byline-user-roles-empty', styles.empty)}>
-          {t('adminUsers.roles.emptyCatalog')}
-        </p>) : (<div className={cx('byline-user-roles-list', styles.list)}>
-          {allRoles.map((role) => (<div key={role.id} className={cx('byline-user-roles-row', styles.row)}>
-              <Checkbox id={`role-${role.id}`} name={`role-${role.id}`} checked={selected.has(role.id)} disabled={saving} onCheckedChange={(checked) => handleToggle(role.id, checked === true)} containerClasses={cx('byline-user-roles-checkbox-auto', styles['checkbox-auto'])} componentClasses={cx('byline-user-roles-checkbox-auto', styles['checkbox-auto'])}/>
-              <label htmlFor={`role-${role.id}`} className={cx('byline-user-roles-label', styles.label)}>
-                <div className={cx('byline-user-roles-label-head', styles['label-head'])}>
-                  <span className={cx('byline-user-roles-name', styles.name)}>{role.name}</span>
-                  <code className={cx('byline-user-roles-machine', styles.machine)}>
-                    {role.machine_name}
-                  </code>
-                </div>
-                {role.description ? (<p className={cx('muted', 'byline-user-roles-description', styles.description)}>
-                    {role.description}
-                  </p>) : null}
-              </label>
-            </div>))}
-        </div>)}
-
-      <div className={cx('byline-user-roles-actions', styles.actions)}>
-        <Button type="button" intent="secondary" size="xs" onClick={onClose} disabled={saving} className={cx('byline-user-roles-action', styles.action)}>
-          {successMessage ? t('common.actions.close') : t('common.actions.cancel')}
-        </Button>
-        <Button type="button" intent="primary" size="xs" onClick={() => void handleSave()} disabled={saving || !isDirty} className={cx('byline-user-roles-action', styles.action)}>
-          {saving ? <LoaderEllipsis size={30}/> : t('common.actions.save')}
-        </Button>
-      </div>
-    </div>);
-}
-function getErrorCode(err) {
-    return typeof err?.code === 'string'
-        ? err.code
-        : null;
-}

package/dist/modules/admin-users/components/set-password.jsx

@@ -1,133 +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
- */
-/**
- * Set-password drawer form.
- *
- * Admin-facing "set this user's password" flow — used when an admin is
- * resetting someone else's password. Server-side policy (min 12 chars,
- * max 256) is duplicated client-side via Zod for immediate field
- * validation. A matching-confirmation field catches typos without a
- * round-trip.
- *
- * The server fn returns the updated user so we can lift the bumped
- * `vid` back into the container; the drawer doesn't need to re-fetch.
- */
-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, InputPassword, 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 './set-password.module.css';
-export function SetPassword({ user, onClose, onSuccess }) {
-    const { setAdminUserPassword } = useBylineAdminServices();
-    const { t } = useTranslation('byline-admin');
-    const [formError, setFormError] = useState(null);
-    const [successMessage, setSuccessMessage] = useState(null);
-    const setPasswordFormSchema = useMemo(() => z
-        .object({
-        password: passwordSchema,
-        confirm: z.string({
-            message: t('account.changePassword.errors.confirmRequired'),
-        }),
-    })
-        .refine((v) => v.password === v.confirm, {
-        message: t('account.changePassword.errors.mismatch'),
-        path: ['confirm'],
-    }), [t]);
-    const form = useForm({
-        defaultValues: { password: '', confirm: '' },
-        validationLogic: revalidateLogic({
-            mode: 'blur',
-            modeAfterSubmission: 'change',
-        }),
-        validators: {
-            onDynamic: setPasswordFormSchema,
-        },
-        onSubmit: async ({ value }) => {
-            setFormError(null);
-            setSuccessMessage(null);
-            try {
-                const updated = await setAdminUserPassword({
-                    data: { id: user.id, vid: user.vid, password: value.password },
-                });
-                setSuccessMessage(t('account.changePassword.feedback.updated'));
-                form.reset({ password: '', confirm: '' });
-                onSuccess?.(updated);
-            }
-            catch (err) {
-                const code = getErrorCode(err);
-                if (code === 'admin.users.versionConflict') {
-                    setFormError(t('adminUsers.update.errors.versionConflict'));
-                    return;
-                }
-                if (code === 'admin.users.notFound') {
-                    setFormError(t('adminUsers.update.errors.notFound'));
-                    return;
-                }
-                setFormError(t('adminUsers.setPassword.errors.fallback'));
-            }
-        },
-    });
-    return (<div className={cx('byline-user-set-password-wrap', styles.wrap)}>
-      <form method="post" noValidate onSubmit={(event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            void form.handleSubmit();
-        }} className={cx('byline-user-set-password-form', styles.form)}>
-        {formError ? <Alert intent="danger">{formError}</Alert> : null}
-        {successMessage ? <Alert intent="success">{successMessage}</Alert> : null}
-
-        <p className="muted">{t('adminUsers.setPassword.intro', { email: user.email })}</p>
-
-        <form.Field name="password">
-          {(field) => (<InputPassword label={t('account.changePassword.fields.new')} id="password" 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={translateValidationError(t, firstError(field.state.meta.errors))} autoComplete="new-password" required/>)}
-        </form.Field>
-
-        <form.Field name="confirm">
-          {(field) => (<InputPassword label={t('account.changePassword.fields.confirm')} id="confirm" 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="new-password" required/>)}
-        </form.Field>
-
-        <div className={cx('byline-user-set-password-actions', styles.actions)}>
-          <Button type="button" intent="secondary" size="sm" onClick={onClose} className={cx('byline-user-set-password-action', styles.action)}>
-            {successMessage ? t('common.actions.close') : t('common.actions.cancel')}
-          </Button>
-          <form.Subscribe selector={(state) => ({
-            canSubmit: state.canSubmit,
-            isSubmitting: state.isSubmitting,
-            isDirty: state.isDirty,
-        })}>
-            {({ canSubmit, isSubmitting }) => (<Button size="sm" intent="primary" type="submit" disabled={!canSubmit || isSubmitting} className={cx('byline-user-set-password-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/update.jsx

@@ -1,215 +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
- */
-/**
- * Account details drawer form.
- *
- * Client-side validation runs through TanStack Form's `onDynamic` +
- * Zod — same rules the server uses, re-declared here so field errors
- * show up without a network round-trip. On submit the form diffs
- * against the original row and sends only the *changed* fields as a
- * patch, plus the `vid` the form was opened with, so a concurrent edit
- * elsewhere comes back as `admin.users.versionConflict` and we surface
- * a reload prompt.
- */
-import { useMemo, useState } from 'react';
-import { revalidateLogic, useForm } from '@tanstack/react-form-start';
-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 { useBylineAdminServices } from '../../../services/admin-services-context.js';
-import styles from './update.module.css';
-const MAX_NAME = 100;
-const MAX_USERNAME = 100;
-const MAX_EMAIL = 254;
-function defaultsFrom(user) {
-    return {
-        given_name: user.given_name ?? '',
-        family_name: user.family_name ?? '',
-        username: user.username ?? '',
-        email: user.email,
-        is_super_admin: user.is_super_admin,
-        is_enabled: user.is_enabled,
-        is_email_verified: user.is_email_verified,
-    };
-}
-/** Build a patch object containing only fields whose values differ from the original user row. */
-function buildPatch(values, user) {
-    const patch = {};
-    // Text fields: treat empty string as null (clear). null === null matches,
-    // '' → null ≠ current null stays consistent.
-    const normaliseText = (value) => (value.trim().length > 0 ? value : null);
-    const nextGiven = normaliseText(values.given_name);
-    const nextFamily = normaliseText(values.family_name);
-    const nextUsername = normaliseText(values.username);
-    if (nextGiven !== user.given_name)
-        patch.given_name = nextGiven;
-    if (nextFamily !== user.family_name)
-        patch.family_name = nextFamily;
-    if (nextUsername !== user.username)
-        patch.username = nextUsername;
-    if (values.email !== user.email)
-        patch.email = values.email;
-    if (values.is_super_admin !== user.is_super_admin)
-        patch.is_super_admin = values.is_super_admin;
-    if (values.is_enabled !== user.is_enabled)
-        patch.is_enabled = values.is_enabled;
-    if (values.is_email_verified !== user.is_email_verified)
-        patch.is_email_verified = values.is_email_verified;
-    return patch;
-}
-export function UpdateUser({ user, onClose, onSuccess }) {
-    const { updateAdminUser } = useBylineAdminServices();
-    const { t } = useTranslation('byline-admin');
-    const [formError, setFormError] = useState(null);
-    const [successMessage, setSuccessMessage] = useState(null);
-    const updateUserSchema = useMemo(() => z.object({
-        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 })),
-        email: z
-            .email({ message: t('account.update.errors.invalidEmail') })
-            .min(3)
-            .max(MAX_EMAIL, t('account.update.errors.emailTooLong', { max: MAX_EMAIL })),
-        is_super_admin: z.boolean(),
-        is_enabled: z.boolean(),
-        is_email_verified: z.boolean(),
-    }), [t]);
-    const form = useForm({
-        defaultValues: defaultsFrom(user),
-        validationLogic: revalidateLogic({
-            mode: 'blur',
-            modeAfterSubmission: 'change',
-        }),
-        validators: {
-            onDynamic: updateUserSchema,
-        },
-        onSubmit: async ({ value }) => {
-            setFormError(null);
-            setSuccessMessage(null);
-            const patch = buildPatch(value, user);
-            if (Object.keys(patch).length === 0) {
-                setSuccessMessage(t('common.feedback.noChanges'));
-                return;
-            }
-            try {
-                const updated = await updateAdminUser({
-                    data: { id: user.id, vid: user.vid, patch },
-                });
-                setSuccessMessage(t('common.feedback.saved'));
-                onSuccess?.(updated);
-            }
-            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;
-                }
-                if (code === 'admin.users.versionConflict') {
-                    setFormError(t('adminUsers.update.errors.versionConflict'));
-                    return;
-                }
-                if (code === 'admin.users.notFound') {
-                    setFormError(t('adminUsers.update.errors.notFound'));
-                    return;
-                }
-                setFormError(t('common.errors.couldNotSave'));
-            }
-        },
-    });
-    return (<div className={cx('byline-user-update-wrap', styles.wrap)}>
-      <form method="post" noValidate onSubmit={(event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            void form.handleSubmit();
-        }} className={cx('byline-user-update-form', styles.form)}>
-        {formError ? <Alert intent="danger">{formError}</Alert> : null}
-        {successMessage ? <Alert intent="success">{successMessage}</Alert> : null}
-
-        <form.Field name="given_name">
-          {(field) => (<Input label={t('account.update.fields.givenName')} id="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="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>
-
-        <form.Field name="username">
-          {(field) => (<Input label={t('account.update.fields.username')} id="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('account.update.fields.usernameHelp')} autoComplete="username"/>)}
-        </form.Field>
-
-        <form.Field name="email">
-          {(field) => (<Input label={t('common.fields.email')} id="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>
-
-        <div className={cx('byline-user-update-flags', styles.flags)}>
-          <form.Field name="is_enabled">
-            {(field) => (<Checkbox id="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="is_email_verified" name={field.name} label={t('adminUsers.create.flags.emailVerifiedLabel')} checked={field.state.value} onCheckedChange={(checked) => field.handleChange(checked === true)}/>)}
-          </form.Field>
-
-          <form.Field name="is_super_admin">
-            {(field) => (<Checkbox id="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-update-actions', styles.actions)}>
-          <Button type="button" intent="secondary" size="sm" onClick={onClose} className={cx('byline-user-update-action', styles.action)}>
-            {successMessage ? t('common.actions.close') : t('common.actions.cancel')}
-          </Button>
-          <form.Subscribe selector={(state) => ({
-            canSubmit: state.canSubmit,
-            isSubmitting: state.isSubmitting,
-            isDirty: state.isDirty,
-        })}>
-            {({ canSubmit, isSubmitting }) => (<Button size="sm" intent="primary" type="submit" disabled={!canSubmit || isSubmitting} className={cx('byline-user-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;
-}
-/**
- * Extract the admin-users error code from a thrown server-fn response.
- * Typed errors (`AdminUsersError`, `AuthError`) survive the server-fn
- * boundary with their `code` intact thanks to the `BylineCodedError`
- * serialization adapter registered in `src/start.ts`.
- */
-function getErrorCode(err) {
-    return typeof err?.code === 'string'
-        ? err.code
-        : null;
-}