@better-forge/ui 0.0.0-stage → 0.1.0

package/src/components/ModalShell.tsx

@@ -0,0 +1,160 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react'
+import { createPortal } from 'react-dom'
+
+export const MODAL_Z_INDEX = 9999
+export const MODAL_BACKDROP = 'rgba(0,0,0,0.55)'
+
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+
+/** Open shells, innermost last: only the top one reacts to Escape and traps Tab. */
+const openShells: HTMLElement[] = []
+
+interface ModalShellProps {
+  children: ReactNode
+  /** `top` for tall forms that scroll with the page; `center` for short dialogs. */
+  align?: 'center' | 'top' | undefined
+  /** Called when Escape is pressed while this is the topmost modal. Omit to ignore Escape. */
+  onClose?: (() => void) | undefined
+  /**
+   * Accessible name. When given (or `labelledBy`), the shell itself carries role="dialog" aria-modal —
+   * use it when the child panel does not declare its own dialog role.
+   */
+  label?: string | undefined
+  labelledBy?: string | undefined
+}
+
+/**
+ * The single backdrop every admin modal renders through, so stacking, dimming and dismissal stay consistent:
+ * portalled to <body>, z-index 9999, a 55% black scrollable overlay, and a backdrop click never dismisses —
+ * a stray click must not throw away a half-filled form. Dialogs close from their own Cancel / × controls and,
+ * when `onClose` is passed, from Escape. Focus moves into the modal on open (unless a child already took it
+ * with autoFocus), Tab cycles inside it, and focus returns to the opener on close.
+ */
+export function ModalShell({ children, align = 'center', onClose, label, labelledBy }: ModalShellProps) {
+  const panelRef = useRef<HTMLDivElement>(null)
+  const onCloseRef = useRef(onClose)
+  useEffect(() => { onCloseRef.current = onClose })
+  // Read during the first render, before an autoFocus child steals focus, so closing returns it to the opener.
+  const [opener] = useState(() => document.activeElement instanceof HTMLElement ? document.activeElement : null)
+
+  useEffect(() => {
+    const panel = panelRef.current
+    if (!panel) return
+    openShells.push(panel)
+    if (!panel.contains(document.activeElement)) panel.focus({ preventScroll: true })
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (openShells[openShells.length - 1] !== panel || event.defaultPrevented || event.isComposing) return
+      if (event.key === 'Escape') {
+        if (onCloseRef.current) {
+          event.preventDefault()
+          onCloseRef.current()
+        }
+        return
+      }
+      if (event.key !== 'Tab') return
+      const focusable = Array.from(panel.querySelectorAll<HTMLElement>(FOCUSABLE))
+      if (focusable.length === 0) { event.preventDefault(); return }
+      const first = focusable[0]!
+      const last = focusable[focusable.length - 1]!
+      const active = document.activeElement
+      if (event.shiftKey && (active === first || active === panel)) { event.preventDefault(); last.focus() }
+      else if (!event.shiftKey && active === last) { event.preventDefault(); first.focus() }
+      else if (!panel.contains(active)) { event.preventDefault(); first.focus() }
+    }
+    document.addEventListener('keydown', onKeyDown)
+    return () => {
+      document.removeEventListener('keydown', onKeyDown)
+      const index = openShells.lastIndexOf(panel)
+      if (index >= 0) openShells.splice(index, 1)
+      if (opener && opener.isConnected) opener.focus({ preventScroll: true })
+    }
+  }, [opener])
+
+  const dialogProps = label || labelledBy
+    ? { role: 'dialog', 'aria-modal': true, 'aria-label': label, 'aria-labelledby': labelledBy }
+    : {}
+
+  return createPortal(
+    <div data-testid="modal-backdrop" style={{ position: 'fixed', inset: 0, zIndex: MODAL_Z_INDEX, background: MODAL_BACKDROP, overflowY: 'auto' }}>
+      <div
+        ref={panelRef}
+        tabIndex={-1}
+        {...dialogProps}
+        style={{ display: 'flex', minHeight: '100%', alignItems: align === 'top' ? 'flex-start' : 'center', justifyContent: 'center', padding: '16px', outline: 'none' }}
+      >
+        {children}
+      </div>
+    </div>,
+    document.body,
+  )
+}
+
+interface ModalHeaderProps {
+  /** Material Symbols name shown before the title, so every dialog header reads the same way. */
+  icon: string
+  title: ReactNode
+  /** Id for the heading, when the dialog is labelled by it via `labelledBy`. */
+  titleId?: string | undefined
+  onClose: () => void
+}
+
+/** The shared dialog header: icon, title and a × close button above a divider. */
+export function ModalHeader({ icon, title, titleId, onClose }: ModalHeaderProps) {
+  return (
+    <div className="flex items-center justify-between gap-3 px-6 py-5" style={{ borderBottom: '1px solid var(--m3-outline-variant)' }}>
+      <div className="flex items-center gap-3 min-w-0">
+        <span className="material-symbols-outlined shrink-0" aria-hidden="true" style={{ fontSize: '22px', color: 'var(--m3-primary)' }}>{icon}</span>
+        <h3 id={titleId} className="font-headline font-bold text-lg break-words min-w-0" style={{ color: 'var(--m3-on-surface)' }}>{title}</h3>
+      </div>
+      <button type="button" onClick={onClose} aria-label="Close" className="btn-icon shrink-0">
+        <span className="material-symbols-outlined" aria-hidden="true">close</span>
+      </button>
+    </div>
+  )
+}
+
+interface ModalProps {
+  title: string
+  /** Material Symbols name for the header icon. */
+  icon: string
+  onClose: () => void
+  children: ReactNode
+  /** Skip the padded body so the content can bring its own, with a `ModalFooter` as the last thing in the dialog. */
+  flush?: boolean
+}
+
+/** A titled panel with a close button inside the shared shell, for simple forms. Escape closes it. */
+export function Modal({ title, icon, onClose, children, flush }: ModalProps) {
+  return (
+    <ModalShell onClose={onClose}>
+      <div role="dialog" aria-modal="true" aria-label={title} className="w-full max-w-md rounded-2xl" style={{ background: 'var(--m3-surface-container-low)', border: '1px solid var(--m3-outline-variant)' }}>
+        <ModalHeader icon={icon} title={title} onClose={onClose} />
+        {flush ? children : <div className="p-6">{children}</div>}
+      </div>
+    </ModalShell>
+  )
+}
+
+interface ModalFooterProps {
+  /** Secondary tools on the left (YAML, Test, …); kept apart from the buttons that close or save. */
+  start?: ReactNode
+  /** Cancel and the main action, on the right. */
+  children: ReactNode
+}
+
+/**
+ * The action row of a form dialog, stuck to the bottom of the screen while the form scrolls, so the main
+ * action never hides below the fold. Put it last inside the `<form>`, after the padded body.
+ */
+export function ModalFooter({ start, children }: ModalFooterProps) {
+  return (
+    <div
+      className="flex flex-wrap items-center justify-between gap-3 px-4 sm:px-6 py-4"
+      style={{ position: 'sticky', bottom: 0, zIndex: 1, background: 'var(--m3-surface-container-low)', borderTop: '1px solid var(--m3-outline-variant)', borderRadius: '0 0 15px 15px' }}
+    >
+      {start ? <div className="flex flex-wrap gap-3">{start}</div> : <span />}
+      <div className="flex flex-wrap gap-3 ml-auto">{children}</div>
+    </div>
+  )
+}

