diff --git a/src/Schuly.Frontend/public/providers/odaorg.webp b/src/Schuly.Frontend/public/providers/odaorg.webp new file mode 100644 index 00000000..b7f44ff7 Binary files /dev/null and b/src/Schuly.Frontend/public/providers/odaorg.webp differ diff --git a/src/Schuly.Frontend/public/providers/schulnetz.webp b/src/Schuly.Frontend/public/providers/schulnetz.webp new file mode 100644 index 00000000..ba139390 Binary files /dev/null and b/src/Schuly.Frontend/public/providers/schulnetz.webp differ diff --git a/src/Schuly.Frontend/src/app/pages/settings/accounts-card.ts b/src/Schuly.Frontend/src/app/pages/settings/accounts-card.ts index 2c42e1ad..4789c466 100644 --- a/src/Schuly.Frontend/src/app/pages/settings/accounts-card.ts +++ b/src/Schuly.Frontend/src/app/pages/settings/accounts-card.ts @@ -61,7 +61,7 @@ const STATUS: Record
- +

{{ group.name }}

@if (group.provider?.description; as description) { diff --git a/src/Schuly.Frontend/src/app/pages/settings/link-dialog.ts b/src/Schuly.Frontend/src/app/pages/settings/link-dialog.ts index b8ee5b88..6d8dd28a 100644 --- a/src/Schuly.Frontend/src/app/pages/settings/link-dialog.ts +++ b/src/Schuly.Frontend/src/app/pages/settings/link-dialog.ts @@ -104,7 +104,7 @@ type Mode = { kind: 'add' } | { kind: 'reauth'; account: LinkedAccountDto }; [attr.data-autofocus]="$first ? '' : null" (click)="pick(provider)" > - + {{ provider.displayName }} @if (provider.description) { diff --git a/src/Schuly.Frontend/src/app/shared/provider-icon.ts b/src/Schuly.Frontend/src/app/shared/provider-icon.ts index ed9f6235..13f4c741 100644 --- a/src/Schuly.Frontend/src/app/shared/provider-icon.ts +++ b/src/Schuly.Frontend/src/app/shared/provider-icon.ts @@ -3,6 +3,13 @@ import { NgIcon, provideIcons } from '@ng-icons/core'; import { LinkIconDto } from '../core/linking-api'; import { providerIconName, providerIcons } from '../core/provider-icons'; +/** The real logos of the built-in providers, the same ones the app bundles. */ +const bundledLogos: Record = { + schulnetz: '/providers/schulnetz.webp', + odaorg: '/providers/odaorg.webp', + microsoft: '/sso-icons/microsoft.svg', +}; + /** A provider's icon: its Lucide name through ng-icons, or the host-served sanitized SVG through an img. Always decorative: the name is printed beside it. */ @Component({ selector: 'app-provider-icon', @@ -19,6 +26,9 @@ import { providerIconName, providerIcons } from '../core/provider-icons'; }) export class ProviderIcon { readonly icon = input(null); - protected readonly svgUrl = computed(() => this.icon()?.svgUrl || null); + readonly providerId = input(null); + protected readonly svgUrl = computed( + () => bundledLogos[this.providerId() ?? ''] ?? (this.icon()?.svgUrl || null), + ); protected readonly name = computed(() => providerIconName(this.icon()?.lucide)); }