Compare commits
1 Commits
main
...
coderabbit
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
4384b7d6bb |
|
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 85 KiB |
|
Before Width: | Height: | Size: 88 KiB After Width: | Height: | Size: 86 KiB |
373
apps/website/src/components/affiliates/affiliateData.test.ts
Normal file
@@ -0,0 +1,373 @@
|
||||
import { describe, expect, it } from 'vitest'
|
||||
|
||||
import { externalLinks, getRoutes } from '../../config/routes'
|
||||
import { hasKey, t } from '../../i18n/translations'
|
||||
import {
|
||||
AFFILIATE_FAQ_COUNT,
|
||||
AFFILIATE_FAQ_HEADING_KEY,
|
||||
AFFILIATE_FAQ_PREFIX
|
||||
} from './affiliateFaqs'
|
||||
import { brandAssets } from './brandAssets'
|
||||
import { programDetailRows } from './programDetails'
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// brandAssets.ts
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
describe('brandAssets data integrity', () => {
|
||||
it('exports a non-empty array', () => {
|
||||
expect(Array.isArray(brandAssets)).toBe(true)
|
||||
expect(brandAssets.length).toBeGreaterThan(0)
|
||||
})
|
||||
|
||||
it('has exactly 8 brand assets', () => {
|
||||
expect(brandAssets).toHaveLength(8)
|
||||
})
|
||||
|
||||
it('every asset has a non-empty id', () => {
|
||||
for (const asset of brandAssets) {
|
||||
expect(asset.id.trim().length, `asset id is empty`).toBeGreaterThan(0)
|
||||
}
|
||||
})
|
||||
|
||||
it('every asset id is unique', () => {
|
||||
const ids = brandAssets.map((a) => a.id)
|
||||
const unique = new Set(ids)
|
||||
expect(unique.size).toBe(ids.length)
|
||||
})
|
||||
|
||||
it('every asset id uses kebab-case only (no spaces or uppercase letters)', () => {
|
||||
const kebabCase = /^[a-z0-9]+(-[a-z0-9]+)*$/
|
||||
for (const asset of brandAssets) {
|
||||
expect(
|
||||
kebabCase.test(asset.id),
|
||||
`asset id "${asset.id}" is not kebab-case`
|
||||
).toBe(true)
|
||||
}
|
||||
})
|
||||
|
||||
it('every asset download path is a non-empty string beginning with "/"', () => {
|
||||
for (const asset of brandAssets) {
|
||||
expect(
|
||||
asset.download.length,
|
||||
`download path for "${asset.id}" is empty`
|
||||
).toBeGreaterThan(0)
|
||||
expect(
|
||||
asset.download.startsWith('/'),
|
||||
`download path for "${asset.id}" does not start with "/"`
|
||||
).toBe(true)
|
||||
}
|
||||
})
|
||||
|
||||
it('every asset preview path is a non-empty string beginning with "/"', () => {
|
||||
for (const asset of brandAssets) {
|
||||
expect(
|
||||
asset.preview.length,
|
||||
`preview path for "${asset.id}" is empty`
|
||||
).toBeGreaterThan(0)
|
||||
expect(
|
||||
asset.preview.startsWith('/'),
|
||||
`preview path for "${asset.id}" does not start with "/"`
|
||||
).toBe(true)
|
||||
}
|
||||
})
|
||||
|
||||
it('every asset download path has a recognisable file extension', () => {
|
||||
const knownExtensions = /\.(svg|png|jpg|jpeg|webp|gif|zip)$/i
|
||||
for (const asset of brandAssets) {
|
||||
expect(
|
||||
knownExtensions.test(asset.download),
|
||||
`download path "${asset.download}" has no recognised extension`
|
||||
).toBe(true)
|
||||
}
|
||||
})
|
||||
|
||||
it('every asset titleKey is a valid translation key with non-empty English copy', () => {
|
||||
for (const asset of brandAssets) {
|
||||
expect(
|
||||
hasKey(asset.titleKey),
|
||||
`titleKey "${asset.titleKey}" not found in translations`
|
||||
).toBe(true)
|
||||
expect(
|
||||
t(asset.titleKey, 'en').trim().length,
|
||||
`titleKey "${asset.titleKey}" has empty English copy`
|
||||
).toBeGreaterThan(0)
|
||||
}
|
||||
})
|
||||
|
||||
it('every asset titleKey starts with "affiliate-landing.assets.tile."', () => {
|
||||
const TILE_PREFIX = 'affiliate-landing.assets.tile.'
|
||||
for (const asset of brandAssets) {
|
||||
expect(
|
||||
asset.titleKey.startsWith(TILE_PREFIX),
|
||||
`titleKey "${asset.titleKey}" does not start with "${TILE_PREFIX}"`
|
||||
).toBe(true)
|
||||
}
|
||||
})
|
||||
|
||||
it('the comfy-amplified-logo.png asset was removed (renamed to svg variants)', () => {
|
||||
// Regression guard: the PR deleted comfy-amplified-logo.png and the old PNG
|
||||
// download path should no longer appear in brandAssets.
|
||||
const hasPngAmplifiedLogo = brandAssets.some(
|
||||
(a) => a.download.endsWith('comfy-amplified-logo.png')
|
||||
)
|
||||
expect(hasPngAmplifiedLogo).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// programDetails.ts
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
describe('programDetailRows data integrity', () => {
|
||||
it('exports a non-empty array', () => {
|
||||
expect(Array.isArray(programDetailRows)).toBe(true)
|
||||
expect(programDetailRows.length).toBeGreaterThan(0)
|
||||
})
|
||||
|
||||
it('has exactly 6 program detail rows', () => {
|
||||
expect(programDetailRows).toHaveLength(6)
|
||||
})
|
||||
|
||||
it('all labelKeys are unique', () => {
|
||||
const labelKeys = programDetailRows.map((r) => r.labelKey)
|
||||
const unique = new Set(labelKeys)
|
||||
expect(unique.size).toBe(labelKeys.length)
|
||||
})
|
||||
|
||||
it('all valueKeys are unique', () => {
|
||||
const valueKeys = programDetailRows.map((r) => r.valueKey)
|
||||
const unique = new Set(valueKeys)
|
||||
expect(unique.size).toBe(valueKeys.length)
|
||||
})
|
||||
|
||||
it('no row shares a labelKey with its valueKey', () => {
|
||||
for (const row of programDetailRows) {
|
||||
expect(row.labelKey).not.toBe(row.valueKey)
|
||||
}
|
||||
})
|
||||
|
||||
it('all labelKeys are valid translation keys with non-empty English copy', () => {
|
||||
for (const row of programDetailRows) {
|
||||
expect(
|
||||
hasKey(row.labelKey),
|
||||
`labelKey "${row.labelKey}" not found in translations`
|
||||
).toBe(true)
|
||||
expect(
|
||||
t(row.labelKey, 'en').trim().length,
|
||||
`labelKey "${row.labelKey}" has empty English copy`
|
||||
).toBeGreaterThan(0)
|
||||
}
|
||||
})
|
||||
|
||||
it('all valueKeys are valid translation keys with non-empty English copy', () => {
|
||||
for (const row of programDetailRows) {
|
||||
expect(
|
||||
hasKey(row.valueKey),
|
||||
`valueKey "${row.valueKey}" not found in translations`
|
||||
).toBe(true)
|
||||
expect(
|
||||
t(row.valueKey, 'en').trim().length,
|
||||
`valueKey "${row.valueKey}" has empty English copy`
|
||||
).toBeGreaterThan(0)
|
||||
}
|
||||
})
|
||||
|
||||
it('all labelKeys follow the "affiliate-landing.details.row.<n>.label" pattern', () => {
|
||||
const pattern = /^affiliate-landing\.details\.row\.\d+\.label$/
|
||||
for (const row of programDetailRows) {
|
||||
expect(
|
||||
pattern.test(row.labelKey),
|
||||
`labelKey "${row.labelKey}" does not match expected pattern`
|
||||
).toBe(true)
|
||||
}
|
||||
})
|
||||
|
||||
it('all valueKeys follow the "affiliate-landing.details.row.<n>.value" pattern', () => {
|
||||
const pattern = /^affiliate-landing\.details\.row\.\d+\.value$/
|
||||
for (const row of programDetailRows) {
|
||||
expect(
|
||||
pattern.test(row.valueKey),
|
||||
`valueKey "${row.valueKey}" does not match expected pattern`
|
||||
).toBe(true)
|
||||
}
|
||||
})
|
||||
|
||||
it('row indices are zero-based and contiguous', () => {
|
||||
const indexRegex = /\.row\.(\d+)\.label$/
|
||||
const indices = programDetailRows
|
||||
.map((r) => r.labelKey.match(indexRegex)?.[1])
|
||||
.filter((m): m is string => m !== undefined)
|
||||
.map((s) => parseInt(s, 10))
|
||||
expect(indices).toEqual(
|
||||
Array.from({ length: programDetailRows.length }, (_, i) => i)
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// affiliateFaqs.ts — constant values and types
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
describe('affiliateFaqs constants', () => {
|
||||
it('AFFILIATE_FAQ_PREFIX is exactly "affiliate-landing.faq"', () => {
|
||||
expect(AFFILIATE_FAQ_PREFIX).toBe('affiliate-landing.faq')
|
||||
})
|
||||
|
||||
it('AFFILIATE_FAQ_HEADING_KEY is exactly "affiliate-landing.faq.heading"', () => {
|
||||
expect(AFFILIATE_FAQ_HEADING_KEY).toBe('affiliate-landing.faq.heading')
|
||||
})
|
||||
|
||||
it('AFFILIATE_FAQ_HEADING_KEY starts with AFFILIATE_FAQ_PREFIX', () => {
|
||||
expect(AFFILIATE_FAQ_HEADING_KEY.startsWith(AFFILIATE_FAQ_PREFIX)).toBe(
|
||||
true
|
||||
)
|
||||
})
|
||||
|
||||
it('AFFILIATE_FAQ_COUNT is a positive integer', () => {
|
||||
expect(Number.isInteger(AFFILIATE_FAQ_COUNT)).toBe(true)
|
||||
expect(AFFILIATE_FAQ_COUNT).toBeGreaterThan(0)
|
||||
})
|
||||
|
||||
it('AFFILIATE_FAQ_COUNT is 8 (regression guard against accidental changes)', () => {
|
||||
expect(AFFILIATE_FAQ_COUNT).toBe(8)
|
||||
})
|
||||
|
||||
it('AFFILIATE_FAQ_HEADING_KEY resolves to a non-empty English string', () => {
|
||||
expect(hasKey(AFFILIATE_FAQ_HEADING_KEY)).toBe(true)
|
||||
expect(t(AFFILIATE_FAQ_HEADING_KEY, 'en').trim().length).toBeGreaterThan(0)
|
||||
})
|
||||
|
||||
it('there are no FAQ keys beyond AFFILIATE_FAQ_COUNT', () => {
|
||||
const beyondCount = hasKey(
|
||||
`${AFFILIATE_FAQ_PREFIX}.${AFFILIATE_FAQ_COUNT + 1}.q` as never
|
||||
)
|
||||
expect(beyondCount).toBe(false)
|
||||
})
|
||||
})
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// FooterCtaSection.vue config dependencies
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
describe('FooterCtaSection config dependencies', () => {
|
||||
it('externalLinks.affiliateApplicationForm is the canonical Google Form URL', () => {
|
||||
expect(externalLinks.affiliateApplicationForm).toBe(
|
||||
'https://forms.gle/RS8L2ttcuGap4Q1v6'
|
||||
)
|
||||
})
|
||||
|
||||
it('externalLinks.affiliateApplicationForm is a well-formed https URL', () => {
|
||||
expect(() => new URL(externalLinks.affiliateApplicationForm)).not.toThrow()
|
||||
expect(
|
||||
new URL(externalLinks.affiliateApplicationForm).protocol
|
||||
).toBe('https:')
|
||||
})
|
||||
|
||||
it('affiliateTerms route is "/affiliates/terms" for English locale', () => {
|
||||
expect(getRoutes('en').affiliateTerms).toBe('/affiliates/terms')
|
||||
})
|
||||
|
||||
it('affiliateTerms route is locale-invariant (same for zh-CN)', () => {
|
||||
// Guards against re-introducing /zh-CN/affiliates/terms, which would
|
||||
// bypass the legal review that applies only to the English copy.
|
||||
expect(getRoutes('zh-CN').affiliateTerms).toBe('/affiliates/terms')
|
||||
})
|
||||
|
||||
it('affiliates base route uses the expected path', () => {
|
||||
expect(getRoutes('en').affiliates).toBe('/affiliates')
|
||||
})
|
||||
|
||||
it('footer CTA copy keys are present in translations', () => {
|
||||
expect(hasKey('affiliate-landing.footerCta.heading')).toBe(true)
|
||||
expect(hasKey('affiliate-landing.footerCta.termsLink')).toBe(true)
|
||||
expect(hasKey('affiliate-landing.cta.apply')).toBe(true)
|
||||
expect(hasKey('affiliate-landing.cta.applyAriaLabel')).toBe(true)
|
||||
})
|
||||
|
||||
it('footer CTA copy keys return non-empty English strings', () => {
|
||||
const keys = [
|
||||
'affiliate-landing.footerCta.heading',
|
||||
'affiliate-landing.footerCta.termsLink',
|
||||
'affiliate-landing.cta.apply',
|
||||
'affiliate-landing.cta.applyAriaLabel'
|
||||
] as const
|
||||
for (const key of keys) {
|
||||
expect(t(key, 'en').trim().length, `key "${key}" is empty`).toBeGreaterThan(0)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// AudienceSection.vue — translation key contract
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
describe('AudienceSection translation keys', () => {
|
||||
const AUDIENCE_ITEM_COUNT = 5
|
||||
const AUDIENCE_PREFIX = 'affiliate-landing.audience'
|
||||
|
||||
it('audience heading key exists and is non-empty', () => {
|
||||
expect(hasKey(`${AUDIENCE_PREFIX}.heading`)).toBe(true)
|
||||
expect(t(`${AUDIENCE_PREFIX}.heading` as never, 'en').trim().length).toBeGreaterThan(0)
|
||||
})
|
||||
|
||||
it(`provides exactly ${AUDIENCE_ITEM_COUNT} audience item keys (item.0 through item.4)`, () => {
|
||||
for (let i = 0; i < AUDIENCE_ITEM_COUNT; i++) {
|
||||
expect(
|
||||
hasKey(`${AUDIENCE_PREFIX}.item.${i}`),
|
||||
`missing key: ${AUDIENCE_PREFIX}.item.${i}`
|
||||
).toBe(true)
|
||||
}
|
||||
})
|
||||
|
||||
it('does not have an audience item beyond index 4 (prevents silent skipping)', () => {
|
||||
expect(hasKey(`${AUDIENCE_PREFIX}.item.${AUDIENCE_ITEM_COUNT}` as never)).toBe(false)
|
||||
})
|
||||
|
||||
it('all audience item keys return non-empty English text', () => {
|
||||
for (let i = 0; i < AUDIENCE_ITEM_COUNT; i++) {
|
||||
const key = `${AUDIENCE_PREFIX}.item.${i}` as never
|
||||
expect(
|
||||
t(key, 'en').trim().length,
|
||||
`audience item ${i} has empty English copy`
|
||||
).toBeGreaterThan(0)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// BrandAssetsSection.vue — section-level translation key contract
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
describe('BrandAssetsSection translation keys', () => {
|
||||
const ASSETS_PREFIX = 'affiliate-landing.assets'
|
||||
|
||||
it('heading, subheading, and downloadLabel keys all exist', () => {
|
||||
expect(hasKey(`${ASSETS_PREFIX}.heading`)).toBe(true)
|
||||
expect(hasKey(`${ASSETS_PREFIX}.subheading`)).toBe(true)
|
||||
expect(hasKey(`${ASSETS_PREFIX}.downloadLabel`)).toBe(true)
|
||||
})
|
||||
|
||||
it('all section-level keys return non-empty English copy', () => {
|
||||
const keys = [
|
||||
`${ASSETS_PREFIX}.heading`,
|
||||
`${ASSETS_PREFIX}.subheading`,
|
||||
`${ASSETS_PREFIX}.downloadLabel`
|
||||
] as const
|
||||
for (const key of keys) {
|
||||
expect(t(key as never, 'en').trim().length, `key "${key}" is empty`).toBeGreaterThan(0)
|
||||
}
|
||||
})
|
||||
|
||||
it('every asset titleKey starts under the tile namespace', () => {
|
||||
const tilePrefix = `${ASSETS_PREFIX}.tile.`
|
||||
for (const asset of brandAssets) {
|
||||
expect(
|
||||
asset.titleKey.startsWith(tilePrefix),
|
||||
`titleKey "${asset.titleKey}" doesn't start with "${tilePrefix}"`
|
||||
).toBe(true)
|
||||
}
|
||||
// Guard: the BrandAssetsSection renders one card per entry in brandAssets
|
||||
expect(brandAssets.length).toBe(8)
|
||||
})
|
||||
})
|
||||
@@ -21,7 +21,7 @@ export const Default: Story = {
|
||||
args: {
|
||||
title: 'Product',
|
||||
links: [
|
||||
{ label: 'Desktop', href: '/download' },
|
||||
{ label: 'Local', href: '/local' },
|
||||
{ label: 'Cloud', href: '/cloud' },
|
||||
{ label: 'API', href: '/api' },
|
||||
{ label: 'Enterprise', href: '/enterprise' }
|
||||
|
||||
@@ -12,9 +12,9 @@ const meta: Meta<typeof ProductCard> = {
|
||||
})
|
||||
],
|
||||
args: {
|
||||
title: 'Comfy\nDesktop',
|
||||
title: 'Comfy\nLocal',
|
||||
description: 'Run ComfyUI on your own hardware.',
|
||||
cta: 'SEE DESKTOP FEATURES',
|
||||
cta: 'SEE LOCAL FEATURES',
|
||||
href: '#',
|
||||
bg: 'bg-primary-warm-gray'
|
||||
}
|
||||
@@ -31,9 +31,9 @@ export const AllCards: Story = {
|
||||
template: `
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<ProductCard
|
||||
title="Comfy\nDesktop"
|
||||
title="Comfy\nLocal"
|
||||
description="Run ComfyUI on your own hardware."
|
||||
cta="SEE DESKTOP FEATURES"
|
||||
cta="SEE LOCAL FEATURES"
|
||||
href="#"
|
||||
bg="bg-primary-warm-gray"
|
||||
/>
|
||||
|
||||
@@ -3,7 +3,6 @@ import type { Locale } from '../../../i18n/translations'
|
||||
import { computed } from 'vue'
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
|
||||
import type { Platform } from '../../../composables/useDownloadUrl'
|
||||
import {
|
||||
downloadUrls,
|
||||
useDownloadUrl
|
||||
@@ -19,15 +18,13 @@ const { locale = 'en', class: customClass = '' } = defineProps<{
|
||||
|
||||
const { downloadUrl, platform, showFallback } = useDownloadUrl()
|
||||
|
||||
const label = computed(() => t('download.hero.downloadLocal', locale))
|
||||
|
||||
const ICONS: Record<Platform, string> = {
|
||||
const ICONS = {
|
||||
windows: '/icons/os/windows.svg',
|
||||
mac: '/icons/os/apple.svg'
|
||||
}
|
||||
} as const
|
||||
|
||||
interface ButtonSpec {
|
||||
key: Platform
|
||||
key: string
|
||||
href: string
|
||||
icon: string
|
||||
ariaLabel?: string
|
||||
@@ -44,18 +41,19 @@ const buttons = computed<ButtonSpec[]>(() => {
|
||||
]
|
||||
}
|
||||
if (showFallback.value) {
|
||||
const label = t('download.hero.downloadLocal', locale)
|
||||
return [
|
||||
{
|
||||
key: 'windows',
|
||||
href: downloadUrls.windows,
|
||||
icon: ICONS.windows,
|
||||
ariaLabel: `${label.value} — Windows`
|
||||
ariaLabel: `${label} — Windows`
|
||||
},
|
||||
{
|
||||
key: 'mac',
|
||||
href: downloadUrls.macArm,
|
||||
icon: ICONS.mac,
|
||||
ariaLabel: `${label.value} — macOS`
|
||||
ariaLabel: `${label} — macOS`
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -79,8 +77,11 @@ const buttons = computed<ButtonSpec[]>(() => {
|
||||
:src="btn.icon"
|
||||
alt=""
|
||||
class="ppformula-text-center size-5 -translate-y-0.75"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span class="ppformula-text-center">{{ label }}</span>
|
||||
<span class="ppformula-text-center">{{
|
||||
t('download.hero.downloadLocal', locale)
|
||||
}}</span>
|
||||
</span>
|
||||
</BrandButton>
|
||||
</template>
|
||||
|
||||
@@ -7,13 +7,13 @@ export const downloadUrls = {
|
||||
macArm: 'https://download.comfy.org/mac/dmg/arm64'
|
||||
} as const
|
||||
|
||||
export type Platform = 'windows' | 'mac'
|
||||
type DetectedPlatform = 'windows' | 'mac' | null
|
||||
|
||||
function isMobile(ua: string): boolean {
|
||||
return /iphone|ipad|ipod|android/.test(ua)
|
||||
}
|
||||
|
||||
function detectPlatform(ua: string): Platform | null {
|
||||
function detectPlatform(ua: string): DetectedPlatform {
|
||||
if (isMobile(ua)) return null
|
||||
if (ua.includes('win')) return 'windows'
|
||||
if (ua.includes('macintosh') || ua.includes('mac os x')) return 'mac'
|
||||
@@ -23,7 +23,7 @@ function detectPlatform(ua: string): Platform | null {
|
||||
// TODO: Only Windows x64 and macOS arm64 are available today.
|
||||
// When Linux and/or macIntel builds are added, extend detection and URLs here.
|
||||
export function useDownloadUrl() {
|
||||
const platform = ref<Platform | null>(null)
|
||||
const platform = ref<DetectedPlatform>(null)
|
||||
const detected = ref(false)
|
||||
const isMobileUa = ref(false)
|
||||
|
||||
|
||||
@@ -174,16 +174,16 @@ const translations = {
|
||||
'zh-CN': '掌控每个模型、每个节点、每个步骤、每个输出。'
|
||||
},
|
||||
'products.local.title': {
|
||||
en: 'Comfy\nDesktop',
|
||||
'zh-CN': 'Comfy\n桌面版'
|
||||
en: 'Comfy\nLocal',
|
||||
'zh-CN': 'Comfy\n本地版'
|
||||
},
|
||||
'products.local.description': {
|
||||
en: 'Run ComfyUI on your own hardware.',
|
||||
'zh-CN': '在您自己的硬件上运行 ComfyUI。'
|
||||
},
|
||||
'products.local.cta': {
|
||||
en: 'SEE DESKTOP FEATURES',
|
||||
'zh-CN': '查看桌面版属性'
|
||||
en: 'SEE LOCAL FEATURES',
|
||||
'zh-CN': '查看本地版属性'
|
||||
},
|
||||
'products.cloud.title': {
|
||||
en: 'Comfy\nCloud',
|
||||
@@ -1057,18 +1057,18 @@ const translations = {
|
||||
'zh-CN': 'Cloud 与本地运行 ComfyUI 有什么区别?'
|
||||
},
|
||||
'cloud.faq.2.a': {
|
||||
en: 'Cloud runs on powerful remote GPUs and is accessible from any device. Comfy Desktop runs entirely on your computer, giving you full control and offline use.',
|
||||
en: 'Cloud runs on powerful remote GPUs and is accessible from any device. Local runs entirely on your computer, giving you full control and offline use.',
|
||||
'zh-CN':
|
||||
'Cloud 在强大的远程 GPU 上运行,可从任何设备访问。Comfy 桌面版完全在您的电脑上运行,提供完全控制和离线使用。'
|
||||
'Cloud 在强大的远程 GPU 上运行,可从任何设备访问。本地版完全在您的电脑上运行,提供完全控制和离线使用。'
|
||||
},
|
||||
'cloud.faq.3.q': {
|
||||
en: 'Which version should I choose, Comfy Cloud or Comfy Desktop?',
|
||||
'zh-CN': '我应该选择 Comfy Cloud 还是 Comfy 桌面版?'
|
||||
en: 'Which version should I choose, Comfy Cloud or local ComfyUI (self-hosted)?',
|
||||
'zh-CN': '我应该选择 Comfy Cloud 还是本地 ComfyUI(自托管)?'
|
||||
},
|
||||
'cloud.faq.3.a': {
|
||||
en: "Comfy Cloud has zero setup, is easy to share with your team, and is faster than most GPUs you can run on a desktop workstation. You can immediately run the best models and workflows from the community on Comfy Cloud.\nComfy Desktop is infinitely customizable, works offline, and you don't need to worry about queue times. However, depending on what you want to create, you might need to have a good GPU and some amount of technical knowledge to install community-created custom nodes.",
|
||||
en: "Comfy Cloud has zero setup, is easy to share with your team, and is faster than most GPUs you can run on a desktop workstation. You can immediately run the best models and workflows from the community on Comfy Cloud.\nLocal ComfyUI is infinitely customizable, works offline, and you don't need to worry about queue times. However, depending on what you want to create, you might need to have a good GPU and some amount of technical knowledge to install community-created custom nodes.",
|
||||
'zh-CN':
|
||||
'Comfy Cloud 无需任何设置,方便与团队共享,比大多数桌面工作站 GPU 更快。您可以立即在 Comfy Cloud 上运行社区中最好的模型和工作流。\nComfy 桌面版可以无限定制,支持离线工作,无需担心排队时间。但根据您的创作需求,可能需要一块好的 GPU 以及一定的技术知识来安装社区创建的自定义节点。'
|
||||
'Comfy Cloud 无需任何设置,方便与团队共享,比大多数桌面工作站 GPU 更快。您可以立即在 Comfy Cloud 上运行社区中最好的模型和工作流。\n本地 ComfyUI 可以无限定制,支持离线工作,无需担心排队时间。但根据您的创作需求,可能需要一块好的 GPU 以及一定的技术知识来安装社区创建的自定义节点。'
|
||||
},
|
||||
'cloud.faq.4.q': {
|
||||
en: 'Do I need a GPU or a strong computer to use Comfy Cloud?',
|
||||
@@ -1091,9 +1091,9 @@ const translations = {
|
||||
'zh-CN': '我可以在 Comfy Cloud 上使用现有的工作流吗?'
|
||||
},
|
||||
'cloud.faq.6.a': {
|
||||
en: 'Yes, your workflows work across Desktop and Cloud. Just note that only the most popular custom nodes are supported for now, but more will be added soon.',
|
||||
en: 'Yes, your workflows work across Local and Cloud. Just note that only the most popular custom nodes are supported for now, but more will be added soon.',
|
||||
'zh-CN':
|
||||
'可以,您的工作流在桌面版和云端都能使用。请注意,目前仅支持最热门的自定义节点,但很快会添加更多。'
|
||||
'可以,您的工作流在本地和云端都能使用。请注意,目前仅支持最热门的自定义节点,但很快会添加更多。'
|
||||
},
|
||||
'cloud.faq.7.q': {
|
||||
en: 'Are all ComfyUI extensions and custom nodes supported?',
|
||||
@@ -1145,9 +1145,9 @@ const translations = {
|
||||
'zh-CN': '合作伙伴节点积分和我的 Cloud 订阅有什么区别?'
|
||||
},
|
||||
'cloud.faq.12.a': {
|
||||
en: 'Comfy Cloud has a credit system that is used for both Partner nodes (formerly API nodes) and running workflows on cloud.\n1. Partner Nodes (Pay-as-you-go): These nodes (formerly called API nodes) run third-party models via API calls and can be used on both Comfy Cloud and Comfy Desktop. Each node has its own usage cost, determined by the API provider, and we directly match their pricing.\n2. Running workflows on cloud: Exclusive to Comfy Cloud, you get a set amount of credits per month, with the amount differing based on your plan. More credits can be topped up anytime. Credits are only used up for GPU time while workflows are running — not while editing or building them. No idle costs, no setup, and no infrastructure to manage.',
|
||||
en: 'Comfy Cloud has a credit system that is used for both Partner nodes (formerly API nodes) and running workflows on cloud.\n1. Partner Nodes (Pay-as-you-go): These nodes (formerly called API nodes) run third-party models via API calls and can be used on both Comfy Cloud and Local/Self-Hosted ComfyUI. Each node has its own usage cost, determined by the API provider, and we directly match their pricing.\n2. Running workflows on cloud: Exclusive to Comfy Cloud, you get a set amount of credits per month, with the amount differing based on your plan. More credits can be topped up anytime. Credits are only used up for GPU time while workflows are running — not while editing or building them. No idle costs, no setup, and no infrastructure to manage.',
|
||||
'zh-CN':
|
||||
'Comfy Cloud 有一个积分系统,用于合作伙伴节点(原 API 节点)和在云端运行工作流。\n1. 合作伙伴节点(按需付费):这些节点(原称 API 节点)通过 API 调用运行第三方模型,可在 Comfy Cloud 和 Comfy 桌面版上使用。每个节点有其自身的使用成本,由 API 提供商决定,我们直接匹配他们的定价。\n2. 在云端运行工作流:Comfy Cloud 专属,您每月获得一定数量的积分,数量根据您的计划而不同。积分可随时充值。积分仅在工作流运行时用于 GPU 时间——编辑或构建时不消耗。无闲置成本,无需设置,无需管理基础设施。'
|
||||
'Comfy Cloud 有一个积分系统,用于合作伙伴节点(原 API 节点)和在云端运行工作流。\n1. 合作伙伴节点(按需付费):这些节点(原称 API 节点)通过 API 调用运行第三方模型,可在 Comfy Cloud 和本地/自托管 ComfyUI 上使用。每个节点有其自身的使用成本,由 API 提供商决定,我们直接匹配他们的定价。\n2. 在云端运行工作流:Comfy Cloud 专属,您每月获得一定数量的积分,数量根据您的计划而不同。积分可随时充值。积分仅在工作流运行时用于 GPU 时间——编辑或构建时不消耗。无闲置成本,无需设置,无需管理基础设施。'
|
||||
},
|
||||
'cloud.faq.13.q': {
|
||||
en: 'Can I cancel my subscription?',
|
||||
@@ -1411,9 +1411,9 @@ const translations = {
|
||||
'zh-CN': '合作伙伴节点'
|
||||
},
|
||||
'pricing.included.feature8.description': {
|
||||
en: 'Run <strong>proprietary models</strong> through Comfy\'s <a href="https://docs.comfy.org/tutorials/partner-nodes/overview" class="text-primary-comfy-yellow underline">Partner Nodes</a>, such as Nano Banana. The amount of credits each node uses depends on the model and parameters you set in the node, but these credits are the same ones that your monthly subscription comes with. These credits can also be used across Comfy Cloud and Comfy Desktop. Read more about Partner nodes <a href="https://docs.comfy.org/tutorials/partner-nodes/overview" class="text-primary-comfy-yellow underline">here</a>.',
|
||||
en: 'Run <strong>proprietary models</strong> through Comfy\'s <a href="https://docs.comfy.org/tutorials/partner-nodes/overview" class="text-primary-comfy-yellow underline">Partner Nodes</a>, such as Nano Banana. The amount of credits each node uses depends on the model and parameters you set in the node, but these credits are the same ones that your monthly subscription comes with. These credits can also be used across Comfy Cloud and local ComfyUI. Read more about Partner nodes <a href="https://docs.comfy.org/tutorials/partner-nodes/overview" class="text-primary-comfy-yellow underline">here</a>.',
|
||||
'zh-CN':
|
||||
'通过 Comfy 的<a href="https://docs.comfy.org/tutorials/partner-nodes/overview" class="text-primary-comfy-yellow underline">合作伙伴节点</a>运行<strong>专有模型</strong>,如 Nano Banana。每个节点消耗的积分取决于所用模型和参数设置,且与月度订阅积分通用。积分可在 Comfy Cloud 和 Comfy 桌面版间通用。了解更多关于合作伙伴节点的信息请点击<a href="https://docs.comfy.org/tutorials/partner-nodes/overview" class="text-primary-comfy-yellow underline">此处</a>。'
|
||||
'通过 Comfy 的<a href="https://docs.comfy.org/tutorials/partner-nodes/overview" class="text-primary-comfy-yellow underline">合作伙伴节点</a>运行<strong>专有模型</strong>,如 Nano Banana。每个节点消耗的积分取决于所用模型和参数设置,且与月度订阅积分通用。积分可在 Comfy Cloud 和本地 ComfyUI 间通用。了解更多关于合作伙伴节点的信息请点击<a href="https://docs.comfy.org/tutorials/partner-nodes/overview" class="text-primary-comfy-yellow underline">此处</a>。'
|
||||
},
|
||||
'pricing.included.feature9.title': {
|
||||
en: 'Job queue',
|
||||
|
||||
@@ -11,9 +11,9 @@ import { t } from '../i18n/translations'
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="Download Comfy Desktop — Run AI on Your Hardware"
|
||||
title="Download Comfy — Run AI Locally"
|
||||
description={t('download.hero.subtitle', 'en')}
|
||||
keywords={['comfyui app', 'comfyui desktop app', 'comfyui desktop', 'comfy ui application', 'comfyui download', 'download comfyui', 'comfyui windows', 'comfyui mac', 'comfyui linux']}
|
||||
keywords={['comfyui app', 'comfyui desktop app', 'comfy ui application', 'comfyui download', 'download comfyui', 'comfyui windows', 'comfyui mac', 'comfyui linux', 'comfyui local']}
|
||||
>
|
||||
<CloudBannerSection />
|
||||
<HeroSection client:load />
|
||||
|
||||
@@ -11,7 +11,7 @@ import { t } from '../../i18n/translations'
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title="下载 Comfy 桌面版 — 在您的硬件上运行 AI"
|
||||
title="下载 — Comfy"
|
||||
description={t('download.hero.subtitle', 'zh-CN')}
|
||||
keywords={['comfyui app', 'comfyui desktop app', 'comfyui download', 'ComfyUI 下载', 'ComfyUI 桌面应用', 'ComfyUI 应用', 'ComfyUI Windows', 'ComfyUI macOS', 'ComfyUI Linux']}
|
||||
>
|
||||
|
||||
@@ -2,8 +2,6 @@ import posthog from 'posthog-js'
|
||||
|
||||
import { createPostHogBeforeSend } from '@comfyorg/shared-frontend-utils/piiUtil'
|
||||
|
||||
import type { Platform } from '@/composables/useDownloadUrl'
|
||||
|
||||
const POSTHOG_KEY =
|
||||
import.meta.env.PUBLIC_POSTHOG_KEY ??
|
||||
'phc_iKfK86id4xVYws9LybMje0h44eGtfwFgRPIBehmy8rO'
|
||||
@@ -41,7 +39,7 @@ export function capturePageview() {
|
||||
}
|
||||
}
|
||||
|
||||
export function captureDownloadClick(platform: Platform) {
|
||||
export function captureDownloadClick(platform: string) {
|
||||
if (!initialized) return
|
||||
try {
|
||||
posthog.capture('website:download_button_clicked', { platform })
|
||||
|
||||
@@ -137,8 +137,7 @@ export const TestIds = {
|
||||
colorPickerCurrentColor: 'color-picker-current-color',
|
||||
colorBlue: 'blue',
|
||||
colorRed: 'red',
|
||||
convertSubgraph: 'convert-to-subgraph-button',
|
||||
bypass: 'bypass-button'
|
||||
convertSubgraph: 'convert-to-subgraph-button'
|
||||
},
|
||||
menu: {
|
||||
moreMenuContent: 'more-menu-content'
|
||||
|
||||
@@ -129,18 +129,23 @@ test.describe('Selection Toolbox', { tag: ['@screenshot', '@ui'] }, () => {
|
||||
}) => {
|
||||
// A group + a KSampler node
|
||||
await comfyPage.workflow.loadWorkflow('groups/single_group')
|
||||
const bypass = comfyPage.page.getByTestId(TestIds.selectionToolbox.bypass)
|
||||
|
||||
// Select group + node should show bypass button
|
||||
await comfyPage.canvas.focus()
|
||||
await comfyPage.nodeOps.selectNodes(['KSampler'])
|
||||
await expect(bypass).toBeVisible()
|
||||
await comfyPage.keyboard.delete()
|
||||
await comfyPage.page.keyboard.press('Control+A')
|
||||
await expect(
|
||||
comfyPage.page.locator(
|
||||
'.selection-toolbox *[data-testid="bypass-button"]'
|
||||
)
|
||||
).toBeVisible()
|
||||
|
||||
// (Only empty group is selected) should hide bypass button
|
||||
await comfyPage.keyboard.selectAll()
|
||||
await expect(comfyPage.selectionToolbox).toBeVisible()
|
||||
await expect(bypass).toBeHidden()
|
||||
// Deselect node (Only group is selected) should hide bypass button
|
||||
await comfyPage.nodeOps.selectNodes(['KSampler'])
|
||||
await expect(
|
||||
comfyPage.page.locator(
|
||||
'.selection-toolbox *[data-testid="bypass-button"]'
|
||||
)
|
||||
).toBeHidden()
|
||||
})
|
||||
|
||||
test.describe('Color Picker', () => {
|
||||
|
||||
@@ -3,8 +3,6 @@ import {
|
||||
comfyPageFixture as test
|
||||
} from '@e2e/fixtures/ComfyPage'
|
||||
import type { ComfyPage } from '@e2e/fixtures/ComfyPage'
|
||||
import { TestIds } from '@e2e/fixtures/selectors'
|
||||
import { getGroupTitlePosition } from '@e2e/fixtures/utils/groupHelpers'
|
||||
|
||||
const CREATE_GROUP_HOTKEY = 'Control+g'
|
||||
|
||||
@@ -219,40 +217,4 @@ test.describe('Vue Node Groups', { tag: ['@screenshot', '@vue-nodes'] }, () => {
|
||||
)
|
||||
}).toPass({ timeout: 5000 })
|
||||
})
|
||||
|
||||
test('Bypassing a group bypasses contents', async ({ comfyPage }) => {
|
||||
await comfyPage.settings.setSetting('Comfy.Canvas.SelectionToolbox', true)
|
||||
await comfyPage.keyboard.selectAll()
|
||||
await comfyPage.page.keyboard.press('.')
|
||||
await comfyPage.page.keyboard.press(CREATE_GROUP_HOTKEY)
|
||||
|
||||
const toggleBypass = () =>
|
||||
comfyPage.page.getByTestId(TestIds.selectionToolbox.bypass).click()
|
||||
const bypassCount = () =>
|
||||
comfyPage.page.evaluate(
|
||||
() => graph!.nodes.filter((node) => node.mode === 4).length
|
||||
)
|
||||
expect(await bypassCount()).toBe(0)
|
||||
const groupCount = () => comfyPage.page.evaluate(() => graph!.groups.length)
|
||||
await expect.poll(groupCount, 'create group').toBe(1)
|
||||
|
||||
const ksampler = await comfyPage.vueNodes.getFixtureByTitle('KSampler')
|
||||
await ksampler.select()
|
||||
await toggleBypass()
|
||||
await expect.poll(bypassCount, 'setup bypass of single node').toBe(1)
|
||||
|
||||
const groupPos = await getGroupTitlePosition(comfyPage, 'Group')
|
||||
await comfyPage.page.mouse.click(groupPos.x, groupPos.y)
|
||||
await toggleBypass()
|
||||
await expect.poll(bypassCount, 'all nodes are set to bypassed').toBe(7)
|
||||
await toggleBypass()
|
||||
await expect.poll(bypassCount, 'all nodes are unbypassed').toBe(0)
|
||||
|
||||
await comfyPage.page.keyboard.down('Shift')
|
||||
await ksampler.select()
|
||||
await comfyPage.page.keyboard.up('Shift')
|
||||
|
||||
await toggleBypass()
|
||||
await expect.poll(bypassCount, "won't toggle double selected node").toBe(7)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -101,7 +101,6 @@ const extensionToolboxCommands = computed<ComfyCommandImpl[]>(() => {
|
||||
|
||||
const {
|
||||
hasAnySelection,
|
||||
hasGroupedNodesSelection,
|
||||
hasMultipleSelection,
|
||||
isSingleNode,
|
||||
isSingleSubgraph,
|
||||
@@ -119,10 +118,7 @@ const showSubgraphButtons = computed(() => isSingleSubgraph.value)
|
||||
|
||||
const showBypass = computed(
|
||||
() =>
|
||||
isSingleNode.value ||
|
||||
isSingleSubgraph.value ||
|
||||
hasMultipleSelection.value ||
|
||||
hasGroupedNodesSelection.value
|
||||
isSingleNode.value || isSingleSubgraph.value || hasMultipleSelection.value
|
||||
)
|
||||
const showLoad3DViewer = computed(() => hasAny3DNodeSelected.value)
|
||||
const showMaskEditor = computed(() => isSingleImageNode.value)
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
import { uniq } from 'es-toolkit'
|
||||
|
||||
import type { LGraphNode, Positionable } from '@/lib/litegraph/src/litegraph'
|
||||
import { LGraphEventMode, Reroute } from '@/lib/litegraph/src/litegraph'
|
||||
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
|
||||
import { collectFromNodes } from '@/utils/graphTraversalUtil'
|
||||
import { isLGraphGroup, isLGraphNode } from '@/utils/litegraphUtil'
|
||||
import { isLGraphNode } from '@/utils/litegraphUtil'
|
||||
|
||||
/**
|
||||
* Composable for handling selected LiteGraph items filtering and operations.
|
||||
@@ -73,13 +71,7 @@ export function useSelectedLiteGraphItems() {
|
||||
* the prior null-tolerance for callers wired to early-firing commands.
|
||||
*/
|
||||
const getSelectedNodesShallow = (): LGraphNode[] =>
|
||||
uniq(
|
||||
[...(canvasStore.canvas?.selectedItems ?? [])].flatMap((item) => {
|
||||
if (isLGraphNode(item)) return [item]
|
||||
if (isLGraphGroup(item)) return [...item.children].filter(isLGraphNode)
|
||||
return []
|
||||
})
|
||||
)
|
||||
Array.from(canvasStore.canvas?.selectedItems ?? []).filter(isLGraphNode)
|
||||
|
||||
/**
|
||||
* Get only the selected nodes (LGraphNode instances) from the canvas.
|
||||
|
||||
@@ -7,12 +7,7 @@ import { useSettingStore } from '@/platform/settings/settingStore'
|
||||
import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
|
||||
import { useNodeDefStore } from '@/stores/nodeDefStore'
|
||||
import { useRightSidePanelStore } from '@/stores/workspace/rightSidePanelStore'
|
||||
import {
|
||||
isImageNode,
|
||||
isLGraphGroup,
|
||||
isLGraphNode,
|
||||
isLoad3dNode
|
||||
} from '@/utils/litegraphUtil'
|
||||
import { isImageNode, isLGraphNode, isLoad3dNode } from '@/utils/litegraphUtil'
|
||||
import { filterOutputNodes } from '@/utils/nodeFilterUtil'
|
||||
|
||||
export interface NodeSelectionState {
|
||||
@@ -46,11 +41,6 @@ export function useSelectionState() {
|
||||
const hasAnySelection = computed(() => selectedItems.value.length > 0)
|
||||
const hasSingleSelection = computed(() => selectedItems.value.length === 1)
|
||||
const hasMultipleSelection = computed(() => selectedItems.value.length > 1)
|
||||
const hasGroupedNodesSelection = computed(() =>
|
||||
selectedItems.value.some(
|
||||
(item) => isLGraphGroup(item) && [...item.children].some(isLGraphNode)
|
||||
)
|
||||
)
|
||||
|
||||
const isSingleNode = computed(
|
||||
() => hasSingleSelection.value && isLGraphNode(selectedItems.value[0])
|
||||
@@ -122,7 +112,6 @@ export function useSelectionState() {
|
||||
openNodeInfo,
|
||||
hasAny3DNodeSelected,
|
||||
hasAnySelection,
|
||||
hasGroupedNodesSelection,
|
||||
hasSingleSelection,
|
||||
hasMultipleSelection,
|
||||
isSingleNode,
|
||||
|
||||
@@ -147,8 +147,7 @@ describe('OAuthConsentView', () => {
|
||||
oauthRequestId: '550e8400-e29b-41d4-a716-446655440000',
|
||||
csrfToken: 'csrf-token',
|
||||
decision: 'allow',
|
||||
workspaceId: 'personal-workspace',
|
||||
expectedRedirectUri: 'http://127.0.0.1:50632/cb'
|
||||
workspaceId: 'personal-workspace'
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
@@ -283,8 +283,7 @@ async function submit(decision: 'allow' | 'deny') {
|
||||
oauthRequestId: challenge.value.oauth_request_id,
|
||||
csrfToken: challenge.value.csrf_token,
|
||||
decision,
|
||||
workspaceId,
|
||||
expectedRedirectUri: challenge.value.redirect_uri
|
||||
workspaceId
|
||||
})
|
||||
clearOAuthRequestId()
|
||||
} catch (error) {
|
||||
|
||||
@@ -220,111 +220,6 @@ describe('submitOAuthConsentDecision', () => {
|
||||
).rejects.toThrow('redirect_url')
|
||||
})
|
||||
|
||||
it('navigates to a reverse-DNS custom-scheme redirect_url (native clients)', async () => {
|
||||
// RFC 8252 native-app callback — the comfy-ios client returns the
|
||||
// authorization code via org.comfy.ios://oauth-callback. The backend
|
||||
// has already validated the URL byte-identically against the client's
|
||||
// registered redirect_uris.
|
||||
vi.spyOn(globalThis, 'fetch').mockResolvedValue(
|
||||
okResponse({
|
||||
redirect_url: 'org.comfy.ios://oauth-callback?code=xyz&state=s'
|
||||
})
|
||||
)
|
||||
const originalLocation = globalThis.location
|
||||
const hrefSetter = vi.fn()
|
||||
Object.defineProperty(globalThis, 'location', {
|
||||
configurable: true,
|
||||
value: new Proxy(originalLocation, {
|
||||
set(_target, prop, value) {
|
||||
if (prop === 'href') {
|
||||
hrefSetter(value)
|
||||
return true
|
||||
}
|
||||
return Reflect.set(originalLocation, prop, value)
|
||||
},
|
||||
get(_target, prop) {
|
||||
return Reflect.get(originalLocation, prop)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
try {
|
||||
await submitOAuthConsentDecision({
|
||||
oauthRequestId: validChallenge.oauth_request_id,
|
||||
csrfToken: validChallenge.csrf_token,
|
||||
decision: 'allow',
|
||||
workspaceId: 'personal-workspace',
|
||||
expectedRedirectUri: 'org.comfy.ios://oauth-callback'
|
||||
})
|
||||
|
||||
expect(hrefSetter).toHaveBeenCalledWith(
|
||||
'org.comfy.ios://oauth-callback?code=xyz&state=s'
|
||||
)
|
||||
expect(hrefSetter).toHaveBeenCalledTimes(1)
|
||||
} finally {
|
||||
Object.defineProperty(globalThis, 'location', {
|
||||
configurable: true,
|
||||
value: originalLocation
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
it.for([
|
||||
[
|
||||
'org.comfy.ios://oauth-callback?code=xyz',
|
||||
undefined,
|
||||
'unsafe scheme',
|
||||
'custom scheme with no expectedRedirectUri is unbindable, falls back to the http(s)-only rule'
|
||||
],
|
||||
[
|
||||
'com.evil.app://oauth-callback?code=xyz',
|
||||
'org.comfy.ios://oauth-callback',
|
||||
'does not match',
|
||||
'bound challenge, different scheme: wrong-client redirect'
|
||||
],
|
||||
[
|
||||
'org.comfy.ios://oauth-callback/../steal?code=xyz',
|
||||
'org.comfy.ios://oauth-callback',
|
||||
'does not match',
|
||||
'bound challenge, same scheme but different path'
|
||||
],
|
||||
[
|
||||
'javascript:alert(1)',
|
||||
'javascript:alert(1)',
|
||||
'unsafe scheme',
|
||||
'executable schemes are rejected even if the challenge claims them'
|
||||
],
|
||||
[
|
||||
'data:text/html,<script>alert(1)</script>',
|
||||
'data:text/html,x',
|
||||
'unsafe scheme',
|
||||
'data: scheme rejected even if the challenge claims it'
|
||||
],
|
||||
[
|
||||
'blob:https://cloud.comfy.org/abc',
|
||||
undefined,
|
||||
'unsafe scheme',
|
||||
'blob: scheme is unsafe'
|
||||
]
|
||||
] as const)(
|
||||
'rejects redirect_url %s (registration %s, expects %s): %s',
|
||||
async ([redirectUrl, expectedRedirectUri, expectedError]) => {
|
||||
vi.spyOn(globalThis, 'fetch').mockResolvedValue(
|
||||
okResponse({ redirect_url: redirectUrl })
|
||||
)
|
||||
|
||||
await expect(
|
||||
submitOAuthConsentDecision({
|
||||
oauthRequestId: validChallenge.oauth_request_id,
|
||||
csrfToken: validChallenge.csrf_token,
|
||||
decision: 'allow',
|
||||
workspaceId: 'personal-workspace',
|
||||
expectedRedirectUri
|
||||
})
|
||||
).rejects.toThrow(expectedError)
|
||||
}
|
||||
)
|
||||
|
||||
it('rejects an unsafe redirect_url scheme', async () => {
|
||||
// Defense in depth: even though the cloud backend is trusted, never
|
||||
// hand the browser off to a non-http(s) URL.
|
||||
|
||||
@@ -40,33 +40,12 @@ export type OAuthConsentDecisionParams = {
|
||||
csrfToken: string
|
||||
decision: 'allow' | 'deny'
|
||||
workspaceId: string
|
||||
/**
|
||||
* The challenge's registered `redirect_uri`. When present, the
|
||||
* post-consent navigation must match it (scheme, authority, path) —
|
||||
* the server only appends `code`/`state` query params to the
|
||||
* registered URI, so any other destination is rejected. When absent
|
||||
* (challenges from backends that don't surface it yet), only http(s)
|
||||
* redirects are navigable.
|
||||
*/
|
||||
expectedRedirectUri?: string
|
||||
}
|
||||
|
||||
export type OAuthConsentDecision = (
|
||||
params: OAuthConsentDecisionParams
|
||||
) => Promise<void>
|
||||
|
||||
// Schemes that execute in our origin if navigated. Never navigable,
|
||||
// regardless of what the backend returns. Everything else is governed
|
||||
// by binding to the challenge's registered redirect_uri — no per-client
|
||||
// scheme knowledge lives in the frontend.
|
||||
const EXECUTABLE_SCHEMES: ReadonlySet<string> = new Set([
|
||||
'javascript:',
|
||||
'data:',
|
||||
'blob:',
|
||||
'vbscript:',
|
||||
'about:'
|
||||
])
|
||||
|
||||
export class OAuthApiError extends Error {
|
||||
constructor(
|
||||
message: string,
|
||||
@@ -139,8 +118,7 @@ export async function submitOAuthConsentDecision({
|
||||
oauthRequestId,
|
||||
csrfToken,
|
||||
decision,
|
||||
workspaceId,
|
||||
expectedRedirectUri
|
||||
workspaceId
|
||||
}: OAuthConsentDecisionParams): Promise<void> {
|
||||
const response = await fetch('/oauth/authorize', {
|
||||
method: 'POST',
|
||||
@@ -166,56 +144,13 @@ export async function submitOAuthConsentDecision({
|
||||
throw new Error('OAuth consent response did not include redirect_url')
|
||||
}
|
||||
|
||||
// Defense in depth at this sink. Two risks: schemes that execute in our
|
||||
// origin (always rejected, below), and the OS routing the authorization
|
||||
// code + state to whichever installed app claims an arbitrary custom
|
||||
// scheme. For the latter we hold the navigation to the redirect the
|
||||
// backend registered for THIS auth request (the challenge's
|
||||
// redirect_uri): the server only ever appends code/state query params
|
||||
// to the registered URI, so scheme, authority, and path must match
|
||||
// exactly. No per-client scheme list lives in the frontend — new native
|
||||
// clients need only their backend registration.
|
||||
const parseTarget = () => {
|
||||
try {
|
||||
return new URL(redirectUrl, globalThis.location.origin)
|
||||
} catch (err) {
|
||||
throw new Error('OAuth consent redirect_url is not a valid URL', {
|
||||
cause: err
|
||||
})
|
||||
}
|
||||
}
|
||||
const target = parseTarget()
|
||||
if (EXECUTABLE_SCHEMES.has(target.protocol)) {
|
||||
throw new Error('OAuth consent redirect_url has an unsafe scheme')
|
||||
}
|
||||
if (expectedRedirectUri) {
|
||||
const parseExpected = () => {
|
||||
try {
|
||||
return new URL(expectedRedirectUri)
|
||||
} catch (err) {
|
||||
throw new Error(
|
||||
'OAuth consent challenge redirect_uri is not a valid URL',
|
||||
{ cause: err }
|
||||
)
|
||||
}
|
||||
}
|
||||
const expected = parseExpected()
|
||||
const matchesRegistration =
|
||||
target.protocol === expected.protocol &&
|
||||
target.host === expected.host &&
|
||||
target.pathname === expected.pathname
|
||||
if (!matchesRegistration) {
|
||||
throw new Error(
|
||||
'OAuth consent redirect_url does not match the registered redirect_uri'
|
||||
)
|
||||
}
|
||||
} else if (target.protocol !== 'http:' && target.protocol !== 'https:') {
|
||||
// Challenges that don't surface redirect_uri can't be bound; hold the
|
||||
// pre-existing http(s)-only line for them.
|
||||
// Defense in depth: even though the cloud backend is trusted, never hand
|
||||
// the browser off to a non-http(s) scheme. javascript:/data: URLs would
|
||||
// execute in our origin.
|
||||
const target = new URL(redirectUrl, globalThis.location.origin)
|
||||
if (target.protocol !== 'http:' && target.protocol !== 'https:') {
|
||||
throw new Error('OAuth consent redirect_url has an unsafe scheme')
|
||||
}
|
||||
|
||||
// Navigate the parsed URL, not the raw string, so the value validated
|
||||
// above is byte-for-byte the value the browser receives.
|
||||
globalThis.location.href = target.href
|
||||
globalThis.location.href = redirectUrl
|
||||
}
|
||||
|
||||