package/src/components/ResetTwoFactorModal.tsx

@@ -0,0 +1,74 @@
+import { useId, useState } from 'react'
+import { ModalFooter, ModalHeader, ModalShell } from './ModalShell'
+import { SsoConfirmationNote, isSsoSession, type SsoConfirmationState } from './SsoConfirmation'
+import { Alert } from './ui'
+
+const IDLE_CONFIRMATION = { waiting: false, cancel: () => {} }
+
+interface ResetTwoFactorModalProps {
+  email: string
+  pending: boolean
+  error?: string
+  /** Progress of the SSO confirmation popup, which `onConfirm` opens when the API asks for it. */
+  ssoConfirmation?: Pick<SsoConfirmationState, 'waiting' | 'cancel'>
+  /** `currentPassword` is undefined in an SSO session, which is confirmed at the identity provider instead. */
+  onConfirm: (currentPassword: string | undefined) => void
+  onCancel: () => void
+}
+
+export function ResetTwoFactorModal({ email, pending, error, ssoConfirmation = IDLE_CONFIRMATION, onConfirm, onCancel }: ResetTwoFactorModalProps) {
+  const sso = isSsoSession()
+  const [currentPassword, setCurrentPassword] = useState('')
+  const [typedEmail, setTypedEmail] = useState('')
+  const titleId = useId()
+  const canConfirm = !pending && (sso || currentPassword.length > 0) && typedEmail === email
+  const confirm = () => onConfirm(sso ? undefined : currentPassword)
+
+  return (
+    <ModalShell onClose={pending ? undefined : onCancel}>
+      <div
+        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)' }}
+      >
+        <ModalHeader icon="shield_lock" titleId={titleId} title="Reset two-factor authentication" onClose={pending ? () => {} : onCancel} />
+        <div className="p-6 space-y-4">
+        <div>
+          <p className="text-sm" style={{ color: 'var(--m3-on-surface-variant)' }}>
+            This removes 2FA from <strong>{email}</strong> and signs out all of their active sessions. Their password will not change.
+          </p>
+        </div>
+
+        {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}
+            onChange={(event) => setCurrentPassword(event.target.value)}
+            className="input-sig w-full"
+          />
+        </label>}
+
+        <label className="block space-y-2 text-sm" style={{ color: 'var(--m3-on-surface-variant)' }}>
+          <span>Type <strong className="font-mono">{email}</strong> to confirm</span>
+          <input value={typedEmail} onChange={(event) => setTypedEmail(event.target.value)} autoFocus={sso} autoComplete="off" spellCheck={false} className="input-sig w-full" />
+        </label>
+
+        </div>
+        <ModalFooter>
+          <button type="button" onClick={onCancel} disabled={pending} className="btn btn-secondary">Cancel</button>
+          <button type="button" onClick={confirm} disabled={!canConfirm} className="btn btn-danger-outline">
+            {pending ? 'Resetting…' : 'Reset 2FA'}
+          </button>
+        </ModalFooter>
+      </div>
+    </ModalShell>
+  )
+}

