Merge branch 'cw/account-ui-phase-updatecredentialsdialog-component' into cw-merge-1772800279801

apps/web/src/components/UpdateCredentialsDialog.test.tsx

@@ -0,0 +1,175 @@
+// @vitest-environment happy-dom
+import '@testing-library/jest-dom/vitest'
+import { render, screen, fireEvent, waitFor, act } from '@testing-library/react'
+import { vi, describe, it, expect, beforeEach } from 'vitest'
+import { UpdateCredentialsDialog } from './UpdateCredentialsDialog'
+
+// Captured mutation options from the latest useMutation call
+let capturedOnSuccess: (() => void) | undefined
+let capturedOnError: ((err: { message: string }) => void) | undefined
+
+const mockMutate = vi.fn()
+const mockInvalidate = vi.fn()
+
+vi.mock('@/lib/trpc', () => ({
+  trpc: {
+    updateAccountAuth: {
+      useMutation: vi.fn((opts?: {
+        onSuccess?: () => void
+        onError?: (err: { message: string }) => void
+      }) => {
+        capturedOnSuccess = opts?.onSuccess
+        capturedOnError = opts?.onError
+        return { mutate: mockMutate, isPending: false }
+      }),
+    },
+    useUtils: vi.fn(() => ({
+      systemHealthCheck: { invalidate: mockInvalidate },
+    })),
+  },
+}))
+
+vi.mock('sonner', () => ({
+  toast: { success: vi.fn() },
+}))
+
+import { toast } from 'sonner'
+
+const account = {
+  id: 'acc-1',
+  email: 'alice@example.com',
+  provider: 'claude',
+}
+
+describe('UpdateCredentialsDialog', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    capturedOnSuccess = undefined
+    capturedOnError = undefined
+  })
+
+  // Test 1: Renders with read-only identity
+  it('renders account email and provider as non-editable', () => {
+    render(<UpdateCredentialsDialog open={true} onOpenChange={vi.fn()} account={account} />)
+
+    expect(screen.getByText('alice@example.com')).toBeInTheDocument()
+    expect(screen.getByText('claude')).toBeInTheDocument()
+
+    // They must not be editable inputs
+    const emailEl = screen.getByText('alice@example.com')
+    expect(emailEl.tagName).not.toBe('INPUT')
+    const providerEl = screen.getByText('claude')
+    expect(providerEl.tagName).not.toBe('INPUT')
+  })
+
+  // Test 2: Tab A submit — empty token — shows Required, no mutation
+  it('shows Required error when token is empty and does not call mutation', async () => {
+    render(<UpdateCredentialsDialog open={true} onOpenChange={vi.fn()} account={account} />)
+
+    fireEvent.click(screen.getByRole('button', { name: /update credentials/i }))
+
+    await waitFor(() => expect(screen.getByText('Required')).toBeInTheDocument())
+    expect(mockMutate).not.toHaveBeenCalled()
+  })
+
+  // Test 3: Tab A submit — valid token — calls mutation with correct input
+  it('calls mutation with correct token input', async () => {
+    render(<UpdateCredentialsDialog open={true} onOpenChange={vi.fn()} account={account} />)
+
+    fireEvent.change(screen.getByLabelText(/setup token/i), { target: { value: 'test-token' } })
+    fireEvent.click(screen.getByRole('button', { name: /update credentials/i }))
+
+    await waitFor(() => expect(mockMutate).toHaveBeenCalledWith({
+      id: 'acc-1',
+      configJson: '{"hasCompletedOnboarding":true}',
+      credentials: '{"claudeAiOauth":{"accessToken":"test-token"}}',
+    }))
+  })
+
+  // Test 4: Tab B submit — invalid config JSON — shows "Invalid JSON", no mutation
+  it('shows Invalid JSON error for bad config JSON and does not call mutation', async () => {
+    render(<UpdateCredentialsDialog open={true} onOpenChange={vi.fn()} account={account} />)
+
+    fireEvent.click(screen.getByText('By credentials JSON'))
+    fireEvent.change(screen.getByLabelText(/config json/i), { target: { value: 'bad json' } })
+    fireEvent.click(screen.getByRole('button', { name: /update credentials/i }))
+
+    await waitFor(() => expect(screen.getByText('Invalid JSON')).toBeInTheDocument())
+    expect(mockMutate).not.toHaveBeenCalled()
+  })
+
+  // Test 5: Tab B submit — empty textareas — calls mutation with '{}' defaults
+  it("calls mutation with '{}' defaults when credentials textareas are empty", async () => {
+    render(<UpdateCredentialsDialog open={true} onOpenChange={vi.fn()} account={account} />)
+
+    fireEvent.click(screen.getByText('By credentials JSON'))
+    fireEvent.click(screen.getByRole('button', { name: /update credentials/i }))
+
+    await waitFor(() => expect(mockMutate).toHaveBeenCalledWith({
+      id: 'acc-1',
+      configJson: '{}',
+      credentials: '{}',
+    }))
+  })
+
+  // Test 6: Server error — shows inline error, dialog stays open
+  it('shows server error inline and does not close dialog on error', async () => {
+    const onOpenChange = vi.fn()
+    render(<UpdateCredentialsDialog open={true} onOpenChange={onOpenChange} account={account} />)
+
+    fireEvent.change(screen.getByLabelText(/setup token/i), { target: { value: 'some-token' } })
+    fireEvent.click(screen.getByRole('button', { name: /update credentials/i }))
+
+    act(() => {
+      capturedOnError?.({ message: 'Token expired' })
+    })
+
+    await waitFor(() => expect(screen.getByText('Token expired')).toBeInTheDocument())
+    expect(onOpenChange).not.toHaveBeenCalled()
+  })
+
+  // Test 7: Success — toasts and closes dialog
+  it('shows success toast and closes dialog on success', async () => {
+    const onOpenChange = vi.fn()
+    render(<UpdateCredentialsDialog open={true} onOpenChange={onOpenChange} account={account} />)
+
+    fireEvent.change(screen.getByLabelText(/setup token/i), { target: { value: 'some-token' } })
+    fireEvent.click(screen.getByRole('button', { name: /update credentials/i }))
+
+    act(() => {
+      capturedOnSuccess?.()
+    })
+
+    await waitFor(() => {
+      expect(toast.success).toHaveBeenCalledWith('Credentials updated for alice@example.com.')
+      expect(onOpenChange).toHaveBeenCalledWith(false)
+    })
+  })
+
+  // Test 8: State reset on re-open
+  it('resets state when dialog is re-opened', async () => {
+    const { rerender } = render(
+      <UpdateCredentialsDialog open={true} onOpenChange={vi.fn()} account={account} />
+    )
+
+    // Type a token and trigger server error
+    fireEvent.change(screen.getByLabelText(/setup token/i), { target: { value: 'old-token' } })
+    fireEvent.click(screen.getByRole('button', { name: /update credentials/i }))
+
+    act(() => {
+      capturedOnError?.({ message: 'Server error' })
+    })
+    await waitFor(() => expect(screen.getByText('Server error')).toBeInTheDocument())
+
+    // Close dialog
+    rerender(<UpdateCredentialsDialog open={false} onOpenChange={vi.fn()} account={account} />)
+    // Re-open dialog
+    rerender(<UpdateCredentialsDialog open={true} onOpenChange={vi.fn()} account={account} />)
+
+    // Token should be cleared
+    const tokenInput = screen.getByLabelText(/setup token/i) as HTMLInputElement
+    expect(tokenInput.value).toBe('')
+    // Server error should be gone
+    expect(screen.queryByText('Server error')).not.toBeInTheDocument()
+  })
+})

