From 48443e3e09b930aa95b3b4ac3cbea3c3223664eb Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Thu, 18 Mar 2021 12:14:27 +0100
Subject: [PATCH] web/pages: use DeleteForm for all lists

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 web/src/elements/forms/DeleteForm.ts           |  8 ++++++--
 web/src/elements/policies/BoundPoliciesList.ts | 18 ++++++++++++------
 .../pages/applications/ApplicationListPage.ts  | 18 ++++++++++++------
 .../pages/crypto/CertificateKeyPairListPage.ts | 18 ++++++++++++------
 web/src/pages/events/RuleListPage.ts           | 18 ++++++++++++------
 web/src/pages/events/TransportListPage.ts      | 18 ++++++++++++------
 web/src/pages/flows/BoundStagesList.ts         | 18 ++++++++++++------
 web/src/pages/flows/FlowListPage.ts            | 17 ++++++++++++-----
 web/src/pages/outposts/OutpostListPage.ts      | 17 ++++++++++++-----
 .../OutpostServiceConnectionListPage.ts        | 17 ++++++++++++-----
 web/src/pages/policies/PolicyListPage.ts       | 18 ++++++++++++------
 .../PropertyMappingListPage.ts                 | 18 ++++++++++++------
 web/src/pages/providers/ProviderListPage.ts    | 18 ++++++++++++------
 web/src/pages/sources/SourcesListPage.ts       | 18 ++++++++++++------
 web/src/pages/stages/InvitationListPage.ts     | 17 ++++++++++++-----
 web/src/pages/stages/PromptListPage.ts         | 17 ++++++++++++-----
 web/src/pages/stages/StageListPage.ts          | 18 ++++++++++++------
 web/src/pages/tokens/TokenListPage.ts          | 18 ++++++++++++------
 web/src/pages/tokens/UserTokenList.ts          | 17 ++++++++++++-----
 web/src/pages/users/UserListPage.ts            | 15 +++++++++++----
 20 files changed, 233 insertions(+), 108 deletions(-)

diff --git a/web/src/elements/forms/DeleteForm.ts b/web/src/elements/forms/DeleteForm.ts
index 8c89f7d9a..b54fe694d 100644
--- a/web/src/elements/forms/DeleteForm.ts
+++ b/web/src/elements/forms/DeleteForm.ts
@@ -17,6 +17,10 @@ export class DeleteForm extends ModalButton {
 
     confirm(): void {
         this.delete().then(() => {
+            showMessage({
+                message: gettext(`Successfully deleted ${this.objectLabel} ${this.obj?.name}`),
+                level_tag: "success",
+            });
             this.open = false;
             this.dispatchEvent(
                 new CustomEvent("ak-refresh", {
@@ -28,8 +32,8 @@ export class DeleteForm extends ModalButton {
             showMessage({
                 message: gettext(`Failed to delete ${this.objectLabel}: ${e.toString()}`),
                 level_tag: "error",
-            })
-        })
+            });
+        });
     }
 
     renderModalInner(): TemplateResult {
diff --git a/web/src/elements/policies/BoundPoliciesList.ts b/web/src/elements/policies/BoundPoliciesList.ts
index 7c79c82ca..b145cf660 100644
--- a/web/src/elements/policies/BoundPoliciesList.ts
+++ b/web/src/elements/policies/BoundPoliciesList.ts
@@ -4,6 +4,7 @@ import { AKResponse } from "../../api/Client";
 import { Table, TableColumn } from "../../elements/table/Table";
 import { PoliciesApi, PolicyBinding } from "authentik-api";
 
+import "../../elements/forms/DeleteForm";
 import "../../elements/Tabs";
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
@@ -90,13 +91,18 @@ export class BoundPoliciesList extends Table<PolicyBinding> {
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${AdminURLManager.policyBindings(`${item.pk}/delete/`)}">
-                <ak-spinner-button slot="trigger" class="pf-m-danger">
+            <ak-forms-delete
+                .obj=${item}
+                objectLabel=${gettext("Policy binding")}
+                .delete=${() => {
+                    return new PoliciesApi(DEFAULT_CONFIG).policiesBindingsDelete({
+                        policyBindingUuid: item.pk || "",
+                    });
+                }}>
+                <button slot="trigger" class="pf-c-button pf-m-danger">
                     ${gettext("Delete Binding")}
-                </ak-spinner-button>
-                <div slot="modal"></div>
-            </ak-modal-button>
-            `,
+                </button>
+            </ak-forms-delete>`,
         ];
     }
 
diff --git a/web/src/pages/applications/ApplicationListPage.ts b/web/src/pages/applications/ApplicationListPage.ts
index 33873022d..182b59226 100644
--- a/web/src/pages/applications/ApplicationListPage.ts
+++ b/web/src/pages/applications/ApplicationListPage.ts
@@ -4,6 +4,7 @@ import { AKResponse } from "../../api/Client";
 import { TablePage } from "../../elements/table/TablePage";
 
 import "../../elements/buttons/ModalButton";
+import "../../elements/forms/DeleteForm";
 import "../../elements/buttons/SpinnerButton";
 import { TableColumn } from "../../elements/table/Table";
 import { PAGE_SIZE } from "../../constants";
@@ -82,13 +83,18 @@ export class ApplicationListPage extends TablePage<Application> {
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${AdminURLManager.applications(`${item.pk}/delete/`)}">
-                <ak-spinner-button slot="trigger" class="pf-m-danger">
+            <ak-forms-delete
+                .obj=${item}
+                objectLabel=${gettext("Application")}
+                .delete=${() => {
+                    return new CoreApi(DEFAULT_CONFIG).coreApplicationsDelete({
+                        slug: item.slug || ""
+                    });
+                }}>
+                <button slot="trigger" class="pf-c-button pf-m-danger">
                     ${gettext("Delete")}
-                </ak-spinner-button>
-                <div slot="modal"></div>
-            </ak-modal-button>
-            `,
+                </button>
+            </ak-forms-delete>`,
         ];
     }
 
diff --git a/web/src/pages/crypto/CertificateKeyPairListPage.ts b/web/src/pages/crypto/CertificateKeyPairListPage.ts
index 2fcd6364d..8b266770b 100644
--- a/web/src/pages/crypto/CertificateKeyPairListPage.ts
+++ b/web/src/pages/crypto/CertificateKeyPairListPage.ts
@@ -7,6 +7,7 @@ import { CryptoApi, CertificateKeyPair } from "authentik-api";
 
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
+import "../../elements/forms/DeleteForm";
 import { TableColumn } from "../../elements/table/Table";
 import { PAGE_SIZE } from "../../constants";
 import { AdminURLManager } from "../../api/legacy";
@@ -62,13 +63,18 @@ export class CertificateKeyPairListPage extends TablePage<CertificateKeyPair> {
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${AdminURLManager.cryptoCertificates(`${item.pk}/delete/`)}">
-                <ak-spinner-button slot="trigger" class="pf-m-danger">
+            <ak-forms-delete
+                .obj=${item}
+                objectLabel=${gettext("Certificate-Key Pair")}
+                .delete=${() => {
+                    return new CryptoApi(DEFAULT_CONFIG).cryptoCertificatekeypairsDelete({
+                        kpUuid: item.pk || ""
+                    });
+                }}>
+                <button slot="trigger" class="pf-c-button pf-m-danger">
                     ${gettext("Delete")}
-                </ak-spinner-button>
-                <div slot="modal"></div>
-            </ak-modal-button>
-            `,
+                </button>
+            </ak-forms-delete>`,
         ];
     }
 
diff --git a/web/src/pages/events/RuleListPage.ts b/web/src/pages/events/RuleListPage.ts
index decb6b545..951887581 100644
--- a/web/src/pages/events/RuleListPage.ts
+++ b/web/src/pages/events/RuleListPage.ts
@@ -11,6 +11,7 @@ import { PAGE_SIZE } from "../../constants";
 import { EventsApi, NotificationRule } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { AdminURLManager } from "../../api/legacy";
