stages: Add ability to set user friendly names for MFA stages (#5005)

* Added ability to name MFA stage

* Schema

* Changed Charfield to Textfield

* Regenerated schema

* Add explicit required

* set null instead of blank so title check works

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

* add help text and adjust wording

Signed-off-by: Jens Langhammer <jens@goauthentik.io>

---------

Signed-off-by: Jens Langhammer <jens@goauthentik.io>
Co-authored-by: Jens Langhammer <jens@goauthentik.io>
This commit is contained in:
sdimovv
2023-04-02 15:52:44 +01:00
committed by GitHub
parent fd2677af1f
commit 6192d01b7e
24 changed files with 275 additions and 47 deletions

View File

@ -10,7 +10,6 @@ import { t } from "@lingui/macro";
import { TemplateResult, html } from "lit";
import { customElement } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import {
AuthenticatorDuoStage,
@ -59,11 +58,25 @@ export class AuthenticatorDuoStageForm extends ModelForm<AuthenticatorDuoStage,
<ak-form-element-horizontal label=${t`Name`} ?required=${true} name="name">
<input
type="text"
value="${ifDefined(this.instance?.name || "")}"
value="${first(this.instance?.name, "")}"
class="pf-c-form-control"
required
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Authenticator type name`}
?required=${false}
name="friendlyName"
>
<input
type="text"
value="${first(this.instance?.friendlyName, "")}"
class="pf-c-form-control"
/>
<p class="pf-c-form__helper-text">
${t`Display name of this authenticator, used by users when they enroll an authenticator.`}
</p>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`API Hostname`}
?required=${true}

View File

@ -11,7 +11,6 @@ import { t } from "@lingui/macro";
import { TemplateResult, html } from "lit";
import { customElement, property } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import {
AuthTypeEnum,
@ -76,7 +75,7 @@ export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage,
>
<input
type="text"
value="${ifDefined(this.instance?.accountSid || "")}"
value="${first(this.instance?.accountSid, "")}"
class="pf-c-form-control"
required
/>
@ -87,7 +86,7 @@ export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage,
<ak-form-element-horizontal label=${t`Twilio Auth Token`} ?required=${true} name="auth">
<input
type="text"
value="${ifDefined(this.instance?.auth || "")}"
value="${first(this.instance?.auth, "")}"
class="pf-c-form-control"
required
/>
@ -131,7 +130,7 @@ export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage,
>
<input
type="text"
value="${ifDefined(this.instance?.accountSid || "")}"
value="${first(this.instance?.accountSid, "")}"
class="pf-c-form-control"
required
/>
@ -142,7 +141,7 @@ export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage,
<ak-form-element-horizontal label=${t`API Auth Username`} ?required=${true} name="auth">
<input
type="text"
value="${ifDefined(this.instance?.auth || "")}"
value="${first(this.instance?.auth, "")}"
class="pf-c-form-control"
/>
<p class="pf-c-form__helper-text">
@ -156,7 +155,7 @@ export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage,
>
<input
type="text"
value="${ifDefined(this.instance?.authPassword)}"
value="${first(this.instance?.authPassword, "")}"
class="pf-c-form-control"
/>
<p class="pf-c-form__helper-text">
@ -206,11 +205,25 @@ export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage,
<ak-form-element-horizontal label=${t`Name`} ?required=${true} name="name">
<input
type="text"
value="${ifDefined(this.instance?.name || "")}"
value="${first(this.instance?.name, "")}"
class="pf-c-form-control"
required
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Authenticator type name`}
?required=${false}
name="friendlyName"
>
<input
type="text"
value="${first(this.instance?.friendlyName, "")}"
class="pf-c-form-control"
/>
<p class="pf-c-form__helper-text">
${t`Display name of this authenticator, used by users when they enroll an authenticator.`}
</p>
</ak-form-element-horizontal>
<ak-form-group .expanded=${true}>
<span slot="header"> ${t`Stage-specific settings`} </span>
<div slot="body" class="pf-c-form">
@ -247,7 +260,7 @@ export class AuthenticatorSMSStageForm extends ModelForm<AuthenticatorSMSStage,
>
<input
type="text"
value="${ifDefined(this.instance?.fromNumber || "")}"
value="${first(this.instance?.fromNumber, "")}"
class="pf-c-form-control"
required
/>

View File

@ -9,7 +9,6 @@ import { t } from "@lingui/macro";
import { TemplateResult, html } from "lit";
import { customElement } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import {
AuthenticatorStaticStage,
@ -57,11 +56,25 @@ export class AuthenticatorStaticStageForm extends ModelForm<AuthenticatorStaticS
<ak-form-element-horizontal label=${t`Name`} ?required=${true} name="name">
<input
type="text"
value="${ifDefined(this.instance?.name || "")}"
value="${first(this.instance?.name, "")}"
class="pf-c-form-control"
required
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Authenticator type name`}
?required=${false}
name="friendlyName"
>
<input
type="text"
value="${first(this.instance?.friendlyName, "")}"
class="pf-c-form-control"
/>
<p class="pf-c-form__helper-text">
${t`Display name of this authenticator, used by users when they enroll an authenticator.`}
</p>
</ak-form-element-horizontal>
<ak-form-group .expanded=${true}>
<span slot="header"> ${t`Stage-specific settings`} </span>
<div slot="body" class="pf-c-form">

View File

@ -1,5 +1,6 @@
import { RenderFlowOption } from "@goauthentik/admin/flows/utils";
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { first } from "@goauthentik/common/utils";
import "@goauthentik/elements/forms/FormGroup";
import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
@ -9,7 +10,6 @@ import { t } from "@lingui/macro";
import { TemplateResult, html } from "lit";
import { customElement } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import {
AuthenticatorTOTPStage,
@ -58,11 +58,25 @@ export class AuthenticatorTOTPStageForm extends ModelForm<AuthenticatorTOTPStage
<ak-form-element-horizontal label=${t`Name`} ?required=${true} name="name">
<input
type="text"
value="${ifDefined(this.instance?.name || "")}"
value="${first(this.instance?.name, "")}"
class="pf-c-form-control"
required
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Authenticator type name`}
?required=${false}
name="friendlyName"
>
<input
type="text"
value="${first(this.instance?.friendlyName, "")}"
class="pf-c-form-control"
/>
<p class="pf-c-form__helper-text">
${t`Display name of this authenticator, used by users when they enroll an authenticator.`}
</p>
</ak-form-element-horizontal>
<ak-form-group .expanded=${true}>
<span slot="header"> ${t`Stage-specific settings`} </span>
<div slot="body" class="pf-c-form">

View File

@ -1,5 +1,6 @@
import { RenderFlowOption } from "@goauthentik/admin/flows/utils";
import { DEFAULT_CONFIG } from "@goauthentik/common/api/config";
import { first } from "@goauthentik/common/utils";
import "@goauthentik/elements/forms/HorizontalFormElement";
import { ModelForm } from "@goauthentik/elements/forms/ModelForm";
import "@goauthentik/elements/forms/Radio";
@ -9,7 +10,6 @@ import { t } from "@lingui/macro";
import { TemplateResult, html } from "lit";
import { customElement } from "lit/decorators.js";
import { ifDefined } from "lit/directives/if-defined.js";
import {
AuthenticateWebAuthnStage,
@ -63,11 +63,25 @@ export class AuthenticateWebAuthnStageForm extends ModelForm<AuthenticateWebAuth
<ak-form-element-horizontal label=${t`Name`} ?required=${true} name="name">
<input
type="text"
value="${ifDefined(this.instance?.name || "")}"
value="${first(this.instance?.name, "")}"
class="pf-c-form-control"
required
/>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${t`Authenticator type name`}
?required=${false}
name="friendlyName"
>
<input
type="text"
value="${first(this.instance?.friendlyName, "")}"
class="pf-c-form-control"
/>
<p class="pf-c-form__helper-text">
${t`Display name of this authenticator, used by users when they enroll an authenticator.`}
</p>
</ak-form-element-horizontal>
<ak-form-group .expanded=${true}>
<span slot="header"> ${t`Stage-specific settings`} </span>
<div slot="body" class="pf-c-form">

View File

@ -4,8 +4,7 @@ import "@goauthentik/elements/buttons/ModalButton";
import "@goauthentik/elements/buttons/TokenCopyButton";
import "@goauthentik/elements/forms/DeleteBulkForm";
import "@goauthentik/elements/forms/ModalForm";
import { PaginatedResponse } from "@goauthentik/elements/table/Table";
import { Table, TableColumn } from "@goauthentik/elements/table/Table";
import { PaginatedResponse, Table, TableColumn } from "@goauthentik/elements/table/Table";
import "@goauthentik/user/user-settings/mfa/MFADeviceForm";
import { t } from "@lingui/macro";
@ -17,17 +16,8 @@ import { ifDefined } from "lit/directives/if-defined.js";
import { AuthenticatorsApi, Device, UserSetting } from "@goauthentik/api";
export function stageToAuthenticatorName(stage: UserSetting): string {
switch (stage.component) {
case "ak-user-settings-authenticator-duo":
return t`Duo authenticator`;
case "ak-user-settings-authenticator-sms":
return t`SMS authenticator`;
case "ak-user-settings-authenticator-static":
return t`Static authenticator`;
case "ak-user-settings-authenticator-totp":
return t`TOTP authenticator`;
case "ak-user-settings-authenticator-webauthn":
return t`Security key authenticator`;
if (stage.title) {
return stage.title;
}
return `Invalid stage component ${stage.component}`;
}