trustchain-oc1-orchestral
/
authentik
Archived
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/flows: improve display of allowed fields for identification stage 

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-06-13 16:30:03 +02:00
parent 0832145a01
commit 5ae32e525c
1 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
web/src/flows/stages/identification/IdentificationStage.ts
View File

@ -21,6 +21,14 @@ export const PasswordManagerPrefill: {
totp: undefined, 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") @customElement("ak-stage-identification")
export class IdentificationStage extends BaseStage<IdentificationChallenge, IdentificationChallengeResponseRequest> { export class IdentificationStage extends BaseStage<IdentificationChallenge, IdentificationChallengeResponseRequest> {
@ -142,26 +150,23 @@ export class IdentificationStage extends BaseStage<IdentificationChallenge, Iden
} }
renderInput(): TemplateResult { renderInput(): TemplateResult {
let label = "";
let type = "text"; let type = "text";
if (!this.challenge?.userFields) { if (!this.challenge?.userFields) {
return html`<p> return html`<p>
${t`Select one of the sources below to login.`} ${t`Select one of the sources below to login.`}
</p>`; </p>`;
} }
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) { if (fields.includes(UserFieldsEnum.Email) && fields.length === 1) {
label = t`Email`;
type = "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`<ak-form-element return html`<ak-form-element
label=${label} label=${label}
?required="${true}" ?required="${true}"
@ -170,7 +175,7 @@ export class IdentificationStage extends BaseStage<IdentificationChallenge, Iden
<!-- @ts-ignore --> <!-- @ts-ignore -->
<input type=${type} <input type=${type}
name="uidField" name="uidField"
placeholder="Email or Username" placeholder=${label}
autofocus="" autofocus=""
autocomplete="username" autocomplete="username"
class="pf-c-form-control" class="pf-c-form-control"