@byline/ui 0.9.3

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

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

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

@@ -0,0 +1,230 @@
+'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 { Button, CloseIcon, Drawer, EditIcon, IconButton } from '@infonomic/uikit/react'
+import cx from 'classnames'
+
+import { LocalDateTime } from '../../../fields/local-date-time.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

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