fix(home): show only configured OAuth providers in intro copy
All checks were successful
Deploy to production / deploy (push) Successful in 2m3s

This commit is contained in:
Torsten Schulz (local)
2026-05-15 16:05:08 +02:00
parent bab326247b
commit e87ed85867

View File

@@ -62,7 +62,7 @@
<div class="oauth-section" v-if="oauthProviders.length"> <div class="oauth-section" v-if="oauthProviders.length">
<div class="oauth-section__header"> <div class="oauth-section__header">
<span class="panel-kicker">Externe Konten</span> <span class="panel-kicker">Externe Konten</span>
<p class="oauth-section__text">Google, Microsoft, Keycloak, ORY oder ZITADEL nutzen.</p> <p class="oauth-section__text">{{ formattedOAuthProviders }}</p>
</div> </div>
<div class="oauth-provider-list"> <div class="oauth-provider-list">
<button <button
@@ -230,6 +230,23 @@ export default {
} }
} }
}, },
computed: {
formattedOAuthProviders() {
if (!this.oauthProviders || !this.oauthProviders.length) return '';
try {
const labels = this.oauthProviders.map(p => p.label);
if (typeof Intl !== 'undefined' && Intl.ListFormat) {
const lf = new Intl.ListFormat(this.$i18n?.locale || 'de', { style: 'long', type: 'conjunction' });
return lf.format(labels);
}
if (labels.length === 1) return labels[0];
if (labels.length === 2) return `${labels[0]} oder ${labels[1]}`;
return `${labels.slice(0, -1).join(', ')} oder ${labels[labels.length - 1]}`;
} catch (_) {
return this.oauthProviders.map(p => p.label).join(', ');
}
}
},
async created() { async created() {
await this.loadOAuthProviders(); await this.loadOAuthProviders();
}, },