From 8fd91f18572ba4bbc3e158e96b083d93ea4e288d Mon Sep 17 00:00:00 2001
From: Florian Heinz <mail@hnz.io>
Date: Wed, 22 Apr 2026 07:50:27 +0200
Subject: [PATCH] fix: use in-app delete confirmation dialogs

---
 app/static/js/app.js               | 12 ----------
 app/templates/planning/detail.html | 37 ++++++++++++++++++++++++++----
 tests/test_routes.py               | 11 +++++----
 3 files changed, 38 insertions(+), 22 deletions(-)

diff --git a/app/static/js/app.js b/app/static/js/app.js
index 933a002..d1a8f25 100644
--- a/app/static/js/app.js
+++ b/app/static/js/app.js
@@ -415,17 +415,6 @@ function mountThemeToggle() {
   });
 }
 
-function mountDeleteConfirmations() {
-  document.querySelectorAll("[data-confirm-submit]").forEach((node) => {
-    node.addEventListener("click", (event) => {
-      const message = node.dataset.confirmSubmit || "Wirklich löschen?";
-      if (!window.confirm(message)) {
-        event.preventDefault();
-      }
-    });
-  });
-}
-
 document.addEventListener("DOMContentLoaded", async () => {
   await registerServiceWorker();
   injectCsrfTokens();
@@ -434,7 +423,6 @@ document.addEventListener("DOMContentLoaded", async () => {
   mountDialogs();
   mountPersonalSplitSync();
   mountAnnualAmountSync();
-  mountDeleteConfirmations();
   document.querySelectorAll("[data-enable-push]").forEach((node) => {
     node.addEventListener("click", async (event) => {
       event.preventDefault();
diff --git a/app/templates/planning/detail.html b/app/templates/planning/detail.html
index 83378b0..61f6189 100644
--- a/app/templates/planning/detail.html
+++ b/app/templates/planning/detail.html
@@ -226,10 +226,25 @@
             <div class="dialog-action-row dialog-action-spread">
               <button class="ghost-button small-button" type="submit">Speichern</button>
               {% if month.incomes|length > 1 %}
-                <button class="ghost-button danger-button small-button" type="submit" formaction="{{ url_for('planning.delete_income', label=month.label, income_id=income.id) }}" formnovalidate data-confirm-submit="Einkommenszeile wirklich löschen?">Löschen</button>
+                <button class="ghost-button danger-button small-button" type="button" data-open-dialog="confirm-delete-income-{{ income.id }}">Löschen</button>
               {% endif %}
             </div>
           </form>
+          {% if month.incomes|length > 1 %}
+            <dialog id="confirm-delete-income-{{ income.id }}" class="app-dialog confirm-dialog">
+              <form method="dialog" class="dialog-close-row">
+                <button class="dialog-close-button" type="submit" aria-label="Schließen">×</button>
+              </form>
+              <div class="stack-form">
+                <h3>Einkommenszeile wirklich löschen?</h3>
+                <p class="muted">`{{ income.label }}` wird aus diesem Monat entfernt.</p>
+                <form method="post" action="{{ url_for('planning.delete_income', label=month.label, income_id=income.id) }}" class="dialog-action-row dialog-action-spread">
+                  <button class="ghost-button" type="button" data-open-dialog="income-dialog">Zurück</button>
+                  <button class="primary-button danger-fill-button" type="submit">Jetzt löschen</button>
+                </form>
+              </div>
+            </dialog>
+          {% endif %}
         {% endfor %}
       </div>
       <form method="post" action="{{ url_for('planning.create_income', label=month.label) }}" class="soft-form-section stack-form">
@@ -354,7 +369,7 @@
         <p class="muted">`{{ card.community_account.name }}` wird ausgeblendet und seine Budget-Zuordnungen werden gelöst.</p>
         <form method="post" action="{{ url_for('planning.delete_community_account', label=month.label, community_account_id=card.community_account.id) }}" class="dialog-action-row dialog-action-spread">
           <button class="ghost-button" type="button" data-open-dialog="community-account-item-{{ card.community_account.id }}">Zurück</button>
-          <button class="primary-button danger-fill-button" type="submit" data-confirm-submit="Konto wirklich löschen?">Jetzt löschen</button>
+          <button class="primary-button danger-fill-button" type="submit">Jetzt löschen</button>
         </form>
       </div>
     </dialog>
@@ -598,8 +613,20 @@
               {% endfor %}
             </div>
 
-            <form method="post" action="{{ url_for('planning.delete_category', label=month.label, category_id=category_data.category.id) }}">
-              <button class="ghost-button danger-button" type="submit" data-confirm-submit="Kategorie wirklich löschen?">Kategorie löschen</button>
+            <button class="ghost-button danger-button" type="button" data-open-dialog="confirm-delete-category-{{ category_data.category.id }}">Kategorie löschen</button>
+          </div>
+        </dialog>
+
+        <dialog id="confirm-delete-category-{{ category_data.category.id }}" class="app-dialog confirm-dialog">
+          <form method="dialog" class="dialog-close-row">
+            <button class="dialog-close-button" type="submit" aria-label="Schließen">×</button>
+          </form>
+          <div class="stack-form">
+            <h3>Kategorie wirklich löschen?</h3>
+            <p class="muted">`{{ category_data.category.name }}` wird ausgeblendet und ihre Einträge werden mit ausgeblendet.</p>
+            <form method="post" action="{{ url_for('planning.delete_category', label=month.label, category_id=category_data.category.id) }}" class="dialog-action-row dialog-action-spread">
+              <button class="ghost-button" type="button" data-open-dialog="{{ category_data.dialog_id }}">Zurück</button>
+              <button class="primary-button danger-fill-button" type="submit">Jetzt löschen</button>
             </form>
           </div>
         </dialog>
@@ -794,7 +821,7 @@
             <form method="post" action="{{ url_for('planning.delete_entry', label=month.label, entry_id=item.entry.id) }}" class="dialog-action-row dialog-action-spread">
               <input type="hidden" name="return_dialog" value="{{ category_data.dialog_id }}">
               <button class="ghost-button" type="button" data-open-dialog="{{ item.dialog_id }}">Zurück</button>
-              <button class="primary-button danger-fill-button" type="submit" data-confirm-submit="Eintrag wirklich löschen?">Jetzt löschen</button>
+              <button class="primary-button danger-fill-button" type="submit">Jetzt löschen</button>
             </form>
           </div>
         </dialog>
diff --git a/tests/test_routes.py b/tests/test_routes.py
index c98b555..6437fe5 100644
--- a/tests/test_routes.py
+++ b/tests/test_routes.py
@@ -111,14 +111,15 @@ def test_planning_shows_budgets_and_community_accounts(logged_in_client):
     assert b"Auszahlung Person B" in response.data
 
 
-def test_planning_delete_actions_render_confirmation_hooks(logged_in_client):
+def test_planning_delete_actions_render_app_confirmation_dialogs(logged_in_client):
     response = logged_in_client.get("/planning/2026-04")
 
     assert response.status_code == 200
-    assert b'data-confirm-submit="Einkommenszeile wirklich l\xc3\xb6schen?' in response.data
-    assert b'data-confirm-submit="Kategorie wirklich l\xc3\xb6schen?' in response.data
-    assert b'data-confirm-submit="Konto wirklich l\xc3\xb6schen?' in response.data
-    assert b'data-confirm-submit="Eintrag wirklich l\xc3\xb6schen?' in response.data
+    assert b"confirm-delete-income-" in response.data
+    assert b"confirm-delete-category-" in response.data
+    assert b"confirm-delete-community-account-" in response.data
+    assert b"confirm-delete-entry-" in response.data
+    assert b"data-confirm-submit" not in response.data
 
 
 def test_community_account_can_assign_budget_categories(logged_in_client):