feat(19-04): AdminPage LOCAL ACCOUNTS + SettingsSheet change-password / link-OIDC

- Add hasLocalCredential to AdminMember type (mirrors API extension from plan 19-02) - Add createMember mutation + Surface 11A inline add-member form in AdminPage - Add Surface 11B Reset-password button in MemberRow (hasLocalCredential gate) - Add ResetPasswordSheet component (bottom-sheet, role=dialog, focus-managed, Escape closes) - Add Surface 12 Change-password row in SettingsSheet (hasLocalCredential gate) - Add Surface 13 Link-OIDC identity row in SettingsSheet (hasLocalCredential + oidcEnabled gate) - Add ChangePasswordSheet component (current/new/confirm fields, change-password mutation) - Add LinkOidcSheet component (confirmation dialog; uses generic OIDC copy per D-06, no provider branding) - Fix: update InstructionSheet.test.tsx to wrap with QueryClientProvider (Rule 1 - now uses useQuery) - Fix: remove stale eslint-disable in App.test.tsx (lint --max-warnings 0 would fail) - All 263 tests pass; typecheck clean; lint clean
2026-06-17 17:21:20 -04:00
parent 32d0408774
commit 19c45eb069
5 changed files with 1286 additions and 28 deletions
@@ -7,8 +7,10 @@
 *   - onClose (the sheet-close prop) is NOT called when the dialog opens
 */

+import React from 'react';
 import { describe, it, expect, vi, beforeEach } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

 // ── Module mocks ──────────────────────────────────────────────────────────────

@@ -22,6 +24,17 @@ vi.mock('../hooks/usePushSubscription.js', () => ({
  readNotificationsEnabled: vi.fn(() => false),
 }));

