feat: enhance CLILoginClient to include user name in callback URL and update loading state handling

Author: Starefossen

__tests__/app/cli/login/cli-login-client.test.tsx

@@ -9,17 +9,18 @@ import CLILoginClient, {
 
 describe('buildCallbackUrl', () => {
   it('should build a valid localhost callback URL', () => {
-    const url = buildCallbackUrl('8080', 'my-token', 'my-state')
+    const url = buildCallbackUrl('8080', 'my-token', 'my-state', 'Alice')
     expect(url.hostname).toBe('localhost')
     expect(url.port).toBe('8080')
     expect(url.pathname).toBe('/callback')
     expect(url.searchParams.get('token')).toBe('my-token')
     expect(url.searchParams.get('state')).toBe('my-state')
+    expect(url.searchParams.get('name')).toBe('Alice')
   })
 
   it('should reject non-localhost hosts', () => {
     // buildCallbackUrl hardcodes localhost, so this tests the safety check
-    expect(() => buildCallbackUrl('8080', 't', 's')).not.toThrow()
+    expect(() => buildCallbackUrl('8080', 't', 's', 'n')).not.toThrow()
   })
 })
 
@@ -35,30 +36,34 @@ describe('CLILoginClient', () => {
     vi.restoreAllMocks()
   })
 
-  it('should show loading state initially', () => {
-    fetchMock.mockReturnValue(new Promise(() => {})) // never resolves
+  it('should show confirm screen initially', () => {
     render(<CLILoginClient userName="Test User" userEmail="test@example.com" />)
-    expect(screen.getByText(/generating token/i)).toBeInTheDocument()
+    expect(screen.getByText(/requesting access/i)).toBeInTheDocument()
+    expect(
+      screen.getByRole('button', { name: /authorize cli/i }),
+    ).toBeInTheDocument()
     expect(
       screen.getByText(/Test User \(test@example\.com\)/),
     ).toBeInTheDocument()
+    expect(fetchMock).not.toHaveBeenCalled()
   })
 
-  it('should display token for manual copy when no port is provided', async () => {
+  it('should display token for manual copy after authorizing', async () => {
     fetchMock.mockResolvedValue({
       ok: true,
       json: () => Promise.resolve({ token: 'jwt-token-value' }),
     })
 
     render(<CLILoginClient userName="Test User" userEmail="test@example.com" />)
+    fireEvent.click(screen.getByRole('button', { name: /authorize cli/i }))
 
     await waitFor(() => {
       expect(screen.getByText('jwt-token-value')).toBeInTheDocument()
     })
     expect(screen.getByText(/copy this token/i)).toBeInTheDocument()
   })
 
-  it('should redirect to localhost callback when port and state are provided', async () => {
+  it('should redirect to localhost callback after authorizing', async () => {
     fetchMock.mockResolvedValue({
       ok: true,
       json: () => Promise.resolve({ token: 'jwt-token-value' }),
@@ -90,6 +95,8 @@ describe('CLILoginClient', () => {
       />,
     )
 
+    fireEvent.click(screen.getByRole('button', { name: /authorize cli/i }))
+
     await waitFor(() => {
       expect(hrefSetter).toHaveBeenCalledWith(
         expect.stringContaining('http://localhost:9876/callback'),
@@ -99,6 +106,7 @@ describe('CLILoginClient', () => {
     const redirectUrl = new URL(hrefSetter.mock.calls[0][0])
     expect(redirectUrl.searchParams.get('token')).toBe('jwt-token-value')
     expect(redirectUrl.searchParams.get('state')).toBe('random-state')
+    expect(redirectUrl.searchParams.get('name')).toBe('Test User')
 
     locationHref.mockRestore()
   })
@@ -113,6 +121,8 @@ describe('CLILoginClient', () => {
       />,
     )
 
+    fireEvent.click(screen.getByRole('button', { name: /authorize cli/i }))
+
     await waitFor(() => {
       expect(screen.getByText(/invalid port/i)).toBeInTheDocument()
     })
@@ -129,6 +139,8 @@ describe('CLILoginClient', () => {
       />,
     )
 
+    fireEvent.click(screen.getByRole('button', { name: /authorize cli/i }))
+
     await waitFor(() => {
       expect(screen.getByText(/invalid port/i)).toBeInTheDocument()
     })
@@ -144,6 +156,8 @@ describe('CLILoginClient', () => {
       />,
     )
 
+    fireEvent.click(screen.getByRole('button', { name: /authorize cli/i }))
+
     await waitFor(() => {
       expect(screen.getByText(/missing state/i)).toBeInTheDocument()
     })
@@ -158,6 +172,7 @@ describe('CLILoginClient', () => {
     })
 
     render(<CLILoginClient userName="Test User" userEmail="test@example.com" />)
+    fireEvent.click(screen.getByRole('button', { name: /authorize cli/i }))
 
     await waitFor(() => {
       expect(screen.getByText('Unauthorized')).toBeInTheDocument()
@@ -168,6 +183,7 @@ describe('CLILoginClient', () => {
     fetchMock.mockRejectedValue(new Error('Network error'))
 
     render(<CLILoginClient userName="Test User" userEmail="test@example.com" />)
+    fireEvent.click(screen.getByRole('button', { name: /authorize cli/i }))
 
     await waitFor(() => {
       expect(screen.getByText(/failed to connect/i)).toBeInTheDocument()
@@ -184,6 +200,7 @@ describe('CLILoginClient', () => {
     Object.assign(navigator, { clipboard: { writeText } })
 
     render(<CLILoginClient userName="Test User" userEmail="test@example.com" />)
+    fireEvent.click(screen.getByRole('button', { name: /authorize cli/i }))
 
     await waitFor(() => {
       expect(screen.getByText('copy-me')).toBeInTheDocument()
@@ -210,6 +227,7 @@ describe('CLILoginClient', () => {
       })
 
     render(<CLILoginClient userName="Test User" userEmail="test@example.com" />)
+    fireEvent.click(screen.getByRole('button', { name: /authorize cli/i }))
 
     await waitFor(() => {
       expect(screen.getByText('Server error')).toBeInTheDocument()

src/app/cli/login/cli-login-client.tsx

@@ -1,13 +1,14 @@
 'use client'
 
-import { useState, useEffect, useCallback } from 'react'
+import { useState, useCallback } from 'react'
 import {
   CheckCircleIcon,
   ClipboardDocumentIcon,
+  CommandLineIcon,
   ExclamationTriangleIcon,
 } from '@heroicons/react/24/outline'
 
-type Status = 'loading' | 'redirecting' | 'display-token' | 'error'
+type Status = 'confirm' | 'loading' | 'redirecting' | 'display-token' | 'error'
 
 const MIN_PORT = 1024
 const MAX_PORT = 65535
@@ -25,10 +26,12 @@ export function buildCallbackUrl(
   port: string,
   token: string,
   state: string,
+  name: string,
 ): URL {
   const url = new URL(`http://localhost:${port}/callback`)
   url.searchParams.set('token', token)
   url.searchParams.set('state', state)
+  url.searchParams.set('name', name)
   if (!isLocalhostOrigin(url)) {
     throw new Error('Redirect target must be localhost')
   }
@@ -48,7 +51,7 @@ export default function CLILoginClient({
   userName,
   userEmail,
 }: CLILoginClientProps) {
-  const [status, setStatus] = useState<Status>('loading')
+  const [status, setStatus] = useState<Status>('confirm')
   const [token, setToken] = useState<string>('')
   const [error, setError] = useState<string>('')
   const [copied, setCopied] = useState(false)
@@ -67,6 +70,8 @@ export default function CLILoginClient({
       }
     }
 
+    setStatus('loading')
+
     try {
       const res = await fetch('/api/auth/cli/token', { method: 'POST' })
       if (!res.ok) {
@@ -80,7 +85,7 @@ export default function CLILoginClient({
 
       if (port && state) {
         setStatus('redirecting')
-        const callbackUrl = buildCallbackUrl(port, jwt, state)
+        const callbackUrl = buildCallbackUrl(port, jwt, state, userName)
         window.location.href = callbackUrl.toString()
       } else {
         setToken(jwt)
@@ -90,12 +95,7 @@ export default function CLILoginClient({
       setError('Failed to connect to authentication service')
       setStatus('error')
     }
-  }, [port, state])
-
-  useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- fetch-on-mount pattern
-    fetchTokenAndRedirect()
-  }, [fetchTokenAndRedirect])
+  }, [port, state, userName])
 
   const handleCopy = async () => {
     await navigator.clipboard.writeText(token)
@@ -115,6 +115,23 @@ export default function CLILoginClient({
         </span>
       </p>
 
+      {status === 'confirm' && (
+        <div className="mt-8">
+          <CommandLineIcon className="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" />
+          <p className="mt-4 text-sm text-gray-600 dark:text-gray-400">
+            The <span className="font-mono font-medium">cnctl</span> CLI is
+            requesting access to your account.
+          </p>
+          <button
+            type="button"
+            onClick={fetchTokenAndRedirect}
+            className="mt-6 rounded-lg bg-brand-cloud-blue px-6 py-2.5 text-sm font-medium text-white hover:bg-brand-cloud-blue-hover"
+          >
+            Authorize CLI
+          </button>
+        </div>
+      )}
+
       {status === 'loading' && (
         <div className="mt-8">
           <div className="mx-auto h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-brand-cloud-blue" />