+import "../../elements/forms/DeleteForm";
 
 @customElement("ak-event-rule-list")
 export class RuleListPage extends TablePage<NotificationRule> {
@@ -62,13 +63,18 @@ export class RuleListPage extends TablePage<NotificationRule> {
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${AdminURLManager.eventRules(`${item.pk}/delete/`)}">
-                <ak-spinner-button slot="trigger" class="pf-m-danger">
+            <ak-forms-delete
+                .obj=${item}
+                objectLabel=${gettext("Notification rule")}
+                .delete=${() => {
+                    return new EventsApi(DEFAULT_CONFIG).eventsRulesDelete({
+                        pbmUuid: item.pk || ""
+                    });
+                }}>
+                <button slot="trigger" class="pf-c-button pf-m-danger">
                     ${gettext("Delete")}
-                </ak-spinner-button>
-                <div slot="modal"></div>
-            </ak-modal-button>
-            `,
+                </button>
+            </ak-forms-delete>`,
         ];
     }
 
diff --git a/web/src/pages/events/TransportListPage.ts b/web/src/pages/events/TransportListPage.ts
index 7c8c95245..ef9306a84 100644
--- a/web/src/pages/events/TransportListPage.ts
+++ b/web/src/pages/events/TransportListPage.ts
@@ -11,6 +11,7 @@ import { PAGE_SIZE } from "../../constants";
 import { EventsApi, NotificationTransport } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { AdminURLManager } from "../../api/legacy";
+import "../../elements/forms/DeleteForm";
 
 @customElement("ak-event-transport-list")
 export class TransportListPage extends TablePage<NotificationTransport> {
@@ -66,13 +67,18 @@ export class TransportListPage extends TablePage<NotificationTransport> {
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${AdminURLManager.eventTransports(`${item.pk}/delete/`)}">
-                <ak-spinner-button slot="trigger" class="pf-m-danger">
+            <ak-forms-delete
+                .obj=${item}
+                objectLabel=${gettext("Notifications Transport")}
+                .delete=${() => {
+                    return new EventsApi(DEFAULT_CONFIG).eventsTransportsDelete({
+                        uuid: item.pk || ""
+                    });
+                }}>
+                <button slot="trigger" class="pf-c-button pf-m-danger">
                     ${gettext("Delete")}
-                </ak-spinner-button>
-                <div slot="modal"></div>
-            </ak-modal-button>
-            `,
+                </button>
+            </ak-forms-delete>`,
         ];
     }
 
diff --git a/web/src/pages/flows/BoundStagesList.ts b/web/src/pages/flows/BoundStagesList.ts
index c1fa88415..b37a6196a 100644
--- a/web/src/pages/flows/BoundStagesList.ts
+++ b/web/src/pages/flows/BoundStagesList.ts
@@ -3,6 +3,7 @@ import { customElement, html, property, TemplateResult } from "lit-element";
 import { AKResponse } from "../../api/Client";
 import { Table, TableColumn } from "../../elements/table/Table";
 
+import "../../elements/forms/DeleteForm";
 import "../../elements/Tabs";
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
@@ -57,13 +58,18 @@ export class BoundStagesList extends Table<FlowStageBinding> {
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${AdminURLManager.stageBindings(`${item.pk}/delete/`)}">
-                <ak-spinner-button slot="trigger" class="pf-m-danger">
+            <ak-forms-delete
+                .obj=${item}
+                objectLabel=${gettext("Stage binding")}
+                .delete=${() => {
+                    return new FlowsApi(DEFAULT_CONFIG).flowsBindingsDelete({
+                        fsbUuid: item.pk || "",
+                    });
+                }}>
+                <button slot="trigger" class="pf-c-button pf-m-danger">
                     ${gettext("Delete Binding")}
-                </ak-spinner-button>
-                <div slot="modal"></div>
-            </ak-modal-button>
-            `,
+                </button>
+            </ak-forms-delete>`,
         ];
     }
 
