@better-forge/ui 0.0.0-stage → 0.1.0

package/src/components/ConfirmIdentityModal.tsx

@@ -0,0 +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>
+  )
+}

package/src/components/ConfirmModal.tsx

@@ -0,0 +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>
+  )
+}

package/src/components/CopyButton.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useRef, useState } from 'react'
+
+interface CopyButtonProps {
+  value: string
+  label?: string | undefined
+  copiedLabel?: string | undefined
+  failedLabel?: string | undefined
+  /** Show only the icon; the label still names the button for assistive technology. */
+  iconOnly?: boolean | undefined
+}
+
+type CopyState = 'idle' | 'copied' | 'failed'
+
+/** Clipboard API first; outside a secure context (plain-HTTP deployments) fall back to a hidden textarea. */
+async function writeClipboard(value: string) {
+  if (navigator.clipboard?.writeText) {
+    await navigator.clipboard.writeText(value)
+    return
+  }
+  const textarea = document.createElement('textarea')
+  textarea.value = value
+  textarea.setAttribute('readonly', '')
+  textarea.style.position = 'fixed'
+  textarea.style.opacity = '0'
+  document.body.appendChild(textarea)
+  textarea.select()
+  try {
+    if (!document.execCommand('copy')) throw new Error('Copy command was rejected')
+  } finally {
+    textarea.remove()
+  }
+}
+
+export function CopyButton({ value, label = 'Copy', copiedLabel = 'Copied!', failedLabel = 'Copy failed', iconOnly = false }: CopyButtonProps) {
+  const [state, setState] = useState<CopyState>('idle')
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+
+  useEffect(() => () => clearTimeout(timer.current), [])
+
+  async function copy() {
+    let next: CopyState
+    try {
+      await writeClipboard(value)
+      next = 'copied'
+    } catch {
+      next = 'failed'
+    }
+    setState(next)
+    clearTimeout(timer.current)
+    timer.current = setTimeout(() => setState('idle'), 2000)
+  }
+
+  const text = state === 'copied' ? copiedLabel : state === 'failed' ? failedLabel : label
+
+  return (
+    <button
+      type="button"
+      onClick={() => void copy()}
+      aria-label={text}
+      title={iconOnly ? text : undefined}
+      className="copy-feedback-button flex items-center gap-1.5 text-xs px-3 py-2 rounded-lg font-semibold"
+      data-copied={state === 'copied' || undefined}
+      data-failed={state === 'failed' || undefined}
+    >
+      <span className="material-symbols-outlined" aria-hidden="true" style={{ fontSize: '14px' }}>
+        {state === 'copied' ? 'check' : state === 'failed' ? 'error' : 'content_copy'}
+      </span>
+      {!iconOnly && <span aria-live="polite">{text}</span>}
+    </button>
+  )
+}

package/src/components/CredentialSection.tsx

