@better-forge/ui 0.1.0 → 0.1.1

package/src/api/client.ts

@@ -1,139 +1,139 @@
-import { safeSessionStorage } from '@better-forge/contracts'
-import { storageKey, uiConfig } from '../config'
-import { navigation } from '../navigation'
-
-const userKey = () => storageKey('auth-user')
-
-export interface AuthUser {
-  userId: number
-  email: string
-  role: string
-  mustChangePassword: boolean
-  twoFactorEnabled: boolean
-  authMethod?: 'password' | 'oidc'
-}
-
-export function setSession(user: AuthUser): void {
-  safeSessionStorage.set(userKey(), JSON.stringify(user))
-  window.dispatchEvent(new CustomEvent(storageKey('auth-change')))
-}
-
-export function clearSession(): void {
-  safeSessionStorage.remove(userKey())
-  window.dispatchEvent(new CustomEvent(storageKey('auth-change')))
-}
-
-export function getCurrentUser(): AuthUser | null {
-  try {
-    const stored = safeSessionStorage.get(userKey())
-    return stored ? JSON.parse(stored) as AuthUser : null
-  } catch { return null }
-}
-
-export function isAuthenticated(): boolean {
-  return getCurrentUser() !== null
-}
-
-/**
- * Where a signed-in user starts. One who does not belong in this interface goes where the application sends them
- * (which may also have them replace a temporary password); everyone else replaces it here first.
- */
-export function enterAfterSignIn(user: AuthUser, navigate: (path: string) => void): void {
-  const elsewhere = uiConfig().redirectAfterSignIn?.(user) ?? null
-  if (elsewhere) navigation.assign(elsewhere)
-  else if (user.mustChangePassword) navigate(`${uiConfig().basePath}/change-password`)
-  else navigate(`${uiConfig().basePath}/`)
-}
-
-export function mustChangePassword(): boolean {
-  return !!getCurrentUser()?.mustChangePassword
-}
-
-/**
- * A failed API call: `message` is the server's error text, `code` its machine-readable code when it sent one, and
- * `body` the whole JSON answer, for the endpoints that say more than a message (a list of problems, say).
- */
-export class ApiError extends Error {
-  constructor(message: string, readonly status: number, readonly code?: string, readonly body?: unknown) {
-    super(message)
-    this.name = 'ApiError'
-  }
-}
-
-function cookie(name: string): string | null {
-  const prefix = `${encodeURIComponent(name)}=`
-  const part = document.cookie.split('; ').find((item) => item.startsWith(prefix))
-  return part ? decodeURIComponent(part.slice(prefix.length)) : null
-}
-
-async function request<T>(
-  method: string,
-  path: string,
-  body?: unknown,
-  isFormData = false,
-  /** Sends `body` (a string) as it is with this content type, instead of as JSON. */
-  contentType?: string,
-  /** Reads the answer as text instead of JSON. */
-  asText = false,
-): Promise<T> {
-  const headers: Record<string, string> = {}
-  if (contentType) headers['Content-Type'] = contentType
-  else if (!isFormData && body !== undefined) headers['Content-Type'] = 'application/json'
-  if (!['GET', 'HEAD', 'OPTIONS'].includes(method)) {
-    const csrf = cookie(uiConfig().csrfCookie)
-    if (csrf) headers['X-CSRF-Token'] = csrf
-  }
-
-  const fetchBody = contentType ? (body as string) : isFormData ? (body as FormData) : body !== undefined ? JSON.stringify(body) : null
-  const res = await fetch(`${uiConfig().apiBase}${path}`, {
-    method,
-    headers,
-    credentials: 'same-origin',
-    ...(fetchBody !== null ? { body: fetchBody } : {}),
-  })
-
-  if (!res.ok) {
-    const err = await res.json().catch(() => ({ error: res.statusText })) as { error?: string; code?: string }
-    if (res.status === 403 && err.code === 'PASSWORD_CHANGE_REQUIRED') {
-      const user = getCurrentUser()
-      if (user && !user.mustChangePassword) setSession({ ...user, mustChangePassword: true })
-      if (!window.location.pathname.includes('/change-password')) {
-        window.location.href = `${uiConfig().basePath}/change-password`
-      }
-    }
-    if (res.status === 401) {
-      clearSession()
-      const isLoginRequest = path === '/auth/login' || path === '/auth/2fa/verify'
-      if (!isLoginRequest && !window.location.pathname.includes('/login')) {
-        window.location.href = `${uiConfig().basePath}/login`
-      }
-    }
-    throw new ApiError(err.error ?? res.statusText, res.status, err.code, err)
-  }
-
-  if (res.status === 204) return undefined as T
-  return (asText ? res.text() : res.json()) as Promise<T>
-}
-
-export const api = {
-  get: <T>(path: string) => request<T>('GET', path),
-  /** GET an answer that is text, for example a YAML document. */
-  getText: (path: string) => request<string>('GET', path, undefined, false, undefined, true),
-  post: <T>(path: string, body: unknown = {}) => request<T>('POST', path, body),
-  patch: <T>(path: string, body: unknown) => request<T>('PATCH', path, body),
-  put: <T>(path: string, body: unknown) => request<T>('PUT', path, body),
-  delete: (path: string) => request<void>('DELETE', path),
-  upload: <T>(path: string, formData: FormData) => request<T>('POST', path, formData, true),
-  /** POST a text body as it is, for example a YAML file, with the given content type. */
-  postText: <T>(path: string, text: string, contentType: string) => request<T>('POST', path, text, false, contentType),
-  download: async (path: string, filename: string) => {
-    const res = await fetch(`${uiConfig().apiBase}${path}`, { credentials: 'same-origin' })
-    if (!res.ok) throw new Error('Download failed')
-    const url = URL.createObjectURL(await res.blob())
-    const link = document.createElement('a')
-    link.href = url
-    link.download = filename
-    link.click()
-    URL.revokeObjectURL(url)
-  },
-}
+import { safeSessionStorage } from '@better-forge/contracts'
+import { storageKey, uiConfig } from '../config'
+import { navigation } from '../navigation'
+
+const userKey = () => storageKey('auth-user')
+
+export interface AuthUser {
+  userId: number
+  email: string
+  role: string
+  mustChangePassword: boolean
+  twoFactorEnabled: boolean
+  authMethod?: 'password' | 'oidc'
+}
+
+export function setSession(user: AuthUser): void {
+  safeSessionStorage.set(userKey(), JSON.stringify(user))
+  window.dispatchEvent(new CustomEvent(storageKey('auth-change')))
+}
+
+export function clearSession(): void {
+  safeSessionStorage.remove(userKey())
+  window.dispatchEvent(new CustomEvent(storageKey('auth-change')))
+}
+
+export function getCurrentUser(): AuthUser | null {
+  try {
+    const stored = safeSessionStorage.get(userKey())
+    return stored ? JSON.parse(stored) as AuthUser : null
+  } catch { return null }
+}
+
+export function isAuthenticated(): boolean {
+  return getCurrentUser() !== null
+}
+
+/**
+ * Where a signed-in user starts. One who does not belong in this interface goes where the application sends them
+ * (which may also have them replace a temporary password); everyone else replaces it here first.
+ */
+export function enterAfterSignIn(user: AuthUser, navigate: (path: string) => void): void {
+  const elsewhere = uiConfig().redirectAfterSignIn?.(user) ?? null
+  if (elsewhere) navigation.assign(elsewhere)
+  else if (user.mustChangePassword) navigate(`${uiConfig().basePath}/change-password`)
+  else navigate(`${uiConfig().basePath}/`)
+}
+
+export function mustChangePassword(): boolean {
+  return !!getCurrentUser()?.mustChangePassword
+}
+
+/**
+ * A failed API call: `message` is the server's error text, `code` its machine-readable code when it sent one, and
+ * `body` the whole JSON answer, for the endpoints that say more than a message (a list of problems, say).
+ */
+export class ApiError extends Error {
+  constructor(message: string, readonly status: number, readonly code?: string, readonly body?: unknown) {
+    super(message)
+    this.name = 'ApiError'
+  }
+}
+
+function cookie(name: string): string | null {
+  const prefix = `${encodeURIComponent(name)}=`
+  const part = document.cookie.split('; ').find((item) => item.startsWith(prefix))
+  return part ? decodeURIComponent(part.slice(prefix.length)) : null
+}
+
+async function request<T>(
+  method: string,
+  path: string,
+  body?: unknown,
+  isFormData = false,
+  /** Sends `body` (a string) as it is with this content type, instead of as JSON. */
+  contentType?: string,
+  /** Reads the answer as text instead of JSON. */
+  asText = false,
+): Promise<T> {
+  const headers: Record<string, string> = {}
+  if (contentType) headers['Content-Type'] = contentType
+  else if (!isFormData && body !== undefined) headers['Content-Type'] = 'application/json'
+  if (!['GET', 'HEAD', 'OPTIONS'].includes(method)) {
+    const csrf = cookie(uiConfig().csrfCookie)
+    if (csrf) headers['X-CSRF-Token'] = csrf
+  }
+
+  const fetchBody = contentType ? (body as string) : isFormData ? (body as FormData) : body !== undefined ? JSON.stringify(body) : null
+  const res = await fetch(`${uiConfig().apiBase}${path}`, {
+    method,
+    headers,
+    credentials: 'same-origin',
+    ...(fetchBody !== null ? { body: fetchBody } : {}),
+  })
+
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({ error: res.statusText })) as { error?: string; code?: string }
+    if (res.status === 403 && err.code === 'PASSWORD_CHANGE_REQUIRED') {
+      const user = getCurrentUser()
+      if (user && !user.mustChangePassword) setSession({ ...user, mustChangePassword: true })
+      if (!window.location.pathname.includes('/change-password')) {
+        window.location.href = `${uiConfig().basePath}/change-password`
+      }
+    }
+    if (res.status === 401) {
+      clearSession()
+      const isLoginRequest = path === '/auth/login' || path === '/auth/2fa/verify'
+      if (!isLoginRequest && !window.location.pathname.includes('/login')) {
+        window.location.href = `${uiConfig().basePath}/login`
+      }
+    }
+    throw new ApiError(err.error ?? res.statusText, res.status, err.code, err)
+  }
+
+  if (res.status === 204) return undefined as T
+  return (asText ? res.text() : res.json()) as Promise<T>
+}
+
+export const api = {
+  get: <T>(path: string) => request<T>('GET', path),
+  /** GET an answer that is text, for example a YAML document. */
+  getText: (path: string) => request<string>('GET', path, undefined, false, undefined, true),
+  post: <T>(path: string, body: unknown = {}) => request<T>('POST', path, body),
+  patch: <T>(path: string, body: unknown) => request<T>('PATCH', path, body),
+  put: <T>(path: string, body: unknown) => request<T>('PUT', path, body),
+  delete: (path: string) => request<void>('DELETE', path),
+  upload: <T>(path: string, formData: FormData) => request<T>('POST', path, formData, true),
+  /** POST a text body as it is, for example a YAML file, with the given content type. */
+  postText: <T>(path: string, text: string, contentType: string) => request<T>('POST', path, text, false, contentType),
+  download: async (path: string, filename: string) => {
+    const res = await fetch(`${uiConfig().apiBase}${path}`, { credentials: 'same-origin' })
+    if (!res.ok) throw new Error('Download failed')
+    const url = URL.createObjectURL(await res.blob())
+    const link = document.createElement('a')
+    link.href = url
+    link.download = filename
+    link.click()
+    URL.revokeObjectURL(url)
+  },
+}

