web/admin: migrate invitations to web

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

web/src/api/legacy.ts

@@ -28,10 +28,6 @@ export class AdminURLManager {
         return `/administration/stages_prompts/${rest}`;
     }
 
-    static stageInvitations(rest: string): string {
-        return `/administration/stages/invitations/${rest}`;
-    }
-
     static stageBindings(rest: string): string {
         return `/administration/stages/bindings/${rest}`;
     }
@@ -52,10 +48,6 @@ export class UserURLManager {
         return `/-/user/tokens/${rest}`;
     }
 
-    static authenticatorWebauthn(rest: string): string {
-        return `/-/user/authenticator/webauthn/${rest}`;
-    }
-
 }
 
 export class AppURLManager {

web/src/elements/forms/Form.ts

@@ -84,6 +84,8 @@ export class Form<T> extends LitElement {
             const values = form._serializeElementValues(element);
             if (element.tagName.toLowerCase() === "select" && "multiple" in element.attributes) {
                 json[element.name] = values;
+            } else if (element.tagName.toLowerCase() === "input" && element.type === "date") {
+                json[element.name] = element.valueAsDate;
             } else {
                 for (let v = 0; v < values.length; v++) {
                     form._addSerializedElement(json, element.name, values[v]);

web/src/pages/stages/InvitationForm.ts

@@ -0,0 +1,57 @@
+import { Invitation, 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/CodeMirror";
+import YAML from "yaml";
+
+@customElement("ak-stage-invitation-form")
+export class InvitationForm extends Form<Invitation> {
+
+    @property({attribute: false})
+    invitation?: Invitation;
+
+    getSuccessMessage(): string {
+        if (this.invitation) {
+            return gettext("Successfully updated invitation.");
+        } else {
+            return gettext("Successfully created invitation.");
+        }
+    }
+
+    send = (data: Invitation): Promise<Invitation> => {
+        if (this.invitation) {
+            return new StagesApi(DEFAULT_CONFIG).stagesInvitationInvitationsUpdate({
+                inviteUuid: this.invitation.pk || "",
+                data: data
+            });
+        } else {
+            return new StagesApi(DEFAULT_CONFIG).stagesInvitationInvitationsCreate({
+                data: data
+            });
+        }
+    };
+
+    renderForm(): TemplateResult {
+        return html`<form class="pf-c-form pf-m-horizontal">
+            <ak-form-element-horizontal
+                label=${gettext("Expires")}
+                ?required=${true}
+                name="expires">
+                <input type="date" value="${ifDefined(this.invitation?.expires)}" class="pf-c-form-control" required>
+            </ak-form-element-horizontal>
+            <ak-form-element-horizontal
+                label=${gettext("Attributes")}
+                name="fixedData">
+                <ak-codemirror mode="yaml" value="${YAML.stringify(this.invitation?.fixedData)}">
+                </ak-codemirror>
+                <p class="pf-c-form__helper-text">${gettext("Optional data which is loaded into the flow's 'prompt_data' context variable.")}</p>
+            </ak-form-element-horizontal>
+        </form>`;
+    }
+
+}

web/src/pages/stages/InvitationListPage.ts

@@ -6,11 +6,12 @@ import { TablePage } from "../../elements/table/TablePage";
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/forms/DeleteForm";
+import "../../elements/forms/ModalForm";
+import "./InvitationForm";
 import { TableColumn } from "../../elements/table/Table";
 import { PAGE_SIZE } from "../../constants";
 import { Invitation, StagesApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { AdminURLManager } from "../../api/legacy";
 
 @customElement("ak-stage-invitation-list")
 export class InvitationListPage extends TablePage<Invitation> {
@@ -71,12 +72,19 @@ export class InvitationListPage extends TablePage<Invitation> {
 
     renderToolbar(): TemplateResult {
         return html`
-        <ak-modal-button href=${AdminURLManager.stageInvitations("create/")}>
-            <ak-spinner-button slot="trigger" class="pf-m-primary">
+        <ak-forms-modal>
+            <span slot="submit">
                 ${gettext("Create")}
-            </ak-spinner-button>
-            <div slot="modal"></div>
-        </ak-modal-button>
+            </span>
+            <span slot="header">
+                ${gettext("Create Invitation")}
+            </span>
+            <ak-stage-invitation-form slot="form">
+            </ak-stage-invitation-form>
+            <button slot="trigger" class="pf-c-button pf-m-primary">
+                ${gettext("Create")}
+            </button>
+        </ak-forms-modal>
         ${super.renderToolbar()}
         `;
     }