fix(auth): display email address instead of name in connected status

Changes "Connected as [name]" to "Connected as [email]" as requested.

Author: msujaws

src/components/Auth/ApiKeyStatus.test.tsx

@@ -68,7 +68,7 @@ describe('ApiKeyStatus', () => {
           isValid: true,
           isValidating: false,
           clearApiKey: mockClearApiKey,
-          username: 'Test User',
+          username: 'testuser@mozilla.com',
         }
         // @ts-expect-error - Simplified mock for testing
         return selector(state)
@@ -81,10 +81,10 @@ describe('ApiKeyStatus', () => {
       expect(screen.getByText(/connected/i)).toBeInTheDocument()
     })
 
-    it('should show username in connected message', () => {
+    it('should show email address in connected message', () => {
       render(<ApiKeyStatus onOpenModal={mockOnOpenModal} />)
 
-      expect(screen.getByText(/test user/i)).toBeInTheDocument()
+      expect(screen.getByText(/testuser@mozilla\.com/i)).toBeInTheDocument()
     })
 
     it('should show playful authenticated message', () => {

src/store/slices/auth-slice.test.ts

@@ -103,12 +103,12 @@ describe('AuthSlice', () => {
       expect(isValid).toBe(true)
     })
 
-    it('should fetch and store username on successful validation', async () => {
+    it('should fetch and store email on successful validation', async () => {
       const { setApiKey } = useStore.getState()
       await setApiKey('test-api-key-123')
 
       const { username } = useStore.getState()
-      expect(username).toBe('Test User')
+      expect(username).toBe('test@mozilla.com')
       expect(mockWhoAmI).toHaveBeenCalled()
     })
 
@@ -204,7 +204,7 @@ describe('AuthSlice', () => {
       await setApiKey('test-api-key-123')
 
       const { username: usernameBefore } = useStore.getState()
-      expect(usernameBefore).toBe('Test User')
+      expect(usernameBefore).toBe('test@mozilla.com')
 
       clearApiKey()
 

src/store/slices/auth-slice.ts

@@ -60,7 +60,7 @@ export const createAuthSlice: StateCreator<AuthSlice> = (set, get) => ({
         isValid: true,
         isValidating: false,
         validationError: null,
-        username: userInfo.real_name || userInfo.name,
+        username: userInfo.name,
       })
     } catch (error) {
       const errorMessage = error instanceof Error ? error.message : 'Unknown error'
@@ -104,7 +104,7 @@ export const createAuthSlice: StateCreator<AuthSlice> = (set, get) => ({
         isValid: true,
         isValidating: false,
         validationError: null,
-        username: userInfo.real_name || userInfo.name,
+        username: userInfo.name,
       })
     } catch (error) {
       const errorMessage = error instanceof Error ? error.message : 'Unknown error'