diff --git a/web/src/flows/stages/identification/IdentificationStage.ts b/web/src/flows/stages/identification/IdentificationStage.ts
index b5f7136cc..873547905 100644
--- a/web/src/flows/stages/identification/IdentificationStage.ts
+++ b/web/src/flows/stages/identification/IdentificationStage.ts
@@ -21,6 +21,14 @@ export const PasswordManagerPrefill: {
totp: undefined,
};
+declare module "Intl" {
+ class ListFormat {
+ constructor(locale: string, args: { [key: string]: string });
+ public format: (items: string[]) => string;
+ }
+}
+
+export const OR_LIST_FORMATTERS = new Intl.ListFormat("default", { style: "short", type: "disjunction" });
@customElement("ak-stage-identification")
export class IdentificationStage extends BaseStage {
@@ -142,26 +150,23 @@ export class IdentificationStage extends BaseStage
${t`Select one of the sources below to login.`}
`;
}
- const fields = this.challenge?.userFields || [];
+ const fields = (this.challenge?.userFields || []).sort();
+ // Check if the field should be *only* email to set the input type
if (fields.includes(UserFieldsEnum.Email) && fields.length === 1) {
- label = t`Email`;
type = "email";
- } else if (fields.includes(UserFieldsEnum.Username) && fields.length === 1) {
- label = t`Username`;
- } else if (fields.includes(UserFieldsEnum.Upn) && fields.length === 1) {
- label = t`UPN`;
- } else if (fields.includes(UserFieldsEnum.Email) && fields.includes(UserFieldsEnum.Username) && fields.length === 2) {
- label = t`Email or username`;
- } else {
- label = t`Email, UPN or username`;
}
+ const uiFields: { [key: string]: string } = {
+ [UserFieldsEnum.Username]: t`Username`,
+ [UserFieldsEnum.Email]: t`Email`,
+ [UserFieldsEnum.Upn]: t`UPN`,
+ };
+ const label = OR_LIST_FORMATTERS.format(fields.map(f => uiFields[f]));
return html`