@byline/ui 0.9.3

package/src/admin/components/admin-users/roles.module.css

@@ -0,0 +1,119 @@
+/**
+ * UserRoles — drawer for assigning roles to a user.
+ *
+ * Override handles:
+ *   .byline-user-roles-wrap        — outer container
+ *   .byline-user-roles-empty       — "no roles created yet" empty-state
+ *   .byline-user-roles-empty-hint  — inline machine-name hint
+ *   .byline-user-roles-list        — flat checkbox list
+ *   .byline-user-roles-row         — single role row
+ *   .byline-user-roles-label       — clickable label
+ *   .byline-user-roles-label-head  — name + machine-name pill row
+ *   .byline-user-roles-name        — role display name
+ *   .byline-user-roles-machine     — inline code pill (machine name)
+ *   .byline-user-roles-description — role description
+ *   .byline-user-roles-actions     — Cancel/Save row
+ *   .byline-user-roles-action      — buttons in the actions row
+ */
+
+.wrap,
+:global(.byline-user-roles-wrap) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-12);
+  padding: var(--spacing-4);
+  margin-top: var(--spacing-4);
+}
+
+.empty,
+:global(.byline-user-roles-empty) {
+  margin: 0;
+  font-style: italic;
+}
+
+.empty-hint,
+:global(.byline-user-roles-empty-hint) {
+  /* Inherits muted colour from the parent .muted utility. */
+}
+
+.list,
+:global(.byline-user-roles-list) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
+
+.row,
+:global(.byline-user-roles-row) {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-8);
+  padding: var(--spacing-4) 0;
+}
+
+.label,
+:global(.byline-user-roles-label) {
+  min-width: 0;
+  flex: 1 1 0;
+  cursor: pointer;
+}
+
+.label-head,
+:global(.byline-user-roles-label-head) {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-8);
+}
+
+.name,
+:global(.byline-user-roles-name) {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
+.machine,
+:global(.byline-user-roles-machine) {
+  background-color: var(--gray-100);
+  padding: 0.125rem 0.375rem;
+  font-size: var(--font-size-xs);
+  border-radius: var(--border-radius-sm);
+}
+
+.description,
+:global(.byline-user-roles-description) {
+  margin-bottom: 0;
+  font-size: var(--font-size-xs);
+}
+
+.actions,
+:global(.byline-user-roles-actions) {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-8);
+  margin-top: var(--spacing-16);
+}
+
+.action,
+:global(.byline-user-roles-action) {
+  min-width: 4rem;
+}
+
+/*
+ * Checkbox shrink-fit — see admin-roles/permissions.module.css for the
+ * rationale; the same override is needed here for the per-user role
+ * checkbox list. `!important` is required to win over the uikit
+ * Checkbox's `width: 100%` default at equal specificity.
+ */
+.checkbox-auto,
+:global(.byline-user-roles-checkbox-auto) {
+  /* biome-ignore lint/complexity/noImportantStyles: see admin-roles/permissions.module.css */
+  width: auto !important;
+}
+
+:is([data-theme="dark"], :global(.dark)) {
+  .machine,
+  :global(.byline-user-roles-machine) {
+    background-color: var(--canvas-800);
+  }
+}

package/src/admin/components/admin-users/roles.tsx