package/src/components/ConfirmIdentityModal.tsx

@@ -1,82 +1,82 @@
-import { useId, useState } from 'react'
-import { ModalFooter, ModalHeader, ModalShell } from './ModalShell'
-import { SsoConfirmationNote, isSsoSession, useSsoConfirmation } from './SsoConfirmation'
-import { Alert } from './ui'
-
-interface ConfirmIdentityModalProps {
-  title: string
-  message: string
-  confirmLabel: string
-  pendingLabel?: string
-  danger?: boolean
-  /**
-   * Runs the action. `currentPassword` is undefined in an SSO session, which is confirmed at the identity
-   * provider instead. A rejection is shown in the dialog, which stays open for another try.
-   */
-  action: (currentPassword: string | undefined) => Promise<unknown>
-  /** Called when the action succeeded or the user gave up. */
-  onClose: () => void
-}
-
-/** Asks the signed-in user to prove it is them (password, or SSO) before a sensitive action goes through. */
-export function ConfirmIdentityModal({ title, message, confirmLabel, pendingLabel = 'Working…', danger = false, action, onClose }: ConfirmIdentityModalProps) {
-  const sso = isSsoSession()
-  const ssoConfirmation = useSsoConfirmation()
-  const [currentPassword, setCurrentPassword] = useState('')
-  const [pending, setPending] = useState(false)
-  const [error, setError] = useState('')
-  const titleId = useId()
-  const canConfirm = !pending && (sso || currentPassword.length > 0)
-
-  async function confirm() {
-    setPending(true)
-    setError('')
-    try {
-      await ssoConfirmation.run(() => action(sso ? undefined : currentPassword))
-      onClose()
-    } catch (err) {
-      setError(err instanceof Error && err.message ? err.message : 'Something went wrong. Try again.')
-      setPending(false)
-    }
-  }
-
-  return (
-    <ModalShell onClose={pending ? undefined : onClose}>
-      <form
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby={titleId}
-        aria-busy={pending || undefined}
-        className="rounded-2xl w-full max-w-md"
-        style={{ background: 'var(--m3-surface-container-low)', border: '1px solid var(--m3-outline-variant)' }}
-        onSubmit={(event) => { event.preventDefault(); if (canConfirm) void confirm() }}
-      >
-        <ModalHeader icon="shield_lock" titleId={titleId} title={title} onClose={pending ? () => {} : onClose} />
-        <div className="p-6 space-y-4">
-          <p className="text-sm" style={{ color: 'var(--m3-on-surface-variant)' }}>{message}</p>
-          {error && <Alert tone="error">{error}</Alert>}
-          {sso ? <SsoConfirmationNote confirmation={ssoConfirmation} /> : (
-            <label className="block space-y-2 text-sm" style={{ color: 'var(--m3-on-surface-variant)' }}>
-              <span>Your current password</span>
-              <input
-                type="password"
-                autoComplete="current-password"
-                autoFocus
-                value={currentPassword}
-                disabled={pending}
-                onChange={(event) => setCurrentPassword(event.target.value)}
-                className="input-sig w-full"
-              />
-            </label>
-          )}
-        </div>
-        <ModalFooter>
-          <button type="button" onClick={onClose} disabled={pending} className="btn btn-secondary">Cancel</button>
-          <button type="submit" disabled={!canConfirm} className={`btn ${danger ? 'btn-danger' : 'btn-primary'}`}>
-            {pending ? pendingLabel : confirmLabel}
-          </button>
-        </ModalFooter>
-      </form>
-    </ModalShell>
-  )
-}
+import { useId, useState } from 'react'
+import { ModalFooter, ModalHeader, ModalShell } from './ModalShell'
+import { SsoConfirmationNote, isSsoSession, useSsoConfirmation } from './SsoConfirmation'
+import { Alert } from './ui'
+
+interface ConfirmIdentityModalProps {
+  title: string
+  message: string
+  confirmLabel: string
+  pendingLabel?: string
+  danger?: boolean
+  /**
+   * Runs the action. `currentPassword` is undefined in an SSO session, which is confirmed at the identity
+   * provider instead. A rejection is shown in the dialog, which stays open for another try.
+   */
+  action: (currentPassword: string | undefined) => Promise<unknown>
+  /** Called when the action succeeded or the user gave up. */
+  onClose: () => void
+}
+
+/** Asks the signed-in user to prove it is them (password, or SSO) before a sensitive action goes through. */
+export function ConfirmIdentityModal({ title, message, confirmLabel, pendingLabel = 'Working…', danger = false, action, onClose }: ConfirmIdentityModalProps) {
+  const sso = isSsoSession()
+  const ssoConfirmation = useSsoConfirmation()
+  const [currentPassword, setCurrentPassword] = useState('')
+  const [pending, setPending] = useState(false)
+  const [error, setError] = useState('')
+  const titleId = useId()
+  const canConfirm = !pending && (sso || currentPassword.length > 0)
+
+  async function confirm() {
+    setPending(true)
+    setError('')
+    try {
+      await ssoConfirmation.run(() => action(sso ? undefined : currentPassword))
+      onClose()
+    } catch (err) {
+      setError(err instanceof Error && err.message ? err.message : 'Something went wrong. Try again.')
+      setPending(false)
+    }
+  }
+
+  return (
+    <ModalShell onClose={pending ? undefined : onClose}>
+      <form
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        aria-busy={pending || undefined}
+        className="rounded-2xl w-full max-w-md"
+        style={{ background: 'var(--m3-surface-container-low)', border: '1px solid var(--m3-outline-variant)' }}
+        onSubmit={(event) => { event.preventDefault(); if (canConfirm) void confirm() }}
+      >
+        <ModalHeader icon="shield_lock" titleId={titleId} title={title} onClose={pending ? () => {} : onClose} />
+        <div className="p-6 space-y-4">
+          <p className="text-sm" style={{ color: 'var(--m3-on-surface-variant)' }}>{message}</p>
+          {error && <Alert tone="error">{error}</Alert>}
+          {sso ? <SsoConfirmationNote confirmation={ssoConfirmation} /> : (
+            <label className="block space-y-2 text-sm" style={{ color: 'var(--m3-on-surface-variant)' }}>
+              <span>Your current password</span>
+              <input
+                type="password"
+                autoComplete="current-password"
+                autoFocus
+                value={currentPassword}
+                disabled={pending}
+                onChange={(event) => setCurrentPassword(event.target.value)}
+                className="input-sig w-full"
+              />
+            </label>
+          )}
+        </div>
+        <ModalFooter>
+          <button type="button" onClick={onClose} disabled={pending} className="btn btn-secondary">Cancel</button>
+          <button type="submit" disabled={!canConfirm} className={`btn ${danger ? 'btn-danger' : 'btn-primary'}`}>
+            {pending ? pendingLabel : confirmLabel}
+          </button>
+        </ModalFooter>
+      </form>
+    </ModalShell>
+  )
+}

