Cherry pick API node fixes (#3839)

Co-authored-by: Terry Jia <terryjia88@gmail.com>
Co-authored-by: Chenlei Hu <hcl@comfy.org>
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Chenlei Hu <huchenlei@proton.me>
Co-authored-by: Comfy Org PR Bot <snomiao+comfy-pr@gmail.com>

src/components/dialog/content/setting/UserPanel.vue

@@ -4,13 +4,13 @@
       <h2 class="text-2xl font-bold mb-2">{{ $t('userSettings.title') }}</h2>
       <Divider class="mb-3" />
 
-      <div v-if="user" class="flex flex-col gap-2">
-        <Avatar
-          v-if="user.photoURL"
-          :image="user.photoURL"
+      <!-- Normal User Panel -->
+      <div v-if="isLoggedIn" class="flex flex-col gap-2">
+        <UserAvatar
+          v-if="userPhotoUrl"
+          :photo-url="userPhotoUrl"
           shape="circle"
           size="large"
-          aria-label="User Avatar"
         />
 
         <div class="flex flex-col gap-0.5">
@@ -18,7 +18,7 @@
             {{ $t('userSettings.name') }}
           </h3>
           <div class="text-muted">
-            {{ user.displayName || $t('userSettings.notSet') }}
+            {{ userDisplayName || $t('userSettings.notSet') }}
           </div>
         </div>
 
@@ -26,8 +26,8 @@
           <h3 class="font-medium">
             {{ $t('userSettings.email') }}
           </h3>
-          <a :href="'mailto:' + user.email" class="hover:underline">
-            {{ user.email }}
+          <a :href="'mailto:' + userEmail" class="hover:underline">
+            {{ userEmail }}
           </a>
         </div>
 
@@ -87,55 +87,26 @@
 </template>
 
 <script setup lang="ts">
-import Avatar from 'primevue/avatar'
 import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import ProgressSpinner from 'primevue/progressspinner'
 import TabPanel from 'primevue/tabpanel'
-import { computed } from 'vue'
 
+import UserAvatar from '@/components/common/UserAvatar.vue'
+import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useDialogService } from '@/services/dialogService'
-import { useCommandStore } from '@/stores/commandStore'
-import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 
 const dialogService = useDialogService()
-const authStore = useFirebaseAuthStore()
-const commandStore = useCommandStore()
-const user = computed(() => authStore.currentUser)
-const loading = computed(() => authStore.loading)
-
-const providerName = computed(() => {
-  const providerId = user.value?.providerData[0]?.providerId
-  if (providerId?.includes('google')) {
-    return 'Google'
-  }
-  if (providerId?.includes('github')) {
-    return 'GitHub'
-  }
-  return providerId
-})
-
-const providerIcon = computed(() => {
-  const providerId = user.value?.providerData[0]?.providerId
-  if (providerId?.includes('google')) {
-    return 'pi pi-google'
-  }
-  if (providerId?.includes('github')) {
-    return 'pi pi-github'
-  }
-  return 'pi pi-user'
-})
-
-const isEmailProvider = computed(() => {
-  const providerId = user.value?.providerData[0]?.providerId
-  return providerId === 'password'
-})
-
-const handleSignOut = async () => {
-  await commandStore.execute('Comfy.User.SignOut')
-}
-
-const handleSignIn = async () => {
-  await commandStore.execute('Comfy.User.OpenSignInDialog')
-}
+const {
+  loading,
+  isLoggedIn,
+  isEmailProvider,
+  userDisplayName,
+  userEmail,
+  userPhotoUrl,
+  providerName,
+  providerIcon,
+  handleSignOut,
+  handleSignIn
+} = useCurrentUser()
 </script>