forked from Nixius/authelia
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:
parent
239d2c07e1
commit
463483f769
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue