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`