diff --git a/web/src/pages/flows/FlowListPage.ts b/web/src/pages/flows/FlowListPage.ts
index 66b37bad4..17ac5d0ff 100644
--- a/web/src/pages/flows/FlowListPage.ts
+++ b/web/src/pages/flows/FlowListPage.ts
@@ -5,6 +5,7 @@ import { TablePage } from "../../elements/table/TablePage";
 
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
+import "../../elements/forms/DeleteForm";
 import { TableColumn } from "../../elements/table/Table";
 import { PAGE_SIZE } from "../../constants";
 import { Flow, FlowsApi } from "authentik-api";
@@ -65,12 +66,18 @@ export class FlowListPage extends TablePage<Flow> {
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${AdminURLManager.flows(`${item.pk}/delete/`)}">
-                <ak-spinner-button slot="trigger" class="pf-m-danger">
+            <ak-forms-delete
+                .obj=${item}
+                objectLabel=${gettext("Flow")}
+                .delete=${() => {
+                    return new FlowsApi(DEFAULT_CONFIG).flowsInstancesDelete({
+                        slug: item.slug || ""
+                    });
+                }}>
+                <button slot="trigger" class="pf-c-button pf-m-danger">
                     ${gettext("Delete")}
-                </ak-spinner-button>
-                <div slot="modal"></div>
-            </ak-modal-button>
+                </button>
+            </ak-forms-delete>
             <a class="pf-c-button pf-m-secondary ak-root-link" href="${AdminURLManager.flows(`${item.pk}/execute/?next=/%23${window.location.href}`)}">
                 ${gettext("Execute")}
             </a>
diff --git a/web/src/pages/outposts/OutpostListPage.ts b/web/src/pages/outposts/OutpostListPage.ts
index 637a5be19..8b87d7e4e 100644
--- a/web/src/pages/outposts/OutpostListPage.ts
+++ b/web/src/pages/outposts/OutpostListPage.ts
@@ -9,6 +9,7 @@ import "./OutpostHealth";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/TokenCopyButton";
+import "../../elements/forms/DeleteForm";
 import { PAGE_SIZE } from "../../constants";
 import { Outpost, OutpostsApi } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
@@ -63,12 +64,18 @@ export class OutpostListPage extends TablePage<Outpost> {
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>&nbsp;
-            <ak-modal-button href="${AdminURLManager.outposts(`${item.pk}/delete/`)}">
-                <ak-spinner-button slot="trigger" class="pf-m-danger">
+            <ak-forms-delete
+                .obj=${item}
+                objectLabel=${gettext("Outpost")}
+                .delete=${() => {
+                    return new OutpostsApi(DEFAULT_CONFIG).outpostsOutpostsDelete({
+                        uuid: item.pk || ""
+                    });
+                }}>
+                <button slot="trigger" class="pf-c-button pf-m-danger">
                     ${gettext("Delete")}
-                </ak-spinner-button>
-                <div slot="modal"></div>
-            </ak-modal-button>
+                </button>
+            </ak-forms-delete>
             <ak-modal-button>
                 <button slot="trigger" class="pf-c-button pf-m-tertiary">
                     ${gettext("View Deployment Info")}
diff --git a/web/src/pages/outposts/OutpostServiceConnectionListPage.ts b/web/src/pages/outposts/OutpostServiceConnectionListPage.ts
index fed9d9698..bacf5cf5c 100644
--- a/web/src/pages/outposts/OutpostServiceConnectionListPage.ts
+++ b/web/src/pages/outposts/OutpostServiceConnectionListPage.ts
@@ -9,6 +9,7 @@ import "./OutpostHealth";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/Dropdown";
+import "../../elements/forms/DeleteForm";
 import { until } from "lit-html/directives/until";
 import { PAGE_SIZE } from "../../constants";
 import { OutpostsApi, ServiceConnection } from "authentik-api";
@@ -73,12 +74,18 @@ export class OutpostServiceConnectionListPage extends TablePage<ServiceConnectio
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${AdminURLManager.outpostServiceConnections(`${item.pk}/delete/`)}">
-                <ak-spinner-button slot="trigger" class="pf-m-danger">
+            <ak-forms-delete
+                .obj=${item}
+                objectLabel=${gettext("Outpost Service-connection")}
+                .delete=${() => {
+                    return new OutpostsApi(DEFAULT_CONFIG).outpostsServiceConnectionsAllDelete({
+                        uuid: item.pk || ""
+                    });
+                }}>
+                <button slot="trigger" class="pf-c-button pf-m-danger">
                     ${gettext("Delete")}
-                </ak-spinner-button>
-                <div slot="modal"></div>
-            </ak-modal-button>`,
+                </button>
+            </ak-forms-delete>`,
         ];
     }
 
