web/elements: add ModalForm
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
parent
469ba3a391
commit
2fade4e604
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
<ak-spinner-button
|
||||
.callAction=${() => {
|
||||
this.open = false;
|
||||
}}
|
||||
class="pf-m-secondary">
|
||||
${gettext("Cancel")}
|
||||
</ak-spinner-button>
|
||||
</footer>`;
|
||||
}
|
||||
|
||||
}
|
|
@ -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";
|
||||
|
||||
|
|
|
@ -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];
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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>`;
|
||||
}
|
||||
|
||||
}
|
|
@ -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>`;
|
||||
}
|
||||
|
||||
}
|
Reference in New Issue