package/src/components/SidePanel.tsx

@@ -0,0 +1,96 @@
+import clsx from 'clsx'
+import type { ReactNode } from 'react'
+
+export interface SidePanelMeta { icon: string; label: string }
+
+/**
+ * `row`: the panel always sits to the right of the form (legacy layout).
+ * `responsive`: below the lg breakpoint the panel spans the full width under the form with a top border;
+ * from lg up it becomes the right-hand column. The parent must switch to `flex-col lg:flex-row` to match.
+ */
+export type SidePanelLayout = 'row' | 'responsive'
+
+/** The expandable column to the right of a modal form: a title bar and the open section. */
+export function SidePanelFrame({ meta, children, layout = 'row', className }: {
+  meta: SidePanelMeta
+  children: ReactNode
+  layout?: SidePanelLayout | undefined
+  className?: string | undefined
+}) {
+  return (
+    <div
+      data-testid="side-panel-frame"
+      className={clsx(
+        'flex flex-col flex-1 min-w-0 border-outline-variant',
+        layout === 'row' ? 'border-l lg:min-w-[360px]' : 'w-full border-t lg:w-auto lg:border-t-0 lg:border-l lg:min-w-[360px]',
+        className,
+      )}
+    >
+      {/* Panel header — just the section title */}
+      <div className="flex items-center gap-2 px-5 py-4" style={{ borderBottom: '1px solid var(--m3-outline-variant)' }}>
+        <span className="material-symbols-outlined" style={{ fontSize: '16px', color: 'var(--m3-primary)' }}>{meta.icon}</span>
+        <span className="font-mono text-xs uppercase tracking-wider font-medium" style={{ color: 'var(--m3-on-surface)', flex: 1 }}>{meta.label}</span>
+      </div>
+
+      {/* Tab content */}
+      <div className="p-5 space-y-4 overflow-y-auto" style={{ flex: 1 }}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export interface SideTab<K extends string> { key: K; badge: string | null }
+
+/**
+ * The icon strip that opens and closes side-panel sections: vertical at the form's right edge, or with
+ * `layout="responsive"` a horizontal row below lg and the vertical strip from lg up.
+ */
+export function SideTabStrip<K extends string>({ tabs, meta, active, onToggle, layout = 'row', className }: {
+  tabs: SideTab<K>[]
+  meta: Record<K, SidePanelMeta>
+  active: K | null
+  onToggle: (key: K | null) => void
+  layout?: SidePanelLayout | undefined
+  className?: string | undefined
+}) {
+  const responsive = layout === 'responsive'
+  return (
+    <div
+      role="toolbar"
+      aria-orientation={responsive ? undefined : 'vertical'}
+      className={clsx(
+        'flex items-stretch border-outline-variant',
+        responsive ? 'flex-row w-full border-t overflow-hidden rounded-b-2xl lg:w-11 lg:flex-none lg:flex-col lg:border-t-0 lg:border-l lg:rounded-b-none lg:rounded-r-2xl' : 'flex-col flex-none w-11 border-l',
+        className,
+      )}
+    >
+      {tabs.map((tab) => {
+        const isActive = active === tab.key
+        const current = meta[tab.key]
+        return (
+          <button key={tab.key} type="button"
+            aria-pressed={isActive}
+            aria-label={current.label}
+            title={current.label}
+            onClick={() => onToggle(isActive ? null : tab.key)}
+            className={clsx(
+              'relative flex flex-col items-center justify-center transition-all border-outline-variant focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-outline',
+              responsive ? 'flex-1 py-3 border-r last:border-r-0 lg:flex-none lg:py-4 lg:border-r-0 lg:border-b' : 'py-4 border-b',
+              isActive ? 'side-tab-active' : 'hover:bg-surface-container',
+            )}
+            style={{ color: isActive ? 'var(--m3-primary)' : 'var(--m3-secondary)', background: isActive ? 'var(--m3-primary-fixed)' : undefined }}
+          >
+            <span className="material-symbols-outlined" style={{ fontSize: '18px' }}>{current.icon}</span>
+            {tab.badge && (
+              <span className={`absolute top-1.5 right-1 flex items-center justify-center rounded-full font-bold leading-none ${isActive ? 'side-tab-badge-active' : ''}`}
+                style={{ background: isActive ? 'var(--m3-primary)' : 'var(--m3-on-surface-variant)', color: isActive ? 'var(--m3-on-primary)' : 'var(--m3-surface)', minWidth: '14px', height: '14px', fontSize: '9px', padding: '0 2px' }}>
+                {tab.badge}
+              </span>
+            )}
+          </button>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/SingleSignOnModal.tsx

@@ -0,0 +1,161 @@
+import { useCallback, useEffect, useState } from 'react'
+import { api } from '../api/client'
+import { uiConfig } from '../config'
+import { Alert, ErrorState, Field, LoadingState, Switch, useToast } from './ui'
+import { ModalFooter, ModalHeader, ModalShell } from './ModalShell'
+import { SsoConfirmationNote, isSsoSession, useSsoConfirmation } from './SsoConfirmation'
+
+interface OidcSettings {
+  enabled: boolean
+  issuer: string
+  clientId: string
+  hasClientSecret: boolean
+  scopes: string
+  redirectUri: string
+  buttonLabel: string
+  allowUnverifiedEmail: boolean
+  disablePasswordLogin: boolean
+}
+interface OidcResponse { source: 'env' | 'database' | 'none'; envManaged: boolean; defaultRedirectUri: string; settings: OidcSettings }
+interface Message { tone: 'success' | 'error'; text: string }
+
+const errorText = (e: unknown) => e instanceof Error ? e.message : String(e)
+const CARD = { background: 'var(--m3-surface-container-lowest)', border: '1px solid var(--m3-outline-variant)', color: 'var(--m3-on-surface)' }
+
+export function SingleSignOnModal({ onClose }: { onClose: () => void }) {
+  const [data, setData] = useState<OidcResponse | null>(null)
+  const [form, setForm] = useState<OidcSettings | null>(null)
+  const [clientSecret, setClientSecret] = useState('')
+  const [currentPassword, setCurrentPassword] = useState('')
+  const sso = isSsoSession()
+  const confirmation = useSsoConfirmation()
+  const [loadError, setLoadError] = useState('')
+  const [busy, setBusy] = useState<'save' | 'test' | null>(null)
+  const [message, setMessage] = useState<Message | null>(null)
+  const toast = useToast()
+
+  const load = useCallback(() => api.get<OidcResponse>('/admin/oidc')
+    .then((res) => { setData(res); setForm(res.settings); setLoadError('') })
+    .catch((e: unknown) => setLoadError(errorText(e))), [])
+  useEffect(() => { void load() }, [load])
+
+  if (!data || !form) {
+    return <ModalShell align="top" onClose={onClose} label="Single sign-on">
+      <div className="rounded-2xl p-6 w-full max-w-2xl" style={CARD}>
+        {loadError ? <ErrorState message={loadError} onRetry={() => void load()} /> : <LoadingState label="Loading sign-in settings…" />}
+        {loadError && <button type="button" className="btn btn-secondary mt-4" onClick={onClose}>Close</button>}
+      </div>
+    </ModalShell>
+  }
+
+  const locked = data.envManaged
+  const update = (changes: Partial<OidcSettings>) => setForm({ ...form, ...changes })
+  const redirectUri = form.redirectUri || data.defaultRedirectUri
+
+  async function test() {
+    setBusy('test'); setMessage(null)
+    try {
+      const result = await api.post<{ issuer: string }>('/admin/oidc/test', { issuer: form!.issuer, clientId: form!.clientId, redirectUri: form!.redirectUri })
+      setMessage({ tone: 'success', text: `Connected to ${result.issuer}.` })
+    } catch (e) { setMessage({ tone: 'error', text: errorText(e) }) } finally { setBusy(null) }
+  }
+
+  async function save() {
+    setBusy('save'); setMessage(null)
+    try {
+      const saved = await confirmation.run(() => api.put<OidcSettings>('/admin/oidc', {
+        ...form, clientSecret, ...(sso ? {} : { currentPassword }),
+      }))
+      toast.success(saved.enabled ? 'Single sign-on settings saved. They apply immediately.' : 'Single sign-on settings saved.')
+      onClose()
+    } catch (err) { setMessage({ tone: 'error', text: errorText(err) }); setBusy(null) }
+  }
+
+  return <ModalShell align="top" onClose={busy ? undefined : onClose} label="Single sign-on">
+    <div className="w-full max-w-2xl rounded-2xl my-8" style={{ background: 'var(--m3-surface-container-low)', border: '1px solid var(--m3-outline-variant)', color: 'var(--m3-on-surface)' }}>
+    <ModalHeader icon="passkey" title="Single sign-on" onClose={onClose} />
+    <form onSubmit={(e) => { e.preventDefault(); void save() }}>
+    <div className="p-6 space-y-5">
+      {locked && <Alert tone="warning">Single sign-on is configured through OIDC_* environment variables on the server. Remove them to manage it here.</Alert>}
+      {message && <Alert tone={message.tone} onDismiss={() => setMessage(null)}>{message.text}</Alert>}
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <h2 className="font-headline text-base font-semibold">OpenID Connect</h2>
+          <p className="text-sm mt-1" style={{ color: 'var(--m3-secondary)' }}>
+            Users must already exist; they are matched by the verified email from the identity provider.{uiConfig().texts.ssoSignInHint ? ` ${uiConfig().texts.ssoSignInHint}` : ""}
+          </p>
+        </div>
+        <Switch checked={form.enabled} disabled={locked} onChange={(enabled) => update({ enabled })} aria-label="Enable single sign-on" />
+      </div>
+
+      <fieldset disabled={locked || busy !== null} className="space-y-4">
+        <Field label="Issuer URL" hint="For example https://login.microsoftonline.com/<tenant>/v2.0 or https://keycloak.example.com/realms/main">
+          <input className="input-m3" value={form.issuer} onChange={(e) => update({ issuer: e.target.value })} placeholder="https://idp.example.com" />
+        </Field>
+        <div className="grid gap-4 md:grid-cols-2">
+          <Field label="Client ID">
+            <input className="input-m3" value={form.clientId} onChange={(e) => update({ clientId: e.target.value })} autoComplete="off" />
+          </Field>
+          <Field label="Client secret" hint={form.hasClientSecret ? 'A secret is stored. Leave empty to keep it. Re-enter it when you change the issuer URL or client ID.' : 'Optional for public clients.'}>
+            <input
+              className="input-m3" type="password" autoComplete="new-password" value={clientSecret}
+              onChange={(e) => setClientSecret(e.target.value)}
+              placeholder={form.hasClientSecret ? '••••••••' : ''}
+            />
+          </Field>
+        </div>
+        <Field label="Redirect URI" hint={redirectUri ? <>Register <code>{redirectUri}</code> as the callback URL in your identity provider.</> : 'Set PUBLIC_URL on the server or enter the callback URL here.'}>
+          <input className="input-m3" value={form.redirectUri} onChange={(e) => update({ redirectUri: e.target.value })} placeholder={data.defaultRedirectUri} />
+        </Field>
+        <div className="grid gap-4 md:grid-cols-2">
+          <Field label="Scopes">
+            <input className="input-m3" value={form.scopes} onChange={(e) => update({ scopes: e.target.value })} placeholder="openid email profile" />
+          </Field>
+          <Field label="Button label">
+            <input className="input-m3" value={form.buttonLabel} onChange={(e) => update({ buttonLabel: e.target.value })} placeholder="Sign in with SSO" />
+          </Field>
+        </div>
+        <label className="flex items-start gap-2 text-sm">
+          <input type="checkbox" className="mt-1" checked={form.allowUnverifiedEmail} onChange={(e) => update({ allowUnverifiedEmail: e.target.checked })} />
+          <span>Accept identity providers that omit <code>email_verified</code>. Enable only if the email claim is trustworthy. Not needed for Microsoft Entra ID: add the <code>xms_edov</code> optional claim instead.</span>
+        </label>
+        <label className="flex items-start gap-2 text-sm">
+          <input type="checkbox" className="mt-1" checked={form.disablePasswordLogin} onChange={(e) => update({ disablePasswordLogin: e.target.checked })} />
+          <span>Disable password sign-in. The identity provider must be reachable to save this. Set <code>OIDC_FORCE_PASSWORD_LOGIN=true</code> on the server to recover if it goes down.</span>
+        </label>
+      </fieldset>
+
+      {!locked && <>
+        {sso
+          ? <SsoConfirmationNote confirmation={confirmation} />
+          : <Field label="Your current password" hint="Required to change sign-in settings.">
+            <input className="input-m3" type="password" autoComplete="current-password" required value={currentPassword} onChange={(e) => setCurrentPassword(e.target.value)} />
+          </Field>}
+      </>}
+      {!locked && <p className="text-xs" style={{ color: 'var(--m3-secondary)' }}>Test sign-in uses the saved settings, so save changes first.</p>}
+    </div>
+
+    <ModalFooter
+      start={<>
+        {!locked && (
+          <button type="button" disabled={busy !== null || !form.issuer || !form.clientId} onClick={() => void test()} className="btn btn-secondary">
+            {busy === 'test' ? 'Testing…' : 'Test connection'}
+          </button>
+        )}
+        <button
+          type="button" disabled={!locked && (busy !== null || !data.settings.issuer || !data.settings.clientId)}
+          onClick={() => window.open('/api/v1/admin/oidc/test-sign-in', '_blank', 'noopener')}
+          title="Signs in at the identity provider in a new tab with the saved settings and shows the claims and the outcome, without signing anyone in."
+          className="btn btn-secondary"
+        >
+          Test sign-in
+        </button>
+      </>}
+    >
+      <button type="button" disabled={busy !== null} onClick={onClose} className="btn btn-secondary">{locked ? 'Close' : 'Cancel'}</button>
+      {!locked && <button type="submit" disabled={busy !== null} className="btn btn-primary">{busy === 'save' ? 'Saving…' : 'Save'}</button>}
+    </ModalFooter>
+    </form>
+    </div>
+  </ModalShell>
+}

package/src/components/SsoConfirmation.tsx

@@ -0,0 +1,96 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { getCurrentUser, type ApiError } from '../api/client'
+import { storageKey, uiConfig } from '../config'
+import { Alert } from './ui'
+
+/** The confirmation popup reports on this channel. Some providers cut `window.opener`, so no postMessage. */
+export const ssoConfirmChannel = (): string => storageKey('sso-confirm')
+const ssoConfirmUrl = () => `${uiConfig().apiBase}/auth/oidc/confirm`
+// The server-side flow expires after 10 minutes, so a popup left open longer cannot succeed.
+const SSO_CONFIRM_TIMEOUT_MS = 10 * 60 * 1000
+
+type ConfirmOutcome = 'ok' | 'failed' | 'blocked' | 'cancelled'
+
+const OUTCOME_MESSAGES: Record<Exclude<ConfirmOutcome, 'ok'>, string> = {
+  failed: 'The single sign-on confirmation did not succeed. Try again.',
+  blocked: 'The browser blocked the sign-in window. Allow pop-ups for this site and try again.',
+  cancelled: 'The single sign-on confirmation was cancelled.',
+}
+
+/** True when the session signed in with SSO, so sensitive actions are confirmed there instead of with a password. */
+export function isSsoSession(): boolean {
+  return getCurrentUser()?.authMethod === 'oidc'
+}
+
+/** True when the API refused an action until the SSO session is confirmed at the identity provider. */
+export function isSsoConfirmationRequired(error: unknown): boolean {
+  return (error as Partial<ApiError> | null)?.code === 'SSO_CONFIRMATION_REQUIRED'
+}
+
+function openSsoConfirmation(): { result: Promise<ConfirmOutcome>; cancel: () => void } {
+  const popup = window.open(ssoConfirmUrl(), ssoConfirmChannel(), 'popup,width=520,height=720')
+  if (!popup) return { result: Promise.resolve('blocked'), cancel: () => {} }
+  let finish: (outcome: ConfirmOutcome) => void = () => {}
+  const result = new Promise<ConfirmOutcome>((resolve) => {
+    const channel = new BroadcastChannel(ssoConfirmChannel())
+    const timer = setTimeout(() => finish('failed'), SSO_CONFIRM_TIMEOUT_MS)
+    finish = (outcome) => {
+      channel.close()
+      clearTimeout(timer)
+      resolve(outcome)
+    }
+    channel.onmessage = (event: MessageEvent<{ ok?: boolean }>) => finish(event.data?.ok === true ? 'ok' : 'failed')
+  })
+  return {
+    result,
+    cancel: () => {
+      finish('cancelled')
+      try { popup.close() } catch { /* already closed or no longer ours */ }
+    },
+  }
+}
+
+/**
+ * Runs sensitive API calls of an SSO session. When the API asks for a confirmation, `run` opens the identity
+ * provider in a popup right away and repeats the call once it succeeds; otherwise it throws with the reason.
+ * The popup follows the user's click within one API round trip, which browsers still count as user-initiated.
+ */
+export function useSsoConfirmation() {
+  const [waiting, setWaiting] = useState(false)
+  const cancelRef = useRef<(() => void) | null>(null)
+  useEffect(() => () => cancelRef.current?.(), [])
+
+  const run = useCallback(async <T,>(action: () => Promise<T>): Promise<T> => {
+    try {
+      return await action()
+    } catch (error) {
+      if (!isSsoConfirmationRequired(error)) throw error
+      const { result, cancel } = openSsoConfirmation()
+      cancelRef.current = cancel
+      setWaiting(true)
+      const outcome = await result
+      cancelRef.current = null
+      setWaiting(false)
+      if (outcome !== 'ok') throw new Error(OUTCOME_MESSAGES[outcome], { cause: error })
+      return action()
+    }
+  }, [])
+
+  const cancel = useCallback(() => cancelRef.current?.(), [])
+  return { run, waiting, cancel }
+}
+
+export type SsoConfirmationState = ReturnType<typeof useSsoConfirmation>
+
+/** Takes the place of a "current password" field in an SSO session: a note, or the popup's progress. */
+export function SsoConfirmationNote({ confirmation }: { confirmation: Pick<SsoConfirmationState, 'waiting' | 'cancel'> }) {
+  if (!confirmation.waiting) {
+    return <p className="text-xs" style={{ color: 'var(--m3-secondary)' }}>You signed in with single sign-on, so no password is needed. You may be asked to sign in again in a pop-up window.</p>
+  }
+  return (
+    <Alert tone="info" title="Confirm it's you">
+      <p>Sign in again with your identity provider in the pop-up window. This continues once you are done.</p>
+      <button type="button" className="btn btn-secondary btn-sm mt-3" onClick={confirmation.cancel}>Cancel</button>
+    </Alert>
+  )
+}