package/src/components/ConfirmModal.tsx

@@ -1,83 +1,83 @@
-import { useId, useState } from 'react'
-import { ModalFooter, ModalHeader, ModalShell } from './ModalShell'
-
-interface ConfirmModalProps {
-  title: string
-  message: string
-  confirmLabel?: string | undefined
-  danger?: boolean | undefined
-  confirmationText?: string | undefined
-  /**
-   * While true the modal stays open with both buttons disabled and the confirm button reading
-   * `pendingLabel`, so callers can keep it up until their mutation settles and close it in onSuccess.
-   */
-  pending?: boolean | undefined
-  pendingLabel?: string | undefined
-  onConfirm: () => void
-  onCancel: () => void
-}
-
-export function ConfirmModal({
-  title,
-  message,
-  confirmLabel = 'Delete',
-  danger = true,
-  confirmationText,
-  pending = false,
-  pendingLabel = 'Working…',
-  onConfirm,
-  onCancel,
-}: ConfirmModalProps) {
-  const [typedConfirmation, setTypedConfirmation] = useState('')
-  const titleId = useId()
-  const messageId = useId()
-  const canConfirm = (!confirmationText || typedConfirmation === confirmationText) && !pending
-
-  return (
-    <ModalShell onClose={pending ? undefined : onCancel}>
-      <div
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby={titleId}
-        aria-describedby={messageId}
-        aria-busy={pending || undefined}
-        className="rounded-2xl w-full max-w-sm"
-        style={{ background: 'var(--m3-surface-container-low)', border: '1px solid var(--m3-outline-variant)' }}
-      >
-        <ModalHeader icon={danger ? 'warning' : 'help'} titleId={titleId} title={title} onClose={pending ? () => {} : onCancel} />
-        <div className="p-6 space-y-4">
-        <p id={messageId} className="text-sm" style={{ color: 'var(--m3-on-surface-variant)' }}>
-          {message}
-        </p>
-        {confirmationText && (
-          <label className="block space-y-2 text-sm" style={{ color: 'var(--m3-on-surface-variant)' }}>
-            <span>Type <strong className="font-mono">{confirmationText}</strong> to confirm:</span>
-            <input
-              autoFocus
-              value={typedConfirmation}
-              disabled={pending}
-              autoComplete="off"
-              spellCheck={false}
-              onChange={(event) => setTypedConfirmation(event.target.value)}
-              className="input-m3"
-            />
-          </label>
-        )}
-        </div>
-        <ModalFooter>
-          <button type="button" onClick={onCancel} disabled={pending} className="btn btn-secondary">
-            Cancel
-          </button>
-          <button
-            type="button"
-            onClick={onConfirm}
-            disabled={!canConfirm}
-            className={`btn ${danger ? 'btn-danger' : 'btn-primary'}`}
-          >
-            {pending ? pendingLabel : confirmLabel}
-          </button>
-        </ModalFooter>
-      </div>
-    </ModalShell>
-  )
-}
+import { useId, useState } from 'react'
+import { ModalFooter, ModalHeader, ModalShell } from './ModalShell'
+
+interface ConfirmModalProps {
+  title: string
+  message: string
+  confirmLabel?: string | undefined
+  danger?: boolean | undefined
+  confirmationText?: string | undefined
+  /**
+   * While true the modal stays open with both buttons disabled and the confirm button reading
+   * `pendingLabel`, so callers can keep it up until their mutation settles and close it in onSuccess.
+   */
+  pending?: boolean | undefined
+  pendingLabel?: string | undefined
+  onConfirm: () => void
+  onCancel: () => void
+}
+
+export function ConfirmModal({
+  title,
+  message,
+  confirmLabel = 'Delete',
+  danger = true,
+  confirmationText,
+  pending = false,
+  pendingLabel = 'Working…',
+  onConfirm,
+  onCancel,
+}: ConfirmModalProps) {
+  const [typedConfirmation, setTypedConfirmation] = useState('')
+  const titleId = useId()
+  const messageId = useId()
+  const canConfirm = (!confirmationText || typedConfirmation === confirmationText) && !pending
+
+  return (
+    <ModalShell onClose={pending ? undefined : onCancel}>
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+        aria-describedby={messageId}
+        aria-busy={pending || undefined}
+        className="rounded-2xl w-full max-w-sm"
+        style={{ background: 'var(--m3-surface-container-low)', border: '1px solid var(--m3-outline-variant)' }}
+      >
+        <ModalHeader icon={danger ? 'warning' : 'help'} titleId={titleId} title={title} onClose={pending ? () => {} : onCancel} />
+        <div className="p-6 space-y-4">
+        <p id={messageId} className="text-sm" style={{ color: 'var(--m3-on-surface-variant)' }}>
+          {message}
+        </p>
+        {confirmationText && (
+          <label className="block space-y-2 text-sm" style={{ color: 'var(--m3-on-surface-variant)' }}>
+            <span>Type <strong className="font-mono">{confirmationText}</strong> to confirm:</span>
+            <input
+              autoFocus
+              value={typedConfirmation}
+              disabled={pending}
+              autoComplete="off"
+              spellCheck={false}
+              onChange={(event) => setTypedConfirmation(event.target.value)}
+              className="input-m3"
+            />
+          </label>
+        )}
+        </div>
+        <ModalFooter>
+          <button type="button" onClick={onCancel} disabled={pending} className="btn btn-secondary">
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={onConfirm}
+            disabled={!canConfirm}
+            className={`btn ${danger ? 'btn-danger' : 'btn-primary'}`}
+          >
+            {pending ? pendingLabel : confirmLabel}
+          </button>
+        </ModalFooter>
+      </div>
+    </ModalShell>
+  )
+}