From af5c071394ce874ab9368207a67d24090e828eed Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Sat, 15 Aug 2026 03:36:03 +0000 Subject: [PATCH 1/3] fix: show Appwrite icon for CLI OAuth consent avatars The first-party appwrite-cli client registers a wide wordmark as logoUri. Consent/outcome avatars use a square crop, so object-fit:cover left an unreadable fragment that looked like a missing logo (#3159). Prefer the square mark for that client and contain-fit other logos in the avatar. Co-authored-by: chiragaggarwal5k --- src/lib/helpers/oauth2-app-logo.test.ts | 27 +++++++++++++++++++ src/lib/helpers/oauth2-app-logo.ts | 18 +++++++++++++ .../(public)/oauth2/consent-card.svelte | 14 +++++++--- .../(public)/oauth2/outcome-card.svelte | 14 +++++++--- 4 files changed, 67 insertions(+), 6 deletions(-) create mode 100644 src/lib/helpers/oauth2-app-logo.test.ts create mode 100644 src/lib/helpers/oauth2-app-logo.ts diff --git a/src/lib/helpers/oauth2-app-logo.test.ts b/src/lib/helpers/oauth2-app-logo.test.ts new file mode 100644 index 0000000000..1ab56b2c05 --- /dev/null +++ b/src/lib/helpers/oauth2-app-logo.test.ts @@ -0,0 +1,27 @@ +import { describe, expect, it } from 'vitest'; +import { resolveOAuth2AppLogoUrl } from './oauth2-app-logo'; + +describe('resolveOAuth2AppLogoUrl', () => { + it('uses the square Appwrite icon for the first-party CLI client', () => { + expect( + resolveOAuth2AppLogoUrl({ + $id: 'appwrite-cli', + logoUri: 'https://example.com/wordmark.svg' + }) + ).toBe('/console/logos/appwrite-icon.svg'); + }); + + it('keeps third-party logoUri values', () => { + expect( + resolveOAuth2AppLogoUrl({ + $id: 'other-app', + logoUri: 'https://example.com/logo.png' + }) + ).toBe('https://example.com/logo.png'); + }); + + it('returns an empty string when no logo is available', () => { + expect(resolveOAuth2AppLogoUrl({ $id: 'other-app', logoUri: ' ' })).toBe(''); + expect(resolveOAuth2AppLogoUrl(null)).toBe(''); + }); +}); diff --git a/src/lib/helpers/oauth2-app-logo.ts b/src/lib/helpers/oauth2-app-logo.ts new file mode 100644 index 0000000000..3235ec749f --- /dev/null +++ b/src/lib/helpers/oauth2-app-logo.ts @@ -0,0 +1,18 @@ +import { base } from '$app/paths'; + +/** + * First-party clients may register a wide wordmark as `logoUri`. Consent and + * outcome avatars are square, so `object-fit: cover` crops those marks into + * unreadable fragments (see #3159 for Appwrite CLI). Prefer the square icon. + */ +const FIRST_PARTY_ICON_CLIENTS = new Set(['appwrite-cli']); + +export function resolveOAuth2AppLogoUrl( + app: { $id?: string; logoUri?: string } | null | undefined +): string { + if (app?.$id && FIRST_PARTY_ICON_CLIENTS.has(app.$id)) { + return `${base}/logos/appwrite-icon.svg`; + } + + return app?.logoUri?.trim() ?? ''; +} diff --git a/src/routes/(public)/oauth2/consent-card.svelte b/src/routes/(public)/oauth2/consent-card.svelte index 68018bb108..583e2a8c07 100644 --- a/src/routes/(public)/oauth2/consent-card.svelte +++ b/src/routes/(public)/oauth2/consent-card.svelte @@ -48,6 +48,7 @@ type ResourcePage, type ResourceNameMap } from '$lib/helpers/oauth2-authorization-details'; + import { resolveOAuth2AppLogoUrl } from '$lib/helpers/oauth2-app-logo'; import ResourceSelector from './resource-selector.svelte'; export type OAuth2Flow = 'authorization' | 'device'; @@ -110,6 +111,7 @@ ); const redirectHost = $derived(hostnameOf(grant.redirectUri)); + const appLogoUrl = $derived(resolveOAuth2AppLogoUrl(app)); const appInitial = $derived((app.name || '?').charAt(0).toUpperCase()); const accountInitial = $derived((accountLabel || '?').charAt(0).toUpperCase()); @@ -493,8 +495,8 @@
- {#if app.logoUri} - {app.name} + {#if appLogoUrl} + {app.name} {:else}
{appInitial}
{/if} @@ -902,12 +904,18 @@ width: 3.5rem; height: 3.5rem; border-radius: var(--border-radius-l, 0.85rem); - object-fit: cover; flex-shrink: 0; border: 1px solid var(--border-neutral-strong); background: var(--bgcolor-neutral-primary); } + /* Keep wordmarks readable inside the square avatar (cover crops them). */ + img.avatar { + object-fit: contain; + padding: 0.4rem; + box-sizing: border-box; + } + .avatar.placeholder { display: flex; align-items: center; diff --git a/src/routes/(public)/oauth2/outcome-card.svelte b/src/routes/(public)/oauth2/outcome-card.svelte index bd6347cf31..986fcf03bc 100644 --- a/src/routes/(public)/oauth2/outcome-card.svelte +++ b/src/routes/(public)/oauth2/outcome-card.svelte @@ -3,6 +3,7 @@ import { Card, Typography, Icon } from '@appwrite.io/pink-svelte'; import { IconCheck, IconX, IconLockClosed } from '@appwrite.io/pink-icons-svelte'; import { Button } from '$lib/elements/forms'; + import { resolveOAuth2AppLogoUrl } from '$lib/helpers/oauth2-app-logo'; import type { OAuth2Flow, OAuth2Outcome } from './consent-card.svelte'; interface Props { @@ -28,6 +29,7 @@ const approved = $derived(outcome === 'approved'); const appName = $derived(app?.name ?? 'the application'); + const appLogoUrl = $derived(resolveOAuth2AppLogoUrl(app)); const appInitial = $derived((app?.name || '?').charAt(0).toUpperCase()); const accountInitial = $derived((accountLabel || '?').charAt(0).toUpperCase()); @@ -53,8 +55,8 @@
- {#if app?.logoUri} - {appName} + {#if appLogoUrl} + {appName} {:else}
{appInitial}
{/if} @@ -158,12 +160,18 @@ width: 3.5rem; height: 3.5rem; border-radius: var(--border-radius-l, 0.85rem); - object-fit: cover; flex-shrink: 0; border: 1px solid var(--border-neutral-strong); background: var(--bgcolor-neutral-primary); } + /* Keep wordmarks readable inside the square avatar (cover crops them). */ + img.avatar { + object-fit: contain; + padding: 0.4rem; + box-sizing: border-box; + } + .avatar.placeholder { display: flex; align-items: center; From d04986097516db02c96e3571f51b2c727bbb6b9e Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Mon, 17 Aug 2026 09:20:25 +0530 Subject: [PATCH 2/3] Fix the cropped logo with CSS instead of a client-ID override The avatar used object-fit: cover, which crops a wide wordmark into an unreadable fragment. Switching to contain fixes that for every client, so the appwrite-cli special case and its resolver helper are unnecessary. Hardcoding the CLI's client ID in the console was also the wrong layer: logoUri is server-owned app-registry data, so a square mark belongs in the registration upstream. Worse, app IDs are user-supplied, so anyone able to create an OAuth app on a self-hosted instance could claim `appwrite-cli` and render official Appwrite branding on a consent screen. The helper's trim/?? '' normalization was dead too: the {#if} already covered empty and undefined, and cimdDocumentToApp gates logoUri through HTTP_URL before it ever reaches the template. Fold the rule into .avatar rather than a separate img.avatar block. Every other .avatar is a flex-centered div, so object-fit is inert there and the padding stays harmless. --- src/lib/helpers/oauth2-app-logo.test.ts | 27 ------------------- src/lib/helpers/oauth2-app-logo.ts | 18 ------------- .../(public)/oauth2/consent-card.svelte | 11 +++----- .../(public)/oauth2/outcome-card.svelte | 11 +++----- 4 files changed, 6 insertions(+), 61 deletions(-) delete mode 100644 src/lib/helpers/oauth2-app-logo.test.ts delete mode 100644 src/lib/helpers/oauth2-app-logo.ts diff --git a/src/lib/helpers/oauth2-app-logo.test.ts b/src/lib/helpers/oauth2-app-logo.test.ts deleted file mode 100644 index 1ab56b2c05..0000000000 --- a/src/lib/helpers/oauth2-app-logo.test.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { describe, expect, it } from 'vitest'; -import { resolveOAuth2AppLogoUrl } from './oauth2-app-logo'; - -describe('resolveOAuth2AppLogoUrl', () => { - it('uses the square Appwrite icon for the first-party CLI client', () => { - expect( - resolveOAuth2AppLogoUrl({ - $id: 'appwrite-cli', - logoUri: 'https://example.com/wordmark.svg' - }) - ).toBe('/console/logos/appwrite-icon.svg'); - }); - - it('keeps third-party logoUri values', () => { - expect( - resolveOAuth2AppLogoUrl({ - $id: 'other-app', - logoUri: 'https://example.com/logo.png' - }) - ).toBe('https://example.com/logo.png'); - }); - - it('returns an empty string when no logo is available', () => { - expect(resolveOAuth2AppLogoUrl({ $id: 'other-app', logoUri: ' ' })).toBe(''); - expect(resolveOAuth2AppLogoUrl(null)).toBe(''); - }); -}); diff --git a/src/lib/helpers/oauth2-app-logo.ts b/src/lib/helpers/oauth2-app-logo.ts deleted file mode 100644 index 3235ec749f..0000000000 --- a/src/lib/helpers/oauth2-app-logo.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { base } from '$app/paths'; - -/** - * First-party clients may register a wide wordmark as `logoUri`. Consent and - * outcome avatars are square, so `object-fit: cover` crops those marks into - * unreadable fragments (see #3159 for Appwrite CLI). Prefer the square icon. - */ -const FIRST_PARTY_ICON_CLIENTS = new Set(['appwrite-cli']); - -export function resolveOAuth2AppLogoUrl( - app: { $id?: string; logoUri?: string } | null | undefined -): string { - if (app?.$id && FIRST_PARTY_ICON_CLIENTS.has(app.$id)) { - return `${base}/logos/appwrite-icon.svg`; - } - - return app?.logoUri?.trim() ?? ''; -} diff --git a/src/routes/(public)/oauth2/consent-card.svelte b/src/routes/(public)/oauth2/consent-card.svelte index 583e2a8c07..b609dba95a 100644 --- a/src/routes/(public)/oauth2/consent-card.svelte +++ b/src/routes/(public)/oauth2/consent-card.svelte @@ -48,7 +48,6 @@ type ResourcePage, type ResourceNameMap } from '$lib/helpers/oauth2-authorization-details'; - import { resolveOAuth2AppLogoUrl } from '$lib/helpers/oauth2-app-logo'; import ResourceSelector from './resource-selector.svelte'; export type OAuth2Flow = 'authorization' | 'device'; @@ -111,7 +110,6 @@ ); const redirectHost = $derived(hostnameOf(grant.redirectUri)); - const appLogoUrl = $derived(resolveOAuth2AppLogoUrl(app)); const appInitial = $derived((app.name || '?').charAt(0).toUpperCase()); const accountInitial = $derived((accountLabel || '?').charAt(0).toUpperCase()); @@ -495,8 +493,8 @@
- {#if appLogoUrl} - {app.name} + {#if app.logoUri} + {app.name} {:else}
{appInitial}
{/if} @@ -907,10 +905,7 @@ flex-shrink: 0; border: 1px solid var(--border-neutral-strong); background: var(--bgcolor-neutral-primary); - } - - /* Keep wordmarks readable inside the square avatar (cover crops them). */ - img.avatar { + /* Wide wordmarks are common as logoUri; cover would crop them. */ object-fit: contain; padding: 0.4rem; box-sizing: border-box; diff --git a/src/routes/(public)/oauth2/outcome-card.svelte b/src/routes/(public)/oauth2/outcome-card.svelte index 986fcf03bc..fb59414955 100644 --- a/src/routes/(public)/oauth2/outcome-card.svelte +++ b/src/routes/(public)/oauth2/outcome-card.svelte @@ -3,7 +3,6 @@ import { Card, Typography, Icon } from '@appwrite.io/pink-svelte'; import { IconCheck, IconX, IconLockClosed } from '@appwrite.io/pink-icons-svelte'; import { Button } from '$lib/elements/forms'; - import { resolveOAuth2AppLogoUrl } from '$lib/helpers/oauth2-app-logo'; import type { OAuth2Flow, OAuth2Outcome } from './consent-card.svelte'; interface Props { @@ -29,7 +28,6 @@ const approved = $derived(outcome === 'approved'); const appName = $derived(app?.name ?? 'the application'); - const appLogoUrl = $derived(resolveOAuth2AppLogoUrl(app)); const appInitial = $derived((app?.name || '?').charAt(0).toUpperCase()); const accountInitial = $derived((accountLabel || '?').charAt(0).toUpperCase()); @@ -55,8 +53,8 @@
- {#if appLogoUrl} - {appName} + {#if app?.logoUri} + {appName} {:else}
{appInitial}
{/if} @@ -163,10 +161,7 @@ flex-shrink: 0; border: 1px solid var(--border-neutral-strong); background: var(--bgcolor-neutral-primary); - } - - /* Keep wordmarks readable inside the square avatar (cover crops them). */ - img.avatar { + /* Wide wordmarks are common as logoUri; cover would crop them. */ object-fit: contain; padding: 0.4rem; box-sizing: border-box; From bc7855a9ce6f83148f0f0ea2675685fa5c6c1908 Mon Sep 17 00:00:00 2001 From: harsh mahajan Date: Mon, 17 Aug 2026 09:22:59 +0530 Subject: [PATCH 3/3] Revert "Fix the cropped logo with CSS instead of a client-ID override" This reverts commit d04986097516db02c96e3571f51b2c727bbb6b9e. --- src/lib/helpers/oauth2-app-logo.test.ts | 27 +++++++++++++++++++ src/lib/helpers/oauth2-app-logo.ts | 18 +++++++++++++ .../(public)/oauth2/consent-card.svelte | 11 +++++--- .../(public)/oauth2/outcome-card.svelte | 11 +++++--- 4 files changed, 61 insertions(+), 6 deletions(-) create mode 100644 src/lib/helpers/oauth2-app-logo.test.ts create mode 100644 src/lib/helpers/oauth2-app-logo.ts diff --git a/src/lib/helpers/oauth2-app-logo.test.ts b/src/lib/helpers/oauth2-app-logo.test.ts new file mode 100644 index 0000000000..1ab56b2c05 --- /dev/null +++ b/src/lib/helpers/oauth2-app-logo.test.ts @@ -0,0 +1,27 @@ +import { describe, expect, it } from 'vitest'; +import { resolveOAuth2AppLogoUrl } from './oauth2-app-logo'; + +describe('resolveOAuth2AppLogoUrl', () => { + it('uses the square Appwrite icon for the first-party CLI client', () => { + expect( + resolveOAuth2AppLogoUrl({ + $id: 'appwrite-cli', + logoUri: 'https://example.com/wordmark.svg' + }) + ).toBe('/console/logos/appwrite-icon.svg'); + }); + + it('keeps third-party logoUri values', () => { + expect( + resolveOAuth2AppLogoUrl({ + $id: 'other-app', + logoUri: 'https://example.com/logo.png' + }) + ).toBe('https://example.com/logo.png'); + }); + + it('returns an empty string when no logo is available', () => { + expect(resolveOAuth2AppLogoUrl({ $id: 'other-app', logoUri: ' ' })).toBe(''); + expect(resolveOAuth2AppLogoUrl(null)).toBe(''); + }); +}); diff --git a/src/lib/helpers/oauth2-app-logo.ts b/src/lib/helpers/oauth2-app-logo.ts new file mode 100644 index 0000000000..3235ec749f --- /dev/null +++ b/src/lib/helpers/oauth2-app-logo.ts @@ -0,0 +1,18 @@ +import { base } from '$app/paths'; + +/** + * First-party clients may register a wide wordmark as `logoUri`. Consent and + * outcome avatars are square, so `object-fit: cover` crops those marks into + * unreadable fragments (see #3159 for Appwrite CLI). Prefer the square icon. + */ +const FIRST_PARTY_ICON_CLIENTS = new Set(['appwrite-cli']); + +export function resolveOAuth2AppLogoUrl( + app: { $id?: string; logoUri?: string } | null | undefined +): string { + if (app?.$id && FIRST_PARTY_ICON_CLIENTS.has(app.$id)) { + return `${base}/logos/appwrite-icon.svg`; + } + + return app?.logoUri?.trim() ?? ''; +} diff --git a/src/routes/(public)/oauth2/consent-card.svelte b/src/routes/(public)/oauth2/consent-card.svelte index b609dba95a..583e2a8c07 100644 --- a/src/routes/(public)/oauth2/consent-card.svelte +++ b/src/routes/(public)/oauth2/consent-card.svelte @@ -48,6 +48,7 @@ type ResourcePage, type ResourceNameMap } from '$lib/helpers/oauth2-authorization-details'; + import { resolveOAuth2AppLogoUrl } from '$lib/helpers/oauth2-app-logo'; import ResourceSelector from './resource-selector.svelte'; export type OAuth2Flow = 'authorization' | 'device'; @@ -110,6 +111,7 @@ ); const redirectHost = $derived(hostnameOf(grant.redirectUri)); + const appLogoUrl = $derived(resolveOAuth2AppLogoUrl(app)); const appInitial = $derived((app.name || '?').charAt(0).toUpperCase()); const accountInitial = $derived((accountLabel || '?').charAt(0).toUpperCase()); @@ -493,8 +495,8 @@
- {#if app.logoUri} - {app.name} + {#if appLogoUrl} + {app.name} {:else}
{appInitial}
{/if} @@ -905,7 +907,10 @@ flex-shrink: 0; border: 1px solid var(--border-neutral-strong); background: var(--bgcolor-neutral-primary); - /* Wide wordmarks are common as logoUri; cover would crop them. */ + } + + /* Keep wordmarks readable inside the square avatar (cover crops them). */ + img.avatar { object-fit: contain; padding: 0.4rem; box-sizing: border-box; diff --git a/src/routes/(public)/oauth2/outcome-card.svelte b/src/routes/(public)/oauth2/outcome-card.svelte index fb59414955..986fcf03bc 100644 --- a/src/routes/(public)/oauth2/outcome-card.svelte +++ b/src/routes/(public)/oauth2/outcome-card.svelte @@ -3,6 +3,7 @@ import { Card, Typography, Icon } from '@appwrite.io/pink-svelte'; import { IconCheck, IconX, IconLockClosed } from '@appwrite.io/pink-icons-svelte'; import { Button } from '$lib/elements/forms'; + import { resolveOAuth2AppLogoUrl } from '$lib/helpers/oauth2-app-logo'; import type { OAuth2Flow, OAuth2Outcome } from './consent-card.svelte'; interface Props { @@ -28,6 +29,7 @@ const approved = $derived(outcome === 'approved'); const appName = $derived(app?.name ?? 'the application'); + const appLogoUrl = $derived(resolveOAuth2AppLogoUrl(app)); const appInitial = $derived((app?.name || '?').charAt(0).toUpperCase()); const accountInitial = $derived((accountLabel || '?').charAt(0).toUpperCase()); @@ -53,8 +55,8 @@
- {#if app?.logoUri} - {appName} + {#if appLogoUrl} + {appName} {:else}
{appInitial}
{/if} @@ -161,7 +163,10 @@ flex-shrink: 0; border: 1px solid var(--border-neutral-strong); background: var(--bgcolor-neutral-primary); - /* Wide wordmarks are common as logoUri; cover would crop them. */ + } + + /* Keep wordmarks readable inside the square avatar (cover crops them). */ + img.avatar { object-fit: contain; padding: 0.4rem; box-sizing: border-box;