forked from Nixius/authelia
1
0
Fork 0

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
This commit is contained in:
Leopere 2026-03-03 17:00:58 -05:00
parent 239d2c07e1
commit 463483f769
Signed by: colin
SSH Key Fingerprint: SHA256:nRPCQTeMFLdGytxRQmPVK9VXY3/ePKQ5lGRyJhT5DY8
1 changed files with 18 additions and 8 deletions

View File

@ -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>