web/elements: add ModalForm

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-03-25 14:27:16 +01:00
parent 469ba3a391
commit 2fade4e604
6 changed files with 173 additions and 75 deletions

View File

@ -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

View File

@ -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>`;
}
}

View File

@ -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";

View File

@ -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];
}
}

View File

@ -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>`;
}
}

View File

@ -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>`;
}
}