diff --git a/web/src/pages/policies/PolicyListPage.ts b/web/src/pages/policies/PolicyListPage.ts
index 270425fdb..723265b0e 100644
--- a/web/src/pages/policies/PolicyListPage.ts
+++ b/web/src/pages/policies/PolicyListPage.ts
@@ -6,6 +6,7 @@ import { TablePage } from "../../elements/table/TablePage";
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/Dropdown";
 import "../../elements/buttons/SpinnerButton";
+import "../../elements/forms/DeleteForm";
 import { TableColumn } from "../../elements/table/Table";
 import { until } from "lit-html/directives/until";
 import { PAGE_SIZE } from "../../constants";
@@ -74,13 +75,18 @@ export class PolicyListPage extends TablePage<Policy> {
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${AdminURLManager.policies(`${item.pk}/delete/`)}">
-                <ak-spinner-button slot="trigger" class="pf-m-danger">
+            <ak-forms-delete
+                .obj=${item}
+                objectLabel=${gettext("Policy")}
+                .delete=${() => {
+                    return new PoliciesApi(DEFAULT_CONFIG).policiesAllDelete({
+                        policyUuid: item.pk || ""
+                    });
+                }}>
+                <button slot="trigger" class="pf-c-button pf-m-danger">
                     ${gettext("Delete")}
-                </ak-spinner-button>
-                <div slot="modal"></div>
-            </ak-modal-button>
-            `,
+                </button>
+            </ak-forms-delete>`,
         ];
     }
 
diff --git a/web/src/pages/property-mappings/PropertyMappingListPage.ts b/web/src/pages/property-mappings/PropertyMappingListPage.ts
index 715f33598..cdc6b55c1 100644
--- a/web/src/pages/property-mappings/PropertyMappingListPage.ts
+++ b/web/src/pages/property-mappings/PropertyMappingListPage.ts
@@ -6,6 +6,7 @@ import { TablePage } from "../../elements/table/TablePage";
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/Dropdown";
 import "../../elements/buttons/SpinnerButton";
+import "../../elements/forms/DeleteForm";
 import { TableColumn } from "../../elements/table/Table";
 import { until } from "lit-html/directives/until";
 import { PAGE_SIZE } from "../../constants";
@@ -69,13 +70,18 @@ export class PropertyMappingListPage extends TablePage<PropertyMapping> {
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${AdminURLManager.propertyMappings(`${item.pk}/delete/`)}">
-                <ak-spinner-button slot="trigger" class="pf-m-danger">
+            <ak-forms-delete
+                .obj=${item}
+                objectLabel=${gettext("Property Mapping")}
+                .delete=${() => {
+                    return new PropertymappingsApi(DEFAULT_CONFIG).propertymappingsAllDelete({
+                        pmUuid: item.pk || ""
+                    });
+                }}>
+                <button slot="trigger" class="pf-c-button pf-m-danger">
                     ${gettext("Delete")}
-                </ak-spinner-button>
-                <div slot="modal"></div>
-            </ak-modal-button>
-            `,
+                </button>
+            </ak-forms-delete>`,
         ];
     }
 
diff --git a/web/src/pages/providers/ProviderListPage.ts b/web/src/pages/providers/ProviderListPage.ts
index 7398488d7..5d064b218 100644
--- a/web/src/pages/providers/ProviderListPage.ts
+++ b/web/src/pages/providers/ProviderListPage.ts
@@ -6,6 +6,7 @@ import { TablePage } from "../../elements/table/TablePage";
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/buttons/Dropdown";
+import "../../elements/forms/DeleteForm";
 import { TableColumn } from "../../elements/table/Table";
 import { until } from "lit-html/directives/until";
 import { PAGE_SIZE } from "../../constants";