@@ -0,0 +1,270 @@
+import type { ReactNode } from 'react'
+import type { VaultRef } from '@better-forge/contracts'
+import { Field, Note, type VaultPickerProps } from './formParts'
+
+interface CredentialSectionProps extends VaultPickerProps {
+  vault: VaultRef | undefined
+  onVaultChange: (v: VaultRef | undefined) => void
+  mappingFields: { key: string; label: string }[]
+  /** Optional note shown at the top of the vault/direct section */
+  note?: string
+  /** What a `value` secret is used as; defaults to the password / client secret. */
+  valueLabel?: string
+  /** Replaces the note shown for a User / Password secret when its username and password are not a username and password. */
+  userpassNote?: string
+  /** Restricts the secret dropdown to these types; every type is offered when omitted. */
+  secretTypes?: string[]
+  /** Direct-input fields — rendered only when not using vault */
+  children: ReactNode
+}
+
+/**
+ * Wraps a set of credential fields with a Direct / Vault source toggle.
+ * In direct mode: shows a warning banner + the credential inputs (children).
+ * In vault mode: shows vault → secret dropdowns + JSON field mapping if needed.
+ */
+export function CredentialSection({
+  vault, onVaultChange,
+  vaults, secretsByVault, onLoadSecrets,
+  mappingFields, note, valueLabel = 'password / client secret', userpassNote, secretTypes, children,
+}: CredentialSectionProps) {
+  const isVault = !!vault
+
+  const selectedVaultId  = vault?.vaultId
+  const selectedSecretId = vault?.secretId
+  const fieldMapping     = vault?.fieldMapping ?? {}
+
+  const secrets        = selectedVaultId ? (secretsByVault[selectedVaultId]?.filter((s) => !secretTypes || secretTypes.includes(s.type)) ?? null) : null
+  const selectedSecret = secrets?.find((s) => s.id === selectedSecretId)
+
+  return (
+    <div className="space-y-3">
+      {note && (
+        <p className="text-xs" style={{ color: 'var(--m3-secondary)' }}>{note}</p>
+      )}
+
+      {/* Source toggle */}
+      <div className="flex rounded-lg overflow-hidden" style={{ border: '1px solid var(--m3-outline-variant)', width: 'fit-content' }}>
+        {(['direct', 'vault'] as const).map((src) => {
+          const active = src === 'vault' ? isVault : !isVault
+          return (
+            <button
+              key={src}
+              type="button"
+              onClick={() => {
+                if (src === 'direct') {
+                  onVaultChange(undefined)
+                } else {
+                  const first = vaults[0]
+                  if (first) onLoadSecrets(first.id)
+                  onVaultChange({ vaultId: first?.id ?? 0, secretId: 0, fieldMapping: {} })
+                }
+              }}
+              className={`px-4 py-1.5 text-xs font-medium transition-all ${active ? 'selection-active' : ''}`}
+              style={{
+                background: active ? 'var(--m3-primary-fixed)' : 'transparent',
+                color:      active ? 'var(--m3-primary)' : 'var(--m3-secondary)',
+              }}
+            >
+              {src === 'direct' ? 'Direct input' : 'From Vault'}
+            </button>
+          )
+        })}
+      </div>
+
+      {/* Direct input */}
+      {!isVault && (
+        <>
+          <Note tone="warning">For security, store credentials in Vault rather than entering them directly here.</Note>
+          {children}
+        </>
+      )}
+
+      {/* Vault picker */}
+      {isVault && (
+        <div className="space-y-3">
+          <div className="grid grid-cols-2 gap-3">
+            <Field label="Vault">
+              <select
+                className="input-sig"
+                value={selectedVaultId || ''}
+                onChange={(e) => {
+                  const id = Number(e.target.value)
+                  onLoadSecrets(id)
+                  onVaultChange({ vaultId: id, secretId: 0, fieldMapping: {} })
+                }}
+              >
+                <option value="">— select vault —</option>
+                {vaults.map((v) => <option key={v.id} value={v.id}>{v.name}</option>)}
+              </select>
+            </Field>
+            <Field label="Secret">
+              <select
+                className="input-sig"
+                value={selectedSecretId || ''}
+                disabled={!selectedVaultId}
+                onChange={(e) => {
+                  onVaultChange({ vaultId: selectedVaultId!, secretId: Number(e.target.value), fieldMapping: {} })
+                }}
+              >
+                <option value="">— select secret —</option>
+                {(secrets ?? []).map((s) => (
+                  <option key={s.id} value={s.id}>{s.name} ({s.type})</option>
+                ))}
+              </select>
+            </Field>
+          </div>
+
+          {/* userpass — auto-mapped, no input needed */}
+          {selectedSecret?.type === 'userpass' && (
+            <p className="text-xs rounded-lg px-3 py-2" style={{ background: 'var(--m3-surface-container)', color: 'var(--m3-secondary)' }}>
+              {userpassNote ?? <>Auto-mapped: <strong>username</strong> → username field, <strong>password</strong> → password field.</>}
+            </p>
+          )}
+
+          {/* value — single value used as password / client secret */}
+          {selectedSecret?.type === 'value' && (
+            <p className="text-xs rounded-lg px-3 py-2" style={{ background: 'var(--m3-surface-container)', color: 'var(--m3-secondary)' }}>
+              The secret value will be used as the <strong>{valueLabel}</strong>.
+            </p>
+          )}
+
+          {/* json — field mapping UI */}
+          {selectedSecret?.type === 'json' && selectedSecretId && (
+            <div>
+              <p className="font-mono text-xs uppercase tracking-wider mb-1" style={{ color: 'var(--m3-secondary)' }}>
+                JSON Field Mapping
+              </p>
+              <p className="text-xs mb-3" style={{ color: 'var(--m3-secondary)' }}>
+                For each credential, enter the key name from the JSON secret.
+              </p>
+              <div className="space-y-2">
+                {mappingFields.map(({ key, label }) => (
+                  <div key={key} className="grid items-center gap-3" style={{ gridTemplateColumns: '110px 1fr' }}>
+                    <span className="text-xs font-medium truncate" style={{ color: 'var(--m3-on-surface-variant)' }}>{label}</span>
+                    <input
+                      className="input-sig text-xs"
+                      placeholder={`JSON key (e.g. "${key}")`}
+                      value={fieldMapping[key] ?? ''}
+                      onChange={(e) => {
+                        onVaultChange({
+                          vaultId: selectedVaultId!,
+                          secretId: selectedSecretId,
+                          fieldMapping: { ...fieldMapping, [key]: e.target.value },
+                        })
+                      }}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {vaults.length === 0 && (
+            <p className="text-xs" style={{ color: 'var(--m3-secondary)' }}>
+              No vaults found. Create one in the Vault section first.
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface ConnectionStringSectionProps extends VaultPickerProps {
+  vault: VaultRef | undefined
+  onVaultChange: (v: VaultRef | undefined) => void
+}
+
+/**
+ * Vault-only picker for SQL database connection strings.
+ * Direct input is intentionally not available — a connection string contains credentials.
+ */
+export function ConnectionStringSection({
+  vault, onVaultChange, vaults, secretsByVault, onLoadSecrets,
+}: ConnectionStringSectionProps) {
+  const selectedVaultId  = vault?.vaultId
+  const selectedSecretId = vault?.secretId
+  const fieldMapping     = vault?.fieldMapping ?? {}
+
+  const secrets        = selectedVaultId ? (secretsByVault[selectedVaultId] ?? null) : null
+  const selectedSecret = secrets?.find((s) => s.id === selectedSecretId)
+
+  return (
+    <div className="space-y-3">
+      <Note tone="info">Connection strings contain credentials and must always be stored in Vault.</Note>
+
+      <div className="grid grid-cols-2 gap-3">
+        <Field label="Vault">
+          <select
+            className="input-sig"
+            value={selectedVaultId || ''}
+            onChange={(e) => {
+              const id = Number(e.target.value)
+              onLoadSecrets(id)
+              onVaultChange({ vaultId: id, secretId: 0, fieldMapping: {} })
+            }}
+          >
+            <option value="">— select vault —</option>
+            {vaults.map((v) => <option key={v.id} value={v.id}>{v.name}</option>)}
+          </select>
+        </Field>
+        <Field label="Secret">
+          <select
+            className="input-sig"
+            value={selectedSecretId || ''}
+            disabled={!selectedVaultId}
+            onChange={(e) => {
+              onVaultChange({ vaultId: selectedVaultId!, secretId: Number(e.target.value), fieldMapping: {} })
+            }}
+          >
+            <option value="">— select secret —</option>
+            {(secrets ?? []).map((s) => (
+              <option key={s.id} value={s.id}>{s.name} ({s.type})</option>
+            ))}
+          </select>
+        </Field>
+      </div>
+
+      {selectedSecret?.type === 'value' && (
+        <p className="text-xs rounded-lg px-3 py-2" style={{ background: 'var(--m3-surface-container)', color: 'var(--m3-secondary)' }}>
+          The secret value will be used as the full connection string.
+        </p>
+      )}
+
+      {selectedSecret?.type === 'userpass' && (
+        <Note tone="warning">
+          A <strong>userpass</strong> secret cannot be used as a connection string. Use a <strong>value</strong> or <strong>json</strong> secret instead.
+        </Note>
+      )}
+
+      {selectedSecret?.type === 'json' && selectedSecretId && (
+        <div>
+          <p className="font-mono text-xs uppercase tracking-wider mb-1" style={{ color: 'var(--m3-secondary)' }}>JSON Field Mapping</p>
+          <p className="text-xs mb-3" style={{ color: 'var(--m3-secondary)' }}>Enter the JSON key that holds the connection string.</p>
+          <div className="grid items-center gap-3" style={{ gridTemplateColumns: '130px 1fr' }}>
+            <span className="text-xs font-medium" style={{ color: 'var(--m3-on-surface-variant)' }}>Connection String</span>
+            <input
+              className="input-sig text-xs"
+              placeholder='JSON key (e.g. "connectionString")'
+              value={fieldMapping['connectionString'] ?? ''}
+              onChange={(e) => {
+                onVaultChange({
+                  vaultId: selectedVaultId!,
+                  secretId: selectedSecretId,
+                  fieldMapping: { connectionString: e.target.value },
+                })
+              }}
+            />
+          </div>
+        </div>
+      )}
+
+      {vaults.length === 0 && (
+        <p className="text-xs" style={{ color: 'var(--m3-secondary)' }}>
+          No vaults found. Create one in the Vault section first.
+        </p>
+      )}
+    </div>
+  )
+}

package/src/components/ErrorBoundary.tsx

@@ -0,0 +1,47 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react'
+
+/** A lazy chunk that failed to load: after a deploy the old file names are gone, so the page needs a reload. */
+export function isChunkLoadError(error: unknown): boolean {
+  const message = error instanceof Error ? `${error.name} ${error.message}` : String(error)
+  return /ChunkLoadError|Failed to fetch dynamically imported module|error loading dynamically imported module|Importing a module script failed/i.test(message)
+}
+
+interface Props {
+  children: ReactNode
+}
+
+interface State {
+  error: unknown
+}
+
+/** Catches errors thrown while rendering (and by lazy imports) so the screen is not left blank; offers a reload. */
+export class ErrorBoundary extends Component<Props, State> {
+  override state: State = { error: null }
+
+  static getDerivedStateFromError(error: unknown): State {
+    return { error: error ?? new Error('Unknown error') }
+  }
+
+  override componentDidCatch(error: unknown, info: ErrorInfo): void {
+    console.error(error, info.componentStack)
+  }
+
+  override render(): ReactNode {
+    const { error } = this.state
+    if (!error) return this.props.children
+    const stale = isChunkLoadError(error)
+    return (
+      <div role="alert" className="min-h-screen flex flex-col items-center justify-center gap-3 px-6 text-center" style={{ background: 'var(--m3-surface)', color: 'var(--m3-on-surface)' }}>
+        <span className="material-symbols-outlined" aria-hidden="true" style={{ fontSize: '32px', color: 'var(--m3-down)' }}>error</span>
+        <h1 className="font-headline text-lg font-bold">{stale ? 'A new version is available' : 'Something went wrong'}</h1>
+        <p className="text-sm max-w-md" style={{ color: 'var(--m3-secondary)' }}>
+          {stale ? 'This page was updated while it was open. Reload to continue.' : 'The page could not be displayed. Reloading usually fixes it.'}
+        </p>
+        <button type="button" onClick={() => window.location.reload()} className="btn btn-secondary btn-sm">
+          <span className="material-symbols-outlined" aria-hidden="true">refresh</span>
+          Reload
+        </button>
+      </div>
+    )
+  }
+}