@better-forge/ui 0.1.0 → 0.1.1

package/src/pages/SsoConfirm.tsx

@@ -1,26 +1,26 @@
-import { useEffect } from 'react'
-import { useSearchParams } from 'react-router-dom'
-import { ssoConfirmChannel } from '../components/SsoConfirmation'
-
-/** Where the SSO confirmation popup lands: tells the window that opened it how it went, then closes. */
-export default function SsoConfirmPage() {
-  const [params] = useSearchParams()
-  const ok = params.get('status') === 'ok'
-
-  useEffect(() => {
-    const channel = new BroadcastChannel(ssoConfirmChannel())
-    channel.postMessage({ ok })
-    channel.close()
-    if (ok) window.close()
-  }, [ok])
-
-  return (
-    <div className="min-h-screen flex items-center justify-center px-6" style={{ background: 'var(--m3-surface)', color: 'var(--m3-on-surface)' }}>
-      <p className="text-sm text-center max-w-sm">
-        {ok
-          ? 'Confirmed. You can close this window.'
-          : 'The confirmation did not succeed. Close this window and try again.'}
-      </p>
-    </div>
-  )
-}
+import { useEffect } from 'react'
+import { useSearchParams } from 'react-router-dom'
+import { ssoConfirmChannel } from '../components/SsoConfirmation'
+
+/** Where the SSO confirmation popup lands: tells the window that opened it how it went, then closes. */
+export default function SsoConfirmPage() {
+  const [params] = useSearchParams()
+  const ok = params.get('status') === 'ok'
+
+  useEffect(() => {
+    const channel = new BroadcastChannel(ssoConfirmChannel())
+    channel.postMessage({ ok })
+    channel.close()
+    if (ok) window.close()
+  }, [ok])
+
+  return (
+    <div className="min-h-screen flex items-center justify-center px-6" style={{ background: 'var(--m3-surface)', color: 'var(--m3-on-surface)' }}>
+      <p className="text-sm text-center max-w-sm">
+        {ok
+          ? 'Confirmed. You can close this window.'
+          : 'The confirmation did not succeed. Close this window and try again.'}
+      </p>
+    </div>
+  )
+}

package/src/pages/SsoTestResult.tsx

