[API Node] Show user state when logged in via API key (#3838)

Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Chenlei Hu <hcl@comfy.org>

src/components/topbar/CurrentUserButton.vue

@@ -2,7 +2,7 @@
 <template>
   <div>
     <Button
-      v-if="isAuthenticated"
+      v-if="isLoggedIn"
       class="user-profile-button p-1"
       severity="secondary"
       text
@@ -30,15 +30,14 @@ import Popover from 'primevue/popover'
 import { computed, ref } from 'vue'
 
 import UserAvatar from '@/components/common/UserAvatar.vue'
-import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 
 import CurrentUserPopover from './CurrentUserPopover.vue'
 
-const authStore = useFirebaseAuthStore()
+const { isLoggedIn, userPhotoUrl } = useCurrentUser()
 
 const popover = ref<InstanceType<typeof Popover> | null>(null)
-const isAuthenticated = computed(() => authStore.isAuthenticated)
 const photoURL = computed<string | undefined>(
-  () => authStore.currentUser?.photoURL ?? undefined
+  () => userPhotoUrl.value ?? undefined
 )
 </script>

src/components/topbar/CurrentUserPopover.vue

@@ -6,19 +6,19 @@
       <div class="flex flex-col items-center">
         <UserAvatar
           class="mb-3"
-          :photo-url="user?.photoURL"
+          :photo-url="userPhotoUrl"
           :pt:icon:class="{
-            '!text-2xl': !user?.photoURL
+            '!text-2xl': !userPhotoUrl
           }"
           size="large"
         />
 
         <!-- User Details -->
         <h3 class="text-lg font-semibold truncate my-0 mb-1">
-          {{ user?.displayName || $t('g.user') }}
+          {{ userDisplayName || $t('g.user') }}
         </h3>
-        <p v-if="user?.email" class="text-sm text-muted truncate my-0">
-          {{ user.email }}
+        <p v-if="userEmail" class="text-sm text-muted truncate my-0">
+          {{ userEmail }}
         </p>
       </div>
     </div>
@@ -64,20 +64,18 @@
 <script setup lang="ts">
 import Button from 'primevue/button'
 import Divider from 'primevue/divider'
-import { computed, onMounted } from 'vue'
+import { onMounted } from 'vue'
 
 import UserAvatar from '@/components/common/UserAvatar.vue'
 import UserCredit from '@/components/common/UserCredit.vue'
+import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useDialogService } from '@/services/dialogService'
 import { useFirebaseAuthService } from '@/services/firebaseAuthService'
-import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 
-const authStore = useFirebaseAuthStore()
+const { userDisplayName, userEmail, userPhotoUrl } = useCurrentUser()
 const authService = useFirebaseAuthService()
 const dialogService = useDialogService()
 
-const user = computed(() => authStore.currentUser)
-
 const handleOpenUserSettings = () => {
   dialogService.showSettingsDialog('user')
 }