@byline/admin 2.4.0 → 2.4.1

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

@@ -0,0 +1,199 @@
+'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
+ */
+
+/**
+ * Set-password drawer form.
+ *
+ * Admin-facing "set this user's password" flow — used when an admin is
+ * resetting someone else's password. Server-side policy (min 12 chars,
+ * max 256) is duplicated client-side via Zod for immediate field
+ * validation. A matching-confirmation field catches typos without a
+ * round-trip.
+ *
+ * The server fn returns the updated user so we can lift the bumped
+ * `vid` back into the container; the drawer doesn't need to re-fetch.
+ */
+
+import { useState } from 'react'
+import { revalidateLogic, useForm } from '@tanstack/react-form-start'
+
+import { passwordSchema } from '@byline/core/validation'
+import { Alert, Button, InputPassword, LoaderEllipsis } from '@byline/ui/react'
+import cx from 'classnames'
+import { z } from 'zod'
+
+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>
+
+interface SetPasswordProps {
+  user: AdminUserResponse
+  onClose?: () => void
+  onSuccess?: (user: AdminUserResponse) => void
+}
+
+export function SetPassword({ user, onClose, onSuccess }: SetPasswordProps) {
+  const { setAdminUserPassword } = useBylineAdminServices()
+  const [formError, setFormError] = useState<string | null>(null)
+  const [successMessage, setSuccessMessage] = useState<string | null>(null)
+
+  const form = useForm({
+    defaultValues: { password: '', confirm: '' } as SetPasswordValues,
+    validationLogic: revalidateLogic({
+      mode: 'blur',
+      modeAfterSubmission: 'change',
+    }),
+    validators: {
+      onDynamic: setPasswordFormSchema,
+    },
+    onSubmit: async ({ value }) => {
+      setFormError(null)
+      setSuccessMessage(null)
+      try {
+        const updated = await setAdminUserPassword({
+          data: { id: user.id, vid: user.vid, password: value.password },
+        })
+        setSuccessMessage('Password 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.'
+          )
+          return
+        }
+        if (code === 'admin.users.notFound') {
+          setFormError('This user no longer exists.')
+          return
+        }
+        setFormError('Could not set the password. Please try again.')
+      }
+    },
+  })
+
+  return (
+    <div className={cx('byline-user-set-password-wrap', styles.wrap)}>
+      <form
+        noValidate
+        onSubmit={(event) => {
+          event.preventDefault()
+          event.stopPropagation()
+          void form.handleSubmit()
+        }}
+        className={cx('byline-user-set-password-form', styles.form)}
+      >
+        {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>
+
+        <form.Field name="password">
+          {(field) => (
+            <InputPassword
+              label="New password"
+              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)}
+              autoComplete="new-password"
+              required
+            />
+          )}
+        </form.Field>
+
+        <form.Field name="confirm">
+          {(field) => (
+            <InputPassword
+              label="Confirm new password"
+              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-user-set-password-actions', styles.actions)}>
+          <Button
+            type="button"
+            intent="secondary"
+            size="sm"
+            onClick={onClose}
+            className={cx('byline-user-set-password-action', styles.action)}
+          >
+            {successMessage ? 'Close' : '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-user-set-password-action', styles.action)}
+              >
+                {isSubmitting === true ? <LoaderEllipsis size={42} /> : 'Save'}
+              </Button>
+            )}
+          </form.Subscribe>
+        </div>
+      </form>
+    </div>
+  )
+}
+
+function firstError(errors: readonly unknown[]): string | undefined {
+  for (const err of errors) {
+    if (typeof err === 'string') return err
+    if (err && typeof err === 'object' && 'message' in err) {
+      const msg = (err as { message?: unknown }).message
+      if (typeof msg === 'string') return msg
+    }
+  }
+  return undefined
+}
+
+function getErrorCode(err: unknown): string | null {
+  return typeof (err as { code?: unknown })?.code === 'string'
+    ? (err as { code: string }).code
+    : null
+}

package/src/modules/admin-users/components/update.module.css