@@ -68,13 +69,18 @@ export class ProviderListPage extends TablePage<Provider> {
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${AdminURLManager.providers(`${item.pk}/delete/`)}">
-                <ak-spinner-button slot="trigger" class="pf-m-danger">
+            <ak-forms-delete
+                .obj=${item}
+                objectLabel=${gettext("Source")}
+                .delete=${() => {
+                    return new ProvidersApi(DEFAULT_CONFIG).providersAllDelete({
+                        id: item.pk || 0
+                    });
+                }}>
+                <button slot="trigger" class="pf-c-button pf-m-danger">
                     ${gettext("Delete")}
-                </ak-spinner-button>
-                <div slot="modal"></div>
-            </ak-modal-button>
-            `,
+                </button>
+            </ak-forms-delete>`,
         ];
     }
 
diff --git a/web/src/pages/sources/SourcesListPage.ts b/web/src/pages/sources/SourcesListPage.ts
index 89c462836..0f048133e 100644
--- a/web/src/pages/sources/SourcesListPage.ts
+++ b/web/src/pages/sources/SourcesListPage.ts
@@ -7,6 +7,7 @@ import { TablePage } from "../../elements/table/TablePage";
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/buttons/Dropdown";
+import "../../elements/forms/DeleteForm";
 import { until } from "lit-html/directives/until";
 import { PAGE_SIZE } from "../../constants";
 import { Source, SourcesApi } from "authentik-api";
@@ -62,13 +63,18 @@ export class SourceListPage extends TablePage<Source> {
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${AdminURLManager.sources(`${item.pk}/delete/`)}">
-                <ak-spinner-button slot="trigger" class="pf-m-danger">
+            <ak-forms-delete
+                .obj=${item}
+                objectLabel=${gettext("Source")}
+                .delete=${() => {
+                    return new SourcesApi(DEFAULT_CONFIG).sourcesAllDelete({
+                        slug: item.slug || ""
+                    });
+                }}>
+                <button slot="trigger" class="pf-c-button pf-m-danger">
                     ${gettext("Delete")}
-                </ak-spinner-button>
-                <div slot="modal"></div>
-            </ak-modal-button>
-            `,
+                </button>
+            </ak-forms-delete>`,
         ];
     }
 
diff --git a/web/src/pages/stages/InvitationListPage.ts b/web/src/pages/stages/InvitationListPage.ts
index 94c5ab0d1..2afb3327f 100644
--- a/web/src/pages/stages/InvitationListPage.ts
+++ b/web/src/pages/stages/InvitationListPage.ts
@@ -5,6 +5,7 @@ import { TablePage } from "../../elements/table/TablePage";
 
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
+import "../../elements/forms/DeleteForm";
 import { TableColumn } from "../../elements/table/Table";
 import { PAGE_SIZE } from "../../constants";
 import { Invitation, StagesApi } from "authentik-api";
