From 851739a768898bbe50d05f10115e20e4c4fc961e Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Mon, 14 Apr 2025 17:49:17 -0400
Subject: [PATCH] [API Node] Sign in required dialog (#3457)

Co-authored-by: github-actions <github-actions@github.com>
---
 .cursorrules                                  |   9 +++
 public/assets/images/Comfy_Logo_x32.png       | Bin 0 -> 2904 bytes
 .../common/ApiNodesCostBreakdown.vue          |  75 ++++++++++++++++++
 .../dialog/content/ApiNodesSignInContent.vue  |  43 ++++++++++
 .../dialog/header/ComfyOrgHeader.vue          |   6 ++
 src/locales/en/main.json                      |  13 ++-
 src/locales/es/main.json                      |  11 +++
 src/locales/fr/main.json                      |  11 +++
 src/locales/ja/main.json                      |  11 +++
 src/locales/ko/main.json                      |  11 +++
 src/locales/ru/main.json                      |  11 +++
 src/locales/zh/main.json                      |  11 +++
 src/services/dialogService.ts                 |  32 ++++++++
 src/types/apiNodeTypes.ts                     |   4 +
 14 files changed, 247 insertions(+), 1 deletion(-)
 create mode 100644 public/assets/images/Comfy_Logo_x32.png
 create mode 100644 src/components/common/ApiNodesCostBreakdown.vue
 create mode 100644 src/components/dialog/content/ApiNodesSignInContent.vue
 create mode 100644 src/components/dialog/header/ComfyOrgHeader.vue
 create mode 100644 src/types/apiNodeTypes.ts

diff --git a/.cursorrules b/.cursorrules
index 912921e62c..61be15792f 100644
--- a/.cursorrules
+++ b/.cursorrules
@@ -8,6 +8,15 @@ const vue3CompositionApiBestPractices = [
   "Use watch and watchEffect for side effects",
   "Implement lifecycle hooks with onMounted, onUpdated, etc.",
   "Utilize provide/inject for dependency injection",
+  "Use vue 3.5 style of default prop declaration. Example:
+
+const { nodes, showTotal = true } = defineProps<{
+  nodes: ApiNodeCost[]
+  showTotal?: boolean
+}>()
+
+",
+  "Organize vue component in <template> <script> <style> order",
 ]
 
 // Folder structure
diff --git a/public/assets/images/Comfy_Logo_x32.png b/public/assets/images/Comfy_Logo_x32.png
new file mode 100644
index 0000000000000000000000000000000000000000..a535a4dab3ae82f919e049a1bd4f07b6081dbb39
GIT binary patch
literal 2904
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
C5O^s7

literal 0
HcmV?d00001

diff --git a/src/components/common/ApiNodesCostBreakdown.vue b/src/components/common/ApiNodesCostBreakdown.vue
new file mode 100644
index 0000000000..3184215551
--- /dev/null
+++ b/src/components/common/ApiNodesCostBreakdown.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="flex flex-col gap-3 h-full">
+    <div class="flex justify-between text-xs">
+      <div>{{ t('apiNodesCostBreakdown.title') }}</div>
+      <div>{{ t('apiNodesCostBreakdown.costPerRun') }}</div>
+    </div>
+    <ScrollPanel class="flex-grow h-0">
+      <div class="flex flex-col gap-2">
+        <div
+          v-for="node in nodes"
+          :key="node.name"
+          class="flex items-center justify-between px-3 py-2 rounded-md bg-[var(--p-content-border-color)]"
+        >
+          <div class="flex items-center gap-2">
+            <span class="text-base font-medium leading-tight">{{
+              node.name
+            }}</span>
+          </div>
+          <div class="flex items-center gap-1">
+            <Tag
+              severity="secondary"
+              icon="pi pi-dollar"
+              rounded
+              class="text-amber-400 p-1"
+            />
+            <span class="text-base font-medium leading-tight">
+              {{ node.cost.toFixed(costPrecision) }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </ScrollPanel>
+    <template v-if="showTotal && nodes.length > 1">
+      <Divider class="my-2" />
+      <div class="flex justify-between items-center border-t px-3">
+        <span class="text-sm">{{ t('apiNodesCostBreakdown.totalCost') }}</span>
+        <div class="flex items-center gap-1">
+          <Tag
+            severity="secondary"
+            icon="pi pi-dollar"
+            rounded
+            class="text-yellow-500 p-1"
+          />
+          <span>{{ totalCost.toFixed(costPrecision) }}</span>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Divider from 'primevue/divider'
+import ScrollPanel from 'primevue/scrollpanel'
+import Tag from 'primevue/tag'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import type { ApiNodeCost } from '@/types/apiNodeTypes'
+
+const { t } = useI18n()
+
+const {
+  nodes,
+  showTotal = true,
+  costPrecision = 3
+} = defineProps<{
+  nodes: ApiNodeCost[]
+  showTotal?: boolean
+  costPrecision?: number
+}>()
+
+const totalCost = computed(() =>
+  nodes.reduce((sum, node) => sum + node.cost, 0)
+)
+</script>
diff --git a/src/components/dialog/content/ApiNodesSignInContent.vue b/src/components/dialog/content/ApiNodesSignInContent.vue
new file mode 100644
index 0000000000..f83e11919e
--- /dev/null
+++ b/src/components/dialog/content/ApiNodesSignInContent.vue
@@ -0,0 +1,43 @@
+<!-- Prompt user that the workflow contains API nodes that needs login to run -->
+<template>
+  <div class="flex flex-col gap-4 max-w-96 h-110 p-2">
+    <div class="text-2xl font-medium mb-2">
+      {{ t('apiNodesSignInDialog.title') }}
+    </div>
+
+    <div class="text-base mb-4">
+      {{ t('apiNodesSignInDialog.message') }}
+    </div>
+
+    <ApiNodesCostBreakdown :nodes="apiNodes" :show-total="true" />
+
+    <div class="flex justify-between items-center">
+      <Button :label="t('g.learnMore')" link />
+      <div class="flex gap-2">
+        <Button
+          :label="t('g.cancel')"
+          outlined
+          severity="secondary"
+          @click="onCancel?.()"
+        />
+        <Button :label="t('g.login')" @click="onLogin?.()" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button'
+import { useI18n } from 'vue-i18n'
+
+import ApiNodesCostBreakdown from '@/components/common/ApiNodesCostBreakdown.vue'
+import type { ApiNodeCost } from '@/types/apiNodeTypes'
+
+const { t } = useI18n()
+
+const { apiNodes, onLogin, onCancel } = defineProps<{
+  apiNodes: ApiNodeCost[]
+  onLogin?: () => void
+  onCancel?: () => void
+}>()
+</script>
diff --git a/src/components/dialog/header/ComfyOrgHeader.vue b/src/components/dialog/header/ComfyOrgHeader.vue
new file mode 100644
index 0000000000..9055c69148
--- /dev/null
+++ b/src/components/dialog/header/ComfyOrgHeader.vue
@@ -0,0 +1,6 @@
+<!-- A dialog header with ComfyOrg logo -->
+<template>
+  <div class="px-2 py-4">
+    <img src="/assets/images/Comfy_Logo_x32.png" alt="ComfyOrg Logo" />
+  </div>
+</template>
diff --git a/src/locales/en/main.json b/src/locales/en/main.json
index c891467d21..9b3afb816d 100644
--- a/src/locales/en/main.json
+++ b/src/locales/en/main.json
@@ -108,7 +108,9 @@
     "disabling": "Disabling",
     "updating": "Updating",
     "migrate": "Migrate",
-    "updateAvailable": "Update Available"
+    "updateAvailable": "Update Available",
+    "login": "Login",
+    "learnMore": "Learn more"
   },
   "manager": {
     "title": "Custom Nodes Manager",
@@ -976,6 +978,15 @@
     "extensionFileHint": "This may be due to the following script",
     "promptExecutionError": "Prompt execution failed"
   },
+  "apiNodesSignInDialog": {
+    "title": "Sign In Required to Use API Nodes",
+    "message": "This workflow contains API Nodes, which require you to be signed in to your account in order to run."
+  },
+  "apiNodesCostBreakdown": {
+    "title": "API Node(s)",
+    "costPerRun": "Cost per run",
+    "totalCost": "Total Cost"
+  },
   "desktopUpdate": {
     "title": "Updating ComfyUI Desktop",
     "description": "ComfyUI Desktop is installing new dependencies.  This may take a few minutes.",
diff --git a/src/locales/es/main.json b/src/locales/es/main.json
index a542dfffbb..7d380a8cfd 100644
--- a/src/locales/es/main.json
+++ b/src/locales/es/main.json
@@ -1,4 +1,13 @@
 {
+  "apiNodesCostBreakdown": {
+    "costPerRun": "Costo por ejecución",
+    "title": "Nodo(s) de API",
+    "totalCost": "Costo total"
+  },
+  "apiNodesSignInDialog": {
+    "message": "Este flujo de trabajo contiene nodos de API, que requieren que inicies sesión en tu cuenta para poder ejecutar.",
+    "title": "Se requiere iniciar sesión para usar los nodos de API"
+  },
   "clipboard": {
     "errorMessage": "Error al copiar al portapapeles",
     "errorNotSupported": "API del portapapeles no soportada en su navegador",
@@ -172,9 +181,11 @@
     "installing": "Instalando",
     "interrupted": "Interrumpido",
     "keybinding": "Combinación de teclas",
+    "learnMore": "Aprende más",
     "loadAllFolders": "Cargar todas las carpetas",
     "loadWorkflow": "Cargar flujo de trabajo",
     "loading": "Cargando",
+    "login": "Iniciar sesión",
     "logs": "Registros",
     "migrate": "Migrar",
     "missing": "Faltante",
diff --git a/src/locales/fr/main.json b/src/locales/fr/main.json
index 5173ba68b6..77a29abe0c 100644
--- a/src/locales/fr/main.json
+++ b/src/locales/fr/main.json
@@ -1,4 +1,13 @@
 {
+  "apiNodesCostBreakdown": {
+    "costPerRun": "Coût par exécution",
+    "title": "Nœud(s) API",
+    "totalCost": "Coût total"
+  },
+  "apiNodesSignInDialog": {
+    "message": "Ce flux de travail contient des nœuds API, qui nécessitent que vous soyez connecté à votre compte pour pouvoir fonctionner.",
+    "title": "Connexion requise pour utiliser les nœuds API"
+  },
   "clipboard": {
     "errorMessage": "Échec de la copie dans le presse-papiers",
     "errorNotSupported": "L'API du presse-papiers n'est pas prise en charge par votre navigateur",
@@ -172,9 +181,11 @@
     "installing": "Installation",
     "interrupted": "Interrompu",
     "keybinding": "Raccourci clavier",
+    "learnMore": "En savoir plus",
     "loadAllFolders": "Charger tous les dossiers",
     "loadWorkflow": "Charger le flux de travail",
     "loading": "Chargement",
+    "login": "Connexion",
     "logs": "Journaux",
     "migrate": "Migrer",
     "missing": "Manquant",
diff --git a/src/locales/ja/main.json b/src/locales/ja/main.json
index 4e217dcd43..7aca6d48ce 100644
--- a/src/locales/ja/main.json
+++ b/src/locales/ja/main.json
@@ -1,4 +1,13 @@
 {
+  "apiNodesCostBreakdown": {
+    "costPerRun": "実行あたりのコスト",
+    "title": "APIノード",
+    "totalCost": "合計コスト"
+  },
+  "apiNodesSignInDialog": {
+    "message": "このワークフローにはAPIノードが含まれており、実行するためにはアカウントにサインインする必要があります。",
+    "title": "APIノードを使用するためにはサインインが必要です"
+  },
   "clipboard": {
     "errorMessage": "クリップボードへのコピーに失敗しました",
     "errorNotSupported": "お使いのブラウザではクリップボードAPIがサポートされていません",
@@ -172,9 +181,11 @@
     "installing": "インストール中",
     "interrupted": "中断されました",
     "keybinding": "キーバインディング",
+    "learnMore": "詳細を学ぶ",
     "loadAllFolders": "すべてのフォルダーを読み込む",
     "loadWorkflow": "ワークフローを読み込む",
     "loading": "読み込み中",
+    "login": "ログイン",
     "logs": "ログ",
     "migrate": "移行する",
     "missing": "不足している",
diff --git a/src/locales/ko/main.json b/src/locales/ko/main.json
index 7c06dc5161..a5c55389d0 100644
--- a/src/locales/ko/main.json
+++ b/src/locales/ko/main.json
@@ -1,4 +1,13 @@
 {
+  "apiNodesCostBreakdown": {
+    "costPerRun": "실행 당 비용",
+    "title": "API 노드(들)",
+    "totalCost": "총 비용"
+  },
+  "apiNodesSignInDialog": {
+    "message": "이 워크플로우에는 API 노드가 포함되어 있으며, 실행하려면 계정에 로그인해야 합니다.",
+    "title": "API 노드 사용에 필요한 로그인"
+  },
   "clipboard": {
     "errorMessage": "클립보드에 복사하지 못했습니다",
     "errorNotSupported": "브라우저가 클립보드 API를 지원하지 않습니다.",
@@ -172,9 +181,11 @@
     "installing": "설치 중",
     "interrupted": "중단됨",
     "keybinding": "키 바인딩",
+    "learnMore": "더 알아보기",
     "loadAllFolders": "모든 폴더 로드",
     "loadWorkflow": "워크플로 로드",
     "loading": "로딩 중",
+    "login": "로그인",
     "logs": "로그",
     "migrate": "이전(migrate)",
     "missing": "누락됨",
diff --git a/src/locales/ru/main.json b/src/locales/ru/main.json
index 01c1fc20f0..1c150d8da7 100644
--- a/src/locales/ru/main.json
+++ b/src/locales/ru/main.json
@@ -1,4 +1,13 @@
 {
+  "apiNodesCostBreakdown": {
+    "costPerRun": "Стоимость за запуск",
+    "title": "API Node(s)",
+    "totalCost": "Общая стоимость"
+  },
+  "apiNodesSignInDialog": {
+    "message": "Этот рабочий процесс содержит API Nodes, которые требуют входа в вашу учетную запись для выполнения.",
+    "title": "Требуется вход для использования API Nodes"
+  },
   "clipboard": {
     "errorMessage": "Не удалось скопировать в буфер обмена",
     "errorNotSupported": "API буфера обмена не поддерживается в вашем браузере",
@@ -172,9 +181,11 @@
     "installing": "Установка",
     "interrupted": "Прервано",
     "keybinding": "Привязка клавиш",
+    "learnMore": "Узнать больше",
     "loadAllFolders": "Загрузить все папки",
     "loadWorkflow": "Загрузить рабочий процесс",
     "loading": "Загрузка",
+    "login": "Вход",
     "logs": "Логи",
     "migrate": "Мигрировать",
     "missing": "Отсутствует",
diff --git a/src/locales/zh/main.json b/src/locales/zh/main.json
index 7263b9e2f0..78eb185ae6 100644
--- a/src/locales/zh/main.json
+++ b/src/locales/zh/main.json
@@ -1,4 +1,13 @@
 {
+  "apiNodesCostBreakdown": {
+    "costPerRun": "每次运行的成本",
+    "title": "API节点",
+    "totalCost": "总成本"
+  },
+  "apiNodesSignInDialog": {
+    "message": "此工作流包含API节点，需要您登录账户才能运行。",
+    "title": "使用API节点需要登录"
+  },
   "clipboard": {
     "errorMessage": "复制到剪贴板失败",
     "errorNotSupported": "您的浏览器不支持剪贴板API",
@@ -172,9 +181,11 @@
     "installing": "正在安装",
     "interrupted": "已中断",
     "keybinding": "按键绑定",
+    "learnMore": "了解更多",
     "loadAllFolders": "加载所有文件夹",
     "loadWorkflow": "加载工作流",
     "loading": "加载中",
+    "login": "登录",
     "logs": "日志",
     "migrate": "迁移",
     "missing": "缺失",
diff --git a/src/services/dialogService.ts b/src/services/dialogService.ts
index 506bfdf7d9..a47e6748cd 100644
--- a/src/services/dialogService.ts
+++ b/src/services/dialogService.ts
@@ -1,3 +1,4 @@
+import ApiNodesSignInContent from '@/components/dialog/content/ApiNodesSignInContent.vue'
 import ConfirmationDialogContent from '@/components/dialog/content/ConfirmationDialogContent.vue'
 import ErrorDialogContent from '@/components/dialog/content/ErrorDialogContent.vue'
 import IssueReportDialogContent from '@/components/dialog/content/IssueReportDialogContent.vue'
@@ -9,6 +10,7 @@ import SettingDialogContent from '@/components/dialog/content/SettingDialogConte
 import ManagerDialogContent from '@/components/dialog/content/manager/ManagerDialogContent.vue'
 import ManagerHeader from '@/components/dialog/content/manager/ManagerHeader.vue'
 import ManagerProgressFooter from '@/components/dialog/footer/ManagerProgressFooter.vue'
+import ComfyOrgHeader from '@/components/dialog/header/ComfyOrgHeader.vue'
 import ManagerProgressHeader from '@/components/dialog/header/ManagerProgressHeader.vue'
 import SettingDialogHeader from '@/components/dialog/header/SettingDialogHeader.vue'
 import TemplateWorkflowsContent from '@/components/templates/TemplateWorkflowsContent.vue'
@@ -16,6 +18,7 @@ import TemplateWorkflowsDialogHeader from '@/components/templates/TemplateWorkfl
 import { t } from '@/i18n'
 import type { ExecutionErrorWsMessage } from '@/schemas/apiSchema'
 import { type ShowDialogOptions, useDialogStore } from '@/stores/dialogStore'
+import { ApiNodeCost } from '@/types/apiNodeTypes'
 import { ManagerTab } from '@/types/comfyManagerTypes'
 
 export type ConfirmationDialogType =
@@ -216,6 +219,34 @@ export const useDialogService = () => {
     })
   }
 
+  /**
+   * Shows a dialog requiring sign in for API nodes
+   * @returns Promise that resolves to true if user clicks login, false if cancelled
+   */
+  async function showApiNodesSignInDialog(
+    apiNodes: ApiNodeCost[]
+  ): Promise<boolean> {
+    return new Promise<boolean>((resolve) => {
+      dialogStore.showDialog({
+        key: 'api-nodes-signin',
+        component: ApiNodesSignInContent,
+        props: {
+          apiNodes,
+          onLogin: () => resolve(true),
+          onCancel: () => resolve(false)
+        },
+        headerComponent: ComfyOrgHeader,
+        dialogComponentProps: {
+          closable: false,
+          onClose: () => resolve(false)
+        }
+      })
+    }).then((result) => {
+      dialogStore.closeDialog({ key: 'api-nodes-signin' })
+      return result
+    })
+  }
+
   async function prompt({
     title,
     message,
@@ -300,6 +331,7 @@ export const useDialogService = () => {
     showManagerDialog,
     showManagerProgressDialog,
     showErrorDialog,
+    showApiNodesSignInDialog,
     prompt,
     confirm
   }
diff --git a/src/types/apiNodeTypes.ts b/src/types/apiNodeTypes.ts
new file mode 100644
index 0000000000..44386ac794
--- /dev/null
+++ b/src/types/apiNodeTypes.ts
@@ -0,0 +1,4 @@
+export interface ApiNodeCost {
+  name: string
+  cost: number
+}