@byline/ui 2.4.0 → 2.4.2

package/src/admin/components/admin-account/change-password.module.css

@@ -1,40 +0,0 @@
-/**
- * ChangeAccountPassword — self-service password-change form (drawer body).
- *
- * Override handles:
- *   .byline-account-change-password-wrap     — outer container
- *   .byline-account-change-password-form     — vertical-stack form element
- *   .byline-account-change-password-actions  — Cancel/Save row
- *   .byline-account-change-password-action   — buttons in the actions row
- */
-
-.wrap,
-:global(.byline-account-change-password-wrap) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
-  padding: var(--spacing-4);
-  margin-top: var(--spacing-4);
-}
-
-.form,
-:global(.byline-account-change-password-form) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-16);
-  padding-top: var(--spacing-8);
-}
-
-.actions,
-:global(.byline-account-change-password-actions) {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--spacing-8);
-  margin-top: var(--spacing-16);
-}
-
-.action,
-:global(.byline-account-change-password-action) {
-  min-width: 4rem;
-}

package/src/admin/components/admin-account/change-password.tsx

@@ -1,232 +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
- */
-
-/**
- * Self-service change-password drawer form.
- *
- * Distinct from the admin-users `set-password.tsx`:
- *
- *   - Requires the current password as defence against
- *     session-hijack abuse. The server verifies it against the
- *     stored hash before swapping in the new one — wrong current
- *     password surfaces as `admin.account.invalidCurrentPassword`.
- *   - Confirmation field catches typos before round-trip.
- *
- * Caveat: changing the password here does not revoke other active
- * sessions today. Existing access tokens stay valid until expiry
- * (~15 min); a "sign out everywhere on password change" follow-up
- * will close that gap.
- */
-
-import { useState } from 'react'
-import { revalidateLogic, useForm } from '@tanstack/react-form-start'
-
-import type { AccountResponse } from '@byline/admin/admin-account'
-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 './change-password.module.css'
-
-const changePasswordFormSchema = z
-  .object({
-    currentPassword: z.string().min(1, { message: 'Please enter your current password' }),
-    newPassword: passwordSchema,
-    confirm: z.string({ message: 'Please confirm the new password' }),
-  })
-  .refine((v) => v.newPassword === v.confirm, {
-    message: 'New passwords do not match',
-    path: ['confirm'],
-  })
-
-type ChangePasswordValues = z.infer<typeof changePasswordFormSchema>
-
-interface ChangePasswordProps {
-  account: AccountResponse
-  onClose?: () => void
-  onSuccess?: (account: AccountResponse) => void
-}
-
-export function ChangeAccountPassword({ account, onClose, onSuccess }: ChangePasswordProps) {
-  const { changeAccountPassword } = useBylineAdminServices()
-  const [formError, setFormError] = useState<string | null>(null)
-  const [successMessage, setSuccessMessage] = useState<string | null>(null)
-
-  const form = useForm({
-    defaultValues: { currentPassword: '', newPassword: '', confirm: '' } as ChangePasswordValues,
-    validationLogic: revalidateLogic({
-      mode: 'blur',
-      modeAfterSubmission: 'change',
-    }),
-    validators: {
-      onDynamic: changePasswordFormSchema,
-    },
-    onSubmit: async ({ value }) => {
-      setFormError(null)
-      setSuccessMessage(null)
-      try {
-        const updated = await changeAccountPassword({
-          data: {
-            vid: account.vid,
-            currentPassword: value.currentPassword,
-            newPassword: value.newPassword,
-          },
-        })
-        setSuccessMessage('Password updated.')
-        form.reset({ currentPassword: '', newPassword: '', confirm: '' })
-        onSuccess?.(updated)
-      } catch (err) {
-        const code = getErrorCode(err)
-        if (code === 'admin.account.invalidCurrentPassword') {
-          form.setFieldMeta('currentPassword', (meta) => ({
-            ...meta,
-            errorMap: { ...meta.errorMap, onServer: 'Current password is incorrect.' },
-            errors: ['Current password is incorrect.'],
-          }))
-          return
-        }
-        if (code === 'admin.users.versionConflict') {
-          setFormError(
-            'Your account has been modified elsewhere since you opened this form. Reload to refresh and try again.'
-          )
-          return
-        }
-        if (code === 'admin.account.notFound') {
-          setFormError('Your admin account could not be found. Please sign in again.')
-          return
-        }
-        setFormError('Could not change the password. Please try again.')
-      }
-    },
-  })
-
-  return (
-    <div className={cx('byline-account-change-password-wrap', styles.wrap)}>
-      <form
-        noValidate
-        onSubmit={(event) => {
-          event.preventDefault()
-          event.stopPropagation()
-          void form.handleSubmit()
-        }}
-        className={cx('byline-account-change-password-form', styles.form)}
-      >
-        {formError ? <Alert intent="danger">{formError}</Alert> : null}
-        {successMessage ? <Alert intent="success">{successMessage}</Alert> : null}
-
-        <p className="muted">
-          Other active sessions will continue to work until their tokens expire. Sign out elsewhere
-          if you suspect another device has been compromised.
-        </p>
-
-        <form.Field name="currentPassword">
-          {(field) => (
-            <InputPassword
-              label="Current password"
-              id="currentPassword"
-              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="current-password"
-              required
-            />
-          )}
-        </form.Field>
-
-        <form.Field name="newPassword">
-          {(field) => (
-            <InputPassword
-              label="New password"
-              id="newPassword"
-              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-account-change-password-actions', styles.actions)}>
-          <Button
-            type="button"
-            intent="secondary"
-            size="sm"
-            onClick={onClose}
-            className={cx('byline-account-change-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-account-change-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-account/container.module.css

@@ -1,158 +0,0 @@
-/**
- * AccountSelfContainer — self-service account dashboard with edit drawers.
- *
- * Override handles:
- *   .byline-account-grid          — outer two-column grid
- *   .byline-account-column        — column wrapper (vertical card stack)
- *   .byline-account-section       — single bordered section card
- *   .byline-account-section-head  — section title + edit-icon row
- *   .byline-account-line          — single key/value text line
- *   .byline-account-cta-line      — paragraph above the in-card primary CTA
- *   .byline-account-meta          — small metadata block (created/updated/last login)
- *   .byline-account-status        — status colour modifier (enabled / disabled)
- *   .byline-account-status-on
- *   .byline-account-status-off
- *   .byline-account-status-help   — italic helper line on Account Status card
- *   .byline-account-drawer        — drawer responsive width override
- *   .byline-account-drawer-body   — drawer content container
- *   .byline-account-drawer-scroll — drawer scrollable inner viewport
- *   .byline-account-drawer-skip   — sr-only "no action" focus shim
- */
-
-.grid,
-:global(.byline-account-grid) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-16);
-  margin-bottom: var(--spacing-48);
-}
-
-@media (min-width: 40rem) {
-  .grid,
-  :global(.byline-account-grid) {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-.column,
-:global(.byline-account-column) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-16);
-  margin-bottom: var(--spacing-16);
-}
-
-.section,
-:global(.byline-account-section) {
-  padding: var(--spacing-16);
-  border: var(--border-width-thin) var(--border-style-solid) var(--gray-100);
-  background-color: var(--canvas-25);
-  border-radius: var(--border-radius-sm);
-}
-
-.section-head,
-:global(.byline-account-section-head) {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: var(--spacing-8);
-}
-
-.line,
-:global(.byline-account-line) {
-  margin-bottom: 0;
-}
-
-.cta-line,
-:global(.byline-account-cta-line) {
-  margin-bottom: var(--spacing-12);
-}
-
-.meta,
-:global(.byline-account-meta) {
-  margin-top: var(--spacing-16);
-  font-size: var(--font-size-xs);
-}
-
-.status-on,
-:global(.byline-account-status-on) {
-  color: var(--green-600);
-}
-
-.status-off,
-:global(.byline-account-status-off) {
-  color: var(--red-600);
-}
-
-.status-help,
-:global(.byline-account-status-help) {
-  margin-top: var(--spacing-12);
-  margin-bottom: 0;
-  font-size: var(--font-size-xs);
-}
-
-/*
- * Italic helper for "Not set" placeholders. Replaces the Tailwind
- * `italic` utility we used pre-lift; with the component now in a
- * published package, Tailwind's source scanner doesn't see the class
- * string in the host so the rule was never generated.
- */
-.not-set,
-:global(.byline-account-not-set) {
-  font-style: italic;
-}
-
-.drawer,
-:global(.byline-account-drawer) {
-  /* Width handled by uikit Drawer prop; no additional class needed today. */
-}
-
-@media (min-width: 48rem) {
-  .drawer,
-  :global(.byline-account-drawer) {
-    width: 500px;
-  }
-}
-
-.drawer-body,
-:global(.byline-account-drawer-body) {
-  padding: var(--spacing-8);
-}
-
-.drawer-scroll,
-:global(.byline-account-drawer-scroll) {
-  max-height: calc(100vh - 160px);
-  overflow-y: auto;
-}
-
-.drawer-skip,
-:global(.byline-account-drawer-skip) {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-:is([data-theme="dark"], :global(.dark)) {
-  .section,
-  :global(.byline-account-section) {
-    border-color: var(--gray-700);
-    background-color: var(--canvas-800);
-  }
-
-  .status-on,
-  :global(.byline-account-status-on) {
-    color: var(--green-400);
-  }
-
-  .status-off,
-  :global(.byline-account-status-off) {
-    color: var(--red-400);
-  }
-}

package/src/admin/components/admin-account/container.tsx

@@ -1,230 +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
- */
-
-/**
- * Self-service account container.
- *
- * Same drawer pattern as `admin-users/ui/container.tsx` but
- * narrower: only Profile and Password sections (no Roles, no
- * Delete) — those are admin-only actions on someone else, not
- * self-service. Each card surfaces the read-only summary plus an
- * "Edit" affordance that opens the matching drawer.
- *
- * Forms lift the fresh `AccountResponse` back into local state on
- * success so the container's bumped `vid` is in hand for any
- * subsequent edit without a refetch.
- *
- * Stable override handles: see `container.module.css`.
- */
-
-import type React from 'react'
-import { useState } from 'react'
-
-import type { AccountResponse } from '@byline/admin/admin-account'
-import cx from 'classnames'
-
-import { LocalDateTime } from '../../../fields/local-date-time.js'
-import { Button, CloseIcon, Drawer, EditIcon, IconButton } from '../../../uikit.js'
-import { ChangeAccountPassword } from './change-password.js'
-import styles from './container.module.css'
-import { UpdateAccount } from './update.js'
-
-type ComponentKey = 'update' | 'change_password' | 'empty'
-
-interface PanelProps {
-  account: AccountResponse
-  onClose?: () => void
-  onSuccess?: (account: AccountResponse) => void
-}
-
-const panels: Record<ComponentKey, { title: string; component: React.ComponentType<PanelProps> }> =
-  {
-    update: { title: 'Profile', component: UpdateAccount },
-    change_password: { title: 'Change Password', component: ChangeAccountPassword },
-    empty: { title: '', component: () => null },
-  }
-
-function ContainerSection({
-  title,
-  onEdit,
-  children,
-}: {
-  title: string
-  onEdit?: () => void
-  children: React.ReactNode
-}) {
-  return (
-    <div className={cx('byline-account-section', styles.section)}>
-      <div className={cx('byline-account-section-head', styles['section-head'])}>
-        <h2>{title}</h2>
-        {onEdit ? (
-          <IconButton variant="text" onClick={onEdit} aria-label={`Edit ${title}`}>
-            <EditIcon width="20px" height="20px" />
-          </IconButton>
-        ) : null}
-      </div>
-      <div>{children}</div>
-    </div>
-  )
-}
-
-interface AccountSelfContainerProps {
-  account: AccountResponse
-}
-
-export function AccountSelfContainer({ account }: AccountSelfContainerProps) {
-  const [currentAccount, setCurrentAccount] = useState<AccountResponse>(account)
-  const [current, setCurrent] = useState<ComponentKey>('empty')
-  const [isDrawerOpen, setIsDrawerOpen] = useState(false)
-
-  const openDrawer = (key: ComponentKey) => () => {
-    setCurrent(key)
-    setIsDrawerOpen(true)
-  }
-  const closeDrawer = () => {
-    setCurrent('empty')
-    setIsDrawerOpen(false)
-  }
-  const handleSuccess = (updated: AccountResponse) => {
-    setCurrentAccount(updated)
-  }
-
-  const Panel = panels[current].component
-
-  return (
-    <>
-      <div className={cx('byline-account-grid', styles.grid)}>
-        <div className={cx('byline-account-column', styles.column)}>
-          <ContainerSection title="Profile" onEdit={openDrawer('update')}>
-            <p className={cx('byline-account-line', styles.line)}>
-              <span className="muted">Email:</span> {currentAccount.email}
-            </p>
-            <p className={cx('byline-account-line', styles.line)}>
-              <span className="muted">Given name:</span>{' '}
-              {currentAccount.given_name ?? (
-                <span className={cx('muted', 'byline-account-not-set', styles['not-set'])}>
-                  Not set
-                </span>
-              )}
-            </p>
-            <p className={cx('byline-account-line', styles.line)}>
-              <span className="muted">Family name:</span>{' '}
-              {currentAccount.family_name ?? (
-                <span className={cx('muted', 'byline-account-not-set', styles['not-set'])}>
-                  Not set
-                </span>
-              )}
-            </p>
-            <p className={cx('byline-account-cta-line', styles['cta-line'])}>
-              <span className="muted">Username:</span>{' '}
-              {currentAccount.username ?? (
-                <span className={cx('muted', 'byline-account-not-set', styles['not-set'])}>
-                  Not set
-                </span>
-              )}
-            </p>
-            <Button size="sm" onClick={openDrawer('update')}>
-              Edit Profile
-            </Button>
-            <div className={cx('muted', 'byline-account-meta', styles.meta)}>
-              <p>
-                <span className="font-bold">Created:&nbsp;</span>
-                <LocalDateTime value={currentAccount.created_at} />
-              </p>
-              <p>
-                <span className="font-bold">Updated:&nbsp;</span>
-                <LocalDateTime value={currentAccount.updated_at} />
-              </p>
-              <p className={cx('byline-account-line', styles.line)}>
-                <span className="font-bold">Last login:&nbsp;</span>
-                <LocalDateTime value={currentAccount.last_login} fallback="Never" />
-              </p>
-            </div>
-          </ContainerSection>
-        </div>
-
-        <div className={cx('byline-account-column', styles.column)}>
-          <ContainerSection title="Password" onEdit={openDrawer('change_password')}>
-            <p className={cx('byline-account-cta-line', styles['cta-line'])}>
-              Change the password used to sign in to the admin. You'll need to enter your current
-              password to confirm the change.
-            </p>
-            <Button size="sm" onClick={openDrawer('change_password')}>
-              Change Password
-            </Button>
-          </ContainerSection>
-
-          <ContainerSection title="Account Status">
-            <p className={cx('byline-account-line', styles.line)}>
-              <span className="muted">Super admin:</span>{' '}
-              {currentAccount.is_super_admin ? 'Yes' : 'No'}
-            </p>
-            <p className={cx('byline-account-line', styles.line)}>
-              <span className="muted">Email verified:</span>{' '}
-              {currentAccount.is_email_verified ? 'Yes' : 'No'}
-            </p>
-            <p className={cx('byline-account-line', styles.line)}>
-              <span className="muted">Status:</span>{' '}
-              <span
-                className={
-                  currentAccount.is_enabled
-                    ? cx('byline-account-status-on', styles['status-on'])
-                    : cx('byline-account-status-off', styles['status-off'])
-                }
-              >
-                {currentAccount.is_enabled ? 'Enabled' : 'Disabled'}
-              </span>
-            </p>
-            <p className={cx('muted', 'byline-account-status-help', styles['status-help'])}>
-              These flags are managed by an admin with the appropriate permissions and are not
-              self-editable.
-            </p>
-          </ContainerSection>
-        </div>
-      </div>
-
-      <Drawer
-        id="admin-account-drawer"
-        closeOnOverlayClick={false}
-        width="medium"
-        topOffset="46px"
-        isOpen={isDrawerOpen}
-        onDismiss={closeDrawer}
-        className={cx('byline-account-drawer', styles.drawer)}
-      >
-        <Drawer.Container
-          aria-hidden={!isDrawerOpen}
-          className={cx('byline-account-drawer-body', styles['drawer-body'])}
-        >
-          <Drawer.TopActions>
-            <button
-              type="button"
-              tabIndex={0}
-              className={cx('byline-account-drawer-skip', styles['drawer-skip'])}
-            >
-              no action
-            </button>
-            <IconButton aria-label="Close" size="sm" onClick={closeDrawer}>
-              <CloseIcon width="14px" height="14px" svgClassName="white-icon stroke-white" />
-            </IconButton>
-          </Drawer.TopActions>
-          <Drawer.Header>
-            <h2>{panels[current].title}</h2>
-          </Drawer.Header>
-          <Drawer.Content>
-            <div className={cx('byline-account-drawer-scroll', styles['drawer-scroll'])}>
-              <Panel account={currentAccount} onClose={closeDrawer} onSuccess={handleSuccess} />
-            </div>
-          </Drawer.Content>
-        </Drawer.Container>
-      </Drawer>
-    </>
-  )
-}

package/src/admin/components/admin-account/update.module.css

@@ -1,40 +0,0 @@
-/**
- * UpdateAccount — self-service profile form (drawer body).
- *
- * Override handles:
- *   .byline-account-update-wrap     — outer container
- *   .byline-account-update-form     — vertical-stack form element
- *   .byline-account-update-actions  — Cancel/Save row
- *   .byline-account-update-action   — buttons in the actions row
- */
-
-.wrap,
-:global(.byline-account-update-wrap) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-8);
-  padding: var(--spacing-4);
-  margin-top: var(--spacing-4);
-}
-
-.form,
-:global(.byline-account-update-form) {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-16);
-  padding-top: var(--spacing-8);
-}
-
-.actions,
-:global(.byline-account-update-actions) {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--spacing-8);
-  margin-top: var(--spacing-16);
-}
-
-.action,
-:global(.byline-account-update-action) {
-  min-width: 4rem;
-}