@@ -53,12 +54,18 @@ export class InvitationListPage extends TablePage<Invitation> {
             html`${item.createdBy?.username}`,
             html`${item.expires?.toLocaleString()}`,
             html`
-            <ak-modal-button href="${AdminURLManager.stageInvitations(`${item.pk}/delete/`)}">
-                <ak-spinner-button slot="trigger" class="pf-m-danger">
+            <ak-forms-delete
+                .obj=${item}
+                objectLabel=${gettext("Prompt")}
+                .delete=${() => {
+                    return new StagesApi(DEFAULT_CONFIG).stagesInvitationInvitationsDelete({
+                        inviteUuid: item.pk || ""
+                    });
+                }}>
+                <button slot="trigger" class="pf-c-button pf-m-danger">
                     ${gettext("Delete")}
-                </ak-spinner-button>
-                <div slot="modal"></div>
-            </ak-modal-button>`,
+                </button>
+            </ak-forms-delete>`,
         ];
     }
 
diff --git a/web/src/pages/stages/PromptListPage.ts b/web/src/pages/stages/PromptListPage.ts
index e4319563e..4f8f52f50 100644
--- a/web/src/pages/stages/PromptListPage.ts
+++ b/web/src/pages/stages/PromptListPage.ts
@@ -5,6 +5,7 @@ import { TablePage } from "../../elements/table/TablePage";
 
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
+import "../../elements/forms/DeleteForm";
 import { TableColumn } from "../../elements/table/Table";
 import { PAGE_SIZE } from "../../constants";
 import { Prompt, StagesApi } from "authentik-api";
@@ -65,12 +66,18 @@ export class PromptListPage extends TablePage<Prompt> {
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${AdminURLManager.stagePrompts(`${item.pk}/delete/`)}">
-                <ak-spinner-button slot="trigger" class="pf-m-danger">
+            <ak-forms-delete
+                .obj=${item}
+                objectLabel=${gettext("Prompt")}
+                .delete=${() => {
+                    return new StagesApi(DEFAULT_CONFIG).stagesPromptPromptsDelete({
+                        promptUuid: item.pk || ""
+                    });
+                }}>
+                <button slot="trigger" class="pf-c-button pf-m-danger">
                     ${gettext("Delete")}
-                </ak-spinner-button>
-                <div slot="modal"></div>
-            </ak-modal-button>`,
+                </button>
+            </ak-forms-delete>`,
         ];
     }
 
diff --git a/web/src/pages/stages/StageListPage.ts b/web/src/pages/stages/StageListPage.ts
index eff238e49..c8bade87f 100644
--- a/web/src/pages/stages/StageListPage.ts
+++ b/web/src/pages/stages/StageListPage.ts
@@ -7,6 +7,7 @@ import { TablePage } from "../../elements/table/TablePage";
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/SpinnerButton";
 import "../../elements/buttons/Dropdown";
+import "../../elements/forms/DeleteForm";
 import { until } from "lit-html/directives/until";
 import { PAGE_SIZE } from "../../constants";
 import { Stage, StagesApi } from "authentik-api";
@@ -66,13 +67,18 @@ export class StageListPage extends TablePage<Stage> {
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${AdminURLManager.stages(`${item.pk}/delete/`)}">
-                <ak-spinner-button slot="trigger" class="pf-m-danger">
+            <ak-forms-delete
+                .obj=${item}
+                objectLabel=${gettext("Group")}
+                .delete=${() => {
+                    return new StagesApi(DEFAULT_CONFIG).stagesAllDelete({
+                        stageUuid: item.pk || ""
+                    });
+                }}>
+                <button slot="trigger" class="pf-c-button pf-m-danger">
                     ${gettext("Delete")}
-                </ak-spinner-button>
-                <div slot="modal"></div>
-            </ak-modal-button>
-            `,
+                </button>
+            </ak-forms-delete>`,
         ];
     }
 
diff --git a/web/src/pages/tokens/TokenListPage.ts b/web/src/pages/tokens/TokenListPage.ts
index 13f7167eb..b73c03b3c 100644
--- a/web/src/pages/tokens/TokenListPage.ts
+++ b/web/src/pages/tokens/TokenListPage.ts
@@ -6,11 +6,11 @@ import { TablePage } from "../../elements/table/TablePage";
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/Dropdown";
 import "../../elements/buttons/TokenCopyButton";
+import "../../elements/forms/DeleteForm";
 import { TableColumn } from "../../elements/table/Table";
 import { PAGE_SIZE } from "../../constants";
 import { CoreApi, Token } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
-import { AdminURLManager } from "../../api/legacy";
 
 @customElement("ak-token-list")
 export class TokenListPage extends TablePage<Token> {
@@ -56,12 +56,18 @@ export class TokenListPage extends TablePage<Token> {
             html`${item.expiring ? "Yes" : "No"}`,
             html`${item.expiring ? item.expires?.toLocaleString() : "-"}`,
             html`
-            <ak-modal-button href="${AdminURLManager.tokens(`${item.identifier}/delete/`)}">
-                <ak-spinner-button slot="trigger" class="pf-m-danger">
+            <ak-forms-delete
+                .obj=${item}
+                objectLabel=${gettext("Token")}
+                .delete=${() => {
+                    return new CoreApi(DEFAULT_CONFIG).coreTokensDelete({
+                        identifier: item.identifier
+                    });
+                }}>
+                <button slot="trigger" class="pf-c-button pf-m-danger">
                     ${gettext("Delete")}
-                </ak-spinner-button>
-                <div slot="modal"></div>
-            </ak-modal-button>
+                </button>
+            </ak-forms-delete>
             <ak-token-copy-button identifier="${item.identifier}">
                 ${gettext("Copy Key")}
             </ak-token-copy-button>
diff --git a/web/src/pages/tokens/UserTokenList.ts b/web/src/pages/tokens/UserTokenList.ts
index ce8ff8ccb..56cec2b0d 100644
--- a/web/src/pages/tokens/UserTokenList.ts
+++ b/web/src/pages/tokens/UserTokenList.ts
@@ -2,6 +2,7 @@ import { gettext } from "django";
 import { customElement, html, property, TemplateResult } from "lit-element";
 import { AKResponse } from "../../api/Client";
 
+import "../../elements/forms/DeleteForm";
 import "../../elements/buttons/ModalButton";
 import "../../elements/buttons/Dropdown";
 import "../../elements/buttons/TokenCopyButton";
@@ -95,12 +96,18 @@ export class UserTokenList extends Table<Token> {
                 </ak-spinner-button>
                 <div slot="modal"></div>
             </ak-modal-button>
-            <ak-modal-button href="${AdminURLManager.tokens(`${item.identifier}/delete/`)}">
-                <ak-spinner-button slot="trigger" class="pf-m-danger">
+            <ak-forms-delete
+                .obj=${item}
+                objectLabel=${gettext("Token")}
+                .delete=${() => {
+                    return new CoreApi(DEFAULT_CONFIG).coreTokensDelete({
+                        identifier: item.identifier
+                    });
+                }}>
+                <button slot="trigger" class="pf-c-button pf-m-danger">
                     ${gettext("Delete")}
-                </ak-spinner-button>
-                <div slot="modal"></div>
-            </ak-modal-button>
+                </button>
+            </ak-forms-delete>
             <ak-token-copy-button identifier="${item.identifier}">
                 ${gettext("Copy Key")}
             </ak-token-copy-button>
diff --git a/web/src/pages/users/UserListPage.ts b/web/src/pages/users/UserListPage.ts
index 67b3c7e98..99373419c 100644
--- a/web/src/pages/users/UserListPage.ts
+++ b/web/src/pages/users/UserListPage.ts
@@ -11,6 +11,7 @@ import { PAGE_SIZE } from "../../constants";
 import { CoreApi, User } from "authentik-api";
 import { DEFAULT_CONFIG } from "../../api/Config";
 import { AdminURLManager } from "../../api/legacy";
+import "../../elements/forms/DeleteForm";
 
 @customElement("ak-user-list")
 export class UserListPage extends TablePage<User> {
@@ -86,12 +87,18 @@ export class UserListPage extends TablePage<User> {
                     </li>
                     <li class="pf-c-divider" role="separator"></li>
                     <li>
-                        <ak-modal-button href="${AdminURLManager.users(`${item.pk}/delete/`)}">
-                            <button slot="trigger" class="pf-c-dropdown__menu-item">
+                        <ak-forms-delete
+                            .obj=${item}
+                            objectLabel=${gettext("User")}
+                            .delete=${() => {
+                                return new CoreApi(DEFAULT_CONFIG).coreUsersDelete({
+                                    id: item.pk || 0
+                                });
+                            }}>
+                            <button slot="trigger" class="pf-c-button pf-m-danger">
                                 ${gettext("Delete")}
                             </button>
-                            <div slot="modal"></div>
-                        </ak-modal-button>
+                        </ak-forms-delete>
                     </li>
                 </ul>
             </ak-dropdown>