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 { gettext } from "django";
|
||||||
import { customElement, html, TemplateResult } from "lit-element";
|
import { customElement, html, TemplateResult } from "lit-element";
|
||||||
import { AdminStatus, AdminStatusCard } from "./AdminStatusCard";
|
import { AdminStatus, AdminStatusCard } from "./AdminStatusCard";
|
||||||
import "../../../elements/buttons/ModalButton";
|
|
||||||
import { FlowsApi } from "authentik-api";
|
import { FlowsApi } from "authentik-api";
|
||||||
import { DEFAULT_CONFIG } from "../../../api/Config";
|
import { DEFAULT_CONFIG } from "../../../api/Config";
|
||||||
|
import "../../../elements/forms/ConfirmationForm";
|
||||||
|
|
||||||
@customElement("ak-admin-status-card-flow-cache")
|
@customElement("ak-admin-status-card-flow-cache")
|
||||||
export class FlowCacheStatusCard extends AdminStatusCard<number> {
|
export class FlowCacheStatusCard extends AdminStatusCard<number> {
|
||||||
|
@ -28,12 +28,25 @@ export class FlowCacheStatusCard extends AdminStatusCard<number> {
|
||||||
}
|
}
|
||||||
|
|
||||||
renderHeaderLink(): TemplateResult {
|
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">
|
<a slot="trigger">
|
||||||
<i class="fa fa-trash"> </i>
|
<i class="fa fa-trash"> </i>
|
||||||
</a>
|
</a>
|
||||||
<div slot="modal"></div>
|
<div slot="modal"></div>
|
||||||
</ak-modal-button>`;
|
</ak-forms-confirm>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,9 +2,9 @@ import { gettext } from "django";
|
||||||
import { customElement } from "lit-element";
|
import { customElement } from "lit-element";
|
||||||
import { TemplateResult, html } from "lit-html";
|
import { TemplateResult, html } from "lit-html";
|
||||||
import { AdminStatusCard, AdminStatus } from "./AdminStatusCard";
|
import { AdminStatusCard, AdminStatus } from "./AdminStatusCard";
|
||||||
import "../../../elements/buttons/ModalButton";
|
|
||||||
import { PoliciesApi } from "authentik-api";
|
import { PoliciesApi } from "authentik-api";
|
||||||
import { DEFAULT_CONFIG } from "../../../api/Config";
|
import { DEFAULT_CONFIG } from "../../../api/Config";
|
||||||
|
import "../../../elements/forms/ConfirmationForm";
|
||||||
|
|
||||||
@customElement("ak-admin-status-card-policy-cache")
|
@customElement("ak-admin-status-card-policy-cache")
|
||||||
export class PolicyCacheStatusCard extends AdminStatusCard<number> {
|
export class PolicyCacheStatusCard extends AdminStatusCard<number> {
|
||||||
|
@ -29,12 +29,25 @@ export class PolicyCacheStatusCard extends AdminStatusCard<number> {
|
||||||
}
|
}
|
||||||
|
|
||||||
renderHeaderLink(): TemplateResult {
|
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">
|
<a slot="trigger">
|
||||||
<i class="fa fa-trash"> </i>
|
<i class="fa fa-trash"> </i>
|
||||||
</a>
|
</a>
|
||||||
<div slot="modal"></div>
|
<div slot="modal"></div>
|
||||||
</ak-modal-button>`;
|
</ak-forms-confirm>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
Reference in a new issue