@@ -0,0 +1,49 @@
+/**
+ * UpdateAdminUser — drawer form for editing an admin user.
+ *
+ * Override handles:
+ *   .byline-user-update-wrap     — outer container
+ *   .byline-user-update-form     — vertical-stack form element
+ *   .byline-user-update-flags    — checkbox stack (enabled / verified / super)
+ *   .byline-user-update-actions  — Cancel/Save row
+ *   .byline-user-update-action   — buttons in the actions row
+ */
+
+.wrap,
+:global(.byline-user-update-wrap) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  padding: var(--spacing-4);
+  margin-top: var(--spacing-4);
+}
+
+.form,
+:global(.byline-user-update-form) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  padding-top: var(--spacing-8);
+}
+
+.flags,
+:global(.byline-user-update-flags) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  padding: var(--spacing-4);
+}
+
+.actions,
+:global(.byline-user-update-actions) {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-8);
+  margin-top: var(--spacing-16);
+}
+
+.action,
+:global(.byline-user-update-action) {
+  min-width: 4rem;
+}

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

@@ -0,0 +1,328 @@
+'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
+ */
+
+/**
+ * Account details drawer form.
+ *
+ * Client-side validation runs through TanStack Form's `onDynamic` +
+ * Zod — same rules the server uses, re-declared here so field errors
+ * show up without a network round-trip. On submit the form diffs
+ * against the original row and sends only the *changed* fields as a
+ * patch, plus the `vid` the form was opened with, so a concurrent edit
+ * elsewhere comes back as `admin.users.versionConflict` and we surface
+ * a reload prompt.
+ */
+
+import { useState } from 'react'
+import { revalidateLogic, useForm } from '@tanstack/react-form-start'
+
+import { Alert, Button, Checkbox, Input, LoaderEllipsis } from '@byline/ui/react'
+import cx from 'classnames'
+import { z } from 'zod'
+
+import { useBylineAdminServices } from '../../../services/admin-services-context.js'
+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(),
+})
+
+type UpdateUserValues = z.infer<typeof updateUserSchema>
+
+function defaultsFrom(user: AdminUserResponse): UpdateUserValues {
+  return {
+    given_name: user.given_name ?? '',
+    family_name: user.family_name ?? '',
+    username: user.username ?? '',
+    email: user.email,
+    is_super_admin: user.is_super_admin,
+    is_enabled: user.is_enabled,
+    is_email_verified: user.is_email_verified,
+  }
+}
+
+/** Build a patch object containing only fields whose values differ from the original user row. */
+function buildPatch(values: UpdateUserValues, user: AdminUserResponse) {
+  const patch: {
+    given_name?: string | null
+    family_name?: string | null
+    username?: string | null
+    email?: string
+    is_super_admin?: boolean
+    is_enabled?: boolean
+    is_email_verified?: boolean
+  } = {}
+  // Text fields: treat empty string as null (clear). null === null matches,
+  // '' → null ≠ current null stays consistent.
+  const normaliseText = (value: string): string | null => (value.trim().length > 0 ? value : null)
+  const nextGiven = normaliseText(values.given_name)
+  const nextFamily = normaliseText(values.family_name)
+  const nextUsername = normaliseText(values.username)
+
+  if (nextGiven !== user.given_name) patch.given_name = nextGiven
+  if (nextFamily !== user.family_name) patch.family_name = nextFamily
+  if (nextUsername !== user.username) patch.username = nextUsername
+  if (values.email !== user.email) patch.email = values.email
+  if (values.is_super_admin !== user.is_super_admin) patch.is_super_admin = values.is_super_admin
+  if (values.is_enabled !== user.is_enabled) patch.is_enabled = values.is_enabled
+  if (values.is_email_verified !== user.is_email_verified)
+    patch.is_email_verified = values.is_email_verified
+  return patch
+}
+
+interface UpdateUserProps {
+  user: AdminUserResponse
+  onClose?: () => void
+  onSuccess?: (user: AdminUserResponse) => void
+}
+
+export function UpdateUser({ user, onClose, onSuccess }: UpdateUserProps) {
+  const { updateAdminUser } = useBylineAdminServices()
+  const [formError, setFormError] = useState<string | null>(null)
+  const [successMessage, setSuccessMessage] = useState<string | null>(null)
+
+  const form = useForm({
+    defaultValues: defaultsFrom(user),
+    validationLogic: revalidateLogic({
+      mode: 'blur',
+      modeAfterSubmission: 'change',
+    }),
+    validators: {
+      onDynamic: updateUserSchema,
+    },
+    onSubmit: async ({ value }) => {
+      setFormError(null)
+      setSuccessMessage(null)
+      const patch = buildPatch(value, user)
+      if (Object.keys(patch).length === 0) {
+        setSuccessMessage('No changes to save.')
+        return
+      }
+
+      try {
+        const updated = await updateAdminUser({
+          data: { id: user.id, vid: user.vid, patch },
+        })
+        setSuccessMessage('Saved.')
+        onSuccess?.(updated)
+      } catch (err) {
+        const code = getErrorCode(err)
+        if (code === 'admin.users.emailInUse') {
+          // Surface on the email field directly.
+          form.setFieldMeta('email', (meta) => ({
+            ...meta,
+            errorMap: { ...meta.errorMap, onServer: 'This email is already in use.' },
+            errors: ['This email is already in use.'],
+          }))
+          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.'
+          )
+          return
+        }
+        if (code === 'admin.users.notFound') {
+          setFormError('This user no longer exists.')
+          return
+        }
+        setFormError('Could not save changes. Please try again.')
+      }
+    },
+  })
+
+  return (
+    <div className={cx('byline-user-update-wrap', styles.wrap)}>
+      <form
+        noValidate
+        onSubmit={(event) => {
+          event.preventDefault()
+          event.stopPropagation()
+          void form.handleSubmit()
+        }}
+        className={cx('byline-user-update-form', styles.form)}
+      >
+        {formError ? <Alert intent="danger">{formError}</Alert> : null}
+        {successMessage ? <Alert intent="success">{successMessage}</Alert> : null}
+
+        <form.Field name="given_name">
+          {(field) => (
+            <Input
+              label="Given name"
+              id="given_name"
+              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="given-name"
+            />
+          )}
+        </form.Field>
+
+        <form.Field name="family_name">
+          {(field) => (
+            <Input
+              label="Family name"
+              id="family_name"
+              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="family-name"
+            />
+          )}
+        </form.Field>
+
+        <form.Field name="username">
+          {(field) => (
+            <Input
+              label="Username"
+              id="username"
+              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)}
+              helpText="Optional. Leave blank to clear."
+              autoComplete="username"
+            />
+          )}
+        </form.Field>
+
+        <form.Field name="email">
+          {(field) => (
+            <Input
+              label="Email"
+              id="email"
+              name={field.name}
+              type="email"
+              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="email"
+              required
+            />
+          )}
+        </form.Field>
+
+        <div className={cx('byline-user-update-flags', styles.flags)}>
+          <form.Field name="is_enabled">
+            {(field) => (
+              <Checkbox
+                id="is_enabled"
+                name={field.name}
+                label="Enabled"
+                checked={field.state.value}
+                onCheckedChange={(checked) => field.handleChange(checked === true)}
+                helpText="Disabled accounts cannot sign in."
+              />
+            )}
+          </form.Field>
+
+          <form.Field name="is_email_verified">
+            {(field) => (
+              <Checkbox
+                id="is_email_verified"
+                name={field.name}
+                label="Email verified"
+                checked={field.state.value}
+                onCheckedChange={(checked) => field.handleChange(checked === true)}
+              />
+            )}
+          </form.Field>
+
+          <form.Field name="is_super_admin">
+            {(field) => (
+              <Checkbox
+                id="is_super_admin"
+                name={field.name}
+                label="Super admin"
+                checked={field.state.value}
+                onCheckedChange={(checked) => field.handleChange(checked === true)}
+                helpText="Super admins bypass every ability check — grant with care."
+              />
+            )}
+          </form.Field>
+        </div>
+
+        <div className={cx('byline-user-update-actions', styles.actions)}>
+          <Button
+            type="button"
+            intent="secondary"
+            size="sm"
+            onClick={onClose}
+            className={cx('byline-user-update-action', styles.action)}
+          >
+            {successMessage ? 'Close' : '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-user-update-action', styles.action)}
+              >
+                {isSubmitting === true ? <LoaderEllipsis size={42} /> : 'Save'}
+              </Button>
+            )}
+          </form.Subscribe>
+        </div>
+      </form>
+    </div>
+  )
+}
+
+function firstError(errors: readonly unknown[]): string | undefined {
+  for (const err of errors) {
+    if (typeof err === 'string') return err
+    if (err && typeof err === 'object' && 'message' in err) {
+      const msg = (err as { message?: unknown }).message
+      if (typeof msg === 'string') return msg
+    }
+  }
+  return undefined
+}
+
+/**
+ * Extract the admin-users error code from a thrown server-fn response.
+ * Typed errors (`AdminUsersError`, `AuthError`) survive the server-fn
+ * boundary with their `code` intact thanks to the `BylineCodedError`
+ * serialization adapter registered in `src/start.ts`.
+ */
+function getErrorCode(err: unknown): string | null {
+  return typeof (err as { code?: unknown })?.code === 'string'
+    ? (err as { code: string }).code
+    : null
+}

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

