web/elements: add ModalForm

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

web/src/elements/forms/Form.ts

@@ -17,14 +17,14 @@ export class Form extends LitElement {
     @property()
     send!: (data: Record<string, unknown>) => Promise<unknown>;
 
-    submit(ev: Event): void {
+    submit(ev: Event): Promise<unknown> | undefined {
         ev.preventDefault();
         const ironForm = this.shadowRoot?.querySelector("iron-form");
         if (!ironForm) {
             return;
         }
         const data = ironForm.serializeForm();
-        this.send(data).then(() => {
+        return this.send(data).then(() => {
             showMessage({
                 level_tag: "success",
                 message: this.successMessage

web/src/elements/forms/ModalForm.ts

@@ -0,0 +1,58 @@
+import { gettext } from "django";
+import { customElement, html, property, TemplateResult } from "lit-element";
+import { ModalButton } from "../buttons/ModalButton";
+import { Form } from "./Form";
+
+@customElement("ak-forms-modal")
+export class DeleteForm extends ModalButton {
+
+    confirm(): void {
+        this.querySelectorAll<Form>("ak-form").forEach(form => {
+            const formPromise = form.submit(new Event("submit"));
+            if (!formPromise) {
+                return;
+            }
+            formPromise.then(() => {
+                this.open = false;
+            });
+        });
+    }
+
+    renderModalInner(): TemplateResult {
+        return html`<section class="pf-c-page__main-section pf-m-light">
+            <div class="pf-c-content">
+                <h1 class="pf-c-title pf-m-2xl">
+                    <slot name="header"></slot>
+                </h1>
+            </div>
+        </section>
+        <section class="pf-c-page__main-section">
+            <div class="pf-l-stack">
+                <div class="pf-l-stack__item">
+                    <div class="pf-c-card">
+                        <div class="pf-c-card__body">
+                            <slot name="form"></slot>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <footer class="pf-c-modal-box__footer">
+            <ak-spinner-button
+                .callAction=${() => {
+                    this.confirm();
+                }}
+                class="pf-m-primary">
+                <slot name="submit"></slot>
+            </ak-spinner-button>&nbsp;
+            <ak-spinner-button
+                .callAction=${() => {
+                    this.open = false;
+                }}
+                class="pf-m-secondary">
+                ${gettext("Cancel")}
+            </ak-spinner-button>
+        </footer>`;
+    }
+
+}

web/src/pages/users/UserSettingsPage.ts

@@ -22,7 +22,7 @@ import "./UserDetailsPage";
 import "./UserTokenList";
 import "./settings/UserSettingsAuthenticatorTOTP";
 import "./settings/UserSettingsAuthenticatorStatic";
-import "./settings/UserSettingsAuthenticatorWebAuthnDevices";
+import "./settings/UserSettingsAuthenticatorWebAuthn";
 import "./settings/UserSettingsPassword";
 import "./settings/SourceSettingsOAuth";
 

web/src/pages/users/settings/BaseUserSettings.ts

@@ -3,6 +3,8 @@ import PFBase from "@patternfly/patternfly/patternfly-base.css";
 import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import AKGlobal from "../../../authentik.css";
+import PFForm from "@patternfly/patternfly/components/Form/form.css";
+import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
 
 export abstract class BaseUserSettings extends LitElement {
 
@@ -10,7 +12,7 @@ export abstract class BaseUserSettings extends LitElement {
     objectId!: string;
 
     static get styles(): CSSResult[] {
-        return [PFBase, PFCard, PFButton, AKGlobal];
+        return [PFBase, PFCard, PFButton, PFForm, PFFormControl, AKGlobal];
     }
 }
 

web/src/pages/users/settings/UserSettingsAuthenticatorWebAuthn.ts

@@ -0,0 +1,109 @@
+import { CSSResult, customElement, html, TemplateResult } from "lit-element";
+import { gettext } from "django";
+import { AuthenticatorsApi, StagesApi, WebAuthnDevice } from "authentik-api";
+import { until } from "lit-html/directives/until";
+import { FlowURLManager } from "../../../api/legacy";
+import { DEFAULT_CONFIG } from "../../../api/Config";
+import { BaseUserSettings } from "./BaseUserSettings";
+import PFDataList from "@patternfly/patternfly/components/DataList/data-list.css";
+import "../../../elements/buttons/ModalButton";
+import "../../../elements/buttons/SpinnerButton";
+import "../../../elements/forms/DeleteForm";
+import "../../../elements/forms/Form";
+import "../../../elements/forms/ModalForm";
+
+@customElement("ak-user-settings-authenticator-webauthn")
+export class UserSettingsAuthenticatorWebAuthn extends BaseUserSettings {
+
+    static get styles(): CSSResult[] {
+        return super.styles.concat(PFDataList);
+    }
+
+    renderDelete(device: WebAuthnDevice): TemplateResult {
+        return html`<ak-forms-delete
+            .obj=${device}
+            objectLabel=${gettext("Authenticator")}
+            .delete=${() => {
+                return new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsWebauthnDelete({
+                    id: device.pk || 0
+                });
+            }}>
+            <button slot="trigger" class="pf-c-button pf-m-danger">
+                ${gettext("Delete")}
+            </button>
+        </ak-forms-delete>`;
+    }
+
+    renderUpdate(device: WebAuthnDevice): TemplateResult {
+        return html`<ak-forms-modal>
+            <span slot="submit">
+                ${gettext("Update")}
+            </span>
+            <span slot="header">
+                ${gettext("Update")}
+            </span>
+            <ak-form
+                slot="form"
+                successMessage=${gettext("Successfully updated device.")}
+                .send=${(data: unknown) => {
+                    return new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsWebauthnUpdate({
+                        id: device.pk || 0,
+                        data: data as WebAuthnDevice
+                    });
+                }}>
+                <form class="pf-c-form pf-m-horizontal">
+                    <paper-input
+                        name="name"
+                        ?alwaysFloatLabel=${true}
+                        label="${gettext("Device name")}"
+                        value=${device.name}>
+                    </paper-input>
+                </form>
+            </ak-form>
+            <button slot="trigger" class="pf-c-button pf-m-primary">
+                ${gettext("Update")}
+            </button>
+        </ak-forms-modal>`;
+    }
+
+    render(): TemplateResult {
+        return html`<div class="pf-c-card">
+            <div class="pf-c-card__title">
+                ${gettext("WebAuthn Devices")}
+            </div>
+            <div class="pf-c-card__body">
+                <ul class="pf-c-data-list" role="list">
+                    ${until(new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsWebauthnList({}).then((devices) => {
+                        return devices.results.map((device) => {
+                            return html`<li class="pf-c-data-list__item">
+                                <div class="pf-c-data-list__item-row">
+                                    <div class="pf-c-data-list__item-content">
+                                        <div class="pf-c-data-list__cell">${device.name || "-"}</div>
+                                        <div class="pf-c-data-list__cell">
+                                            ${gettext(`Created ${device.createdOn?.toLocaleString()}`)}
+                                        </div>
+                                        <div class="pf-c-data-list__cell">
+                                            ${this.renderUpdate(device)}
+                                            ${this.renderDelete(device)}
+                                        </div>
+                                    </div>
+                                </div>
+                            </li>`;
+                        });
+                    }))}
+                </ul>
+            </div>
+            <div class="pf-c-card__footer">
+                ${until(new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorWebauthnRead({ stageUuid: this.objectId}).then((stage) => {
+                    if (stage.configureFlow) {
+                        return html`<a href="${FlowURLManager.configure(stage.pk || "", "?next=/%23%2Fuser")}"
+                                class="pf-c-button pf-m-primary">${gettext("Configure WebAuthn")}
+                            </a>`;
+                    }
+                    return html``;
+                }))}
+            </div>
+        </div>`;
+    }
+
+}

web/src/pages/users/settings/UserSettingsAuthenticatorWebAuthnDevices.ts

@@ -1,71 +0,0 @@
-import { customElement, html, TemplateResult } from "lit-element";
-import { gettext } from "django";
-import { AuthenticatorsApi, StagesApi } from "authentik-api";
-import { until } from "lit-html/directives/until";
-import { FlowURLManager, UserURLManager } from "../../../api/legacy";
-import { DEFAULT_CONFIG } from "../../../api/Config";
-import { BaseUserSettings } from "./BaseUserSettings";
-import "../../../elements/buttons/ModalButton";
-import "../../../elements/buttons/SpinnerButton";
-import "../../../elements/forms/DeleteForm";
-
-@customElement("ak-user-settings-authenticator-webauthn")
-export class UserSettingsAuthenticatorWebAuthnDevices extends BaseUserSettings {
-
-    render(): TemplateResult {
-        return html`<div class="pf-c-card">
-            <div class="pf-c-card__title">
-                ${gettext("WebAuthn Devices")}
-            </div>
-            <div class="pf-c-card__body">
-                <ul class="pf-c-data-list" role="list">
-                    ${until(new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsWebauthnList({}).then((devices) => {
-                        return devices.results.map((device) => {
-                            return html`<li class="pf-c-data-list__item">
-                                <div class="pf-c-data-list__item-row">
-                                    <div class="pf-c-data-list__item-content">
-                                        <div class="pf-c-data-list__cell">${device.name || "-"}</div>
-                                        <div class="pf-c-data-list__cell">
-                                            ${gettext(`Created ${device.createdOn?.toLocaleString()}`)}
-                                        </div>
-                                        <div class="pf-c-data-list__cell">
-                                            <ak-modal-button href="${UserURLManager.authenticatorWebauthn(`devices/${device.pk}/update/`)}">
-                                                <ak-spinner-button slot="trigger" class="pf-m-primary">
-                                                    ${gettext("Update")}
-                                                </ak-spinner-button>
-                                                <div slot="modal"></div>
-                                            </ak-modal-button>
-                                            <ak-forms-delete
-                                                .obj=${device}
-                                                objectLabel=${gettext("Authenticator")}
-                                                .delete=${() => {
-                                                    return new AuthenticatorsApi(DEFAULT_CONFIG).authenticatorsWebauthnDelete({
-                                                        id: device.pk || 0
-                                                    });
-                                                }}>
-                                                <button slot="trigger" class="pf-c-dropdown__menu-item">
-                                                    ${gettext("Delete")}
-                                                </button>
-                                            </ak-forms-delete>
-                                        </div>
-                                    </div>
-                                </div>
-                            </li>`;
-                        });
-                    }))}
-                </ul>
-            </div>
-            <div class="pf-c-card__footer">
-                ${until(new StagesApi(DEFAULT_CONFIG).stagesAuthenticatorWebauthnRead({ stageUuid: this.objectId}).then((stage) => {
-                    if (stage.configureFlow) {
-                        return html`<a href="${FlowURLManager.configure(stage.pk || "", "?next=/%23%2Fuser")}"
-                                class="pf-c-button pf-m-primary">${gettext("Configure WebAuthn")}
-                            </a>`;
-                    }
-                    return html``;
-                }))}
-            </div>
-        </div>`;
-    }
-
-}