stages/invitation: migrate to web

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-04-03 00:32:33 +02:00
parent a9bee998f2
commit fc47af12be
12 changed files with 114 additions and 59 deletions

View File

@ -1,16 +0,0 @@
"""authentik flows invitation forms"""
from django import forms
from authentik.stages.invitation.models import InvitationStage
class InvitationStageForm(forms.ModelForm):
"""Form to create/edit InvitationStage instances"""
class Meta:
model = InvitationStage
fields = ["name", "continue_flow_without_invitation"]
widgets = {
"name": forms.TextInput(),
}

View File

@ -3,7 +3,6 @@ from typing import Type
from uuid import uuid4 from uuid import uuid4
from django.db import models from django.db import models
from django.forms import ModelForm
from django.utils.translation import gettext_lazy as _ from django.utils.translation import gettext_lazy as _
from django.views import View from django.views import View
from rest_framework.serializers import BaseSerializer from rest_framework.serializers import BaseSerializer
@ -40,10 +39,8 @@ class InvitationStage(Stage):
return InvitationStageView return InvitationStageView
@property @property
def form(self) -> Type[ModelForm]: def component(self) -> str:
from authentik.stages.invitation.forms import InvitationStageForm return "ak-stage-invitation-form"
return InvitationStageForm
class Meta: class Meta:

View File

