@byline/admin 5.2.0 → 6.0.0

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

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

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

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