@byline/admin 2.5.2 → 2.6.1

package/src/forms/upload-executor.ts

@@ -0,0 +1,192 @@
+/**
+ * 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
+ */
+
+/**
+ * Upload Executor
+ *
+ * Handles batch execution of pending file uploads at form submission time.
+ * This enables "deferred uploads" — files are selected/previewed immediately
+ * but only uploaded when the user clicks Save.
+ */
+
+import type { StoredFileValue } from '@byline/core'
+
+import type { UploadFieldFn } from '../fields/field-services-types'
+import type { PendingUpload } from './form-context'
+
+export interface UploadResult {
+  fieldPath: string
+  success: boolean
+  storedFile?: StoredFileValue
+  error?: string
+}
+
+export interface ExecuteUploadsResult {
+  /** All upload results (both successful and failed) */
+  results: UploadResult[]
+  /** Map of field path to StoredFileValue for successful uploads */
+  successful: Map<string, StoredFileValue>
+  /** Map of field path to error message for failed uploads */
+  errors: Map<string, string>
+  /** Whether all uploads succeeded */
+  allSucceeded: boolean
+}
+
+/**
+ * Execute all pending uploads sequentially.
+ * Returns a result object with successful uploads and any errors.
+ *
+ * @param pendingUploads - Map of field path to PendingUpload
+ * @param uploadField - Host-provided upload transport (resolved via
+ *                         `useBylineFieldServices()` in the calling React tree)
+ * @returns Promise resolving to ExecuteUploadsResult
+ */
+export async function executeUploads(
+  pendingUploads: Map<string, PendingUpload>,
+  uploadField: UploadFieldFn
+): Promise<ExecuteUploadsResult> {
+  const results: UploadResult[] = []
+  const successful = new Map<string, StoredFileValue>()
+  const errors = new Map<string, string>()
+
+  for (const [fieldPath, upload] of pendingUploads.entries()) {
+    const formData = new FormData()
+    formData.append('file', upload.file)
+    // Tell the server which upload-capable field this file belongs to.
+    // With per-field upload config a collection can have multiple
+    // image/file fields, each with its own constraints; the server's
+    // unique-default fallback covers the single-field case but rejects
+    // multi-field collections without an explicit selector.
+    formData.append('field', uploadFieldName(fieldPath))
+
+    try {
+      // Pass createDocument=false — we're uploading for an embedded field,
+      // the form's save action handles document creation/update.
+      const result = await uploadField(upload.collectionPath, formData, false)
+
+      results.push({
+        fieldPath,
+        success: true,
+        storedFile: result.storedFile,
+      })
+      successful.set(fieldPath, result.storedFile)
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Upload failed'
+      results.push({
+        fieldPath,
+        success: false,
+        error: message,
+      })
+      errors.set(fieldPath, message)
+    }
+  }
+
+  return {
+    results,
+    successful,
+    errors,
+    allSucceeded: errors.size === 0,
+  }
+}
+
+/**
+ * Extract the leaf field name from a `fieldPath`. Top-level upload
+ * fields (`'image'`, `'avatar'`) pass through unchanged; nested paths
+ * (`'profile.avatar'`) reduce to their last segment, since the
+ * server-side resolver matches against top-level field names today.
+ * Nested upload fields would need a richer transport selector when
+ * they land — the host resolver is the natural place to extend.
+ */
+function uploadFieldName(fieldPath: string): string {
+  const dot = fieldPath.lastIndexOf('.')
+  return dot === -1 ? fieldPath : fieldPath.slice(dot + 1)
+}
+
+/**
+ * Progress callback type for upload execution with progress tracking.
+ */
+export type UploadProgressCallback = (info: {
+  current: number
+  total: number
+  fieldPath: string
+  status: 'uploading' | 'done' | 'error'
+}) => void
+
+/**
+ * Execute uploads with progress callbacks.
+ * Useful for showing upload progress in the UI.
+ */
+export async function executeUploadsWithProgress(
+  pendingUploads: Map<string, PendingUpload>,
+  uploadField: UploadFieldFn,
+  onProgress?: UploadProgressCallback
+): Promise<ExecuteUploadsResult> {
+  const results: UploadResult[] = []
+  const successful = new Map<string, StoredFileValue>()
+  const errors = new Map<string, string>()
+
+  const entries = Array.from(pendingUploads.entries())
+  const total = entries.length
+
+  for (let i = 0; i < entries.length; i++) {
+    const entry = entries[i]
+    if (!entry) continue
+    const [fieldPath, upload] = entry
+
+    onProgress?.({
+      current: i + 1,
+      total,
+      fieldPath,
+      status: 'uploading',
+    })
+
+    const formData = new FormData()
+    formData.append('file', upload.file)
+    formData.append('field', uploadFieldName(fieldPath))
+
+    try {
+      const result = await uploadField(upload.collectionPath, formData, false)
+
+      results.push({
+        fieldPath,
+        success: true,
+        storedFile: result.storedFile,
+      })
+      successful.set(fieldPath, result.storedFile)
+
+      onProgress?.({
+        current: i + 1,
+        total,
+        fieldPath,
+        status: 'done',
+      })
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : 'Upload failed'
+      results.push({
+        fieldPath,
+        success: false,
+        error: message,
+      })
+      errors.set(fieldPath, message)
+
+      onProgress?.({
+        current: i + 1,
+        total,
+        fieldPath,
+        status: 'error',
+      })
+    }
+  }
+
+  return {
+    results,
+    successful,
+    errors,
+    allSucceeded: errors.size === 0,
+  }
+}

