fix(home): show only configured OAuth providers in intro copy
All checks were successful
Deploy to production / deploy (push) Successful in 2m3s
All checks were successful
Deploy to production / deploy (push) Successful in 2m3s
This commit is contained in:
@@ -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();
|
||||||
},
|
},
|
||||||
|
|||||||
Reference in New Issue
Block a user