@@ -1,104 +1,104 @@
-import { useQuery } from '@tanstack/react-query'
-import { useSearchParams } from 'react-router-dom'
-import { api } from '../api/client'
-import { uiConfig } from '../config'
-import { Alert, ErrorState, LoadingState, PageContainer, PageHeader, DataTable, DataTh } from '../components/ui'
-import { formatDateTime } from '../lib/dateFormat'
-
-interface TestResult {
-  issuer: string
-  testedAt: number
-  claims: Record<string, unknown> | null
-  outcome: 'sign_in' | 'link' | 'provision' | 'deny'
-  user: string | null
-  denial: { code: string; reason: string; email?: string } | null
-}
-
-// Claims that decide the outcome, shown first.
-const KEY_CLAIMS = ['sub', 'email', 'email_verified', 'xms_edov', 'preferred_username', 'name']
-
-function formatClaim(value: unknown) {
-  return typeof value === 'string' ? value : JSON.stringify(value)
-}
-
-function Outcome({ result }: { result: TestResult }) {
-  if (result.outcome === 'sign_in') {
-    return <Alert tone="success" title="Sign-in would succeed">Signs in as <strong>{result.user}</strong>, matched by their linked identity-provider account.</Alert>
-  }
-  if (result.outcome === 'link') {
-    return <Alert tone="success" title="Sign-in would succeed">Signs in as <strong>{result.user}</strong>, matched by email. The first real sign-in links this identity-provider account to the user.</Alert>
-  }
-  if (result.outcome === 'provision') {
-    return <Alert tone="success" title="Sign-in would succeed">{newAccountNote(result.user)}</Alert>
-  }
-  return (
-    <Alert tone="error" title={`Sign-in would be refused (${result.denial?.code})`}>
-      {result.denial?.reason}
-    </Alert>
-  )
-}
-
-export default function SsoTestResultPage() {
-  const [params] = useSearchParams()
-  const id = params.get('result') ?? ''
-  const { data, isLoading, error } = useQuery<TestResult>({
-    queryKey: ['sso-test', id],
-    queryFn: () => api.get(`/admin/oidc/test-sign-in/${encodeURIComponent(id)}`),
-    enabled: !!id,
-    retry: false,
-  })
-
-  const claims = data?.claims ? Object.entries(data.claims) : []
-  const ordered = [
-    ...KEY_CLAIMS.flatMap((key) => claims.filter(([name]) => name === key)),
-    ...claims.filter(([name]) => !KEY_CLAIMS.includes(name)).sort(([a], [b]) => a.localeCompare(b)),
-  ]
-
-  return (
-    <PageContainer className="max-w-3xl">
-      <PageHeader
-        title="Single sign-on test"
-        subtitle="Nobody was signed in and nothing was saved. Close this tab when you are done."
-      />
-      {!id ? <ErrorState message="No test result to show. Start a test sign-in from Users → Single sign-on." />
-        : isLoading ? <LoadingState label="Loading the test result…" />
-          : error || !data ? <ErrorState message={error instanceof Error ? error.message : 'Could not load the test result.'} />
-            : (
-              <>
-                <Outcome result={data} />
-                <p className="text-sm" style={{ color: 'var(--m3-secondary)' }}>
-                  Issuer <code>{data.issuer}</code> · tested {formatDateTime(data.testedAt)}
-                </p>
-                {ordered.length > 0 && (
-                  <div className="rounded-2xl overflow-x-auto" style={{ background: 'var(--m3-surface-container-low)', border: '1px solid var(--m3-outline-variant)' }}>
-                    <DataTable className="w-full text-sm">
-                      <caption className="sr-only">ID token claims</caption>
-                      <thead>
-                        <tr style={{ borderBottom: '1px solid var(--m3-outline-variant)' }}>
-                          {['Claim', 'Value'].map((h) => (
-                            <DataTh key={h} className="px-4 py-3 font-mono text-xs uppercase tracking-wider text-left" style={{ color: 'var(--m3-secondary)', background: 'var(--m3-surface-container)' }}>{h}</DataTh>
-                          ))}
-                        </tr>
-                      </thead>
-                      <tbody>
-                        {ordered.map(([name, value], i) => (
-                          <tr key={name} style={{ borderTop: i > 0 ? '1px solid var(--m3-outline-variant)' : 'none' }}>
-                            <td className="px-4 py-2 font-mono text-xs whitespace-nowrap align-top" style={{ color: 'var(--m3-secondary)' }}>{name}</td>
-                            <td className="px-4 py-2 font-mono text-xs break-all" style={{ color: 'var(--m3-on-surface)' }}>{formatClaim(value)}</td>
-                          </tr>
-                        ))}
-                      </tbody>
-                    </DataTable>
-                  </div>
-                )}
-              </>
-            )}
-    </PageContainer>
-  )
-}
-
-/** The note for a test sign-in that would create an account, worded by the application. */
-function newAccountNote(user: string | null) {
-  const [before, after] = uiConfig().texts.ssoNewAccount.split('{user}')
-  return <>{before}<strong>{user}</strong>{after}</>
-}
+import { useQuery } from '@tanstack/react-query'
+import { useSearchParams } from 'react-router-dom'
+import { api } from '../api/client'
+import { uiConfig } from '../config'
+import { Alert, ErrorState, LoadingState, PageContainer, PageHeader, DataTable, DataTh } from '../components/ui'
+import { formatDateTime } from '../lib/dateFormat'
+
+interface TestResult {
+  issuer: string
+  testedAt: number
+  claims: Record<string, unknown> | null
+  outcome: 'sign_in' | 'link' | 'provision' | 'deny'
+  user: string | null
+  denial: { code: string; reason: string; email?: string } | null
+}
+
+// Claims that decide the outcome, shown first.
+const KEY_CLAIMS = ['sub', 'email', 'email_verified', 'xms_edov', 'preferred_username', 'name']
+
+function formatClaim(value: unknown) {
+  return typeof value === 'string' ? value : JSON.stringify(value)
+}
+
+function Outcome({ result }: { result: TestResult }) {
+  if (result.outcome === 'sign_in') {
+    return <Alert tone="success" title="Sign-in would succeed">Signs in as <strong>{result.user}</strong>, matched by their linked identity-provider account.</Alert>
+  }
+  if (result.outcome === 'link') {
+    return <Alert tone="success" title="Sign-in would succeed">Signs in as <strong>{result.user}</strong>, matched by email. The first real sign-in links this identity-provider account to the user.</Alert>
+  }
+  if (result.outcome === 'provision') {
+    return <Alert tone="success" title="Sign-in would succeed">{newAccountNote(result.user)}</Alert>
+  }
+  return (
+    <Alert tone="error" title={`Sign-in would be refused (${result.denial?.code})`}>
+      {result.denial?.reason}
+    </Alert>
+  )
+}
+
+export default function SsoTestResultPage() {
+  const [params] = useSearchParams()
+  const id = params.get('result') ?? ''
+  const { data, isLoading, error } = useQuery<TestResult>({
+    queryKey: ['sso-test', id],
+    queryFn: () => api.get(`/admin/oidc/test-sign-in/${encodeURIComponent(id)}`),
+    enabled: !!id,
+    retry: false,
+  })
+
+  const claims = data?.claims ? Object.entries(data.claims) : []
+  const ordered = [
+    ...KEY_CLAIMS.flatMap((key) => claims.filter(([name]) => name === key)),
+    ...claims.filter(([name]) => !KEY_CLAIMS.includes(name)).sort(([a], [b]) => a.localeCompare(b)),
+  ]
+
+  return (
+    <PageContainer className="max-w-3xl">
+      <PageHeader
+        title="Single sign-on test"
+        subtitle="Nobody was signed in and nothing was saved. Close this tab when you are done."
+      />
+      {!id ? <ErrorState message="No test result to show. Start a test sign-in from Users → Single sign-on." />
+        : isLoading ? <LoadingState label="Loading the test result…" />
+          : error || !data ? <ErrorState message={error instanceof Error ? error.message : 'Could not load the test result.'} />
+            : (
+              <>
+                <Outcome result={data} />
+                <p className="text-sm" style={{ color: 'var(--m3-secondary)' }}>
+                  Issuer <code>{data.issuer}</code> · tested {formatDateTime(data.testedAt)}
+                </p>
+                {ordered.length > 0 && (
+                  <div className="rounded-2xl overflow-x-auto" style={{ background: 'var(--m3-surface-container-low)', border: '1px solid var(--m3-outline-variant)' }}>
+                    <DataTable className="w-full text-sm">
+                      <caption className="sr-only">ID token claims</caption>
+                      <thead>
+                        <tr style={{ borderBottom: '1px solid var(--m3-outline-variant)' }}>
+                          {['Claim', 'Value'].map((h) => (
+                            <DataTh key={h} className="px-4 py-3 font-mono text-xs uppercase tracking-wider text-left" style={{ color: 'var(--m3-secondary)', background: 'var(--m3-surface-container)' }}>{h}</DataTh>
+                          ))}
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {ordered.map(([name, value], i) => (
+                          <tr key={name} style={{ borderTop: i > 0 ? '1px solid var(--m3-outline-variant)' : 'none' }}>
+                            <td className="px-4 py-2 font-mono text-xs whitespace-nowrap align-top" style={{ color: 'var(--m3-secondary)' }}>{name}</td>
+                            <td className="px-4 py-2 font-mono text-xs break-all" style={{ color: 'var(--m3-on-surface)' }}>{formatClaim(value)}</td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </DataTable>
+                  </div>
+                )}
+              </>
+            )}
+    </PageContainer>
+  )
+}
+
+/** The note for a test sign-in that would create an account, worded by the application. */
+function newAccountNote(user: string | null) {
+  const [before, after] = uiConfig().texts.ssoNewAccount.split('{user}')
+  return <>{before}<strong>{user}</strong>{after}</>
+}