@byline/admin 2.5.2 → 2.6.0

package/src/modules/admin-account/components/container.tsx

@@ -27,15 +27,18 @@
 import type React from 'react'
 import { useState } from 'react'
 
-import { Button, CloseIcon, Drawer, EditIcon, IconButton, LocalDateTime } from '@byline/ui/react'
+import { LocalDateTime } from '@byline/admin/react'
+import { useTranslation } from '@byline/i18n/react'
+import { Button, CloseIcon, Drawer, EditIcon, IconButton } from '@byline/ui/react'
 import cx from 'classnames'
 
 import { ChangeAccountPassword } from './change-password.js'
 import styles from './container.module.css'
+import { Preferences } from './preferences.js'
 import { UpdateAccount } from './update.js'
 import type { AccountResponse } from '../index.js'
 
-type ComponentKey = 'update' | 'change_password' | 'empty'
+type ComponentKey = 'update' | 'change_password' | 'preferences' | 'empty'
 
 interface PanelProps {
   account: AccountResponse
@@ -43,20 +46,22 @@ interface PanelProps {
   onSuccess?: (account: AccountResponse) => void
 }
 
-const panels: Record<ComponentKey, { title: string; component: React.ComponentType<PanelProps> }> =
-  {
-    update: { title: 'Profile', component: UpdateAccount },
-    change_password: { title: 'Change Password', component: ChangeAccountPassword },
-    empty: { title: '', component: () => null },
-  }
+const panelComponents: Record<ComponentKey, React.ComponentType<PanelProps>> = {
+  update: UpdateAccount,
+  change_password: ChangeAccountPassword,
+  preferences: Preferences,
+  empty: () => null,
+}
 
 function ContainerSection({
   title,
   onEdit,
+  editAriaLabel,
   children,
 }: {
   title: string
   onEdit?: () => void
+  editAriaLabel?: string
   children: React.ReactNode
 }) {
   return (
@@ -64,7 +69,7 @@ function ContainerSection({
       <div className={cx('byline-account-section-head', styles['section-head'])}>
         <h2>{title}</h2>
         {onEdit ? (
-          <IconButton variant="text" onClick={onEdit} aria-label={`Edit ${title}`}>
+          <IconButton variant="text" onClick={onEdit} aria-label={editAriaLabel ?? title}>
             <EditIcon width="20px" height="20px" />
           </IconButton>
         ) : null}
@@ -79,6 +84,7 @@ interface AccountSelfContainerProps {
 }
 
 export function AccountSelfContainer({ account }: AccountSelfContainerProps) {
+  const { t } = useTranslation('byline-admin')
   const [currentAccount, setCurrentAccount] = useState<AccountResponse>(account)
   const [current, setCurrent] = useState<ComponentKey>('empty')
   const [isDrawerOpen, setIsDrawerOpen] = useState(false)
@@ -95,82 +101,120 @@ export function AccountSelfContainer({ account }: AccountSelfContainerProps) {
     setCurrentAccount(updated)
   }
 
-  const Panel = panels[current].component
+  const Panel = panelComponents[current]
+  const panelTitles: Record<ComponentKey, string> = {
+    update: t('account.sections.profile'),
+    change_password: t('account.sections.password'),
+    preferences: t('account.sections.preferences'),
+    empty: '',
+  }
+  const editAriaFor = (section: string) => t('account.editAriaLabel', { section })
 
   return (
     <>
       <div className={cx('byline-account-grid', styles.grid)}>
         <div className={cx('byline-account-column', styles.column)}>
-          <ContainerSection title="Profile" onEdit={openDrawer('update')}>
+          <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">Email:</span> {currentAccount.email}
+              <span className="muted">{t('account.profile.emailColon')}</span>{' '}
+              {currentAccount.email}
             </p>
             <p className={cx('byline-account-line', styles.line)}>
-              <span className="muted">Given name:</span>{' '}
+              <span className="muted">{t('account.profile.givenName')}</span>{' '}
               {currentAccount.given_name ?? (
                 <span className={cx('muted', 'byline-account-not-set', styles['not-set'])}>
-                  Not set
+                  {t('common.notSet')}
                 </span>
               )}
             </p>
             <p className={cx('byline-account-line', styles.line)}>
-              <span className="muted">Family name:</span>{' '}
+              <span className="muted">{t('account.profile.familyName')}</span>{' '}
               {currentAccount.family_name ?? (
                 <span className={cx('muted', 'byline-account-not-set', styles['not-set'])}>
-                  Not set
+                  {t('common.notSet')}
                 </span>
               )}
             </p>
             <p className={cx('byline-account-cta-line', styles['cta-line'])}>
-              <span className="muted">Username:</span>{' '}
+              <span className="muted">{t('account.profile.username')}</span>{' '}
               {currentAccount.username ?? (
                 <span className={cx('muted', 'byline-account-not-set', styles['not-set'])}>
-                  Not set
+                  {t('common.notSet')}
                 </span>
               )}
             </p>
             <Button size="sm" onClick={openDrawer('update')}>
-              Edit Profile
+              {t('account.profile.editButton')}
             </Button>
             <div className={cx('muted', 'byline-account-meta', styles.meta)}>
               <p>
-                <span className="font-bold">Created:&nbsp;</span>
+                <span className="font-bold">{t('account.profile.created')}&nbsp;</span>
                 <LocalDateTime value={currentAccount.created_at} />
               </p>
               <p>
-                <span className="font-bold">Updated:&nbsp;</span>
+                <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">Last login:&nbsp;</span>
-                <LocalDateTime value={currentAccount.last_login} fallback="Never" />
+                <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('byline-account-cta-line', styles['cta-line'])}>
+              <Button size="sm" onClick={openDrawer('preferences')}>
+                {t('account.preferences.editButton')}
+              </Button>
+            </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="Password" onEdit={openDrawer('change_password')}>
+          <ContainerSection
+            title={t('account.sections.password')}
+            onEdit={openDrawer('change_password')}
+            editAriaLabel={editAriaFor(t('account.sections.password'))}
+          >
             <p className={cx('byline-account-cta-line', styles['cta-line'])}>
-              Change the password used to sign in to the admin. You'll need to enter your current
-              password to confirm the change.
+              {t('account.password.intro')}
             </p>
             <Button size="sm" onClick={openDrawer('change_password')}>
-              Change Password
+              {t('account.password.editButton')}
             </Button>
           </ContainerSection>
 
-          <ContainerSection title="Account Status">
+          <ContainerSection title={t('account.sections.status')}>
             <p className={cx('byline-account-line', styles.line)}>
-              <span className="muted">Super admin:</span>{' '}
-              {currentAccount.is_super_admin ? 'Yes' : 'No'}
+              <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">Email verified:</span>{' '}
-              {currentAccount.is_email_verified ? 'Yes' : 'No'}
+              <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">Status:</span>{' '}
+              <span className="muted">{t('account.status.status')}</span>{' '}
               <span
                 className={
                   currentAccount.is_enabled
@@ -178,12 +222,13 @@ export function AccountSelfContainer({ account }: AccountSelfContainerProps) {
                     : cx('byline-account-status-off', styles['status-off'])
                 }
               >
-                {currentAccount.is_enabled ? 'Enabled' : 'Disabled'}
+                {currentAccount.is_enabled
+                  ? t('account.status.enabled')
+                  : t('account.status.disabled')}
               </span>
             </p>
             <p className={cx('muted', 'byline-account-status-help', styles['status-help'])}>
-              These flags are managed by an admin with the appropriate permissions and are not
-              self-editable.
+              {t('account.status.help')}
             </p>
           </ContainerSection>
         </div>
@@ -210,12 +255,12 @@ export function AccountSelfContainer({ account }: AccountSelfContainerProps) {
             >
               no action
             </button>
-            <IconButton aria-label="Close" size="sm" onClick={closeDrawer}>
+            <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>{panels[current].title}</h2>
+            <h2>{panelTitles[current]}</h2>
           </Drawer.Header>
           <Drawer.Content>
             <div className={cx('byline-account-drawer-scroll', styles['drawer-scroll'])}>

package/src/modules/admin-account/components/preferences.module.css

@@ -0,0 +1,60 @@
+/**
+ * Preferences — self-service account-preferences form (drawer body).
+ *
+ * Override handles:
+ *   .byline-account-preferences-wrap    — outer container
+ *   .byline-account-preferences-form    — vertical-stack form element
+ *   .byline-account-preferences-row     — label + control row (per field)
+ *   .byline-account-preferences-label   — text label above the control
+ *   .byline-account-preferences-help    — muted help-text line
+ *   .byline-account-preferences-actions — Cancel/Save row
+ *   .byline-account-preferences-action  — buttons in the actions row
+ */
+
+.wrap,
+:global(.byline-account-preferences-wrap) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  padding: var(--spacing-4);
+  margin-top: var(--spacing-4);
+}
+
+.form,
+:global(.byline-account-preferences-form) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  padding-top: var(--spacing-8);
+}
+
+.row,
+:global(.byline-account-preferences-row) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
+
+.label,
+:global(.byline-account-preferences-label) {
+  font-weight: 500;
+}
+
+.help,
+:global(.byline-account-preferences-help) {
+  font-size: 0.875rem;
+}
+
+.actions,
+:global(.byline-account-preferences-actions) {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-8);
+  margin-top: var(--spacing-16);
+}
+
+.action,
+:global(.byline-account-preferences-action) {
+  min-width: 4rem;
+}

package/src/modules/admin-account/components/preferences.tsx

@@ -0,0 +1,203 @@
+'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 `setInterfaceLocale` (the service) →
+ * `setInterfaceLocaleFn` (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 { getClientConfig } from '@byline/core'
+import { Alert, Button, LoaderEllipsis, Select } from '@byline/ui/react'
+import cx from 'classnames'
+import { z } from 'zod'
+
+import { useBylineAdminServices } from '../../../services/admin-services-context.js'
+import styles from './preferences.module.css'
+import type { AccountResponse } from '../index.js'
+
+/**
+ * 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' }),
+})
+
+type PreferencesValues = z.infer<typeof preferencesSchema>
+
+function defaultsFrom(account: AccountResponse): PreferencesValues {
+  return { locale: account.preferred_locale ?? AUTO_VALUE }
+}
+
+interface PreferencesProps {
+  account: AccountResponse
+  onClose?: () => void
+  onSuccess?: (account: AccountResponse) => void
+}
+
+export function Preferences({ account, onClose, onSuccess }: PreferencesProps) {
+  const { setInterfaceLocale } = useBylineAdminServices()
+  const [formError, setFormError] = useState<string | null>(null)
+  const [successMessage, setSuccessMessage] = useState<string | null>(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 } = getClientConfig()
+    const definitionByCode = new Map(
+      (i18n.interface.localeDefinitions ?? []).map((d) => [d.code, d.nativeName])
+    )
+    const items = i18n.interface.locales.map((code) => ({
+      value: code,
+      label: definitionByCode.get(code) ?? code,
+    }))
+    return [{ value: AUTO_VALUE, label: 'Use browser default' }, ...items]
+  }, [])
+
+  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('No changes to save.')
+        return
+      }
+      try {
+        const result = await setInterfaceLocale({ 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.
+        if (result.account != null) {
+          setSuccessMessage('Saved.')
+          onSuccess?.(result.account)
+        } else {
+          setSuccessMessage('Saved.')
+        }
+      } catch {
+        setFormError('Could not save changes. Please try again.')
+      }
+    },
+  })
+
+  return (
+    <div className={cx('byline-account-preferences-wrap', styles.wrap)}>
+      <form
+        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)}
+              >
+                Interface language
+              </label>
+              <Select<string>
+                id="preferences-locale-select"
+                size="sm"
+                ariaLabel="Interface language"
+                value={field.state.value}
+                items={localeItems}
+                onValueChange={(value) => {
+                  if (value != null) field.handleChange(value)
+                }}
+              />
+              <p className={cx('muted', 'byline-account-preferences-help', styles.help)}>
+                Choose "Use browser default" to let your browser's language settings decide.
+              </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 ? 'Close' : '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} /> : 'Save'}
+              </Button>
+            )}
+          </form.Subscribe>
+        </div>
+      </form>
+    </div>
+  )
+}