habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: add confirmation form for simple write-requests

Browse Source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer
2021-03-23 15:07:45 +01:00
parent 3c2d541d60
commit 56344cadeb
4 changed files with 128 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
authentik/admin/forms/overview.py
View File

@ -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
View 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>&nbsp;
<ak-spinner-button
.callAction=${() => {
this.open = false;
}}
class="pf-m-secondary">
${gettext("Cancel")}
</ak-spinner-button>
</footer>`;
}
}

19
web/src/pages/admin-overview/cards/FlowCacheStatusCard.ts
View File

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

19
web/src/pages/admin-overview/cards/PolicyCacheStatusCard.ts
View File

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