package/src/lib/translate-validation-error.ts

@@ -0,0 +1,56 @@
+/**
+ * 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
+ */
+
+/**
+ * Map a stable validation-error code (emitted by a `@byline/core/validation`
+ * schema) onto its translation. Returns the original input unchanged when
+ * the code is not in the map, so non-coded error messages (free-form
+ * Zod messages, server-supplied strings) pass through.
+ *
+ * Why a separate translator: `@byline/core` stays i18n-agnostic — schemas
+ * emit codes, not text — so it has no dependency on `@byline/i18n` or
+ * any locale data. This package owns the translation surface and keeps
+ * the mapping in one place, so callers across the admin shell don't
+ * each maintain their own code-to-key lookup.
+ *
+ * Adding a new code: extend the source schema in `@byline/core/validation`
+ * and add the matching key here.
+ */
+
+import type { UseTranslationReturn } from '@byline/i18n/react'
+
+type Translate = UseTranslationReturn['t']
+
+/**
+ * Maps validation error codes from `@byline/core/validation` schemas to
+ * their corresponding `byline-admin` translation keys.
+ */
+const VALIDATION_CODE_KEYS: Record<string, string> = {
+  'password.tooShort': 'validation.password.tooShort',
+  'password.tooLong': 'validation.password.tooLong',
+  'password.complexity': 'validation.password.complexity',
+}
+
+/**
+ * Translate a validation error code into the active locale's message.
+ *
+ * Pass the raw error string straight out of Zod (e.g. via
+ * `firstError(field.state.meta.errors)`). When the string matches a
+ * known code, the corresponding translation is returned; otherwise the
+ * input flows through unchanged.
+ *
+ * Designed for the `errorText={…}` slot on form inputs.
+ */
+export function translateValidationError(
+  t: Translate,
+  message: string | undefined
+): string | undefined {
+  if (message == null) return message
+  const key = VALIDATION_CODE_KEYS[message]
+  return key ? t(key) : message
+}

package/src/modules/admin-account/commands.ts

@@ -11,6 +11,7 @@ import { adminUserResponseSchema } from '../admin-users/schemas.js'
 import {
   changeAccountPasswordRequestSchema,
   getAccountRequestSchema,
+  setPreferredLocaleRequestSchema,
   updateAccountRequestSchema,
 } from './schemas.js'
 import { AdminAccountService } from './service.js'
@@ -19,6 +20,7 @@ import type {
   AccountResponse,
   ChangeAccountPasswordRequest,
   GetAccountRequest,
+  SetPreferredLocaleRequest,
   UpdateAccountRequest,
 } from './schemas.js'
 
@@ -74,3 +76,14 @@ export const changeAccountPasswordCommand: Command<
   schemas: { input: changeAccountPasswordRequestSchema, output: adminUserResponseSchema },
   handler: ({ input, deps, actor }) => serviceOf(deps).changePassword(actor.id, input),
 })
+
+export const setPreferredLocaleCommand: Command<
+  SetPreferredLocaleRequest,
+  AccountResponse,
+  AdminAccountCommandDeps
+> = createCommand({
+  method: 'setPreferredLocale',
+  auth: { authenticated: true },
+  schemas: { input: setPreferredLocaleRequestSchema, output: adminUserResponseSchema },
+  handler: ({ input, deps, actor }) => serviceOf(deps).setPreferredLocale(actor.id, input.locale),
+})

package/src/modules/admin-account/components/change-password.tsx

