Skip to content

Commit a9bdc70

Browse files
christian-byrnegithub-actionsChenlei Hu
authored
[API Node] Show message tip about API-key-based login (#3851)
Co-authored-by: github-actions <[email protected]> Co-authored-by: Chenlei Hu <[email protected]>
1 parent 58906fa commit a9bdc70

File tree

17 files changed

+61
-36
lines changed

17 files changed

+61
-36
lines changed

‎src/components/dialog/content/SettingDialogContent.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,9 @@ import Tabs from 'primevue/tabs'
6767
import { computed, watch } from 'vue'
6868
6969
import SearchBox from '@/components/common/SearchBox.vue'
70+
import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
7071
import { useSettingSearch } from '@/composables/setting/useSettingSearch'
7172
import { useSettingUI } from '@/composables/setting/useSettingUI'
72-
import { useFirebaseAuthService } from '@/services/firebaseAuthService'
7373
import { SettingTreeNode } from '@/stores/settingStore'
7474
import { ISettingGroup, SettingParams } from '@/types/settingTypes'
7575
import { flattenTree } from '@/utils/treeUtil'
@@ -107,7 +107,7 @@ const {
107107
getSearchResults
108108
} = useSettingSearch()
109109
110-
const authService = useFirebaseAuthService()
110+
const authActions = useFirebaseAuthActions()
111111
112112
// Sort groups for a category
113113
const sortedGroups = (category: SettingTreeNode): ISettingGroup[] => {
@@ -140,7 +140,7 @@ watch(activeCategory, (_, oldValue) => {
140140
activeCategory.value = oldValue
141141
}
142142
if (activeCategory.value?.key === 'credits') {
143-
void authService.fetchBalance()
143+
void authActions.fetchBalance()
144144
}
145145
})
146146
</script>

‎src/components/dialog/content/SignInContent.vue‎

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,15 @@
101101
{{ t('auth.apiKey.generateKey') }}
102102
</a>
103103
</small>
104+
<Message
105+
v-if="authActions.accessError.value"
106+
severity="info"
107+
icon="pi pi-info-circle"
108+
variant="outlined"
109+
closable
110+
>
111+
{{ t('toastMessages.useApiKeyTip') }}
112+
</Message>
104113
</div>
105114

106115
<!-- Terms & Contact -->
@@ -134,12 +143,12 @@
134143
import Button from 'primevue/button'
135144
import Divider from 'primevue/divider'
136145
import Message from 'primevue/message'
137-
import { onMounted, ref } from 'vue'
146+
import { onMounted, onUnmounted, ref } from 'vue'
138147
import { useI18n } from 'vue-i18n'
139148
149+
import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
140150
import { COMFY_PLATFORM_BASE_URL } from '@/config/comfyApi'
141151
import { SignInData, SignUpData } from '@/schemas/signInSchema'
142-
import { useFirebaseAuthService } from '@/services/firebaseAuthService'
143152
import { isInChina } from '@/utils/networkUtil'
144153
145154
import ApiKeyForm from './signin/ApiKeyForm.vue'
@@ -151,7 +160,7 @@ const { onSuccess } = defineProps<{
151160
}>()
152161
153162
const { t } = useI18n()
154-
const authService = useFirebaseAuthService()
163+
const authActions = useFirebaseAuthActions()
155164
const isSecureContext = window.isSecureContext
156165
const isSignIn = ref(true)
157166
const showApiKeyForm = ref(false)
@@ -162,25 +171,25 @@ const toggleState = () => {
162171
}
163172
164173
const signInWithGoogle = async () => {
165-
if (await authService.signInWithGoogle()) {
174+
if (await authActions.signInWithGoogle()) {
166175
onSuccess()
167176
}
168177
}
169178
170179
const signInWithGithub = async () => {
171-
if (await authService.signInWithGithub()) {
180+
if (await authActions.signInWithGithub()) {
172181
onSuccess()
173182
}
174183
}
175184
176185
const signInWithEmail = async (values: SignInData) => {
177-
if (await authService.signInWithEmail(values.email, values.password)) {
186+
if (await authActions.signInWithEmail(values.email, values.password)) {
178187
onSuccess()
179188
}
180189
}
181190
182191
const signUpWithEmail = async (values: SignUpData) => {
183-
if (await authService.signUpWithEmail(values.email, values.password)) {
192+
if (await authActions.signUpWithEmail(values.email, values.password)) {
184193
onSuccess()
185194
}
186195
}
@@ -189,4 +198,8 @@ const userIsInChina = ref(false)
189198
onMounted(async () => {
190199
userIsInChina.value = await isInChina()
191200
})
201+
202+
onUnmounted(() => {
203+
authActions.accessError.value = false
204+
})
192205
</script>

‎src/components/dialog/content/TopUpCreditsDialogContent.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
import Button from 'primevue/button'
5252
5353
import UserCredit from '@/components/common/UserCredit.vue'
54-
import { useFirebaseAuthService } from '@/services/firebaseAuthService'
54+
import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
5555
5656
import CreditTopUpOption from './credit/CreditTopUpOption.vue'
5757
@@ -65,9 +65,9 @@ const {
6565
preselectedAmountOption?: number
6666
}>()
6767
68-
const authService = useFirebaseAuthService()
68+
const authActions = useFirebaseAuthActions()
6969
7070
const handleSeeDetails = async () => {
71-
await authService.accessBillingPortal()
71+
await authActions.accessBillingPortal()
7272
}
7373
</script>

‎src/components/dialog/content/UpdatePasswordContent.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,10 @@ import Button from 'primevue/button'
2323
import { ref } from 'vue'
2424
2525
import PasswordFields from '@/components/dialog/content/signin/PasswordFields.vue'
26+
import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
2627
import { updatePasswordSchema } from '@/schemas/signInSchema'
27-
import { useFirebaseAuthService } from '@/services/firebaseAuthService'
2828
29-
const authService = useFirebaseAuthService()
29+
const authActions = useFirebaseAuthActions()
3030
const loading = ref(false)
3131
3232
const { onSuccess } = defineProps<{
@@ -37,7 +37,7 @@ const onSubmit = async (event: FormSubmitEvent) => {
3737
if (event.valid) {
3838
loading.value = true
3939
try {
40-
await authService.updatePassword(event.values.password)
40+
await authActions.updatePassword(event.values.password)
4141
onSuccess()
4242
} finally {
4343
loading.value = false

‎src/components/dialog/content/credit/CreditTopUpOption.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,9 +41,9 @@ import ProgressSpinner from 'primevue/progressspinner'
4141
import Tag from 'primevue/tag'
4242
import { onBeforeUnmount, ref } from 'vue'
4343
44-
import { useFirebaseAuthService } from '@/services/firebaseAuthService'
44+
import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
4545
46-
const authService = useFirebaseAuthService()
46+
const authActions = useFirebaseAuthActions()
4747
4848
const {
4949
amount,
@@ -61,15 +61,15 @@ const loading = ref(false)
6161
6262
const handleBuyNow = async () => {
6363
loading.value = true
64-
await authService.purchaseCredits(editable ? customAmount.value : amount)
64+
await authActions.purchaseCredits(editable ? customAmount.value : amount)
6565
loading.value = false
6666
didClickBuyNow.value = true
6767
}
6868
6969
onBeforeUnmount(() => {
7070
if (didClickBuyNow.value) {
7171
// If clicked buy now, then returned back to the dialog and closed, fetch the balance
72-
void authService.fetchBalance()
72+
void authActions.fetchBalance()
7373
}
7474
})
7575
</script>

‎src/components/dialog/content/setting/CreditsPanel.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
text
3737
size="small"
3838
severity="secondary"
39-
@click="() => authService.fetchBalance()"
39+
@click="() => authActions.fetchBalance()"
4040
/>
4141
</div>
4242
</div>
@@ -112,8 +112,8 @@ import { computed, ref } from 'vue'
112112
import { useI18n } from 'vue-i18n'
113113
114114
import UserCredit from '@/components/common/UserCredit.vue'
115+
import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
115116
import { useDialogService } from '@/services/dialogService'
116-
import { useFirebaseAuthService } from '@/services/firebaseAuthService'
117117
import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
118118
import { formatMetronomeCurrency } from '@/utils/formatUtil'
119119
@@ -127,7 +127,7 @@ interface CreditHistoryItemData {
127127
const { t } = useI18n()
128128
const dialogService = useDialogService()
129129
const authStore = useFirebaseAuthStore()
130-
const authService = useFirebaseAuthService()
130+
const authActions = useFirebaseAuthActions()
131131
const loading = computed(() => authStore.loading)
132132
const balanceLoading = computed(() => authStore.isFetchingBalance)
133133
@@ -142,7 +142,7 @@ const handlePurchaseCreditsClick = () => {
142142
}
143143
144144
const handleCreditsHistoryClick = async () => {
145-
await authService.accessBillingPortal()
145+
await authActions.accessBillingPortal()
146146
}
147147
148148
const handleMessageSupport = () => {

‎src/components/dialog/content/signin/SignInForm.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -80,12 +80,12 @@ import ProgressSpinner from 'primevue/progressspinner'
8080
import { computed } from 'vue'
8181
import { useI18n } from 'vue-i18n'
8282
83+
import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
8384
import { type SignInData, signInSchema } from '@/schemas/signInSchema'
84-
import { useFirebaseAuthService } from '@/services/firebaseAuthService'
8585
import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
8686
8787
const authStore = useFirebaseAuthStore()
88-
const firebaseAuthService = useFirebaseAuthService()
88+
const firebaseAuthActions = useFirebaseAuthActions()
8989
const loading = computed(() => authStore.loading)
9090
9191
const { t } = useI18n()
@@ -102,6 +102,6 @@ const onSubmit = (event: FormSubmitEvent) => {
102102
103103
const handleForgotPassword = async (email: string) => {
104104
if (!email) return
105-
await firebaseAuthService.sendPasswordReset(email)
105+
await firebaseAuthActions.sendPasswordReset(email)
106106
}
107107
</script>

‎src/components/topbar/CurrentUserPopover.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -69,11 +69,11 @@ import { onMounted } from 'vue'
6969
import UserAvatar from '@/components/common/UserAvatar.vue'
7070
import UserCredit from '@/components/common/UserCredit.vue'
7171
import { useCurrentUser } from '@/composables/auth/useCurrentUser'
72+
import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
7273
import { useDialogService } from '@/services/dialogService'
73-
import { useFirebaseAuthService } from '@/services/firebaseAuthService'
7474
7575
const { userDisplayName, userEmail, userPhotoUrl } = useCurrentUser()
76-
const authService = useFirebaseAuthService()
76+
const authActions = useFirebaseAuthActions()
7777
const dialogService = useDialogService()
7878
7979
const handleOpenUserSettings = () => {
@@ -89,6 +89,6 @@ const handleOpenApiPricing = () => {
8989
}
9090
9191
onMounted(() => {
92-
void authService.fetchBalance()
92+
void authActions.fetchBalance()
9393
})
9494
</script>

‎src/services/firebaseAuthService.ts‎ renamed to ‎src/composables/auth/useFirebaseAuthActions.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { FirebaseError } from 'firebase/app'
2+
import { ref } from 'vue'
23

34
import { useErrorHandling } from '@/composables/useErrorHandling'
45
import { t } from '@/i18n'
@@ -11,11 +12,13 @@ import { usdToMicros } from '@/utils/formatUtil'
1112
* All actions are wrapped with error handling.
1213
* @returns {Object} - Object containing all Firebase Auth actions
1314
*/
14-
export const useFirebaseAuthService = () => {
15+
export const useFirebaseAuthActions = () => {
1516
const authStore = useFirebaseAuthStore()
1617
const toastStore = useToastStore()
1718
const { wrapWithErrorHandlingAsync, toastErrorHandler } = useErrorHandling()
1819

20+
const accessError = ref(false)
21+
1922
const reportError = (error: unknown) => {
2023
// Ref: https://firebase.google.com/docs/auth/admin/errors
2124
if (
@@ -26,6 +29,7 @@ export const useFirebaseAuthService = () => {
2629
'auth/unauthorized-continue-uri'
2730
].includes(error.code)
2831
) {
32+
accessError.value = true
2933
toastStore.add({
3034
severity: 'error',
3135
summary: t('g.error'),
@@ -141,6 +145,7 @@ export const useFirebaseAuthService = () => {
141145
signInWithGithub,
142146
signInWithEmail,
143147
signUpWithEmail,
144-
updatePassword
148+
updatePassword,
149+
accessError
145150
}
146151
}

‎src/composables/useCoreCommands.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
LiteGraph
66
} from '@comfyorg/litegraph'
77

8+
import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
89
import {
910
DEFAULT_DARK_COLOR_PALETTE,
1011
DEFAULT_LIGHT_COLOR_PALETTE
@@ -13,7 +14,6 @@ import { t } from '@/i18n'
1314
import { api } from '@/scripts/api'
1415
import { app } from '@/scripts/app'
1516
import { useDialogService } from '@/services/dialogService'
16-
import { useFirebaseAuthService } from '@/services/firebaseAuthService'
1717
import { useLitegraphService } from '@/services/litegraphService'
1818
import { useWorkflowService } from '@/services/workflowService'
1919
import type { ComfyCommand } from '@/stores/commandStore'
@@ -32,7 +32,7 @@ export function useCoreCommands(): ComfyCommand[] {
3232
const workflowStore = useWorkflowStore()
3333
const dialogService = useDialogService()
3434
const colorPaletteStore = useColorPaletteStore()
35-
const firebaseAuthService = useFirebaseAuthService()
35+
const firebaseAuthActions = useFirebaseAuthActions()
3636
const toastStore = useToastStore()
3737
const getTracker = () => workflowStore.activeWorkflow?.changeTracker
3838

@@ -671,7 +671,7 @@ export function useCoreCommands(): ComfyCommand[] {
671671
label: 'Sign Out',
672672
versionAdded: '1.18.1',
673673
function: async () => {
674-
await firebaseAuthService.logout()
674+
await firebaseAuthActions.logout()
675675
}
676676
}
677677
]

0 commit comments

Comments
 (0)