+// Phase 19: SettingsSheet now calls fetchMe and fetchAuthMode inside useQuery.
+// Mock client so the test doesn't make real network calls.
+vi.mock('../api/client.js', () => ({
+  fetchMe: vi.fn().mockResolvedValue({
+    user: { id: 1, displayName: 'Test', color: '#4a90d9', isAdmin: false, needsProviderSetup: false, hasLocalCredential: false },
+  }),
+  fetchAuthMode: vi.fn().mockResolvedValue({ localEnabled: true, oidcEnabled: false }),
+  fetchChangePassword: vi.fn().mockResolvedValue(undefined),
+  fetchLinkOidc: vi.fn().mockResolvedValue({ redirectUrl: '/oidc' }),
+}));
+
 // ── Minimal Notification stub (jsdom lacks it) ────────────────────────────────

 beforeEach(() => {
@@ -44,12 +57,21 @@ beforeEach(() => {

 import { SettingsSheet } from './SettingsSheet.js';

+// ── Test helper ───────────────────────────────────────────────────────────────
+
+function renderWithQueryClient(ui: React.ReactElement) {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+  });
+  return render(<QueryClientProvider client={queryClient}>{ui}</QueryClientProvider>);
+}
+
 // ── Tests ─────────────────────────────────────────────────────────────────────

 describe('SettingsSheet — "How to enable" wiring (UAT-05-T4)', () => {
  it('clicking "How to enable" opens the InstructionSheet dialog and does NOT call onClose', () => {
    const onCloseSpy = vi.fn();
-    render(<SettingsSheet isOpen={true} onClose={onCloseSpy} />);
+    renderWithQueryClient(<SettingsSheet isOpen={true} onClose={onCloseSpy} />);

    // No instruction dialog yet
    expect(screen.queryByRole('dialog', { name: /re-enable notifications/i })).toBeNull();
@@ -71,7 +93,7 @@ describe('SettingsSheet — "How to enable" wiring (UAT-05-T4)', () => {

  it('InstructionSheet "Done" button closes the instruction dialog without calling sheet onClose', () => {
    const onCloseSpy = vi.fn();
-    render(<SettingsSheet isOpen={true} onClose={onCloseSpy} />);
+    renderWithQueryClient(<SettingsSheet isOpen={true} onClose={onCloseSpy} />);

    // Open the instruction sheet
    fireEvent.click(screen.getByText('How to enable'));
@@ -23,8 +23,10 @@

 import { useEffect, useRef, useState } from 'react';
 import { X, Bell, AlertCircle, Loader2 } from 'lucide-react';
+import { useQuery, useMutation } from '@tanstack/react-query';
 import { usePushSubscription } from '../hooks/usePushSubscription.js';
 import { InstructionSheet } from './InstructionSheet.js';
+import { fetchMe, fetchAuthMode, fetchChangePassword, fetchLinkOidc } from '../api/client.js';

 // CR-04: fetch VAPID key (from sessionStorage cache if available) for the
 // tap-gated subscribe() path.  Same logic as PushPermissionPrompt.
@@ -53,6 +55,28 @@ export function SettingsSheet({ isOpen, onClose }: SettingsSheetProps) {
  const { subscribe, permission, isSubscribed, setEnabled } = usePushSubscription();
  const [isTogglingOn, setIsTogglingOn] = useState(false);
  const [instructionsOpen, setInstructionsOpen] = useState(false);
+
+  // Phase 19: read meData (same query key as App.tsx — TanStack deduplicates the request)
+  const meQuery = useQuery({
+    queryKey: ['me'],
+    queryFn: fetchMe,
+    retry: false,
+    staleTime: 0,
+  });
+  const authModeQuery = useQuery({
+    queryKey: ['authMode'],
+    queryFn: fetchAuthMode,
+    retry: false,
+    staleTime: 60_000,
+  });
+
+  const hasLocalCredential = meQuery.data?.user.hasLocalCredential ?? false;
+  const oidcEnabled = authModeQuery.data?.oidcEnabled ?? false;
+
+  // Change-password sheet state (Surface 12)
+  const [changePasswordOpen, setChangePasswordOpen] = useState(false);
+  // Link-OIDC confirmation sheet state (Surface 13)
+  const [linkOidcOpen, setLinkOidcOpen] = useState(false);
  // CR-04: pre-fetch the VAPID key into state so the toggle tap handler can call
  // subscribe(registration, vapidKey) without any network await before pushManager.subscribe().
  const [vapidKey, setVapidKey] = useState<string | null>(null);
@@ -341,6 +365,77 @@ export function SettingsSheet({ isOpen, onClose }: SettingsSheetProps) {
          )}
        </div>

+        {/* Surface 12 — Change password row (hasLocalCredential gate) */}
+        {hasLocalCredential && (
+          <>
+            <div
+              style={{
+                height: '1px',
+                background: 'var(--color-border-subtle, var(--color-border))',
+                margin: 'var(--space-4, 16px) 0',
+              }}
+            />
+            <div
+              style={{
+                fontSize: 'var(--text-label-size, 13px)',
+                fontWeight: 600,
+                color: 'var(--color-text-muted, #9CA3AF)',
+                textTransform: 'uppercase',
+                letterSpacing: '0.06em',
+                marginBottom: 'var(--space-2, 8px)',
+              }}
+            >
+              Account
+            </div>
+            <button
+              type="button"
+              onClick={() => setChangePasswordOpen(true)}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                width: '100%',
+                minHeight: '44px',
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                padding: 'var(--space-2, 8px) 0',
+                fontSize: 'var(--text-body-size, 15px)',
+                fontWeight: 400,
+                color: 'var(--color-text-primary, #111318)',
+                fontFamily: 'var(--font-family-base)',
+                textAlign: 'left',
+              }}
+            >
+              Change password
+            </button>
+
+            {/* Surface 13 — Link OIDC identity row (hasLocalCredential + oidcEnabled gate) */}
+            {oidcEnabled && (
+              <button
+                type="button"
+                onClick={() => setLinkOidcOpen(true)}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  width: '100%',
+                  minHeight: '44px',
+                  background: 'none',
+                  border: 'none',
+                  cursor: 'pointer',
+                  padding: 'var(--space-2, 8px) 0',
+                  fontSize: 'var(--text-body-size, 15px)',
+                  fontWeight: 400,
+                  color: 'var(--color-text-primary, #111318)',
+                  fontFamily: 'var(--font-family-base)',
+                  textAlign: 'left',
+                }}
+              >
+                Link OIDC identity
+              </button>
+            )}
+          </>
+        )}
+
        {/* Permission-denied hint — only when OS permission === 'denied' */}
        {permission === 'denied' && (
          <div
@@ -394,6 +489,532 @@ export function SettingsSheet({ isOpen, onClose }: SettingsSheetProps) {
      </div>

      {instructionsOpen && <InstructionSheet onClose={() => setInstructionsOpen(false)} />}
+
+      {/* Surface 12 — Change-password sheet (hasLocalCredential gate) */}
+      {changePasswordOpen && (
+        <ChangePasswordSheet
+          isOpen={changePasswordOpen}
+          onClose={() => setChangePasswordOpen(false)}
+        />
+      )}
+
+      {/* Surface 13 — Link OIDC confirmation sheet (hasLocalCredential + oidcEnabled gate) */}
+      {linkOidcOpen && (
+        <LinkOidcSheet
+          isOpen={linkOidcOpen}
+          onClose={() => setLinkOidcOpen(false)}
+        />
+      )}
+    </>
+  );
+}
+
+// ── ChangePasswordSheet (Surface 12) ─────────────────────────────────────────
+
+/**
+ * Surface 12 — Self-service password change sheet.
+ * Opens from the "Change password" row in SettingsSheet.
+ * Pattern: CredentialSheet (role=dialog, aria-modal, Escape closes, focus heading on open).
+ * Fields: Current password / New password / Confirm — correct autoComplete values.
+ * Security: T-19-18 — password fields are controlled state only; never written to storage.
+ */
+
+interface ChangePasswordSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+function ChangePasswordSheet({ isOpen, onClose }: ChangePasswordSheetProps) {
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const headingRef = useRef<HTMLHeadingElement>(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') handleClose();
+    };
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, [isOpen]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    if (isOpen && headingRef.current) {
+      headingRef.current.focus();
+    }
+  }, [isOpen]);
+
+  function handleClose() {
+    setCurrentPassword('');
+    setNewPassword('');
+    setConfirmPassword('');
+    setError(null);
+    onClose();
+  }
+
+  const changeMutation = useMutation({
+    mutationFn: async () => {
+      if (newPassword !== confirmPassword) throw new Error('mismatch');
+      await fetchChangePassword({ currentPassword, newPassword });
+    },
+    onSuccess: () => {
+      handleClose();
+    },
+    onError: (err) => {
+      const msg = err instanceof Error ? err.message : 'server';
+      if (msg === 'mismatch') {
+        setError('Passwords do not match.');
+      } else if (msg === 'wrong-current') {
+        setError('Current password is incorrect.');
+      } else {
+        setError('Something went wrong. Please try again.');
+      }
+    },
+  });
+
+  const isPending = changeMutation.isPending;
+  const submitDisabled =
+    isPending ||
+    currentPassword.length === 0 ||
+    newPassword.length === 0 ||
+    confirmPassword.length === 0;
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        onClick={handleClose}
+        aria-hidden="true"
+        style={{
+          position: 'fixed',
+          inset: 0,
+          background: 'var(--color-overlay, rgba(0,0,0,0.32))',
+          zIndex: 302,
+        }}
+      />
+
+      {/* Sheet */}
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label="Change password"
+        style={{
+          position: 'fixed',
+          bottom: 0,
+          left: 0,
+          right: 0,
+          background: 'var(--color-surface-raised, #ffffff)',
+          borderRadius: '12px 12px 0 0',
+          boxShadow: '0 -4px 24px rgba(0,0,0,0.15)',
+          padding: 'var(--space-6, 24px)',
+          zIndex: 303,
+          fontFamily: 'var(--font-family-base, system-ui, sans-serif)',
+          maxWidth: '480px',
+          margin: '0 auto',
+        }}
+      >
+        <h2
+          ref={headingRef}
+          tabIndex={-1}
+          style={{
+            margin: '0 0 var(--space-6, 24px) 0',
+            fontSize: 'var(--text-heading-size, 18px)',
+            fontWeight: 600,
+            lineHeight: 'var(--text-heading-line-height, 1.25)',
+            color: 'var(--color-text-primary, #111318)',
+            outline: 'none',
+          }}
+        >
+          Change password
+        </h2>
+
+        {/* Current password */}
+        <div style={{ marginBottom: 'var(--space-3, 12px)' }}>
+          <label
+            htmlFor="change-current-password"
+            style={{
+              display: 'block',
+              fontSize: 'var(--text-label-size, 13px)',
+              fontWeight: 600,
+              color: 'var(--color-text-primary, #111318)',
+              marginBottom: 'var(--space-1, 4px)',
+            }}
+          >
+            Current password
+          </label>
+          <input
+            id="change-current-password"
+            type="password"
+            autoComplete="current-password"
+            value={currentPassword}
+            onChange={(e) => setCurrentPassword(e.target.value)}
+            style={{
+              width: '100%',
+              boxSizing: 'border-box',
+              padding: 'var(--space-3, 12px) var(--space-4, 16px)',
+              border: `1px solid ${error === 'Current password is incorrect.' ? 'var(--color-destructive)' : 'var(--color-border)'}`,
+              borderRadius: 'var(--space-1, 4px)',
+              fontSize: 'var(--text-body-size, 15px)',
+              color: 'var(--color-text-primary, #111318)',
+              background: 'var(--color-surface, #ffffff)',
+              fontFamily: 'var(--font-family-base)',
+              outline: 'none',
+              minHeight: '44px',
+            }}
+          />
+        </div>
+
+        {/* New password */}
+        <div style={{ marginBottom: 'var(--space-3, 12px)' }}>
+          <label
+            htmlFor="change-new-password"
+            style={{
+              display: 'block',
+              fontSize: 'var(--text-label-size, 13px)',
+              fontWeight: 600,
+              color: 'var(--color-text-primary, #111318)',
+              marginBottom: 'var(--space-1, 4px)',
+            }}
+          >
+            New password
+          </label>
+          <input
+            id="change-new-password"
+            type="password"
+            autoComplete="new-password"
+            value={newPassword}
+            onChange={(e) => setNewPassword(e.target.value)}
+            style={{
+              width: '100%',
+              boxSizing: 'border-box',
+              padding: 'var(--space-3, 12px) var(--space-4, 16px)',
+              border: `1px solid ${error === 'Passwords do not match.' ? 'var(--color-destructive)' : 'var(--color-border)'}`,
+              borderRadius: 'var(--space-1, 4px)',
+              fontSize: 'var(--text-body-size, 15px)',
+              color: 'var(--color-text-primary, #111318)',
+              background: 'var(--color-surface, #ffffff)',
+              fontFamily: 'var(--font-family-base)',
+              outline: 'none',
+              minHeight: '44px',
+            }}
+          />
+        </div>
+
+        {/* Confirm new password */}
+        <div style={{ marginBottom: 'var(--space-4, 16px)' }}>
+          <label
+            htmlFor="change-confirm-password"
+            style={{
+              display: 'block',
+              fontSize: 'var(--text-label-size, 13px)',
+              fontWeight: 600,
+              color: 'var(--color-text-primary, #111318)',
+              marginBottom: 'var(--space-1, 4px)',
+            }}
+          >
+            Confirm
+          </label>
+          <input
+            id="change-confirm-password"
+            type="password"
+            autoComplete="new-password"
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            aria-describedby={error ? 'change-password-error' : undefined}
+            style={{
+              width: '100%',
+              boxSizing: 'border-box',
+              padding: 'var(--space-3, 12px) var(--space-4, 16px)',
+              border: `1px solid ${error === 'Passwords do not match.' ? 'var(--color-destructive)' : 'var(--color-border)'}`,
+              borderRadius: 'var(--space-1, 4px)',
+              fontSize: 'var(--text-body-size, 15px)',
+              color: 'var(--color-text-primary, #111318)',
+              background: 'var(--color-surface, #ffffff)',
+              fontFamily: 'var(--font-family-base)',
+              outline: 'none',
+              minHeight: '44px',
+            }}
+          />
+        </div>
+
+        {/* Error */}
+        {error && (
+          <div
+            id="change-password-error"
+            style={{
+              fontSize: 'var(--text-label-size, 13px)',
+              fontWeight: 400,
+              color: 'var(--color-destructive, #dc2626)',
+              marginBottom: 'var(--space-4, 16px)',
+            }}
+          >
+            {error}
+          </div>
+        )}
+
+        {/* Action row */}
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            gap: 'var(--space-3, 12px)',
+          }}
+        >
+          <button
+            type="button"
+            onClick={handleClose}
+            disabled={isPending}
+            style={{
+              background: 'none',
+              border: 'none',
+              cursor: isPending ? 'default' : 'pointer',
+              fontSize: 'var(--text-label-size, 13px)',
+              fontWeight: 600,
+              color: 'var(--color-text-secondary, #6b7280)',
+              minHeight: '44px',
+              minWidth: '44px',
+              padding: '0 var(--space-4, 16px)',
+              fontFamily: 'var(--font-family-base)',
+              borderRadius: 'var(--space-1, 4px)',
+            }}
+          >
+            Cancel
+          </button>
+
+          <button
+            type="button"
+            disabled={submitDisabled}
+            onClick={() => {
+              setError(null);
+              changeMutation.mutate();
+            }}
+            style={{
+              background: submitDisabled
+                ? 'var(--color-border, #e2e4e9)'
+                : 'var(--color-member-0, #4a90d9)',
+              color: '#ffffff',
+              border: 'none',
+              cursor: submitDisabled ? 'default' : 'pointer',
+              fontSize: 'var(--text-label-size, 13px)',
+              fontWeight: 600,
+              minHeight: '44px',
+              minWidth: '44px',
+              padding: '0 var(--space-4, 16px)',
+              borderRadius: 'var(--space-1, 4px)',
+              fontFamily: 'var(--font-family-base)',
+              transition: 'background 0.15s ease',
+            }}
+          >
+            Change password
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}
+
+// ── LinkOidcSheet (Surface 13) ────────────────────────────────────────────────
+
+/**
+ * Surface 13 — Link OIDC identity confirmation sheet.
+ * NOT a form — the actual linking happens via OIDC redirect.
+ * Two-step confirmation: open sheet (step 1) + tap "Continue with OIDC" (step 2).
+ *
+ * Copywriting rules (UI-SPEC §Copywriting Contract):
+ *   - Never use "Authelia" (D-06) — use "your OIDC provider"
+ *   - Never say "delete" or "remove" when describing consequence — use "will be removed" (passive)
+ *   - Body copy: non-alarming, frames linking as an upgrade
+ *
+ * Security: T-19-21 — no provider-specific branding that leaks infrastructure details.
+ */
+
+interface LinkOidcSheetProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+function LinkOidcSheet({ isOpen, onClose }: LinkOidcSheetProps) {
+  const [error, setError] = useState<string | null>(null);
+  const headingRef = useRef<HTMLHeadingElement>(null);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('keydown', onKeyDown);
+    return () => document.removeEventListener('keydown', onKeyDown);
+  }, [isOpen, onClose]);
+
+  useEffect(() => {
+    if (isOpen && headingRef.current) {
+      headingRef.current.focus();
+    }
+  }, [isOpen]);
+
+  const linkMutation = useMutation({
+    mutationFn: fetchLinkOidc,
+    onSuccess: (data) => {
+      // Close the sheet and initiate OIDC link flow
+      onClose();
+      window.location.href = data.redirectUrl;
+    },
+    onError: () => {
+      setError('Something went wrong. Please try again.');
+    },
+  });
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        onClick={onClose}
+        aria-hidden="true"
+        style={{
+          position: 'fixed',
+          inset: 0,
+          background: 'var(--color-overlay, rgba(0,0,0,0.32))',
+          zIndex: 302,
+        }}
+      />
+
+      {/* Sheet */}
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label="Link OIDC identity"
+        style={{
+          position: 'fixed',
+          bottom: 0,
+          left: 0,
+          right: 0,
+          background: 'var(--color-surface-raised, #ffffff)',
+          borderRadius: '12px 12px 0 0',
+          boxShadow: '0 -4px 24px rgba(0,0,0,0.15)',
+          padding: 'var(--space-6, 24px)',
+          zIndex: 303,
+          fontFamily: 'var(--font-family-base, system-ui, sans-serif)',
+          maxWidth: '480px',
+          margin: '0 auto',
+        }}
+      >
+        <h2
+          ref={headingRef}
+          tabIndex={-1}
+          style={{
+            margin: '0 0 var(--space-4, 16px) 0',
+            fontSize: 'var(--text-heading-size, 18px)',
+            fontWeight: 600,
+            lineHeight: 'var(--text-heading-line-height, 1.25)',
+            color: 'var(--color-text-primary, #111318)',
+            outline: 'none',
+          }}
+        >
+          Link OIDC identity
+        </h2>
+
+        {/* Body — informational, not alarming (UI-SPEC §Copywriting Contract) */}
+        <p
+          style={{
+            margin: '0 0 var(--space-3, 12px) 0',
+            fontSize: 'var(--text-body-size, 15px)',
+            fontWeight: 400,
+            lineHeight: 'var(--text-body-line-height, 1.5)',
+            color: 'var(--color-text-secondary, #6b7280)',
+          }}
+        >
+          {"After linking, you'll sign in with your OIDC provider instead of a username and password. Your local password will be removed."}
+        </p>
+
+        {/* Secondary note */}
+        <p
+          style={{
+            margin: '0 0 var(--space-6, 24px) 0',
+            fontSize: 'var(--text-label-size, 13px)',
+            fontWeight: 400,
+            lineHeight: 'var(--text-label-line-height, 1.4)',
+            color: 'var(--color-text-muted, #9ca3af)',
+          }}
+        >
+          {"This can't be undone from the app. Contact your admin if you need to revert."}
+        </p>
+
+        {/* Error (post-fetch) */}
+        {error && (
+          <div
+            style={{
+              fontSize: 'var(--text-label-size, 13px)',
+              color: 'var(--color-destructive, #dc2626)',
+              marginBottom: 'var(--space-4, 16px)',
+            }}
+          >
+            {error}
+          </div>
+        )}
+
+        {/* Action row */}
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'flex-end',
+            gap: 'var(--space-3, 12px)',
+          }}
+        >
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={linkMutation.isPending}
+            style={{
+              background: 'none',
+              border: 'none',
+              cursor: linkMutation.isPending ? 'default' : 'pointer',
+              fontSize: 'var(--text-label-size, 13px)',
+              fontWeight: 600,
+              color: 'var(--color-text-secondary, #6b7280)',
+              minHeight: '44px',
+              minWidth: '44px',
+              padding: '0 var(--space-4, 16px)',
+              fontFamily: 'var(--font-family-base)',
+              borderRadius: 'var(--space-1, 4px)',
+            }}
+          >
+            Cancel
+          </button>
+
+          <button
+            type="button"
+            disabled={linkMutation.isPending}
+            onClick={() => {
+              setError(null);
+              linkMutation.mutate();
+            }}
+            style={{
+              background: linkMutation.isPending
+                ? 'var(--color-border, #e2e4e9)'
+                : 'var(--color-member-0, #4a90d9)',
+              color: '#ffffff',
+              border: 'none',
+              cursor: linkMutation.isPending ? 'default' : 'pointer',
+              fontSize: 'var(--text-label-size, 13px)',
+              fontWeight: 600,
+              minHeight: '44px',
+              minWidth: '44px',
+              padding: '0 var(--space-4, 16px)',
+              borderRadius: 'var(--space-1, 4px)',
+              fontFamily: 'var(--font-family-base)',
+              transition: 'background 0.15s ease',
+            }}
+          >
+            Continue with OIDC
+          </button>
+        </div>
+      </div>
    </>
  );
 }