@byline/admin 5.1.2 → 5.1.3

package/dist/modules/admin-account/components/change-password.jsx

@@ -0,0 +1,169 @@
+'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
+ */
+/**
+ * Self-service change-password drawer form.
+ *
+ * Distinct from the admin-users `set-password.tsx`:
+ *
+ *   - Requires the current password as defence against
+ *     session-hijack abuse. The server verifies it against the
+ *     stored hash before swapping in the new one — wrong current
+ *     password surfaces as `admin.account.invalidCurrentPassword`.
+ *   - Confirmation field catches typos before round-trip.
+ *
+ * Successful password changes end native sessions. Confirmation remains visible
+ * until the user reloads the protected account page to reach sign-in.
+ */
+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 './change-password.module.css';
+export function ChangeAccountPassword({ account, onClose, onSuccess }) {
+    const { changeAccountPassword } = useBylineAdminServices();
+    const { t } = useTranslation('byline-admin');
+    const [formError, setFormError] = useState(null);
+    const [successMessage, setSuccessMessage] = useState(null);
+    // Schema rebuilt per-render so error messages reflect the active
+    // locale. `passwordSchema` from `@byline/core/validation` emits stable
+    // error codes — `translateValidationError(t, …)` below maps them onto
+    // the active locale at render time.
+    const changePasswordFormSchema = useMemo(() => z
+        .object({
+        currentPassword: z
+            .string()
+            .min(1, { message: t('account.changePassword.errors.currentRequired') }),
+        newPassword: passwordSchema,
+        confirm: z.string({
+            message: t('account.changePassword.errors.confirmRequired'),
+        }),
+    })
+        .refine((v) => v.newPassword === v.confirm, {
+        message: t('account.changePassword.errors.mismatch'),
+        path: ['confirm'],
+    }), [t]);
+    const form = useForm({
+        defaultValues: { currentPassword: '', newPassword: '', confirm: '' },
+        validationLogic: revalidateLogic({
+            mode: 'blur',
+            modeAfterSubmission: 'change',
+        }),
+        validators: {
+            onDynamic: changePasswordFormSchema,
+        },
+        onSubmit: async ({ value }) => {
+            setFormError(null);
+            setSuccessMessage(null);
+            try {
+                const updated = await changeAccountPassword({
+                    data: {
+                        vid: account.vid,
+                        currentPassword: value.currentPassword,
+                        newPassword: value.newPassword,
+                    },
+                });
+                setSuccessMessage(t('account.changePassword.feedback.updated'));
+                form.reset({ currentPassword: '', newPassword: '', confirm: '' });
+                onSuccess?.(updated);
+            }
+            catch (err) {
+                const code = getErrorCode(err);
+                if (code === 'admin.account.invalidCurrentPassword') {
+                    const message = t('account.changePassword.errors.currentIncorrect');
+                    form.setFieldMeta('currentPassword', (meta) => ({
+                        ...meta,
+                        errorMap: { ...meta.errorMap, onServer: message },
+                        errors: [message],
+                    }));
+                    return;
+                }
+                if (code === 'admin.users.versionConflict') {
+                    setFormError(t('common.errors.versionConflict'));
+                    return;
+                }
+                if (code === 'admin.account.notFound') {
+                    setFormError(t('common.errors.accountNotFound'));
+                    return;
+                }
+                setFormError(t('account.changePassword.errors.couldNotChange'));
+            }
+        },
+    });
+    if (successMessage) {
+        return (<div className={cx('byline-account-change-password-wrap', styles.wrap)}>
+        <div role="status">
+          <Alert intent="success">{successMessage}</Alert>
+        </div>
+        <Button type="button" intent="primary" onClick={() => window.location.reload()}>
+          {t('auth.signIn.title')}
+        </Button>
+      </div>);
+    }
+    return (<div className={cx('byline-account-change-password-wrap', styles.wrap)}>
+      <form method="post" noValidate onSubmit={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            void form.handleSubmit();
+        }} className={cx('byline-account-change-password-form', styles.form)}>
+        {formError ? <Alert intent="danger">{formError}</Alert> : null}
+        {successMessage ? <Alert intent="success">{successMessage}</Alert> : null}
+
+        <p className="muted">{t('account.changePassword.intro')}</p>
+
+        <form.Field name="currentPassword">
+          {(field) => (<InputPassword label={t('account.changePassword.fields.current')} id="currentPassword" 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="current-password" required/>)}
+        </form.Field>
+
+        <form.Field name="newPassword">
+          {(field) => (<InputPassword label={t('account.changePassword.fields.new')} id="newPassword" 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-account-change-password-actions', styles.actions)}>
+          <Button type="button" intent="secondary" size="sm" onClick={onClose} className={cx('byline-account-change-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-account-change-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-account/components/container.jsx

@@ -0,0 +1,164 @@
+'use client';
+import { useState } from 'react';
+import { LocalDateTime } from '@byline/admin/react';
+import { useTranslation } from '@byline/i18n/react';
+import { CloseIcon, Drawer, EditIcon, IconButton } from '@byline/ui/react';
+import cx from 'clsx';
+import { ChangeAccountPassword } from './change-password.js';
+import styles from './container.module.css';
+import { Preferences } from './preferences.js';
+import { ThemeSwitch } from './theme-switch.js';
+import { UpdateAccount } from './update.js';
+const panelComponents = {
+    update: UpdateAccount,
+    change_password: ChangeAccountPassword,
+    preferences: Preferences,
+    empty: () => null,
+};
+function ContainerSection({ title, onEdit, editAriaLabel, children, }) {
+    return (<div className={cx('byline-account-section', styles.section)}>
+      <div className={cx('byline-account-section-head', styles['section-head'])}>
+        <h2>{title}</h2>
+        {onEdit ? (<IconButton variant="text" onClick={onEdit} aria-label={editAriaLabel ?? title}>
+            <EditIcon width="20px" height="20px"/>
+          </IconButton>) : null}
+      </div>
+      <div>{children}</div>
+    </div>);
+}
+export function AccountSelfContainer({ account }) {
+    const { t } = useTranslation('byline-admin');
+    const [currentAccount, setCurrentAccount] = useState(account);
+    const [current, setCurrent] = useState('empty');
+    const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+    const openDrawer = (key) => () => {
+        setCurrent(key);
+        setIsDrawerOpen(true);
+    };
+    const closeDrawer = () => {
+        setCurrent('empty');
+        setIsDrawerOpen(false);
+    };
+    const handleSuccess = (updated) => {
+        setCurrentAccount(updated);
+    };
+    const Panel = panelComponents[current];
+    const panelTitles = {
+        update: t('account.sections.profile'),
+        change_password: t('account.sections.password'),
+        preferences: t('account.sections.preferences'),
+        empty: '',
+    };
+    const editAriaFor = (section) => t('account.editAriaLabel', { section });
+    return (<>
+      <div className={cx('byline-account-grid', styles.grid)}>
+        <div className={cx('byline-account-column', styles.column)}>
+          <ContainerSection title={t('account.sections.profile')} onEdit={openDrawer('update')} editAriaLabel={editAriaFor(t('account.sections.profile'))}>
+            <p className={cx('byline-account-line', styles.line)}>
+              <span className="muted">{t('account.profile.emailColon')}</span>{' '}
+              {currentAccount.email}
+            </p>
+            <p className={cx('byline-account-line', styles.line)}>
+              <span className="muted">{t('account.profile.givenName')}</span>{' '}
+              {currentAccount.given_name ?? (<span className={cx('muted', 'byline-account-not-set', styles['not-set'])}>
+                  {t('common.notSet')}
+                </span>)}
+            </p>
+            <p className={cx('byline-account-line', styles.line)}>
+              <span className="muted">{t('account.profile.familyName')}</span>{' '}
+              {currentAccount.family_name ?? (<span className={cx('muted', 'byline-account-not-set', styles['not-set'])}>
+                  {t('common.notSet')}
+                </span>)}
+            </p>
+            <p className={cx('byline-account-line', styles.line)}>
+              <span className="muted">{t('account.profile.username')}</span>{' '}
+              {currentAccount.username ?? (<span className={cx('muted', 'byline-account-not-set', styles['not-set'])}>
+                  {t('common.notSet')}
+                </span>)}
+            </p>
+            <div className={cx('muted', 'byline-account-meta', styles.meta)}>
+              <p>
+                <span className="font-bold">{t('account.profile.created')}&nbsp;</span>
+                <LocalDateTime value={currentAccount.created_at}/>
+              </p>
+              <p>
+                <span className="font-bold">{t('account.profile.updated')}&nbsp;</span>
+                <LocalDateTime value={currentAccount.updated_at}/>
+              </p>
+              <p className={cx('byline-account-line', styles.line)}>
+                <span className="font-bold">{t('account.profile.lastLogin')}&nbsp;</span>
+                <LocalDateTime value={currentAccount.last_login} fallback={t('common.never')}/>
+              </p>
+            </div>
+          </ContainerSection>
+
+          <ContainerSection title={t('account.sections.preferences')} onEdit={openDrawer('preferences')} editAriaLabel={editAriaFor(t('account.sections.preferences'))}>
+            <p className={cx('byline-account-line', styles.line)}>
+              <span className="muted">{t('account.preferences.interfaceLanguage')}</span>{' '}
+              {currentAccount.preferred_locale ?? (<span className={cx('muted', 'byline-account-not-set', styles['not-set'])}>
+                  {t('language.useBrowserDefault')}
+                </span>)}
+            </p>
+            <p className={cx('muted', 'byline-account-status-help', styles['status-help'])}>
+              {t('account.preferences.help')}
+            </p>
+          </ContainerSection>
+        </div>
+
+        <div className={cx('byline-account-column', styles.column)}>
+          <ContainerSection title={t('account.sections.password')} onEdit={openDrawer('change_password')} editAriaLabel={editAriaFor(t('account.sections.password'))}>
+            <p className={cx('byline-account-line', styles.line)}>{t('account.password.intro')}</p>
+          </ContainerSection>
+
+          <ContainerSection title={t('account.sections.appearance')}>
+            <ThemeSwitch />
+          </ContainerSection>
+
+          <ContainerSection title={t('account.sections.status')}>
+            <p className={cx('byline-account-line', styles.line)}>
+              <span className="muted">{t('account.status.superAdmin')}</span>{' '}
+              {currentAccount.is_super_admin ? t('common.boolean.yes') : t('common.boolean.no')}
+            </p>
+            <p className={cx('byline-account-line', styles.line)}>
+              <span className="muted">{t('account.status.emailVerified')}</span>{' '}
+              {currentAccount.is_email_verified ? t('common.boolean.yes') : t('common.boolean.no')}
+            </p>
+            <p className={cx('byline-account-line', styles.line)}>
+              <span className="muted">{t('account.status.status')}</span>{' '}
+              <span className={currentAccount.is_enabled
+            ? cx('byline-account-status-on', styles['status-on'])
+            : cx('byline-account-status-off', styles['status-off'])}>
+                {currentAccount.is_enabled
+            ? t('account.status.enabled')
+            : t('account.status.disabled')}
+              </span>
+            </p>
+            <p className={cx('muted', 'byline-account-status-help', styles['status-help'])}>
+              {t('account.status.help')}
+            </p>
+          </ContainerSection>
+        </div>
+      </div>
+
+      <Drawer id="admin-account-drawer" closeOnOverlayClick={false} width="medium" topOffset="46px" isOpen={isDrawerOpen} onDismiss={closeDrawer} className={cx('byline-account-drawer', styles.drawer)}>
+        <Drawer.Container aria-hidden={!isDrawerOpen} className={cx('byline-account-drawer-body', styles['drawer-body'])}>
+          <Drawer.TopActions>
+            <button type="button" tabIndex={0} className={cx('byline-account-drawer-skip', styles['drawer-skip'])}>
+              no action
+            </button>
+            <IconButton aria-label={t('common.actions.close')} size="sm" onClick={closeDrawer}>
+              <CloseIcon width="14px" height="14px" svgClassName="white-icon stroke-white"/>
+            </IconButton>
+          </Drawer.TopActions>
+          <Drawer.Header>
+            <h2>{panelTitles[current]}</h2>
+          </Drawer.Header>
+          <Drawer.Content>
+            <div className={cx('byline-account-drawer-scroll', styles['drawer-scroll'])}>
+              <Panel account={currentAccount} onClose={closeDrawer} onSuccess={handleSuccess}/>
+            </div>
+          </Drawer.Content>
+        </Drawer.Container>
+      </Drawer>
+    </>);
+}

package/dist/modules/admin-account/components/preferences.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
+ */
+/**
+ * Self-service Preferences form.
+ *
+ * General-purpose container for the signed-in admin's UI preferences.
+ * Today the only setting is the interface locale; future preferences
+ * (theme, default landing page, density, etc.) land here as additional
+ * `<form.Field>` blocks rather than spinning up a new drawer per
+ * setting.
+ *
+ * Locale write surface mirrors the chrome-bar `<LanguageMenu>` — both
+ * route through `setAdminLocale` (the service) →
+ * `setAdminLocaleFn` (the host server fn) → the shared
+ * cookie + `admin_users.preferred_locale` writes. The dropdown carries
+ * an explicit "Use browser default" entry that maps to `null`
+ * server-side, clearing the column and re-engaging the detection
+ * cascade (cookie → Accept-Language → defaultLocale). The sentinel
+ * value `__auto__` is the wire form for that option; the service
+ * signature uses `string | null`.
+ *
+ * On save, the freshened `AccountResponse` returned by the server fn
+ * is lifted into the parent container so the read-only Preferences
+ * section re-renders without a route reload. Mirrors how
+ * `UpdateAccount` threads its result through `onSuccess`.
+ */
+import { useMemo, useState } from 'react';
+import { revalidateLogic, useForm } from '@tanstack/react-form-start';
+import { getAdminConfig } from '@byline/core';
+import { useTranslation } from '@byline/i18n/react';
+import { Alert, Button, LoaderEllipsis, Select } from '@byline/ui/react';
+import cx from 'clsx';
+import { z } from 'zod';
+import { useBylineAdminServices } from '../../../services/admin-services-context.js';
+import styles from './preferences.module.css';
+/**
+ * Sentinel for the "Use browser default" entry in the locale select.
+ * The widget's value type is `string`; we map this sentinel to `null`
+ * at submit time. Prefixed with double-underscore to make collision
+ * with a real BCP 47 tag structurally impossible (no real locale code
+ * contains underscores).
+ */
+const AUTO_VALUE = '__auto__';
+const preferencesSchema = z.object({
+    // Validation against the configured locale set happens server-side
+    // (it's the single source of truth). The form schema just enforces
+    // non-emptiness — `AUTO_VALUE` is a valid selection.
+    locale: z.string().min(1, { message: 'Select a language' }),
+});
+function defaultsFrom(account) {
+    return { locale: account.preferred_locale ?? AUTO_VALUE };
+}
+export function Preferences({ account, onClose, onSuccess }) {
+    const { t } = useTranslation('byline-admin');
+    const { setAdminLocale } = useBylineAdminServices();
+    const [formError, setFormError] = useState(null);
+    const [successMessage, setSuccessMessage] = useState(null);
+    // Build the dropdown's items from the host's configured interface
+    // locales. `localeDefinitions` carries host-authored display names
+    // ("Français" vs CLDR's lowercase "français"); when it's not set,
+    // fall back to the raw code so the form still functions.
+    const localeItems = useMemo(() => {
+        const { i18n } = getAdminConfig();
+        const definitionByCode = new Map((i18n.admin.localeDefinitions ?? []).map((d) => [d.code, d.nativeName]));
+        const items = i18n.admin.locales.map((code) => ({
+            value: code,
+            label: definitionByCode.get(code) ?? code,
+        }));
+        return [{ value: AUTO_VALUE, label: t('language.useBrowserDefault') }, ...items];
+    }, [t]);
+    const form = useForm({
+        defaultValues: defaultsFrom(account),
+        validationLogic: revalidateLogic({
+            mode: 'blur',
+            modeAfterSubmission: 'change',
+        }),
+        validators: {
+            onDynamic: preferencesSchema,
+        },
+        onSubmit: async ({ value }) => {
+            setFormError(null);
+            setSuccessMessage(null);
+            const nextLocale = value.locale === AUTO_VALUE ? null : value.locale;
+            if (nextLocale === (account.preferred_locale ?? null)) {
+                setSuccessMessage(t('common.feedback.noChanges'));
+                return;
+            }
+            try {
+                const result = await setAdminLocale({ data: { locale: nextLocale } });
+                // Pre-auth path returns `account: null`; the form is only
+                // reachable behind an admin session, so `account` should be
+                // populated. Treat absence as a defensive no-op.
+                setSuccessMessage(t('common.feedback.saved'));
+                if (result.account != null) {
+                    onSuccess?.(result.account);
+                }
+            }
+            catch {
+                setFormError(t('common.errors.couldNotSave'));
+            }
+        },
+    });
+    return (<div className={cx('byline-account-preferences-wrap', styles.wrap)}>
+      <form method="post" noValidate onSubmit={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            void form.handleSubmit();
+        }} className={cx('byline-account-preferences-form', styles.form)}>
+        {formError ? <Alert intent="danger">{formError}</Alert> : null}
+        {successMessage ? <Alert intent="success">{successMessage}</Alert> : null}
+
+        <form.Field name="locale">
+          {(field) => (<div className={cx('byline-account-preferences-row', styles.row)}>
+              <label htmlFor="preferences-locale-select" className={cx('byline-account-preferences-label', styles.label)}>
+                {t('account.preferences.languageLabel')}
+              </label>
+              <Select id="preferences-locale-select" size="sm" ariaLabel={t('account.preferences.languageLabel')} value={field.state.value} items={localeItems} onValueChange={(value) => {
+                if (value != null)
+                    field.handleChange(value);
+            }}/>
+              <p className={cx('muted', 'byline-account-preferences-help', styles.help)}>
+                {t('account.preferences.languageHelp')}
+              </p>
+            </div>)}
+        </form.Field>
+
+        <div className={cx('byline-account-preferences-actions', styles.actions)}>
+          <Button type="button" intent="secondary" size="sm" onClick={onClose} className={cx('byline-account-preferences-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-account-preferences-action', styles.action)}>
+                {isSubmitting === true ? <LoaderEllipsis size={42}/> : t('common.actions.save')}
+              </Button>)}
+          </form.Subscribe>
+        </div>
+      </form>
+    </div>);
+}

package/dist/modules/admin-account/components/theme-switch.jsx

@@ -0,0 +1,52 @@
+'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 colour-theme switch for the account "Appearance" card — a
+ * three-way segmented control (Light / Dark / System). Unlike the other
+ * account sections it edits in place rather than through the drawer, so
+ * there's no pencil affordance on its card. See `./theme.ts` for the
+ * host theme contract this reads and writes.
+ */
+import { useEffect, useState } from 'react';
+import { useTranslation } from '@byline/i18n/react';
+import { ButtonGroup, ButtonGroupItem } from '@byline/ui/react';
+import cx from 'clsx';
+import { getThemeMode, setThemeMode } from './theme.js';
+import styles from './theme-switch.module.css';
+export function ThemeSwitch() {
+    const { t } = useTranslation('byline-admin');
+    // SSR and the first client render both show 'system' — a deterministic
+    // value, so there's no hydration mismatch. The actual stored mode is
+    // read once after mount (localStorage is client-only).
+    const [mode, setMode] = useState('system');
+    useEffect(() => {
+        setMode(getThemeMode());
+    }, []);
+    const handleChange = (value) => {
+        // `ButtonGroup`'s union props type the callback as `string | string[]`;
+        // in single-select mode it's a string. A single-select ToggleGroup
+        // also emits '' when the active item is re-clicked (deselect) — a
+        // theme is always set, so ignore anything that isn't a known mode.
+        const next = Array.isArray(value) ? value[0] : value;
+        if (next !== 'light' && next !== 'dark' && next !== 'system')
+            return;
+        setMode(next);
+        setThemeMode(next);
+    };
+    return (<div className={cx('byline-account-theme-switch', styles.wrap)}>
+      <ButtonGroup type="single" size="sm" expandToFit value={mode} onValueChange={handleChange} aria-label={t('account.appearance.colorTheme')} className={cx('byline-account-theme-group', styles.group)}>
+        <ButtonGroupItem value="light">{t('account.appearance.light')}</ButtonGroupItem>
+        <ButtonGroupItem value="dark">{t('account.appearance.dark')}</ButtonGroupItem>
+        <ButtonGroupItem value="system">{t('account.appearance.system')}</ButtonGroupItem>
+      </ButtonGroup>
+      <p className={cx('muted', 'byline-account-theme-help', styles.help)}>
+        {t('account.appearance.help')}
+      </p>
+    </div>);
+}