@ -58,15 +58,17 @@ export class CaptchaStageForm extends Form<CaptchaStage> {
<div slot="body" class="pf-c-form"> <div slot="body" class="pf-c-form">
<ak-form-element-horizontal <ak-form-element-horizontal
label=${gettext("Public Key")} label=${gettext("Public Key")}
?required=${true}
name="publicKey"> name="publicKey">
<input type="text" value="${ifDefined(this.stage?.publicKey || "")}" class="pf-c-form-control"> <input type="text" value="${ifDefined(this.stage?.publicKey || "")}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${gettext("Public key, acquired from https://www.google.com/recaptcha/intro/v3.html.")}</p> <p class="pf-c-form__helper-text">${gettext("Public key, acquired from https://www.google.com/recaptcha/intro/v3.html.")}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${gettext("Public Key")} label=${gettext("Private Key")}
?required=${true}
name="privateKey"> name="privateKey">
<input type="text" value="${ifDefined(this.stage?.privateKey || "")}" class="pf-c-form-control"> <input type="text" value="${ifDefined(this.stage?.privateKey || "")}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${gettext("Public key, acquired from https://www.google.com/recaptcha/intro/v3.html.")}</p> <p class="pf-c-form__helper-text">${gettext("Private key, acquired from https://www.google.com/recaptcha/intro/v3.html.")}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</div> </div>
</ak-form-group> </ak-form-group>

View File

@ -98,7 +98,6 @@ export class IdentificationStageForm extends Form<IdentificationStage> {
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${gettext("Enrollment flow")} label=${gettext("Enrollment flow")}
?required=${true}
name="enrollmentFlow"> name="enrollmentFlow">
<select class="pf-c-form-control"> <select class="pf-c-form-control">
<option value="" ?selected=${this.stage?.enrollmentFlow === undefined}>---------</option> <option value="" ?selected=${this.stage?.enrollmentFlow === undefined}>---------</option>
@ -116,9 +115,9 @@ export class IdentificationStageForm extends Form<IdentificationStage> {
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${gettext("Recovery flow")} label=${gettext("Recovery flow")}
?required=${true}
name="recoveryFlow"> name="recoveryFlow">
<select class="pf-c-form-control"> <select class="pf-c-form-control">
<option value="" ?selected=${this.stage?.recoveryFlow === undefined}>---------</option>
${until(new FlowsApi(DEFAULT_CONFIG).flowsInstancesList({ ${until(new FlowsApi(DEFAULT_CONFIG).flowsInstancesList({
ordering: "pk", ordering: "pk",
designation: FlowDesignationEnum.Recovery, designation: FlowDesignationEnum.Recovery,

View File

@ -2,13 +2,13 @@ import { Invitation, StagesApi } from "authentik-api";
import { gettext } from "django"; import { gettext } from "django";
import { customElement, property } from "lit-element"; import { customElement, property } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../../api/Config";
import { Form } from "../../elements/forms/Form"; import { Form } from "../../../elements/forms/Form";
import "../../elements/forms/HorizontalFormElement"; import "../../../elements/forms/HorizontalFormElement";
import "../../elements/CodeMirror"; import "../../../elements/CodeMirror";
import YAML from "yaml"; import YAML from "yaml";
@customElement("ak-stage-invitation-form") @customElement("ak-invitation-form")
export class InvitationForm extends Form<Invitation> { export class InvitationForm extends Form<Invitation> {
@property({attribute: false}) @property({attribute: false})

View File

@ -1,17 +1,17 @@
import { gettext } from "django"; import { gettext } from "django";
import { customElement, html, property, TemplateResult } from "lit-element"; import { customElement, html, property, TemplateResult } from "lit-element";
import { AKResponse } from "../../api/Client"; import { AKResponse } from "../../../api/Client";
import { TablePage } from "../../elements/table/TablePage"; import { TablePage } from "../../../elements/table/TablePage";
import "../../elements/buttons/ModalButton"; import "../../../elements/buttons/ModalButton";
import "../../elements/buttons/SpinnerButton"; import "../../../elements/buttons/SpinnerButton";
import "../../elements/forms/DeleteForm"; import "../../../elements/forms/DeleteForm";
import "../../elements/forms/ModalForm"; import "../../../elements/forms/ModalForm";
import "./InvitationForm"; import "./InvitationForm";
import { TableColumn } from "../../elements/table/Table"; import { TableColumn } from "../../../elements/table/Table";
import { PAGE_SIZE } from "../../constants"; import { PAGE_SIZE } from "../../../constants";
import { Invitation, StagesApi } from "authentik-api"; import { Invitation, StagesApi } from "authentik-api";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../../api/Config";
@customElement("ak-stage-invitation-list") @customElement("ak-stage-invitation-list")
export class InvitationListPage extends TablePage<Invitation> { export class InvitationListPage extends TablePage<Invitation> {
@ -79,8 +79,8 @@ export class InvitationListPage extends TablePage<Invitation> {
<span slot="header"> <span slot="header">
${gettext("Create Invitation")} ${gettext("Create Invitation")}
</span> </span>
<ak-stage-invitation-form slot="form"> <ak-invitation-form slot="form">
</ak-stage-invitation-form> </ak-invitation-form>
<button slot="trigger" class="pf-c-button pf-m-primary"> <button slot="trigger" class="pf-c-button pf-m-primary">
${gettext("Create")} ${gettext("Create")}
</button> </button>

View File

@ -0,0 +1,73 @@
import { InvitationStage, 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";
@customElement("ak-stage-invitation-form")
export class InvitationStageForm extends Form<InvitationStage> {
set stageUUID(value: string) {
new StagesApi(DEFAULT_CONFIG).stagesInvitationStagesRead({
stageUuid: value,
}).then(stage => {
this.stage = stage;
});
}
@property({attribute: false})
stage?: InvitationStage;
getSuccessMessage(): string {
if (this.stage) {
return gettext("Successfully updated stage.");
} else {
return gettext("Successfully created stage.");
}
}
send = (data: InvitationStage): Promise<InvitationStage> => {
if (this.stage) {
return new StagesApi(DEFAULT_CONFIG).stagesInvitationStagesUpdate({
stageUuid: this.stage.pk || "",
data: data
});
} else {
return new StagesApi(DEFAULT_CONFIG).stagesInvitationStagesCreate({
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 name="continueFlowWithoutInvitation">
<div class="pf-c-check">
<input type="checkbox" class="pf-c-check__input" ?checked=${this.stage?.continueFlowWithoutInvitation || true}>
<label class="pf-c-check__label">
${gettext("Continue flow without invitation")}
</label>
</div>
<p class="pf-c-form__helper-text">${gettext("If this flag is set, this Stage will jump to the next Stage when no Invitation is given. By default this Stage will cancel the Flow when no invitation is given.")}</p>
</ak-form-element-horizontal>
</div>
</ak-form-group>
</form>`;
}
}

View File

@ -2,10 +2,10 @@ import { Prompt, PromptTypeEnum, StagesApi } from "authentik-api";
import { gettext } from "django"; import { gettext } from "django";
import { customElement, property } from "lit-element"; import { customElement, property } from "lit-element";
import { html, TemplateResult } from "lit-html"; import { html, TemplateResult } from "lit-html";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../../api/Config";
import { Form } from "../../elements/forms/Form"; import { Form } from "../../../elements/forms/Form";
import { ifDefined } from "lit-html/directives/if-defined"; import { ifDefined } from "lit-html/directives/if-defined";
import "../../elements/forms/HorizontalFormElement"; import "../../../elements/forms/HorizontalFormElement";
@customElement("ak-prompt-form") @customElement("ak-prompt-form")
export class PromptForm extends Form<Prompt> { export class PromptForm extends Form<Prompt> {

View File

@ -1,17 +1,17 @@
import { gettext } from "django"; import { gettext } from "django";
import { customElement, html, property, TemplateResult } from "lit-element"; import { customElement, html, property, TemplateResult } from "lit-element";
import { AKResponse } from "../../api/Client"; import { AKResponse } from "../../../api/Client";
import { TablePage } from "../../elements/table/TablePage"; import { TablePage } from "../../../elements/table/TablePage";
import "../../elements/buttons/ModalButton"; import "../../../elements/buttons/ModalButton";
import "../../elements/buttons/SpinnerButton"; import "../../../elements/buttons/SpinnerButton";
import "../../elements/forms/DeleteForm"; import "../../../elements/forms/DeleteForm";
import "../../elements/forms/ModalForm"; import "../../../elements/forms/ModalForm";
import "./PromptForm"; import "./PromptForm";
import { TableColumn } from "../../elements/table/Table"; import { TableColumn } from "../../../elements/table/Table";
import { PAGE_SIZE } from "../../constants"; import { PAGE_SIZE } from "../../../constants";
import { Prompt, StagesApi } from "authentik-api"; import { Prompt, StagesApi } from "authentik-api";
import { DEFAULT_CONFIG } from "../../api/Config"; import { DEFAULT_CONFIG } from "../../../api/Config";
@customElement("ak-stage-prompt-list") @customElement("ak-stage-prompt-list")
export class PromptListPage extends TablePage<Prompt> { export class PromptListPage extends TablePage<Prompt> {

View File

@ -79,7 +79,6 @@ export class PromptStageForm extends Form<PromptStage> {
</ak-form-element-horizontal> </ak-form-element-horizontal>
<ak-form-element-horizontal <ak-form-element-horizontal
label=${gettext("Validation Policies")} label=${gettext("Validation Policies")}
?required=${true}
name="validationPolicies"> name="validationPolicies">
<select name="users" class="pf-c-form-control" multiple> <select name="users" class="pf-c-form-control" multiple>
${until(new PoliciesApi(DEFAULT_CONFIG).policiesAllList({ ${until(new PoliciesApi(DEFAULT_CONFIG).policiesAllList({

View File

@ -58,8 +58,9 @@ export class UserLoginStageForm extends Form<UserLoginStage> {
<div slot="body" class="pf-c-form"> <div slot="body" class="pf-c-form">
<ak-form-element-horizontal <ak-form-element-horizontal
label=${gettext("Session duration")} label=${gettext("Session duration")}
?required=${true}
name="privateKey"> name="privateKey">
<input type="text" value="${ifDefined(this.stage?.sessionDuration || "seconds=0")}" class="pf-c-form-control"> <input type="text" value="${ifDefined(this.stage?.sessionDuration || "seconds=0")}" class="pf-c-form-control" required>
<p class="pf-c-form__helper-text">${gettext("Determines how long a session lasts. Default of 0 seconds means that the sessions lasts until the browser is closed. (Format: hours=-1;minutes=-2;seconds=-3).")}</p> <p class="pf-c-form__helper-text">${gettext("Determines how long a session lasts. Default of 0 seconds means that the sessions lasts until the browser is closed. (Format: hours=-1;minutes=-2;seconds=-3).")}</p>
</ak-form-element-horizontal> </ak-form-element-horizontal>
</div> </div>

View File

@ -21,8 +21,8 @@ import "./pages/providers/ProviderListPage";
import "./pages/providers/ProviderViewPage"; import "./pages/providers/ProviderViewPage";
import "./pages/sources/SourcesListPage"; import "./pages/sources/SourcesListPage";
import "./pages/sources/SourceViewPage"; import "./pages/sources/SourceViewPage";
import "./pages/stages/InvitationListPage"; import "./pages/stages/invitation/InvitationListPage";
import "./pages/stages/PromptListPage"; import "./pages/stages/prompt/PromptListPage";
import "./pages/stages/StageListPage"; import "./pages/stages/StageListPage";
import "./pages/system-tasks/SystemTaskListPage"; import "./pages/system-tasks/SystemTaskListPage";
import "./pages/tokens/TokenListPage"; import "./pages/tokens/TokenListPage";