[feat] Add logout button to user popover (#4022)

Author: christian-byrne

src/components/topbar/CurrentUserPopover.spec.ts

@@ -50,9 +50,11 @@ vi.mock('@/composables/auth/useCurrentUser', () => ({
 }))
 
 // Mock the useFirebaseAuthActions composable
+const mockLogout = vi.fn()
 vi.mock('@/composables/auth/useFirebaseAuthActions', () => ({
   useFirebaseAuthActions: vi.fn(() => ({
-    fetchBalance: vi.fn().mockResolvedValue(undefined)
+    fetchBalance: vi.fn().mockResolvedValue(undefined),
+    logout: mockLogout
   }))
 }))
 
@@ -100,8 +102,7 @@ describe('CurrentUserPopover', () => {
       global: {
         plugins: [i18n],
         stubs: {
-          Divider: true,
-          Button: true
+          Divider: true
         }
       }
     })
@@ -114,6 +115,18 @@ describe('CurrentUserPopover', () => {
     expect(wrapper.text()).toContain('[email protected]')
   })
 
+  it('renders logout button with correct props', () => {
+    const wrapper = mountComponent()
+
+    // Find all buttons and get the logout button (second one)
+    const buttons = wrapper.findAllComponents(Button)
+    const logoutButton = buttons[1]
+
+    // Check that logout button has correct props
+    expect(logoutButton.props('label')).toBe('Log Out')
+    expect(logoutButton.props('icon')).toBe('pi pi-sign-out')
+  })
+
   it('opens user settings and emits close event when settings button is clicked', async () => {
     const wrapper = mountComponent()
 
@@ -132,12 +145,30 @@ describe('CurrentUserPopover', () => {
     expect(wrapper.emitted('close')!.length).toBe(1)
   })
 
+  it('calls logout function and emits close event when logout button is clicked', async () => {
+    const wrapper = mountComponent()
+
+    // Find all buttons and get the logout button (second one)
+    const buttons = wrapper.findAllComponents(Button)
+    const logoutButton = buttons[1]
+
+    // Click the logout button
+    await logoutButton.trigger('click')
+
+    // Verify logout was called
+    expect(mockLogout).toHaveBeenCalled()
+
+    // Verify close event was emitted
+    expect(wrapper.emitted('close')).toBeTruthy()
+    expect(wrapper.emitted('close')!.length).toBe(1)
+  })
+
   it('opens API pricing docs and emits close event when API pricing button is clicked', async () => {
     const wrapper = mountComponent()
 
-    // Find all buttons and get the API pricing button (second one)
+    // Find all buttons and get the API pricing button (third one now)
     const buttons = wrapper.findAllComponents(Button)
-    const apiPricingButton = buttons[1]
+    const apiPricingButton = buttons[2]
 
     // Click the API pricing button
     await apiPricingButton.trigger('click')

src/components/topbar/CurrentUserPopover.vue

@@ -37,6 +37,18 @@
 
     <Divider class="my-2" />
 
+    <Button
+      class="justify-start"
+      :label="$t('auth.signOut.signOut')"
+      icon="pi pi-sign-out"
+      text
+      fluid
+      severity="secondary"
+      @click="handleLogout"
+    />
+
+    <Divider class="my-2" />
+
     <Button
       class="justify-start"
       :label="$t('credits.apiPricing')"
@@ -90,6 +102,11 @@ const handleTopUp = () => {
   emit('close')
 }
 
+const handleLogout = async () => {
+  await authActions.logout()
+  emit('close')
+}
+
 const handleOpenApiPricing = () => {
   window.open('https://docs.comfy.org/tutorials/api-nodes/pricing', '_blank')
   emit('close')