@byline/ui 2.4.0 → 2.4.1

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

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

@@ -1,62 +0,0 @@
-/**
- * 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   — action row (optional Home link + submit button)
- *   .byline-sign-in-home-link — left-side "Home" link (rendered when homeUrl is set)
- *   .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;
-  align-items: center;
-  margin-top: var(--spacing-24);
-}
-
-.home-link,
-:global(.byline-sign-in-home-link) {
-  font-size: 0.9rem;
-  text-decoration: underline;
-}
-
-.button,
-:global(.byline-sign-in-button) {
-  min-width: 5rem;
-  /* Always floats right whether or not a Home link is present on the left. */
-  margin-left: auto;
-}

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

@@ -1,132 +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
- */
-
-/**
- * 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`,
- * `.byline-sign-in-home-link`.
- */
-
-import { type FormEvent, useState } from 'react'
-
-import cx from 'classnames'
-
-import { useBylineAdminServices } from '../../../services/admin-services-context.js'
-import { Alert, Button, Card, Input, LoaderEllipsis } from '../../../uikit.js'
-import styles from './sign-in-form.module.css'
-
-interface SignInFormProps {
-  /** Destination after successful sign-in. Defaults to `/admin`. */
-  callbackUrl?: string
-  /**
-   * Optional plain "Home" link rendered on the left of the action row.
-   * Typically the host's configured `serverURL` so signed-out admins can
-   * navigate back to the public site without typing the URL.
-   */
-  homeUrl?: string
-}
-
-export function SignInForm({ callbackUrl, homeUrl }: 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)}>
-            {homeUrl && (
-              <a href={homeUrl} className={cx('byline-sign-in-home-link', styles['home-link'])}>
-                Home
-              </a>
-            )}
-            <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/services/admin-services-context.tsx

@@ -1,35 +0,0 @@
-/**
- * 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 { createContext, type ReactNode, useContext } from 'react'
-
-import type { BylineAdminServices } from './admin-services-types.js'
-
-const AdminServicesContext = createContext<BylineAdminServices | null>(null)
-
-interface BylineAdminServicesProviderProps {
-  services: BylineAdminServices
-  children: ReactNode
-}
-
-export const BylineAdminServicesProvider = ({
-  services,
-  children,
-}: BylineAdminServicesProviderProps) => (
-  <AdminServicesContext.Provider value={services}>{children}</AdminServicesContext.Provider>
-)
-
-export const useBylineAdminServices = (): BylineAdminServices => {
-  const ctx = useContext(AdminServicesContext)
-  if (!ctx) {
-    throw new Error(
-      '@byline/ui: BylineAdminServicesProvider missing. Wrap your admin tree with <BylineAdminServicesProvider services={…} />.'
-    )
-  }
-  return ctx
-}