@byline/admin 2.5.1 → 2.6.0

package/src/modules/admin-users/components/update.tsx

@@ -20,9 +20,10 @@
  * a reload prompt.
  */
 
-import { useState } from 'react'
+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 'classnames'
 import { z } from 'zod'
@@ -31,20 +32,19 @@ import { useBylineAdminServices } from '../../../services/admin-services-context
 import styles from './update.module.css'
 import type { AdminUserResponse } from '../index.js'
 
-const updateUserSchema = z.object({
-  given_name: z.string().max(100, 'Given name must not exceed 100 characters'),
-  family_name: z.string().max(100, 'Family name must not exceed 100 characters'),
-  username: z.string().max(100, 'Username must not exceed 100 characters'),
-  email: z
-    .email({ message: 'Enter a valid email address' })
-    .min(3)
-    .max(254, 'Email must not exceed 254 characters'),
-  is_super_admin: z.boolean(),
-  is_enabled: z.boolean(),
-  is_email_verified: z.boolean(),
-})
+const MAX_NAME = 100
+const MAX_USERNAME = 100
+const MAX_EMAIL = 254
 
-type UpdateUserValues = z.infer<typeof updateUserSchema>
+type UpdateUserValues = {
+  given_name: string
+  family_name: string
+  username: string
+  email: string
+  is_super_admin: boolean
+  is_enabled: boolean
+  is_email_verified: boolean
+}
 
 function defaultsFrom(user: AdminUserResponse): UpdateUserValues {
   return {
@@ -95,9 +95,33 @@ interface UpdateUserProps {
 
 export function UpdateUser({ user, onClose, onSuccess }: UpdateUserProps) {
   const { updateAdminUser } = useBylineAdminServices()
+  const { t } = useTranslation('byline-admin')
   const [formError, setFormError] = useState<string | null>(null)
   const [successMessage, setSuccessMessage] = useState<string | null>(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({
@@ -112,7 +136,7 @@ export function UpdateUser({ user, onClose, onSuccess }: UpdateUserProps) {
       setSuccessMessage(null)
       const patch = buildPatch(value, user)
       if (Object.keys(patch).length === 0) {
-        setSuccessMessage('No changes to save.')
+        setSuccessMessage(t('common.feedback.noChanges'))
         return
       }
 
@@ -120,30 +144,28 @@ export function UpdateUser({ user, onClose, onSuccess }: UpdateUserProps) {
         const updated = await updateAdminUser({
           data: { id: user.id, vid: user.vid, patch },
         })
-        setSuccessMessage('Saved.')
+        setSuccessMessage(t('common.feedback.saved'))
         onSuccess?.(updated)
       } catch (err) {
         const code = getErrorCode(err)
         if (code === 'admin.users.emailInUse') {
-          // Surface on the email field directly.
+          const message = t('account.update.errors.emailInUse')
           form.setFieldMeta('email', (meta) => ({
             ...meta,
-            errorMap: { ...meta.errorMap, onServer: 'This email is already in use.' },
-            errors: ['This email is already in use.'],
+            errorMap: { ...meta.errorMap, onServer: message },
+            errors: [message],
           }))
           return
         }
         if (code === 'admin.users.versionConflict') {
-          setFormError(
-            'This user has been modified elsewhere since you opened this form. Reload to get the latest values and try again.'
-          )
+          setFormError(t('adminUsers.update.errors.versionConflict'))
           return
         }
         if (code === 'admin.users.notFound') {
-          setFormError('This user no longer exists.')
+          setFormError(t('adminUsers.update.errors.notFound'))
           return
         }
-        setFormError('Could not save changes. Please try again.')
+        setFormError(t('common.errors.couldNotSave'))
       }
     },
   })
@@ -165,7 +187,7 @@ export function UpdateUser({ user, onClose, onSuccess }: UpdateUserProps) {
         <form.Field name="given_name">
           {(field) => (
             <Input
-              label="Given name"
+              label={t('account.update.fields.givenName')}
               id="given_name"
               name={field.name}
               value={field.state.value}
@@ -181,7 +203,7 @@ export function UpdateUser({ user, onClose, onSuccess }: UpdateUserProps) {
         <form.Field name="family_name">
           {(field) => (
             <Input
-              label="Family name"
+              label={t('account.update.fields.familyName')}
               id="family_name"
               name={field.name}
               value={field.state.value}
@@ -197,7 +219,7 @@ export function UpdateUser({ user, onClose, onSuccess }: UpdateUserProps) {
         <form.Field name="username">
           {(field) => (
             <Input
-              label="Username"
+              label={t('account.update.fields.username')}
               id="username"
               name={field.name}
               value={field.state.value}
@@ -205,7 +227,7 @@ export function UpdateUser({ user, onClose, onSuccess }: UpdateUserProps) {
               onChange={(e) => field.handleChange(e.currentTarget.value)}
               error={field.state.meta.errors.length > 0}
               errorText={firstError(field.state.meta.errors)}
-              helpText="Optional. Leave blank to clear."
+              helpText={t('account.update.fields.usernameHelp')}
               autoComplete="username"
             />
           )}
@@ -214,7 +236,7 @@ export function UpdateUser({ user, onClose, onSuccess }: UpdateUserProps) {
         <form.Field name="email">
           {(field) => (
             <Input
-              label="Email"
+              label={t('common.fields.email')}
               id="email"
               name={field.name}
               type="email"
@@ -235,10 +257,10 @@ export function UpdateUser({ user, onClose, onSuccess }: UpdateUserProps) {
               <Checkbox
                 id="is_enabled"
                 name={field.name}
-                label="Enabled"
+                label={t('adminUsers.create.flags.enabledLabel')}
                 checked={field.state.value}
                 onCheckedChange={(checked) => field.handleChange(checked === true)}
-                helpText="Disabled accounts cannot sign in."
+                helpText={t('adminUsers.create.flags.enabledHelp')}
               />
             )}
           </form.Field>
@@ -248,7 +270,7 @@ export function UpdateUser({ user, onClose, onSuccess }: UpdateUserProps) {
               <Checkbox
                 id="is_email_verified"
                 name={field.name}
-                label="Email verified"
+                label={t('adminUsers.create.flags.emailVerifiedLabel')}
                 checked={field.state.value}
                 onCheckedChange={(checked) => field.handleChange(checked === true)}
               />
@@ -260,10 +282,10 @@ export function UpdateUser({ user, onClose, onSuccess }: UpdateUserProps) {
               <Checkbox
                 id="is_super_admin"
                 name={field.name}
-                label="Super admin"
+                label={t('adminUsers.create.flags.superAdminLabel')}
                 checked={field.state.value}
                 onCheckedChange={(checked) => field.handleChange(checked === true)}
-                helpText="Super admins bypass every ability check — grant with care."
+                helpText={t('adminUsers.create.flags.superAdminHelp')}
               />
             )}
           </form.Field>
@@ -277,7 +299,7 @@ export function UpdateUser({ user, onClose, onSuccess }: UpdateUserProps) {
             onClick={onClose}
             className={cx('byline-user-update-action', styles.action)}
           >
-            {successMessage ? 'Close' : 'Cancel'}
+            {successMessage ? t('common.actions.close') : t('common.actions.cancel')}
           </Button>
           <form.Subscribe
             selector={(state) => ({
@@ -294,7 +316,7 @@ export function UpdateUser({ user, onClose, onSuccess }: UpdateUserProps) {
                 disabled={!canSubmit || isSubmitting}
                 className={cx('byline-user-update-action', styles.action)}
               >
-                {isSubmitting === true ? <LoaderEllipsis size={42} /> : 'Save'}
+                {isSubmitting === true ? <LoaderEllipsis size={42} /> : t('common.actions.save')}
               </Button>
             )}
           </form.Subscribe>

package/src/modules/admin-users/dto.ts

@@ -33,6 +33,7 @@ export function toAdminUser(row: AdminUserRow): AdminUserResponse {
     is_super_admin: row.is_super_admin,
     is_enabled: row.is_enabled,
     is_email_verified: row.is_email_verified,
+    preferred_locale: row.preferred_locale,
     created_at: row.created_at,
     updated_at: row.updated_at,
   }

package/src/modules/admin-users/repository.ts

@@ -50,6 +50,13 @@ export interface AdminUserRow {
   is_super_admin: boolean
   is_enabled: boolean
   is_email_verified: boolean
+  /**
+   * Admin interface locale preference. `null` means "use the detection
+   * cascade" (cookie → Accept-Language → defaultLocale). Stored as a
+   * BCP 47 code; validated at the command layer against the host's
+   * `i18n.interface.locales`.
+   */
+  preferred_locale: string | null
   created_at: Date
   updated_at: Date
 }
@@ -73,6 +80,8 @@ export interface CreateAdminUserInput {
   is_super_admin?: boolean
   is_enabled?: boolean
   is_email_verified?: boolean
+  /** Initial locale preference. `null` defers to the detection cascade. */
+  preferred_locale?: string | null
 }
 
 export interface UpdateAdminUserInput {
@@ -84,6 +93,8 @@ export interface UpdateAdminUserInput {
   is_enabled?: boolean
   is_email_verified?: boolean
   remember_me?: boolean
+  /** Pass `null` to clear and fall back to the detection cascade. */
+  preferred_locale?: string | null
 }
 
 export type AdminUserListOrder =
@@ -151,6 +162,12 @@ export interface AdminUsersRepository {
   setPasswordHash(id: string, expectedVid: number, passwordHash: string): Promise<AdminUserRow>
   /** Toggle enabled state. Vid-less — admin intent is independent of other edits. */
   setEnabled(id: string, enabled: boolean): Promise<void>
+  /**
+   * Set the admin interface locale preference. Vid-less — user preference
+   * is independent of content state. Pass `null` to clear and fall back
+   * to the detection cascade (cookie → Accept-Language → defaultLocale).
+   */
+  setPreferredLocale(id: string, locale: string | null): Promise<void>
   recordLoginSuccess(id: string, ip: string | null): Promise<void>
   recordLoginFailure(id: string): Promise<void>
   /**

package/src/modules/admin-users/schemas.ts

@@ -46,6 +46,15 @@ const emailSchema = z
 
 const nameSchema = z.string().min(1).max(100)
 
+// BCP 47 locale codes — `en`, `pt-BR`, `zh-Hans-CN`, etc. The 16-char
+// ceiling matches the DB column width and is wider than any real-world
+// locale tag.
+const preferredLocaleSchema = z
+  .string()
+  .min(2)
+  .max(16)
+  .regex(/^[a-zA-Z]{2,3}(-[a-zA-Z0-9]{2,8})*$/, 'must be a BCP 47 locale tag')
+
 const orderSchema = z.enum([
   'given_name',
   'family_name',
@@ -82,6 +91,7 @@ export const createAdminUserRequestSchema = z.object({
   is_super_admin: z.boolean().optional(),
   is_enabled: z.boolean().optional(),
   is_email_verified: z.boolean().optional(),
+  preferred_locale: preferredLocaleSchema.nullish(),
 })
 export type CreateAdminUserRequest = z.infer<typeof createAdminUserRequestSchema>
 
@@ -97,6 +107,7 @@ export const updateAdminUserRequestSchema = z.object({
       is_super_admin: z.boolean().optional(),
       is_enabled: z.boolean().optional(),
       is_email_verified: z.boolean().optional(),
+      preferred_locale: preferredLocaleSchema.nullish(),
     })
     .refine((p) => Object.keys(p).length > 0, { message: 'patch cannot be empty' }),
 })
@@ -144,6 +155,7 @@ export const adminUserResponseSchema = z.object({
   is_super_admin: z.boolean(),
   is_enabled: z.boolean(),
   is_email_verified: z.boolean(),
+  preferred_locale: z.string().nullable(),
   created_at: z.date(),
   updated_at: z.date(),
 })

package/src/modules/auth/components/sign-in-form.tsx

@@ -25,6 +25,7 @@
 
 import { type FormEvent, useState } from 'react'
 
+import { useTranslation } from '@byline/i18n/react'
 import { Alert, Button, Card, Input, LoaderEllipsis } from '@byline/ui/react'
 import cx from 'classnames'
 
@@ -44,6 +45,7 @@ interface SignInFormProps {
 
 export function SignInForm({ callbackUrl, homeUrl }: SignInFormProps) {
   const { adminSignIn } = useBylineAdminServices()
+  const { t } = useTranslation('byline-admin')
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
   const [pending, setPending] = useState(false)
@@ -53,7 +55,7 @@ export function SignInForm({ callbackUrl, homeUrl }: SignInFormProps) {
     event.preventDefault()
     if (pending) return
     if (email.trim().length === 0 || password.length === 0) {
-      setError('Enter your email and password.')
+      setError(t('auth.signIn.errors.empty'))
       return
     }
 
@@ -67,7 +69,7 @@ export function SignInForm({ callbackUrl, homeUrl }: SignInFormProps) {
       window.location.assign(target)
     } catch (err) {
       console.warn('sign-in failed', err)
-      setError('Invalid credentials.')
+      setError(t('auth.signIn.errors.invalidCredentials'))
       setPending(false)
     }
   }
@@ -76,9 +78,9 @@ export function SignInForm({ callbackUrl, homeUrl }: SignInFormProps) {
     <Card className={cx('byline-sign-in-card', styles.card)}>
       <Card.Header>
         <Card.Title>
-          <h2>Sign in</h2>
+          <h2>{t('auth.signIn.title')}</h2>
         </Card.Title>
-        <Card.Description>Sign in to the Byline admin.</Card.Description>
+        <Card.Description>{t('auth.signIn.description')}</Card.Description>
         {error && (
           <Alert intent="danger" className={cx('byline-sign-in-alert', styles.alert)}>
             {error}
@@ -89,7 +91,7 @@ export function SignInForm({ callbackUrl, homeUrl }: SignInFormProps) {
         <form onSubmit={handleSubmit} noValidate className={cx('byline-sign-in-form', styles.form)}>
           <div className={cx('byline-sign-in-fields', styles.fields)}>
             <Input
-              label="Email"
+              label={t('common.fields.email')}
               id="email"
               name="email"
               type="email"
@@ -100,7 +102,7 @@ export function SignInForm({ callbackUrl, homeUrl }: SignInFormProps) {
               disabled={pending}
             />
             <Input
-              label="Password"
+              label={t('common.fields.password')}
               id="password"
               name="password"
               type="password"
@@ -114,7 +116,7 @@ export function SignInForm({ callbackUrl, homeUrl }: SignInFormProps) {
           <div className={cx('byline-sign-in-actions', styles.actions)}>
             {homeUrl && (
               <a href={homeUrl} className={cx('byline-sign-in-home-link', styles['home-link'])}>
-                Home
+                {t('common.actions.home')}
               </a>
             )}
             <Button
@@ -122,7 +124,11 @@ export function SignInForm({ callbackUrl, homeUrl }: SignInFormProps) {
               disabled={pending}
               className={cx('byline-sign-in-button', styles.button)}
             >
-              {pending ? <LoaderEllipsis size={30} color="#aaaaaa" /> : <span>Sign In</span>}
+              {pending ? (
+                <LoaderEllipsis size={30} color="#aaaaaa" />
+              ) : (
+                <span>{t('common.actions.signIn')}</span>
+              )}
             </Button>
           </div>
         </form>

package/src/presentation/group.module.css

@@ -0,0 +1,41 @@
+/**
+ * Group — labelled fieldset clustering related fields together.
+ *
+ * Used by `FormRenderer` when a `CollectionAdminConfig` declares a
+ * `groups` primitive. Renders a bordered, padded `<fieldset>` with an
+ * optional `<legend>` for the label.
+ *
+ * Override handles: `.byline-admin-group` (the fieldset) and
+ * `.byline-admin-group-legend` (the optional heading) are exposed as
+ * stable global classes for host overrides.
+ *
+ * Note: this is the *admin layout* group primitive, not the schema-level
+ * `group` field type. Field widgets use `byline-field-*` handles to keep
+ * the namespaces disambiguated.
+ */
+
+.group,
+:global(.byline-admin-group) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  padding: var(--spacing-12);
+  border: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+  border-radius: var(--border-radius-md);
+}
+
+.legend,
+:global(.byline-admin-group-legend) {
+  padding-inline: var(--spacing-4);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+/* ─── Dark theme variants ───────────────────────────────────── */
+
+:is([data-theme="dark"], :global(.dark)) {
+  .group,
+  :global(.byline-admin-group) {
+    border-color: var(--gray-700);
+  }
+}

package/src/presentation/group.tsx

@@ -0,0 +1,40 @@
+/**
+ * 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
+ */
+
+import type { ReactNode } from 'react'
+
+import cx from 'classnames'
+
+import styles from './group.module.css'
+
+interface AdminGroupProps {
+  /** Optional heading rendered as a `<legend>` above the cluster. */
+  label?: string
+  children: ReactNode
+  className?: string
+}
+
+/**
+ * Labelled fieldset clustering related fields together.
+ *
+ * Used by `FormRenderer` when a `CollectionAdminConfig` declares a `groups`
+ * primitive. Renders a bordered, padded `<fieldset>` with an optional
+ * `<legend>` for the label.
+ *
+ * Stable override handles: `.byline-admin-group` on the fieldset and
+ * `.byline-admin-group-legend` on the legend (alongside the hashed
+ * CSS-modules locals).
+ */
+export const AdminGroup = ({ label, children, className }: AdminGroupProps) => {
+  return (
+    <fieldset className={cx('byline-admin-group', styles.group, className)}>
+      {label && <legend className={cx('byline-admin-group-legend', styles.legend)}>{label}</legend>}
+      {children}
+    </fieldset>
+  )
+}

package/src/presentation/row.module.css

@@ -0,0 +1,32 @@
+/**
+ * Row — horizontal flex layout for admin form fields.
+ *
+ * Members render side-by-side at `sm` and above, stack vertically below.
+ * `flex: 1` + `min-width: 0` on direct children lets two text inputs
+ * share the row evenly without overflowing.
+ *
+ * Override handle: `.byline-admin-row` is exposed as a stable global
+ * class so hosts can target this element from their own stylesheet
+ * without referring to the hashed local name.
+ */
+
+.row,
+:global(.byline-admin-row) {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-16);
+}
+
+.row > *,
+:global(.byline-admin-row) > * {
+  flex: 1;
+  min-width: 0;
+}
+
+@media (min-width: 40rem) {
+  .row,
+  :global(.byline-admin-row) {
+    flex-direction: row;
+  }
+}

package/src/presentation/row.tsx

@@ -0,0 +1,33 @@
+/**
+ * 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
+ */
+
+import type { ReactNode } from 'react'
+
+import cx from 'classnames'
+
+import styles from './row.module.css'
+
+interface AdminRowProps {
+  children: ReactNode
+  className?: string
+}
+
+/**
+ * Horizontal flex-row layout for admin form fields.
+ *
+ * Used by `FormRenderer` when a `CollectionAdminConfig` declares a `rows`
+ * primitive. Members are rendered side-by-side above the `sm` breakpoint
+ * and stack vertically below it. `flex-1` + `min-width: 0` lets two text
+ * inputs share the row evenly without overflowing.
+ *
+ * The element carries `.byline-admin-row` as a stable global class for
+ * host overrides (alongside the hashed CSS-modules local).
+ */
+export const AdminRow = ({ children, className }: AdminRowProps) => {
+  return <div className={cx('byline-admin-row', styles.row, className)}>{children}</div>
+}

package/src/presentation/tabs.module.css

@@ -0,0 +1,107 @@
+/**
+ * Tabs — navigation bar for admin form layouts.
+ *
+ * Override handles:
+ *   .byline-admin-tabs        — the tablist container
+ *   .byline-admin-tab         — each tab button
+ *   .byline-admin-tab-active  — added when the tab is the active one
+ *   .byline-admin-tab-label   — the inner label span (with optional badge)
+ *   .byline-admin-tab-badge   — the inline error-count badge
+ */
+
+.tabs,
+:global(.byline-admin-tabs) {
+  display: flex;
+  gap: var(--spacing-16);
+  border-bottom: var(--border-width-thin) var(--border-style-solid) var(--gray-200);
+}
+
+.tab,
+:global(.byline-admin-tab) {
+  position: relative;
+  margin-bottom: -1px;
+  padding: 0.625rem 0;
+  border-bottom: 2px solid transparent;
+  background: none;
+  color: var(--gray-500);
+  font-size: 1.1rem;
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition:
+    color 150ms ease,
+    border-color 150ms ease;
+  outline: none;
+}
+
+.tab:hover,
+:global(.byline-admin-tab):hover {
+  color: var(--gray-800);
+  border-bottom-color: var(--gray-300);
+}
+
+.tab:focus-visible,
+:global(.byline-admin-tab):focus-visible {
+  box-shadow: 0 0 0 2px var(--blue-500);
+}
+
+.tab-active,
+:global(.byline-admin-tab-active) {
+  color: var(--primary-600);
+  border-bottom-color: var(--primary-400);
+}
+
+.tab-active:hover,
+:global(.byline-admin-tab-active):hover {
+  color: var(--primary-600);
+  border-bottom-color: var(--primary-400);
+}
+
+.label,
+:global(.byline-admin-tab-label) {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.badge,
+:global(.byline-admin-tab-badge) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.375rem;
+  font-size: 0.7rem;
+}
+
+/* ─── Dark theme variants ───────────────────────────────────── */
+
+:is([data-theme="dark"], :global(.dark)) {
+  .tabs,
+  :global(.byline-admin-tabs) {
+    border-bottom-color: var(--gray-700);
+  }
+
+  .tab,
+  :global(.byline-admin-tab) {
+    color: var(--gray-400);
+  }
+
+  .tab:hover,
+  :global(.byline-admin-tab):hover {
+    color: var(--gray-200);
+    border-bottom-color: var(--gray-600);
+  }
+
+  .tab-active,
+  :global(.byline-admin-tab-active) {
+    color: var(--primary-200);
+    border-bottom-color: var(--primary-400);
+  }
+
+  .tab-active:hover,
+  :global(.byline-admin-tab-active):hover {
+    color: var(--primary-200);
+    border-bottom-color: var(--primary-400);
+  }
+}