stages/consent: migrate to web

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

authentik/stages/consent/forms.py

@@ -1,17 +0,0 @@
-"""authentik consent stage forms"""
-from django import forms
-
-from authentik.stages.consent.models import ConsentStage
-
-
-class ConsentStageForm(forms.ModelForm):
-    """Form to edit ConsentStage Instance"""
-
-    class Meta:
-
-        model = ConsentStage
-        fields = ["name", "mode", "consent_expire_in"]
-        widgets = {
-            "name": forms.TextInput(),
-            "consent_expire_in": forms.TextInput(),
-        }

authentik/stages/consent/models.py

@@ -2,7 +2,6 @@
 from typing import Type
 
 from django.db import models
-from django.forms import ModelForm
 from django.utils.translation import gettext_lazy as _
 from django.views import View
 from rest_framework.serializers import BaseSerializer
@@ -51,10 +50,8 @@ class ConsentStage(Stage):
         return ConsentStageView
 
     @property
-    def form(self) -> Type[ModelForm]:
+    def component(self) -> str:
-        from authentik.stages.consent.forms import ConsentStageForm
+        return "ak-stage-consent-form"
-
-        return ConsentStageForm
 
     class Meta:
 

authentik/stages/invitation/tests.py

@@ -14,7 +14,6 @@ from authentik.flows.models import Flow, FlowDesignation, FlowStageBinding
 from authentik.flows.planner import PLAN_CONTEXT_PENDING_USER, FlowPlan
 from authentik.flows.tests.test_views import TO_STAGE_RESPONSE_MOCK
 from authentik.flows.views import SESSION_KEY_PLAN
-from authentik.stages.invitation.forms import InvitationStageForm
 from authentik.stages.invitation.models import Invitation, InvitationStage
 from authentik.stages.invitation.stage import INVITATION_TOKEN_KEY, PLAN_CONTEXT_PROMPT
 from authentik.stages.password.stage import PLAN_CONTEXT_AUTHENTICATION_BACKEND
@@ -36,11 +35,6 @@ class TestUserLoginStage(TestCase):
         self.stage = InvitationStage.objects.create(name="invitation")
         FlowStageBinding.objects.create(target=self.flow, stage=self.stage, order=2)
 
-    def test_form(self):
-        """Test Form"""
-        data = {"name": "test"}
-        self.assertEqual(InvitationStageForm(data).is_valid(), True)
-
     @patch(
         "authentik.flows.views.to_stage_response",
         TO_STAGE_RESPONSE_MOCK,

web/src/pages/stages/consent/ConsentStageForm.ts

@@ -0,0 +1,99 @@
+import { ConsentStage, ConsentStageModeEnum, 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-consent-form")
+export class ConsentStageForm extends Form<ConsentStage> {
+
+    set stageUUID(value: string) {
+        new StagesApi(DEFAULT_CONFIG).stagesConsentRead({
+            stageUuid: value,
+        }).then(stage => {
+            this.stage = stage;
+            this.showExpiresIn = stage.name === ConsentStageModeEnum.Expiring;
+        });
+    }
+
+    @property({attribute: false})
+    stage?: ConsentStage;
+
+    @property({type: Boolean})
+    showExpiresIn = false;
+
+    getSuccessMessage(): string {
+        if (this.stage) {
+            return gettext("Successfully updated stage.");
+        } else {
+            return gettext("Successfully created stage.");
+        }
+    }
+
+    send = (data: ConsentStage): Promise<ConsentStage> => {
+        if (this.stage) {
+            return new StagesApi(DEFAULT_CONFIG).stagesConsentUpdate({
+                stageUuid: this.stage.pk || "",
+                data: data
+            });
+        } else {
+            return new StagesApi(DEFAULT_CONFIG).stagesConsentCreate({
+                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("Mode")}
+                        ?required=${true}
+                        name="mode">
+                        <select class="pf-c-form-control" @change=${(ev: Event) => {
+                            const target = ev.target as HTMLSelectElement;
+                            if (target.selectedOptions[0].value === ConsentStageModeEnum.Expiring) {
+                                this.showExpiresIn = true;
+                            } else {
+                                this.showExpiresIn = false;
+                            }
+                        }}>
+                            <option value=${ConsentStageModeEnum.AlwaysRequire} ?selected=${this.stage?.mode === ConsentStageModeEnum.AlwaysRequire}>
+                                ${gettext("Always require consent")}
+                            </option>
+                            <option value=${ConsentStageModeEnum.Permanent} ?selected=${this.stage?.mode === ConsentStageModeEnum.Permanent}>
+                                ${gettext("Consent given last indefinitely")}
+                            </option>
+                            <option value=${ConsentStageModeEnum.Expiring} ?selected=${this.stage?.mode === ConsentStageModeEnum.Expiring}>
+                                ${gettext("Consent expires.")}
+                            </option>
+                        </select>
+                    </ak-form-element-horizontal>
+                    <ak-form-element-horizontal
+                        ?hidden=${!this.showExpiresIn}
+                        label=${gettext("Consent expires in")}
+                        ?required=${true}
+                        name="consentExpireIn">
+                        <input type="text" value="${ifDefined(this.stage?.consentExpireIn || "weeks=4")}" class="pf-c-form-control" required>
+                        <p class="pf-c-form__helper-text">${gettext("Offset after which consent expires. (Format: hours=1;minutes=2;seconds=3).")}</p>
+                    </ak-form-element-horizontal>
+                </div>
+            </ak-form-group>
+        </form>`;
+    }
+
+}