@byline/ui 0.9.3

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

@@ -0,0 +1,218 @@
+'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
+ */
+
+/**
+ * Role details drawer form.
+ *
+ * Mirrors the admin-users update pattern: TanStack Form + Zod, blur-then-
+ * change validation, diff-against-original patch, optimistic concurrency
+ * via `vid`. `machine_name` is read-only here — it is captured at create
+ * time and immutable thereafter.
+ */
+
+import { useState } from 'react'
+import { revalidateLogic, useForm } from '@tanstack/react-form-start'
+
+import type { AdminRoleResponse } from '@byline/admin/admin-roles'
+import { Alert, Button, Input, LoaderEllipsis, TextArea } from '@infonomic/uikit/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 { UpdateAdminRoleInput } from '../../../services/admin-services-types.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'),
+})
+
+type UpdateRoleValues = z.infer<typeof updateRoleSchema>
+
+function defaultsFrom(role: AdminRoleResponse): UpdateRoleValues {
+  return {
+    name: role.name,
+    description: role.description ?? '',
+  }
+}
+
+/** Build a patch object containing only fields whose values differ from the original role. */
+function buildPatch(
+  values: UpdateRoleValues,
+  role: AdminRoleResponse
+): UpdateAdminRoleInput['patch'] {
+  const patch: UpdateAdminRoleInput['patch'] = {}
+  const normaliseText = (value: string): string | null => (value.trim().length > 0 ? value : null)
+  const nextDescription = normaliseText(values.description)
+  const nextName = values.name.trim()
+
+  if (nextName !== role.name) patch.name = nextName
+  if (nextDescription !== role.description) patch.description = nextDescription
+  return patch
+}
+
+interface UpdateRoleProps {
+  role: AdminRoleResponse
+  onClose?: () => void
+  onSuccess?: (role: AdminRoleResponse) => void
+}
+
+export function UpdateRole({ role, onClose, onSuccess }: UpdateRoleProps) {
+  const { updateAdminRole } = useBylineAdminServices()
+  const [formError, setFormError] = useState<string | null>(null)
+  const [successMessage, setSuccessMessage] = useState<string | null>(null)
+
+  const form = useForm({
+    defaultValues: defaultsFrom(role),
+    validationLogic: revalidateLogic({
+      mode: 'blur',
+      modeAfterSubmission: 'change',
+    }),
+    validators: {
+      onDynamic: updateRoleSchema,
+    },
+    onSubmit: async ({ value }) => {
+      setFormError(null)
+      setSuccessMessage(null)
+      const patch = buildPatch(value, role)
+      if (Object.keys(patch).length === 0) {
+        setSuccessMessage('No changes to save.')
+        return
+      }
+
+      try {
+        const updated = await updateAdminRole({
+          data: { id: role.id, vid: role.vid, patch },
+        })
+        setSuccessMessage('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.'
+          )
+          return
+        }
+        if (code === 'admin.roles.notFound') {
+          setFormError('This role no longer exists.')
+          return
+        }
+        setFormError('Could not save changes. Please try again.')
+      }
+    },
+  })
+
+  return (
+    <div className={cx('byline-role-update-wrap', styles.wrap)}>
+      <form
+        noValidate
+        onSubmit={(event) => {
+          event.preventDefault()
+          event.stopPropagation()
+          void form.handleSubmit()
+        }}
+        className={cx('byline-role-update-form', styles.form)}
+      >
+        {formError ? <Alert intent="danger">{formError}</Alert> : null}
+        {successMessage ? <Alert intent="success">{successMessage}</Alert> : null}
+
+        <form.Field name="name">
+          {(field) => (
+            <Input
+              label="Name"
+              id="role-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)}
+              required
+            />
+          )}
+        </form.Field>
+
+        <Input
+          label="Machine name"
+          id="role-machine-name"
+          name="machine_name"
+          value={role.machine_name}
+          readOnly
+          disabled
+          helpText="The stable code-side handle. Cannot be changed after creation."
+        />
+
+        <form.Field name="description">
+          {(field) => (
+            <TextArea
+              label="Description"
+              id="role-description"
+              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)}
+              rows={3}
+            />
+          )}
+        </form.Field>
+
+        <div className={cx('byline-role-update-actions', styles.actions)}>
+          <Button
+            type="button"
+            intent="secondary"
+            size="sm"
+            onClick={onClose}
+            className={cx('byline-role-update-action', styles.action)}
+          >
+            {successMessage ? 'Close' : 'Cancel'}
+          </Button>
+          <form.Subscribe
+            selector={(state) => ({
+              canSubmit: state.canSubmit,
+              isSubmitting: state.isSubmitting,
+            })}
+          >
+            {({ canSubmit, isSubmitting }) => (
+              <Button
+                size="sm"
+                intent="primary"
+                type="submit"
+                disabled={!canSubmit || isSubmitting}
+                className={cx('byline-role-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
+}
+
+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/create.module.css

@@ -0,0 +1,63 @@
+/**
+ * CreateAdminUser — drawer form for creating a new admin user.
+ *
+ * Override handles:
+ *   .byline-user-create-wrap     — outer container
+ *   .byline-user-create-form     — vertical-stack form element
+ *   .byline-user-create-grid     — two-column name grid (collapses on mobile)
+ *   .byline-user-create-flags    — checkbox stack (enabled / verified / super)
+ *   .byline-user-create-actions  — Cancel/Save row
+ *   .byline-user-create-action   — buttons in the actions row
+ */
+
+.wrap,
+:global(.byline-user-create-wrap) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+  padding: var(--spacing-4);
+  margin-top: var(--spacing-4);
+}
+
+.form,
+:global(.byline-user-create-form) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  padding-top: var(--spacing-8);
+}
+
+.grid,
+:global(.byline-user-create-grid) {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-16);
+}
+
+@media (min-width: 40rem) {
+  .grid,
+  :global(.byline-user-create-grid) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.flags,
+:global(.byline-user-create-flags) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-8);
+}
+
+.actions,
+:global(.byline-user-create-actions) {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-8);
+  margin-top: var(--spacing-16);
+}
+
+.action,
+:global(.byline-user-create-action) {
+  min-width: 4rem;
+}

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