apps/web/src/components/UpdateCredentialsDialog.tsx

@@ -0,0 +1,239 @@
+import { useState, useEffect } from 'react'
+import { Loader2 } from 'lucide-react'
+import { toast } from 'sonner'
+import { trpc } from '@/lib/trpc'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Textarea } from '@/components/ui/textarea'
+import { Badge } from '@/components/ui/badge'
+import { cn } from '@/lib/utils'
+
+interface UpdateCredentialsDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  account: { id: string; email: string; provider: string }
+}
+
+export function UpdateCredentialsDialog({
+  open,
+  onOpenChange,
+  account,
+}: UpdateCredentialsDialogProps) {
+  const [tab, setTab] = useState<'token' | 'credentials'>('token')
+
+  // Tab A — token
+  const [token, setToken] = useState('')
+  const [tokenError, setTokenError] = useState('')
+
+  // Tab B — credentials JSON
+  const [configJsonText, setConfigJsonText] = useState('')
+  const [credentialsText, setCredentialsText] = useState('')
+  const [configJsonError, setConfigJsonError] = useState('')
+  const [credentialsError, setCredentialsError] = useState('')
+
+  // Shared
+  const [serverError, setServerError] = useState('')
+
+  const utils = trpc.useUtils()
+
+  const mutation = trpc.updateAccountAuth.useMutation({
+    onSuccess: () => {
+      toast.success(`Credentials updated for ${account.email}.`)
+      void utils.systemHealthCheck.invalidate()
+      onOpenChange(false)
+    },
+    onError: (err) => {
+      setServerError(err.message)
+    },
+  })
+
+  useEffect(() => {
+    if (open) {
+      setTab('token')
+      setToken('')
+      setTokenError('')
+      setConfigJsonText('')
+      setCredentialsText('')
+      setConfigJsonError('')
+      setCredentialsError('')
+      setServerError('')
+    }
+  }, [open])
+
+  function handleSubmit() {
+    if (tab === 'token') {
+      if (!token.trim()) {
+        setTokenError('Required')
+        return
+      }
+      setTokenError('')
+      mutation.mutate({
+        id: account.id,
+        configJson: JSON.stringify({ hasCompletedOnboarding: true }),
+        credentials: JSON.stringify({ claudeAiOauth: { accessToken: token } }),
+      })
+    } else {
+      let hasError = false
+
+      if (configJsonText.trim()) {
+        try {
+          JSON.parse(configJsonText)
+          setConfigJsonError('')
+        } catch {
+          setConfigJsonError('Invalid JSON')
+          hasError = true
+        }
+      } else {
+        setConfigJsonError('')
+      }
+
+      if (credentialsText.trim()) {
+        try {
+          JSON.parse(credentialsText)
+          setCredentialsError('')
+        } catch {
+          setCredentialsError('Invalid JSON')
+          hasError = true
+        }
+      } else {
+        setCredentialsError('')
+      }
+
+      if (hasError) return
+
+      mutation.mutate({
+        id: account.id,
+        configJson: configJsonText.trim() || '{}',
+        credentials: credentialsText.trim() || '{}',
+      })
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Update Credentials</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {/* Read-only account identity */}
+          <div className="flex items-center gap-2">
+            <p className="text-sm font-medium">{account.email}</p>
+            <Badge variant="outline">{account.provider}</Badge>
+          </div>
+
+          {/* Tab navigation */}
+          <div className="flex border-b">
+            <button
+              type="button"
+              onClick={() => setTab('token')}
+              className={cn(
+                'px-4 py-2 text-sm font-medium border-b-2 transition-colors',
+                tab === 'token'
+                  ? 'border-primary text-foreground'
+                  : 'border-transparent text-muted-foreground hover:text-foreground',
+              )}
+            >
+              By token
+            </button>
+            <button
+              type="button"
+              onClick={() => setTab('credentials')}
+              className={cn(
+                'px-4 py-2 text-sm font-medium border-b-2 transition-colors',
+                tab === 'credentials'
+                  ? 'border-primary text-foreground'
+                  : 'border-transparent text-muted-foreground hover:text-foreground',
+              )}
+            >
+              By credentials JSON
+            </button>
+          </div>
+
+          {/* Tab A — By token */}
+          {tab === 'token' && (
+            <div className="space-y-2">
+              <Label htmlFor="setup-token">
+                Setup token (from `claude setup-token`)
+              </Label>
+              <Input
+                id="setup-token"
+                type="text"
+                value={token}
+                onChange={(e) => setToken(e.target.value)}
+              />
+              {tokenError && (
+                <p className="text-sm text-destructive">{tokenError}</p>
+              )}
+            </div>
+          )}
+
+          {/* Tab B — By credentials JSON */}
+          {tab === 'credentials' && (
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="config-json">
+                  Config JSON (`.claude.json` content)
+                </Label>
+                <Textarea
+                  id="config-json"
+                  value={configJsonText}
+                  onChange={(e) => setConfigJsonText(e.target.value)}
+                  placeholder='{ "oauthAccount": { ... } }'
+                />
+                {configJsonError && (
+                  <p className="text-sm text-destructive">{configJsonError}</p>
+                )}
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="credentials-json">
+                  Credentials JSON (`.credentials.json` content)
+                </Label>
+                <Textarea
+                  id="credentials-json"
+                  value={credentialsText}
+                  onChange={(e) => setCredentialsText(e.target.value)}
+                  placeholder='{ "claudeAiOauth": { ... } }'
+                />
+                {credentialsError && (
+                  <p className="text-sm text-destructive">{credentialsError}</p>
+                )}
+              </div>
+
+              <p className="text-xs text-muted-foreground">
+                Run `cw account extract` in your terminal to obtain these values.
+              </p>
+            </div>
+          )}
+
+          {/* Server error */}
+          {serverError && (
+            <p className="text-sm text-destructive">{serverError}</p>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleSubmit} disabled={mutation.isPending}>
+            {mutation.isPending && (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            )}
+            Update Credentials
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}