web/admin: move user settings into separate folder

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
2021-03-30 22:22:11 +02:00
parent cb0b5f7146
commit 7a583cb7e6
10 changed files with 1 additions and 1 deletions
--- a/web/src/pages/user-settings/settings/UserSettingsAuthenticatorWebAuthn.ts
+++ b/web/src/pages/user-settings/settings/UserSettingsAuthenticatorWebAuthn.ts
@ -0,0 +1,111 @@
+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";
+import "../../../elements/forms/HorizontalFormElement";
+import { ifDefined } from "lit-html/directives/if-defined";
+
+@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">
+                    <ak-form-element-horizontal
+                        label=${gettext("Device name")}
+                        ?required=${true}
+                        name="name">
+                        <input type="text" value="${ifDefined(device.name)}" class="pf-c-form-control" required>
+                    </ak-form-element-horizontal>
+                </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>`;
+    }
+
+}