web: add confirmation form for simple write-requests
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
parent
3c2d541d60
commit
56344cadeb
|
@ -1,18 +0,0 @@
|
|||
"""Forms for modals on overview page"""
|
||||
from django import forms
|
||||
|
||||
|
||||
class PolicyCacheClearForm(forms.Form):
|
||||
"""Form to clear Policy cache"""
|
||||
|
||||
title = "Clear Policy cache"
|
||||
body = """Are you sure you want to clear the policy cache?
|
||||
This will cause all policies to be re-evaluated on their next usage."""
|
||||
|
||||
|
||||
class FlowCacheClearForm(forms.Form):
|
||||
"""Form to clear Flow cache"""
|
||||
|
||||
title = "Clear Flow cache"
|
||||
body = """Are you sure you want to clear the flow cache?
|
||||
This will cause all flows to be re-evaluated on their next usage."""
|
88
web/src/elements/forms/ConfirmationForm.ts
Normal file
88
web/src/elements/forms/ConfirmationForm.ts
Normal file
|
@ -0,0 +1,88 @@
|
|||
import { gettext } from "django";
|
||||
import { customElement, html, property, TemplateResult } from "lit-element";
|
||||
import { ModalButton } from "../buttons/ModalButton";
|
||||
import { showMessage } from "../messages/MessageContainer";
|
||||
|
||||
@customElement("ak-forms-confirm")
|
||||
export class ConfirmationForm extends ModalButton {
|
||||
|
||||
@property()
|
||||
successMessage!: string;
|
||||
@property()
|
||||
errorMessage!: string;
|
||||
|
||||
@property()
|
||||
action!: string;
|
||||
|
||||
@property({attribute: false})
|
||||
onConfirm!: () => Promise<unknown>;
|
||||
|
||||
confirm(): void {
|
||||
this.onConfirm().then(() => {
|
||||
this.onSuccess();
|
||||
this.open = false;
|
||||
this.dispatchEvent(
|
||||
new CustomEvent("ak-refresh", {
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
})
|
||||
);
|
||||
}).catch((e) => {
|
||||
this.onError(e);
|
||||
});
|
||||
}
|
||||
|
||||
onSuccess(): void {
|
||||
showMessage({
|
||||
message: gettext(this.successMessage),
|
||||
level_tag: "success",
|
||||
});
|
||||
}
|
||||
|
||||
onError(e: Error): void {
|
||||
showMessage({
|
||||
message: gettext(`${this.errorMessage}: ${e.toString()}`),
|
||||
level_tag: "error",
|
||||
});
|
||||
}
|
||||
|
||||
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">
|
||||
<form class="pf-c-form pf-m-horizontal">
|
||||
<slot name="body"></slot>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<footer class="pf-c-modal-box__footer">
|
||||
<ak-spinner-button
|
||||
.callAction=${() => {
|
||||
this.confirm();
|
||||
}}
|
||||
class="pf-m-danger">
|
||||
${gettext(this.action)}
|
||||
</ak-spinner-button>
|
||||
<ak-spinner-button
|
||||
.callAction=${() => {
|
||||
this.open = false;
|
||||
}}
|
||||
class="pf-m-secondary">
|
||||
${gettext("Cancel")}
|
||||
</ak-spinner-button>
|
||||
</footer>`;
|
||||
}
|
||||
|
||||
}
|
|
@ -1,9 +1,9 @@
|
|||
import { gettext } from "django";
|
||||
import { customElement, html, TemplateResult } from "lit-element";
|
||||
import { AdminStatus, AdminStatusCard } from "./AdminStatusCard";
|
||||
import "../../../elements/buttons/ModalButton";
|
||||
import { FlowsApi } from "authentik-api";
|
||||
import { DEFAULT_CONFIG } from "../../../api/Config";
|
||||
import "../../../elements/forms/ConfirmationForm";
|
||||
|
||||
@customElement("ak-admin-status-card-flow-cache")
|
||||
export class FlowCacheStatusCard extends AdminStatusCard<number> {
|
||||
|
@ -28,12 +28,25 @@ export class FlowCacheStatusCard extends AdminStatusCard<number> {
|
|||
}
|
||||
|
||||
renderHeaderLink(): TemplateResult {
|
||||
return html`<ak-modal-button href="/administration/overview/cache/flow/">
|
||||
return html`<ak-forms-confirm
|
||||
successMessage="Successfully cleared flow cache"
|
||||
errorMessage="Failed to delete flow cache"
|
||||
action="Clear cache"
|
||||
.onConfirm=${() => {
|
||||
return new FlowsApi(DEFAULT_CONFIG).flowsInstancesCacheClear();
|
||||
}}>
|
||||
<span slot="header">
|
||||
${gettext("Clear Flow cache")}
|
||||
</span>
|
||||
<p slot="body">
|
||||
${gettext(`Are you sure you want to clear the flow cache?
|
||||
This will cause all flows to be re-evaluated on their next usage.`)}
|
||||
</p>
|
||||
<a slot="trigger">
|
||||
<i class="fa fa-trash"> </i>
|
||||
</a>
|
||||
<div slot="modal"></div>
|
||||
</ak-modal-button>`;
|
||||
</ak-forms-confirm>`;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -2,9 +2,9 @@ import { gettext } from "django";
|
|||
import { customElement } from "lit-element";
|
||||
import { TemplateResult, html } from "lit-html";
|
||||
import { AdminStatusCard, AdminStatus } from "./AdminStatusCard";
|
||||
import "../../../elements/buttons/ModalButton";
|
||||
import { PoliciesApi } from "authentik-api";
|
||||
import { DEFAULT_CONFIG } from "../../../api/Config";
|
||||
import "../../../elements/forms/ConfirmationForm";
|
||||
|
||||
@customElement("ak-admin-status-card-policy-cache")
|
||||
export class PolicyCacheStatusCard extends AdminStatusCard<number> {
|
||||
|
@ -29,12 +29,25 @@ export class PolicyCacheStatusCard extends AdminStatusCard<number> {
|
|||
}
|
||||
|
||||
renderHeaderLink(): TemplateResult {
|
||||
return html`<ak-modal-button href="/administration/overview/cache/policy/">
|
||||
return html`<ak-forms-confirm
|
||||
successMessage="Successfully cleared policy cache"
|
||||
errorMessage="Failed to delete policy cache"
|
||||
action="Clear cache"
|
||||
.onConfirm=${() => {
|
||||
return new PoliciesApi(DEFAULT_CONFIG).policiesAllCacheClear();
|
||||
}}>
|
||||
<span slot="header">
|
||||
${gettext("Clear Policy cache")}
|
||||
</span>
|
||||
<p slot="body">
|
||||
${gettext(`Are you sure you want to clear the policy cache?
|
||||
This will cause all policies to be re-evaluated on their next usage.`)}
|
||||
</p>
|
||||
<a slot="trigger">
|
||||
<i class="fa fa-trash"> </i>
|
||||
</a>
|
||||
<div slot="modal"></div>
|
||||
</ak-modal-button>`;
|
||||
</ak-forms-confirm>`;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Reference in a new issue