@byline/admin 2.5.1 → 2.6.0

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

@@ -17,9 +17,10 @@
  * time and immutable thereafter.
  */
 
-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, Input, LoaderEllipsis, TextArea } from '@byline/ui/react'
 import cx from 'classnames'
 import { z } from 'zod'
@@ -29,12 +30,13 @@ import styles from './update.module.css'
 import type { UpdateAdminRoleInput } from '../../../services/admin-services-types.js'
 import type { AdminRoleResponse } from '../index.js'
 
-const updateRoleSchema = z.object({
-  name: z.string().min(1, 'Name is required').max(128, 'Name must not exceed 128 characters'),
-  description: z.string().max(2000, 'Description must not exceed 2000 characters'),
-})
+const MAX_NAME = 128
+const MAX_DESCRIPTION = 2000
 
-type UpdateRoleValues = z.infer<typeof updateRoleSchema>
+type UpdateRoleValues = {
+  name: string
+  description: string
+}
 
 function defaultsFrom(role: AdminRoleResponse): UpdateRoleValues {
   return {
@@ -66,9 +68,27 @@ interface UpdateRoleProps {
 
 export function UpdateRole({ role, onClose, onSuccess }: UpdateRoleProps) {
   const { updateAdminRole } = useBylineAdminServices()
+  const { t } = useTranslation('byline-admin')
   const [formError, setFormError] = useState<string | null>(null)
   const [successMessage, setSuccessMessage] = useState<string | null>(null)
 
+  const updateRoleSchema = useMemo(
+    () =>
+      z.object({
+        name: z
+          .string()
+          .min(1, t('adminRoles.create.errors.nameRequired'))
+          .max(MAX_NAME, t('adminRoles.create.errors.nameTooLong', { max: MAX_NAME })),
+        description: z
+          .string()
+          .max(
+            MAX_DESCRIPTION,
+            t('adminRoles.create.errors.descriptionTooLong', { max: MAX_DESCRIPTION })
+          ),
+      }),
+    [t]
+  )
+
   const form = useForm({
     defaultValues: defaultsFrom(role),
     validationLogic: revalidateLogic({
@@ -83,7 +103,7 @@ export function UpdateRole({ role, onClose, onSuccess }: UpdateRoleProps) {
       setSuccessMessage(null)
       const patch = buildPatch(value, role)
       if (Object.keys(patch).length === 0) {
-        setSuccessMessage('No changes to save.')
+        setSuccessMessage(t('common.feedback.noChanges'))
         return
       }
 
@@ -91,21 +111,19 @@ export function UpdateRole({ role, onClose, onSuccess }: UpdateRoleProps) {
         const updated = await updateAdminRole({
           data: { id: role.id, vid: role.vid, patch },
         })
-        setSuccessMessage('Saved.')
+        setSuccessMessage(t('common.feedback.saved'))
         onSuccess?.(updated)
       } catch (err) {
         const code = getErrorCode(err)
         if (code === 'admin.roles.versionConflict') {
-          setFormError(
-            'This role has been modified elsewhere since you opened this form. Reload to get the latest values and try again.'
-          )
+          setFormError(t('adminRoles.update.errors.versionConflict'))
           return
         }
         if (code === 'admin.roles.notFound') {
-          setFormError('This role no longer exists.')
+          setFormError(t('adminRoles.update.errors.notFound'))
           return
         }
-        setFormError('Could not save changes. Please try again.')
+        setFormError(t('common.errors.couldNotSave'))
       }
     },
   })
@@ -127,7 +145,7 @@ export function UpdateRole({ role, onClose, onSuccess }: UpdateRoleProps) {
         <form.Field name="name">
           {(field) => (
             <Input
-              label="Name"
+              label={t('adminRoles.fields.name')}
               id="role-name"
               name={field.name}
               value={field.state.value}
@@ -141,19 +159,19 @@ export function UpdateRole({ role, onClose, onSuccess }: UpdateRoleProps) {
         </form.Field>
 
         <Input
-          label="Machine name"
+          label={t('adminRoles.fields.machineName')}
           id="role-machine-name"
           name="machine_name"
           value={role.machine_name}
           readOnly
           disabled
-          helpText="The stable code-side handle. Cannot be changed after creation."
+          helpText={t('adminRoles.update.fields.machineNameHelp')}
         />
 
         <form.Field name="description">
           {(field) => (
             <TextArea
-              label="Description"
+              label={t('adminRoles.fields.description')}
               id="role-description"
               name={field.name}
               value={field.state.value}
@@ -174,7 +192,7 @@ export function UpdateRole({ role, onClose, onSuccess }: UpdateRoleProps) {
             onClick={onClose}
             className={cx('byline-role-update-action', styles.action)}
           >
-            {successMessage ? 'Close' : 'Cancel'}
+            {successMessage ? t('common.actions.close') : t('common.actions.cancel')}
           </Button>
           <form.Subscribe
             selector={(state) => ({
@@ -190,7 +208,7 @@ export function UpdateRole({ role, onClose, onSuccess }: UpdateRoleProps) {
                 disabled={!canSubmit || isSubmitting}
                 className={cx('byline-role-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/components/create.tsx

@@ -23,33 +23,34 @@
  * change in the loader and a prop here.
  */
 
-import { useState } from 'react'
+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, Checkbox, Input, LoaderEllipsis } from '@byline/ui/react'
 import cx from 'classnames'
 import { z } from 'zod'
 
+import { translateValidationError } from '../../../lib/translate-validation-error.js'
 import { useBylineAdminServices } from '../../../services/admin-services-context.js'
 import styles from './create.module.css'
 import type { AdminUserResponse } from '../index.js'
 
-const createAdminUserFormSchema = z.object({
-  email: z
-    .email({ message: 'Enter a valid email address' })
-    .min(3)
-    .max(254, 'Email must not exceed 254 characters'),
-  password: passwordSchema,
-  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'),
-  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 CreateAdminUserValues = z.infer<typeof createAdminUserFormSchema>
+type CreateAdminUserValues = {
+  email: string
+  password: string
+  given_name: string
+  family_name: string
+  username: string
+  is_super_admin: boolean
+  is_enabled: boolean
+  is_email_verified: boolean
+}
 
 const initialValues: CreateAdminUserValues = {
   email: '',
@@ -77,8 +78,35 @@ interface CreateAdminUserProps {
 
 export function CreateAdminUser({ onClose, onSuccess }: CreateAdminUserProps) {
   const { createAdminUser } = useBylineAdminServices()
+  const { t } = useTranslation('byline-admin')
   const [formError, setFormError] = useState<string | null>(null)
 
+  // Schema rebuilt per-render so error messages reflect the active
+  // locale; wrapped in useMemo([t]) to keep validator identity stable.
+  const createAdminUserFormSchema = useMemo(
+    () =>
+      z.object({
+        email: z
+          .email({ message: t('account.update.errors.invalidEmail') })
+          .min(3)
+          .max(MAX_EMAIL, t('account.update.errors.emailTooLong', { max: MAX_EMAIL })),
+        password: passwordSchema,
+        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 })),
+        is_super_admin: z.boolean(),
+        is_enabled: z.boolean(),
+        is_email_verified: z.boolean(),
+      }),
+    [t]
+  )
+
   const form = useForm({
     defaultValues: initialValues,
     validationLogic: revalidateLogic({
@@ -111,14 +139,15 @@ export function CreateAdminUser({ onClose, onSuccess }: CreateAdminUserProps) {
       } 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: 'This email is already in use.' },
-            errors: ['This email is already in use.'],
+            errorMap: { ...meta.errorMap, onServer: message },
+            errors: [message],
           }))
           return
         }
-        setFormError('Could not create this admin user. Please try again.')
+        setFormError(t('adminUsers.create.errors.fallback'))
       }
     },
   })
@@ -140,7 +169,7 @@ export function CreateAdminUser({ onClose, onSuccess }: CreateAdminUserProps) {
           <form.Field name="given_name">
             {(field) => (
               <Input
-                label="Given name"
+                label={t('account.update.fields.givenName')}
                 id="new-given-name"
                 name={field.name}
                 value={field.state.value}
@@ -156,7 +185,7 @@ export function CreateAdminUser({ onClose, onSuccess }: CreateAdminUserProps) {
           <form.Field name="family_name">
             {(field) => (
               <Input
-                label="Family name"
+                label={t('account.update.fields.familyName')}
                 id="new-family-name"
                 name={field.name}
                 value={field.state.value}
@@ -173,7 +202,7 @@ export function CreateAdminUser({ onClose, onSuccess }: CreateAdminUserProps) {
         <form.Field name="username">
           {(field) => (
             <Input
-              label="Username"
+              label={t('account.update.fields.username')}
               id="new-username"
               name={field.name}
               value={field.state.value}
@@ -181,7 +210,7 @@ export function CreateAdminUser({ onClose, onSuccess }: CreateAdminUserProps) {
               onChange={(e) => field.handleChange(e.currentTarget.value)}
               error={field.state.meta.errors.length > 0}
               errorText={firstError(field.state.meta.errors)}
-              helpText="Optional."
+              helpText={t('adminUsers.create.fields.usernameHelp')}
               autoComplete="username"
             />
           )}
@@ -190,7 +219,7 @@ export function CreateAdminUser({ onClose, onSuccess }: CreateAdminUserProps) {
         <form.Field name="email">
           {(field) => (
             <Input
-              label="Email"
+              label={t('common.fields.email')}
               id="new-email"
               name={field.name}
               type="email"
@@ -208,7 +237,7 @@ export function CreateAdminUser({ onClose, onSuccess }: CreateAdminUserProps) {
         <form.Field name="password">
           {(field) => (
             <Input
-              label="Initial password"
+              label={t('adminUsers.create.fields.password')}
               id="new-password"
               name={field.name}
               type="password"
@@ -216,8 +245,8 @@ export function CreateAdminUser({ onClose, onSuccess }: CreateAdminUserProps) {
               onBlur={field.handleBlur}
               onChange={(e) => field.handleChange(e.currentTarget.value)}
               error={field.state.meta.errors.length > 0}
-              errorText={firstError(field.state.meta.errors)}
-              helpText="The user can change it from their own account after signing in."
+              errorText={translateValidationError(t, firstError(field.state.meta.errors))}
+              helpText={t('adminUsers.create.fields.passwordHelp')}
               autoComplete="new-password"
               required
             />
@@ -230,10 +259,10 @@ export function CreateAdminUser({ onClose, onSuccess }: CreateAdminUserProps) {
               <Checkbox
                 id="new-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>
@@ -243,10 +272,10 @@ export function CreateAdminUser({ onClose, onSuccess }: CreateAdminUserProps) {
               <Checkbox
                 id="new-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)}
-                helpText="Skip the verification flow for this account."
+                helpText={t('adminUsers.create.flags.emailVerifiedHelp')}
               />
             )}
           </form.Field>
@@ -256,10 +285,10 @@ export function CreateAdminUser({ onClose, onSuccess }: CreateAdminUserProps) {
               <Checkbox
                 id="new-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>
@@ -273,7 +302,7 @@ export function CreateAdminUser({ onClose, onSuccess }: CreateAdminUserProps) {
             onClick={onClose}
             className={cx('byline-user-create-action', styles.action)}
           >
-            Cancel
+            {t('common.actions.cancel')}
           </Button>
           <form.Subscribe
             selector={(state) => ({
@@ -289,7 +318,7 @@ export function CreateAdminUser({ onClose, onSuccess }: CreateAdminUserProps) {
                 disabled={!canSubmit || isSubmitting}
                 className={cx('byline-user-create-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/components/roles.tsx

@@ -25,6 +25,7 @@
 
 import { useState } from 'react'
 
+import { useTranslation } from '@byline/i18n/react'
 import { Alert, Button, Checkbox, LoaderEllipsis } from '@byline/ui/react'
 import cx from 'classnames'
 
@@ -49,6 +50,7 @@ function setsEqual(a: ReadonlySet<string>, b: ReadonlySet<string>): boolean {
 
 export function UserRoles({ user, allRoles, initialRoleIds, onClose, onSaved }: UserRolesProps) {
   const { setUserRoles } = useBylineAdminServices()
+  const { t } = useTranslation('byline-admin')
   const [initialSet, setInitialSet] = useState<ReadonlySet<string>>(() => new Set(initialRoleIds))
   const [selected, setSelected] = useState<Set<string>>(() => new Set(initialRoleIds))
   const [saving, setSaving] = useState(false)
@@ -79,16 +81,16 @@ export function UserRoles({ user, allRoles, initialRoleIds, onClose, onSaved }:
       const storedSet = new Set(response.roles.map((r) => r.id))
       setInitialSet(storedSet)
       setSelected(new Set(storedSet))
-      setSuccessMessage('Saved.')
+      setSuccessMessage(t('common.feedback.saved'))
       onSaved?.(response)
     } catch (err) {
       const code = getErrorCode(err)
       if (code === 'admin.roles.userNotFound') {
-        setError('This user no longer exists.')
+        setError(t('adminUsers.roles.errors.userNotFound'))
       } else if (code === 'admin.roles.notFound') {
-        setError('One or more selected roles no longer exist. Reload the page and try again.')
+        setError(t('adminUsers.roles.errors.roleNotFound'))
       } else {
-        setError('Could not save roles. Please try again.')
+        setError(t('adminUsers.roles.errors.fallback'))
       }
     } finally {
       setSaving(false)
@@ -102,8 +104,7 @@ export function UserRoles({ user, allRoles, initialRoleIds, onClose, onSaved }:
 
       {allRoles.length === 0 ? (
         <p className={cx('muted', 'byline-user-roles-empty', styles.empty)}>
-          No roles have been created yet. Create roles in{' '}
-          <span className="muted">/admin/roles</span> first.
+          {t('adminUsers.roles.emptyCatalog')}
         </p>
       ) : (
         <div className={cx('byline-user-roles-list', styles.list)}>
@@ -148,7 +149,7 @@ export function UserRoles({ user, allRoles, initialRoleIds, onClose, onSaved }:
           disabled={saving}
           className={cx('byline-user-roles-action', styles.action)}
         >
-          {successMessage ? 'Close' : 'Cancel'}
+          {successMessage ? t('common.actions.close') : t('common.actions.cancel')}
         </Button>
         <Button
           type="button"
@@ -158,7 +159,7 @@ export function UserRoles({ user, allRoles, initialRoleIds, onClose, onSaved }:
           disabled={saving || !isDirty}
           className={cx('byline-user-roles-action', styles.action)}
         >
-          {saving ? <LoaderEllipsis size={30} /> : 'Save'}
+          {saving ? <LoaderEllipsis size={30} /> : t('common.actions.save')}
         </Button>
       </div>
     </div>

package/src/modules/admin-users/components/set-password.tsx

@@ -21,29 +21,24 @@
  * `vid` back into the container; the drawer doesn't need to re-fetch.
  */
 
-import { useState } from 'react'
+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 'classnames'
 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'
 import type { AdminUserResponse } from '../index.js'
 
-const setPasswordFormSchema = z
-  .object({
-    password: passwordSchema,
-    confirm: z.string({ message: 'Please confirm the password' }),
-  })
-  .refine((v) => v.password === v.confirm, {
-    message: 'Passwords do not match',
-    path: ['confirm'],
-  })
-
-type SetPasswordValues = z.infer<typeof setPasswordFormSchema>
+type SetPasswordValues = {
+  password: string
+  confirm: string
+}
 
 interface SetPasswordProps {
   user: AdminUserResponse
@@ -53,9 +48,26 @@ interface SetPasswordProps {
 
 export function SetPassword({ user, onClose, onSuccess }: SetPasswordProps) {
   const { setAdminUserPassword } = useBylineAdminServices()
+  const { t } = useTranslation('byline-admin')
   const [formError, setFormError] = useState<string | null>(null)
   const [successMessage, setSuccessMessage] = useState<string | null>(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: '' } as SetPasswordValues,
     validationLogic: revalidateLogic({
@@ -72,22 +84,20 @@ export function SetPassword({ user, onClose, onSuccess }: SetPasswordProps) {
         const updated = await setAdminUserPassword({
           data: { id: user.id, vid: user.vid, password: value.password },
         })
-        setSuccessMessage('Password updated.')
+        setSuccessMessage(t('account.changePassword.feedback.updated'))
         form.reset({ password: '', confirm: '' })
         onSuccess?.(updated)
       } catch (err) {
         const code = getErrorCode(err)
         if (code === 'admin.users.versionConflict') {
-          setFormError(
-            'This user has been modified elsewhere since you opened this form. Reload to refresh 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 set the password. Please try again.')
+        setFormError(t('adminUsers.setPassword.errors.fallback'))
       }
     },
   })
@@ -106,23 +116,19 @@ export function SetPassword({ user, onClose, onSuccess }: SetPasswordProps) {
         {formError ? <Alert intent="danger">{formError}</Alert> : null}
         {successMessage ? <Alert intent="success">{successMessage}</Alert> : null}
 
-        <p className="muted">
-          Sets a new password for{' '}
-          <span className={cx('byline-user-set-password-target', styles.target)}>{user.email}</span>
-          . The user will need to sign in again with the new password.
-        </p>
+        <p className="muted">{t('adminUsers.setPassword.intro', { email: user.email })}</p>
 
         <form.Field name="password">
           {(field) => (
             <InputPassword
-              label="New password"
+              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={firstError(field.state.meta.errors)}
+              errorText={translateValidationError(t, firstError(field.state.meta.errors))}
               autoComplete="new-password"
               required
             />
@@ -132,7 +138,7 @@ export function SetPassword({ user, onClose, onSuccess }: SetPasswordProps) {
         <form.Field name="confirm">
           {(field) => (
             <InputPassword
-              label="Confirm new password"
+              label={t('account.changePassword.fields.confirm')}
               id="confirm"
               name={field.name}
               value={field.state.value}
@@ -154,7 +160,7 @@ export function SetPassword({ user, onClose, onSuccess }: SetPasswordProps) {
             onClick={onClose}
             className={cx('byline-user-set-password-action', styles.action)}
           >
-            {successMessage ? 'Close' : 'Cancel'}
+            {successMessage ? t('common.actions.close') : t('common.actions.cancel')}
           </Button>
           <form.Subscribe
             selector={(state) => ({
@@ -171,7 +177,7 @@ export function SetPassword({ user, onClose, onSuccess }: SetPasswordProps) {
                 disabled={!canSubmit || isSubmitting}
                 className={cx('byline-user-set-password-action', styles.action)}
               >
-                {isSubmitting === true ? <LoaderEllipsis size={42} /> : 'Save'}
+                {isSubmitting === true ? <LoaderEllipsis size={42} /> : t('common.actions.save')}
               </Button>
             )}
           </form.Subscribe>