@better-forge/ui 0.1.0 → 0.1.1

package/src/components/SidePanel.tsx

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

@@ -1,161 +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>
-}
+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>
+}