@byline/ui 0.9.3

package/src/admin/components/admin-users/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 type { AdminUserResponse } from '@byline/admin/admin-users'
+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 './update.module.css'
+
+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/admin/components/auth/sign-in-form.module.css

@@ -0,0 +1,53 @@
+/**
+ * SignInForm — admin sign-in card form.
+ *
+ * Override handles:
+ *   .byline-sign-in-card     — outer Card (responsive width)
+ *   .byline-sign-in-alert    — error alert spacing
+ *   .byline-sign-in-form     — the form element
+ *   .byline-sign-in-fields   — vertical stack of inputs
+ *   .byline-sign-in-actions  — submit-button row
+ *   .byline-sign-in-button   — the submit button (min-width)
+ */
+
+.card,
+:global(.byline-sign-in-card) {
+  width: 100%;
+}
+
+@media (min-width: 40rem) {
+  .card,
+  :global(.byline-sign-in-card) {
+    max-width: 380px;
+  }
+}
+
+.alert,
+:global(.byline-sign-in-alert) {
+  margin-top: var(--spacing-12);
+}
+
+.form,
+:global(.byline-sign-in-form) {
+  padding-top: var(--spacing-8);
+  margin-bottom: var(--spacing-8);
+}
+
+.fields,
+:global(.byline-sign-in-fields) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+}
+
+.actions,
+:global(.byline-sign-in-actions) {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: var(--spacing-24);
+}
+
+.button,
+:global(.byline-sign-in-button) {
+  min-width: 5rem;
+}

package/src/admin/components/auth/sign-in-form.tsx

@@ -0,0 +1,118 @@
+/**
+ * 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
+ */
+
+/**
+ * Admin sign-in form.
+ *
+ * Client component — collects email + password, calls the `adminSignIn`
+ * server fn, and on success navigates to the caller-supplied
+ * `callbackUrl` (or `/admin`). On failure renders a generic "Invalid
+ * credentials" alert; the provider equalises timing between
+ * unknown-email and wrong-password so the UI doesn't distinguish the two.
+ *
+ * Stable override handles: `.byline-sign-in-card`, `.byline-sign-in-alert`,
+ * `.byline-sign-in-form`, `.byline-sign-in-fields`,
+ * `.byline-sign-in-actions`, `.byline-sign-in-button`.
+ */
+
+import { type FormEvent, useState } from 'react'
+
+import { Alert, Button, Card, Input, LoaderEllipsis } from '@infonomic/uikit/react'
+import cx from 'classnames'
+
+import { useBylineAdminServices } from '../../../services/admin-services-context.js'
+import styles from './sign-in-form.module.css'
+
+interface SignInFormProps {
+  /** Destination after successful sign-in. Defaults to `/admin`. */
+  callbackUrl?: string
+}
+
+export function SignInForm({ callbackUrl }: SignInFormProps) {
+  const { adminSignIn } = useBylineAdminServices()
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [pending, setPending] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault()
+    if (pending) return
+    if (email.trim().length === 0 || password.length === 0) {
+      setError('Enter your email and password.')
+      return
+    }
+
+    setPending(true)
+    setError(null)
+    try {
+      await adminSignIn({ data: { email: email.trim(), password } })
+      const target = callbackUrl && callbackUrl.length > 0 ? callbackUrl : '/admin'
+      // Full-page navigation — the admin layout needs to re-run its
+      // `beforeLoad` guard against the freshly-set session cookies.
+      window.location.assign(target)
+    } catch (err) {
+      console.warn('sign-in failed', err)
+      setError('Invalid credentials.')
+      setPending(false)
+    }
+  }
+
+  return (
+    <Card className={cx('byline-sign-in-card', styles.card)}>
+      <Card.Header>
+        <Card.Title>
+          <h2>Sign in</h2>
+        </Card.Title>
+        <Card.Description>Sign in to the Byline admin.</Card.Description>
+        {error && (
+          <Alert intent="danger" className={cx('byline-sign-in-alert', styles.alert)}>
+            {error}
+          </Alert>
+        )}
+      </Card.Header>
+      <Card.Content>
+        <form onSubmit={handleSubmit} noValidate className={cx('byline-sign-in-form', styles.form)}>
+          <div className={cx('byline-sign-in-fields', styles.fields)}>
+            <Input
+              label="Email"
+              id="email"
+              name="email"
+              type="email"
+              autoComplete="email"
+              required
+              value={email}
+              onChange={(event) => setEmail(event.currentTarget.value)}
+              disabled={pending}
+            />
+            <Input
+              label="Password"
+              id="password"
+              name="password"
+              type="password"
+              autoComplete="current-password"
+              required
+              value={password}
+              onChange={(event) => setPassword(event.currentTarget.value)}
+              disabled={pending}
+            />
+          </div>
+          <div className={cx('byline-sign-in-actions', styles.actions)}>
+            <Button
+              type="submit"
+              disabled={pending}
+              className={cx('byline-sign-in-button', styles.button)}
+            >
+              {pending ? <LoaderEllipsis size={30} color="#aaaaaa" /> : <span>Sign In</span>}
+            </Button>
+          </div>
+        </form>
+      </Card.Content>
+    </Card>
+  )
+}

package/src/admin/components/collections/diff-modal.module.css

@@ -0,0 +1,79 @@
+/**
+ * DiffModal — side-by-side document version comparison modal.
+ *
+ * Override handles:
+ *   .byline-diff-modal-header     — modal header padding
+ *   .byline-diff-modal-title-stack — heading + subtitle stack
+ *   .byline-diff-modal-title      — heading
+ *   .byline-diff-modal-subtitle   — subtitle line
+ *   .byline-diff-modal-version    — inline pill identifying the historical version
+ *   .byline-diff-modal-content    — scrollable content
+ *   .byline-diff-modal-state      — loading / error placeholder
+ *   .byline-diff-modal-error      — error placeholder colour modifier
+ *   .byline-diff-modal-viewer     — diff viewer wrapper
+ */
+
+.header,
+:global(.byline-diff-modal-header) {
+  padding-top: var(--spacing-16);
+  margin-bottom: var(--spacing-8);
+  flex-shrink: 0;
+}
+
+.title-stack,
+:global(.byline-diff-modal-title-stack) {
+  display: flex;
+  flex-direction: column;
+}
+
+.title,
+:global(.byline-diff-modal-title) {
+  margin: 0;
+  font-size: var(--font-size-xl);
+}
+
+.subtitle,
+:global(.byline-diff-modal-subtitle) {
+  margin: 0;
+  font-size: var(--font-size-sm);
+  color: var(--gray-400);
+}
+
+.version,
+:global(.byline-diff-modal-version) {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-xs);
+  background-color: var(--canvas-700);
+  padding: 0 var(--spacing-4);
+  border-radius: var(--border-radius-sm);
+}
+
+.content,
+:global(.byline-diff-modal-content) {
+  flex: 1 1 0;
+  overflow: auto;
+  padding: 0;
+  min-height: 0;
+}
+
+.state,
+:global(.byline-diff-modal-state) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  gap: var(--spacing-12);
+  color: var(--gray-400);
+}
+
+.error,
+:global(.byline-diff-modal-error) {
+  color: var(--red-400);
+  gap: 0;
+}
+
+.viewer,
+:global(.byline-diff-modal-viewer) {
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+}