@@ -0,0 +1,39 @@
+/**
+ * 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 { AdminUserRow } from './repository.js'
+import type { AdminUserResponse } from './schemas.js'
+
+/**
+ * Shape an `AdminUserRow` into its public `AdminUserResponse` form.
+ *
+ * The row type from the repository already omits `password_hash`, so
+ * this is effectively an identity map — the indirection exists so that
+ * if internal fields ever get added to the row (e.g. tenant id,
+ * soft-delete timestamp), they are explicitly opted out of the public
+ * shape here rather than leaking by default.
+ */
+export function toAdminUser(row: AdminUserRow): AdminUserResponse {
+  return {
+    id: row.id,
+    vid: row.vid,
+    email: row.email,
+    given_name: row.given_name,
+    family_name: row.family_name,
+    username: row.username,
+    remember_me: row.remember_me,
+    last_login: row.last_login,
+    last_login_ip: row.last_login_ip,
+    failed_login_attempts: row.failed_login_attempts,
+    is_super_admin: row.is_super_admin,
+    is_enabled: row.is_enabled,
+    is_email_verified: row.is_email_verified,
+    created_at: row.created_at,
+    updated_at: row.updated_at,
+  }
+}

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

@@ -0,0 +1,84 @@
+/**
+ * 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
+ */
+
+/**
+ * Module-local error codes for admin-users.
+ *
+ * Follows the same `code + factory` shape used by `AuthError` in
+ * `@byline/auth`, but with its own class so consumers can distinguish
+ * admin-users-specific failures from generic auth failures (e.g. to
+ * translate `EMAIL_IN_USE` into a 409 at a transport boundary while
+ * `FORBIDDEN` maps to 403).
+ *
+ * The codes are intentionally prefixed — `admin.users.*` — so they sort
+ * alongside the matching ability keys in logs and admin UI messages.
+ */
+
+export const AdminUsersErrorCodes = {
+  NOT_FOUND: 'admin.users.notFound',
+  EMAIL_IN_USE: 'admin.users.emailInUse',
+  SELF_DELETE_FORBIDDEN: 'admin.users.selfDeleteForbidden',
+  SELF_DISABLE_FORBIDDEN: 'admin.users.selfDisableForbidden',
+  VERSION_CONFLICT: 'admin.users.versionConflict',
+} as const
+
+export type AdminUsersErrorCode = (typeof AdminUsersErrorCodes)[keyof typeof AdminUsersErrorCodes]
+
+export interface AdminUsersErrorOptions {
+  message?: string
+  cause?: unknown
+}
+
+export class AdminUsersError extends Error {
+  public readonly code: AdminUsersErrorCode
+
+  constructor(code: AdminUsersErrorCode, options: { message: string; cause?: unknown }) {
+    super(options.message, options.cause != null ? { cause: options.cause } : undefined)
+    this.name = 'AdminUsersError'
+    this.code = code
+  }
+}
+
+const make =
+  (code: AdminUsersErrorCode, defaultMessage: string) =>
+  (options?: AdminUsersErrorOptions): AdminUsersError =>
+    new AdminUsersError(code, {
+      message: options?.message ?? defaultMessage,
+      cause: options?.cause,
+    })
+
+/** The referenced admin user id does not exist. */
+export const ERR_ADMIN_USER_NOT_FOUND = make(AdminUsersErrorCodes.NOT_FOUND, 'admin user not found')
+
+/** Creating or updating an admin user conflicts with an existing email. */
+export const ERR_ADMIN_USER_EMAIL_IN_USE = make(
+  AdminUsersErrorCodes.EMAIL_IN_USE,
+  'email already in use'
+)
+
+/** The actor attempted to delete their own admin-user row. */
+export const ERR_ADMIN_USER_SELF_DELETE = make(
+  AdminUsersErrorCodes.SELF_DELETE_FORBIDDEN,
+  'cannot delete your own admin account'
+)
+
+/** The actor attempted to disable their own admin-user row. */
+export const ERR_ADMIN_USER_SELF_DISABLE = make(
+  AdminUsersErrorCodes.SELF_DISABLE_FORBIDDEN,
+  'cannot disable your own admin account'
+)
+
+/**
+ * The stored `vid` does not match the client-supplied `expectedVid` —
+ * the caller is holding a stale version of the row. Typical admin-UI
+ * response is to reload the edit form with the current values.
+ */
+export const ERR_ADMIN_USER_VERSION_CONFLICT = make(
+  AdminUsersErrorCodes.VERSION_CONFLICT,
+  'admin user has been modified elsewhere — please reload and try again'
+)