@byline/ui 2.4.0 → 2.4.1

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

@@ -1,119 +0,0 @@
-/**
- * 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

@@ -1,172 +0,0 @@
-'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 cx from 'classnames'
-
-import { useBylineAdminServices } from '../../../services/admin-services-context.js'
-import { Alert, Button, Checkbox, LoaderEllipsis } from '../../../uikit.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

@@ -1,46 +0,0 @@
-/**
- * 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

@@ -1,199 +0,0 @@
-'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 cx from 'classnames'
-import { z } from 'zod'
-
-import { useBylineAdminServices } from '../../../services/admin-services-context.js'
-import { Alert, Button, InputPassword, LoaderEllipsis } from '../../../uikit.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

@@ -1,49 +0,0 @@
-/**
- * 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;
-}