stages/authenticator_totp: migrate to web

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-04-03 01:01:59 +02:00
parent be4288fb46
commit ab7f4c5ba2
4 changed files with 102 additions and 23 deletions

View file

@ -1,17 +0,0 @@
"""OTP Time forms"""
from django import forms
from authentik.stages.authenticator_totp.models import AuthenticatorTOTPStage
class AuthenticatorTOTPStageForm(forms.ModelForm):
"""OTP Time-based Stage setup form"""
class Meta:
model = AuthenticatorTOTPStage
fields = ["name", "configure_flow", "digits"]
widgets = {
"name": forms.TextInput(),
}

View file

@ -38,10 +38,8 @@ class AuthenticatorTOTPStage(ConfigurableStage, Stage):
return AuthenticatorTOTPStageView
@property
def form(self) -> Type[ModelForm]:
from authentik.stages.authenticator_totp.forms import AuthenticatorTOTPStageForm
return AuthenticatorTOTPStageForm
def component(self) -> str:
return "ak-stage-authenticator-totp-form"
@property
def ui_user_settings(self) -> Optional[UserSettingSerializer]:

View file

@ -0,0 +1,98 @@
import { FlowDesignationEnum, FlowsApi, AuthenticatorTOTPStage, StagesApi } from "authentik-api";
import { gettext } from "django";
import { customElement, property } from "lit-element";
import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../../api/Config";
import { Form } from "../../../elements/forms/Form";
import { ifDefined } from "lit-html/directives/if-defined";
import "../../../elements/forms/HorizontalFormElement";
import "../../../elements/forms/FormGroup";
import { until } from "lit-html/directives/until";
@customElement("ak-stage-authenticator-totp-form")
export class AuthenticatorTOTPStageForm extends Form<AuthenticatorTOTPStage> {
set stageUUID(value: string) {
new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorTotpRead({
stageUuid: value,
}).then(stage => {
this.stage = stage;
});
}
@property({attribute: false})
stage?: AuthenticatorTOTPStage;
getSuccessMessage(): string {
if (this.stage) {
return gettext("Successfully updated stage.");
} else {
return gettext("Successfully created stage.");
}
}
send = (data: AuthenticatorTOTPStage): Promise<AuthenticatorTOTPStage> => {
if (this.stage) {
return new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorTotpUpdate({
stageUuid: this.stage.pk || "",
data: data
});
} else {
return new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorTotpCreate({
data: data
});
}
};
renderForm(): TemplateResult {
return html`<form class="pf-c-form pf-m-horizontal">
<ak-form-element-horizontal
label=${gettext("Name")}
?required=${true}
name="name">
<input type="text" value="${ifDefined(this.stage?.name || "")}" class="pf-c-form-control" required>
</ak-form-element-horizontal>
<ak-form-group .expanded=${true}>
<span slot="header">
${gettext("Stage-specific settings")}
</span>
<div slot="body" class="pf-c-form">
<ak-form-element-horizontal
label=${gettext("Digits")}
?required=${true}
name="digits">
<select name="users" class="pf-c-form-control" multiple>
<option value="6" ?selected=${this.stage?.digits === 6}>
${gettext("6 digits, widely compatible")}
</option>
<option value="8" ?selected=${this.stage?.digits === 8}>
${gettext("8 digits, not compatible with apps like Google Authenticator")}
</option>
</select>
</ak-form-element-horizontal>
<ak-form-element-horizontal
label=${gettext("Configuration flow")}
name="configureFlow">
<select class="pf-c-form-control">
<option value="" ?selected=${this.stage?.configureFlow === undefined}>---------</option>
${until(new FlowsApi(DEFAULT_CONFIG).flowsInstancesList({
ordering: "pk",
designation: FlowDesignationEnum.StageConfiguration,
}).then(flows => {
return flows.results.map(flow => {
let selected = this.stage?.configureFlow === flow.pk;
if (!this.stage?.configureFlow && flow.slug === "default-otp-time-configure") {
selected = true;
}
return html`<option value=${ifDefined(flow.pk)} ?selected=${selected}>${flow.name} (${flow.slug})</option>`;
});
}))}
</select>
<p class="pf-c-form__helper-text">${gettext("Flow used by an authenticated user to configure this Stage. If empty, user will not be able to configure this stage.")}</p>
</ak-form-element-horizontal>
</div>
</ak-form-group>
</form>`;
}
}

View file

@ -69,10 +69,10 @@ export class IdentificationStageForm extends Form<IdentificationStage> {
name="transports">
<select name="users" class="pf-c-form-control" multiple>
<option value=${IdentificationStageUserFieldsEnum.Username} ?selected=${this.isUserFieldSelected(IdentificationStageUserFieldsEnum.Username)}>
${IdentificationStageUserFieldsEnum.Username}
${gettext("Username")}
</option>
<option value=${IdentificationStageUserFieldsEnum.Email} ?selected=${this.isUserFieldSelected(IdentificationStageUserFieldsEnum.Email)}>
${IdentificationStageUserFieldsEnum.Email}
${gettext("Email")}
</option>
</select>
<p class="pf-c-form__helper-text">${gettext("Fields a user can identify themselves with.")}</p>