@@ -25,30 +25,25 @@
  * will close that gap.
  */
 
-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 './change-password.module.css'
 import type { AccountResponse } from '../index.js'
 
-const changePasswordFormSchema = z
-  .object({
-    currentPassword: z.string().min(1, { message: 'Please enter your current password' }),
-    newPassword: passwordSchema,
-    confirm: z.string({ message: 'Please confirm the new password' }),
-  })
-  .refine((v) => v.newPassword === v.confirm, {
-    message: 'New passwords do not match',
-    path: ['confirm'],
-  })
-
-type ChangePasswordValues = z.infer<typeof changePasswordFormSchema>
+type ChangePasswordValues = {
+  currentPassword: string
+  newPassword: string
+  confirm: string
+}
 
 interface ChangePasswordProps {
   account: AccountResponse
@@ -58,9 +53,33 @@ interface ChangePasswordProps {
 
 export function ChangeAccountPassword({ account, onClose, onSuccess }: ChangePasswordProps) {
   const { changeAccountPassword } = useBylineAdminServices()
+  const { t } = useTranslation('byline-admin')
   const [formError, setFormError] = useState<string | null>(null)
   const [successMessage, setSuccessMessage] = useState<string | null>(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: '' } as ChangePasswordValues,
     validationLogic: revalidateLogic({
@@ -81,30 +100,29 @@ export function ChangeAccountPassword({ account, onClose, onSuccess }: ChangePas
             newPassword: value.newPassword,
           },
         })
-        setSuccessMessage('Password updated.')
+        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: 'Current password is incorrect.' },
-            errors: ['Current password is incorrect.'],
+            errorMap: { ...meta.errorMap, onServer: message },
+            errors: [message],
           }))
           return
         }
         if (code === 'admin.users.versionConflict') {
-          setFormError(
-            'Your account has been modified elsewhere since you opened this form. Reload to refresh and try again.'
-          )
+          setFormError(t('common.errors.versionConflict'))
           return
         }
         if (code === 'admin.account.notFound') {
-          setFormError('Your admin account could not be found. Please sign in again.')
+          setFormError(t('common.errors.accountNotFound'))
           return
         }
-        setFormError('Could not change the password. Please try again.')
+        setFormError(t('account.changePassword.errors.couldNotChange'))
       }
     },
   })
@@ -123,15 +141,12 @@ export function ChangeAccountPassword({ account, onClose, onSuccess }: ChangePas
         {formError ? <Alert intent="danger">{formError}</Alert> : null}
         {successMessage ? <Alert intent="success">{successMessage}</Alert> : null}
 
-        <p className="muted">
-          Other active sessions will continue to work until their tokens expire. Sign out elsewhere
-          if you suspect another device has been compromised.
-        </p>
+        <p className="muted">{t('account.changePassword.intro')}</p>
 
         <form.Field name="currentPassword">
           {(field) => (
             <InputPassword
-              label="Current password"
+              label={t('account.changePassword.fields.current')}
               id="currentPassword"
               name={field.name}
               value={field.state.value}
@@ -148,14 +163,14 @@ export function ChangeAccountPassword({ account, onClose, onSuccess }: ChangePas
         <form.Field name="newPassword">
           {(field) => (
             <InputPassword
-              label="New password"
+              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={firstError(field.state.meta.errors)}
+              errorText={translateValidationError(t, firstError(field.state.meta.errors))}
               autoComplete="new-password"
               required
             />
@@ -165,7 +180,7 @@ export function ChangeAccountPassword({ account, onClose, onSuccess }: ChangePas
         <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}
@@ -187,7 +202,7 @@ export function ChangeAccountPassword({ account, onClose, onSuccess }: ChangePas
             onClick={onClose}
             className={cx('byline-account-change-password-action', styles.action)}
           >
-            {successMessage ? 'Close' : 'Cancel'}
+            {successMessage ? t('common.actions.close') : t('common.actions.cancel')}
           </Button>
           <form.Subscribe
             selector={(state) => ({
@@ -204,7 +219,7 @@ export function ChangeAccountPassword({ account, onClose, onSuccess }: ChangePas
                 disabled={!canSubmit || isSubmitting}
                 className={cx('byline-account-change-password-action', styles.action)}
               >
-                {isSubmitting === true ? <LoaderEllipsis size={42} /> : 'Save'}
+                {isSubmitting === true ? <LoaderEllipsis size={42} /> : t('common.actions.save')}
               </Button>
             )}
           </form.Subscribe>