@@ -0,0 +1,172 @@
+'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
+ */
+
+/**
+ * User-roles drawer.
+ *
+ * Renders a flat checkbox list of every available role, pre-checked
+ * from the user's current assignments. On save we wholesale-replace
+ * the user's role-set via `setUserRoles`; the response carries the
+ * authoritative stored set so the editor's "initial" baseline resets
+ * cleanly.
+ *
+ * Standard drawer pattern (no view/edit mode toggle) — role lists are
+ * short by design and the drawer is a short-lived edit context, not
+ * a steady-state inspector. Save + Cancel are always visible; Save
+ * is disabled until dirty.
+ */
+
+import { useState } from 'react'
+
+import type { AdminRoleResponse, UserRolesResponse } from '@byline/admin/admin-roles'
+import type { AdminUserResponse } from '@byline/admin/admin-users'
+import { Alert, Button, Checkbox, LoaderEllipsis } from '@infonomic/uikit/react'
+import cx from 'classnames'
+
+import { useBylineAdminServices } from '../../../services/admin-services-context.js'
+import styles from './roles.module.css'
+
+interface UserRolesProps {
+  user: AdminUserResponse
+  allRoles: AdminRoleResponse[]
+  initialRoleIds: string[]
+  onClose?: () => void
+  onSaved?: (response: UserRolesResponse) => void
+}
+
+function setsEqual(a: ReadonlySet<string>, b: ReadonlySet<string>): boolean {
+  if (a.size !== b.size) return false
+  for (const item of a) if (!b.has(item)) return false
+  return true
+}
+
+export function UserRoles({ user, allRoles, initialRoleIds, onClose, onSaved }: UserRolesProps) {
+  const { setUserRoles } = useBylineAdminServices()
+  const [initialSet, setInitialSet] = useState<ReadonlySet<string>>(() => new Set(initialRoleIds))
+  const [selected, setSelected] = useState<Set<string>>(() => new Set(initialRoleIds))
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [successMessage, setSuccessMessage] = useState<string | null>(null)
+
+  const isDirty = !setsEqual(selected, initialSet)
+
+  function handleToggle(roleId: string, checked: boolean): void {
+    setSelected((current) => {
+      const next = new Set(current)
+      if (checked) next.add(roleId)
+      else next.delete(roleId)
+      return next
+    })
+    setSuccessMessage(null)
+  }
+
+  async function handleSave(): Promise<void> {
+    if (saving) return
+    setSaving(true)
+    setError(null)
+    setSuccessMessage(null)
+    try {
+      const response = await setUserRoles({
+        data: { userId: user.id, roleIds: Array.from(selected) },
+      })
+      const storedSet = new Set(response.roles.map((r) => r.id))
+      setInitialSet(storedSet)
+      setSelected(new Set(storedSet))
+      setSuccessMessage('Saved.')
+      onSaved?.(response)
+    } catch (err) {
+      const code = getErrorCode(err)
+      if (code === 'admin.roles.userNotFound') {
+        setError('This user no longer exists.')
+      } else if (code === 'admin.roles.notFound') {
+        setError('One or more selected roles no longer exist. Reload the page and try again.')
+      } else {
+        setError('Could not save roles. Please try again.')
+      }
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  return (
+    <div className={cx('byline-user-roles-wrap', styles.wrap)}>
+      {error ? <Alert intent="danger">{error}</Alert> : null}
+      {successMessage ? <Alert intent="success">{successMessage}</Alert> : null}
+
+      {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.
+        </p>
+      ) : (
+        <div className={cx('byline-user-roles-list', styles.list)}>
+          {allRoles.map((role) => (
+            <div key={role.id} className={cx('byline-user-roles-row', styles.row)}>
+              <Checkbox
+                id={`role-${role.id}`}
+                name={`role-${role.id}`}
+                checked={selected.has(role.id)}
+                disabled={saving}
+                onCheckedChange={(checked) => handleToggle(role.id, checked === true)}
+                containerClasses={cx('byline-user-roles-checkbox-auto', styles['checkbox-auto'])}
+                componentClasses={cx('byline-user-roles-checkbox-auto', styles['checkbox-auto'])}
+              />
+              <label
+                htmlFor={`role-${role.id}`}
+                className={cx('byline-user-roles-label', styles.label)}
+              >
+                <div className={cx('byline-user-roles-label-head', styles['label-head'])}>
+                  <span className={cx('byline-user-roles-name', styles.name)}>{role.name}</span>
+                  <code className={cx('byline-user-roles-machine', styles.machine)}>
+                    {role.machine_name}
+                  </code>
+                </div>
+                {role.description ? (
+                  <p className={cx('muted', 'byline-user-roles-description', styles.description)}>
+                    {role.description}
+                  </p>
+                ) : null}
+              </label>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div className={cx('byline-user-roles-actions', styles.actions)}>
+        <Button
+          type="button"
+          intent="secondary"
+          size="xs"
+          onClick={onClose}
+          disabled={saving}
+          className={cx('byline-user-roles-action', styles.action)}
+        >
+          {successMessage ? 'Close' : 'Cancel'}
+        </Button>
+        <Button
+          type="button"
+          intent="primary"
+          size="xs"
+          onClick={() => void handleSave()}
+          disabled={saving || !isDirty}
+          className={cx('byline-user-roles-action', styles.action)}
+        >
+          {saving ? <LoaderEllipsis size={30} /> : 'Save'}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+function getErrorCode(err: unknown): string | null {
+  return typeof (err as { code?: unknown })?.code === 'string'
+    ? (err as { code: string }).code
+    : null
+}

package/src/admin/components/admin-users/set-password.module.css

@@ -0,0 +1,46 @@
+/**
+ * SetAdminUserPassword — privileged "set password" drawer form.
+ *
+ * Override handles:
+ *   .byline-user-set-password-wrap     — outer container
+ *   .byline-user-set-password-form     — vertical-stack form element
+ *   .byline-user-set-password-target   — bold target email span in the lead-in
+ *   .byline-user-set-password-actions  — Cancel/Save row
+ *   .byline-user-set-password-action   — buttons in the actions row
+ */
+
+.wrap,
+:global(.byline-user-set-password-wrap) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  padding: var(--spacing-4);
+  margin-top: var(--spacing-4);
+}
+
+.form,
+:global(.byline-user-set-password-form) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  padding-top: var(--spacing-8);
+}
+
+.target,
+:global(.byline-user-set-password-target) {
+  font-weight: var(--font-weight-semibold);
+}
+
+.actions,
+:global(.byline-user-set-password-actions) {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-8);
+  margin-top: var(--spacing-16);
+}
+
+.action,
+:global(.byline-user-set-password-action) {
+  min-width: 4rem;
+}

package/src/admin/components/admin-users/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 type { AdminUserResponse } from '@byline/admin/admin-users'
+import { passwordSchema } from '@byline/core/validation'
+import { Alert, Button, InputPassword, LoaderEllipsis } from '@infonomic/uikit/react'
+import cx from 'classnames'
+import { z } from 'zod'
+
+import { useBylineAdminServices } from '../../../services/admin-services-context.js'
+import styles from './set-password.module.css'
+
+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/admin/components/admin-users/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;
+}