@@ -0,0 +1,323 @@
+'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
+ */
+
+/**
+ * Create-admin-user drawer form.
+ *
+ * Rendered inside the list-view drawer. Same TanStack Form + Zod shape
+ * as the AccountDetails form — fields, blur-then-change validation,
+ * form-level alerts for errors that don't map onto a single field. On
+ * success the parent list-view navigates to the new user's detail page
+ * so the admin can finish configuring (roles, initial enablement).
+ *
+ * Extension point: future props (e.g. a `roles` array once the
+ * admin-roles module lands) plug in here — the list-route loader
+ * already runs in parallel, so adding a side-data fetch is a one-line
+ * change in the loader and a prop here.
+ */
+
+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, Checkbox, Input, LoaderEllipsis } from '@infonomic/uikit/react'
+import cx from 'classnames'
+import { z } from 'zod'
+
+import { useBylineAdminServices } from '../../../services/admin-services-context.js'
+import styles from './create.module.css'
+
+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(),
+})
+
+type CreateAdminUserValues = z.infer<typeof createAdminUserFormSchema>
+
+const initialValues: CreateAdminUserValues = {
+  email: '',
+  password: '',
+  given_name: '',
+  family_name: '',
+  username: '',
+  is_super_admin: false,
+  // Sensible defaults for an admin-created row. A brand-new admin user
+  // is almost always meant to sign in straight away; the admin picks
+  // whether they arrive pre-verified.
+  is_enabled: true,
+  is_email_verified: false,
+}
+
+function normaliseText(value: string): string | null {
+  return value.trim().length > 0 ? value : null
+}
+
+interface CreateAdminUserProps {
+  onClose?: () => void
+  /** Called on successful create with the new user so the parent can navigate. */
+  onSuccess?: (user: AdminUserResponse) => void
+}
+
+export function CreateAdminUser({ onClose, onSuccess }: CreateAdminUserProps) {
+  const { createAdminUser } = useBylineAdminServices()
+  const [formError, setFormError] = useState<string | null>(null)
+
+  const form = useForm({
+    defaultValues: initialValues,
+    validationLogic: revalidateLogic({
+      mode: 'blur',
+      modeAfterSubmission: 'change',
+    }),
+    validators: {
+      onDynamic: createAdminUserFormSchema,
+    },
+    onSubmit: async ({ value }) => {
+      setFormError(null)
+      try {
+        const created = await createAdminUser({
+          data: {
+            email: value.email,
+            password: value.password,
+            given_name: normaliseText(value.given_name),
+            family_name: normaliseText(value.family_name),
+            username: normaliseText(value.username),
+            is_super_admin: value.is_super_admin,
+            is_enabled: value.is_enabled,
+            is_email_verified: value.is_email_verified,
+          },
+        })
+        // Clear the form so the next drawer open starts fresh — the
+        // list-view shows the success as a toast and keeps the drawer
+        // closed until the user clicks "+" again.
+        form.reset(initialValues)
+        onSuccess?.(created)
+      } catch (err) {
+        const code = getErrorCode(err)
+        if (code === 'admin.users.emailInUse') {
+          form.setFieldMeta('email', (meta) => ({
+            ...meta,
+            errorMap: { ...meta.errorMap, onServer: 'This email is already in use.' },
+            errors: ['This email is already in use.'],
+          }))
+          return
+        }
+        setFormError('Could not create this admin user. Please try again.')
+      }
+    },
+  })
+
+  return (
+    <div className={cx('byline-user-create-wrap', styles.wrap)}>
+      <form
+        noValidate
+        onSubmit={(event) => {
+          event.preventDefault()
+          event.stopPropagation()
+          void form.handleSubmit()
+        }}
+        className={cx('byline-user-create-form', styles.form)}
+      >
+        {formError ? <Alert intent="danger">{formError}</Alert> : null}
+
+        <div className={cx('byline-user-create-grid', styles.grid)}>
+          <form.Field name="given_name">
+            {(field) => (
+              <Input
+                label="Given name"
+                id="new-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="new-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>
+        </div>
+
+        <form.Field name="username">
+          {(field) => (
+            <Input
+              label="Username"
+              id="new-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."
+              autoComplete="username"
+            />
+          )}
+        </form.Field>
+
+        <form.Field name="email">
+          {(field) => (
+            <Input
+              label="Email"
+              id="new-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>
+
+        <form.Field name="password">
+          {(field) => (
+            <Input
+              label="Initial password"
+              id="new-password"
+              name={field.name}
+              type="password"
+              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="The user can change it from their own account after signing in."
+              autoComplete="new-password"
+              required
+            />
+          )}
+        </form.Field>
+
+        <div className={cx('byline-user-create-flags', styles.flags)}>
+          <form.Field name="is_enabled">
+            {(field) => (
+              <Checkbox
+                id="new-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="new-is-email-verified"
+                name={field.name}
+                label="Email verified"
+                checked={field.state.value}
+                onCheckedChange={(checked) => field.handleChange(checked === true)}
+                helpText="Skip the verification flow for this account."
+              />
+            )}
+          </form.Field>
+
+          <form.Field name="is_super_admin">
+            {(field) => (
+              <Checkbox
+                id="new-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-create-actions', styles.actions)}>
+          <Button
+            type="button"
+            intent="secondary"
+            size="sm"
+            onClick={onClose}
+            className={cx('byline-user-create-action', styles.action)}
+          >
+            Cancel
+          </Button>
+          <form.Subscribe
+            selector={(state) => ({
+              canSubmit: state.canSubmit,
+              isSubmitting: state.isSubmitting,
+            })}
+          >
+            {({ canSubmit, isSubmitting }) => (
+              <Button
+                size="sm"
+                intent="primary"
+                type="submit"
+                disabled={!canSubmit || isSubmitting}
+                className={cx('byline-user-create-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 {
+  if (err && typeof err === 'object') {
+    const e = err as { code?: unknown; cause?: unknown }
+    if (typeof e.code === 'string') return e.code
+    if (e.cause && typeof e.cause === 'object' && 'code' in e.cause) {
+      const cause = e.cause as { code?: unknown }
+      if (typeof cause.code === 'string') return cause.code
+    }
+  }
+  return null
+}