From 463483f7695315ac0e573911d7bccaed11cc87a8 Mon Sep 17 00:00:00 2001
From: Leopere <colin@nixc.us>
Date: Tue, 3 Mar 2026 17:00:58 -0500
Subject: [PATCH] Unify stack action button behaviour via single event listener

Replace per-form onsubmit handlers with a single script that handles
all data-stack-action forms identically: confirm if needed, then
disable the button and show a contextual loading label.

Made-with: Cursor
---
 .../ss-atlas/templates/pages/dashboard.html   | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/docker/ss-atlas/templates/pages/dashboard.html b/docker/ss-atlas/templates/pages/dashboard.html
index 6b99d1f..e0c2668 100644
--- a/docker/ss-atlas/templates/pages/dashboard.html
+++ b/docker/ss-atlas/templates/pages/dashboard.html
@@ -180,26 +180,23 @@
       <hr class="divider">
       <div class="actions">
         {{if .StackRunning}}
-        <form method="POST" action="/stack-manage" style="margin:0"
-              onsubmit="this.querySelector('button').disabled=true; this.querySelector('button').textContent='Restarting…';">
+        <form method="POST" action="/stack-manage" style="margin:0" data-stack-action>
           <input type="hidden" name="action" value="restart">
           <button type="submit" class="btn btn-outline btn-sm">Restart</button>
         </form>
-        <form method="POST" action="/stack-manage" style="margin:0"
-              onsubmit="this.querySelector('button').disabled=true; this.querySelector('button').textContent='Stopping…';">
+        <form method="POST" action="/stack-manage" style="margin:0" data-stack-action>
           <input type="hidden" name="action" value="stop">
           <button type="submit" class="btn btn-warning btn-sm">Stop</button>
         </form>
         {{else}}
-        <form method="POST" action="/stack-manage" style="margin:0"
-              onsubmit="this.querySelector('button').disabled=true; this.querySelector('button').textContent='Starting…';">
+        <form method="POST" action="/stack-manage" style="margin:0" data-stack-action>
           <input type="hidden" name="action" value="start">
           <button type="submit" class="btn btn-sm">Start</button>
         </form>
         {{end}}
         {{if .StackDeployed}}
-        <form method="POST" action="/stack-manage" style="margin:0"
-              onsubmit="if(!confirm('Destroy your stack? All containers will be removed. Volumes are preserved.')) return false; this.querySelector('button').disabled=true; this.querySelector('button').textContent='Destroying…';">
+        <form method="POST" action="/stack-manage" style="margin:0" data-stack-action
+              data-confirm="Destroy your stack? All containers will be removed. Volumes are preserved.">
           <input type="hidden" name="action" value="destroy">
           <button type="submit" class="btn btn-danger btn-sm">Destroy</button>
         </form>
@@ -247,5 +244,18 @@
     {{end}}
   </div>
   <div class="version-badge">{{.Commit}}</div>
+  <script>
+    const pending = { restart:'Restarting…', stop:'Stopping…', start:'Starting…', destroy:'Destroying…' };
+    document.querySelectorAll('form[data-stack-action]').forEach(function(form) {
+      form.addEventListener('submit', function(e) {
+        var msg = form.dataset.confirm;
+        if (msg && !confirm(msg)) { e.preventDefault(); return; }
+        var btn = form.querySelector('button');
+        var action = (form.querySelector('input[name="action"]') || {}).value;
+        btn.disabled = true;
+        btn.textContent = pending[action] || '…';
+      });
+    });
+  </script>
 </body>
 </html>