Kyle Isom
e082671f53
script-src 'self' blocks onclick handlers and style-src blocks inline style attributes. Replace onclick with data-toggle-form attributes wired by mcias.js on DOMContentLoaded, and move inline styles to CSS utility classes. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
52 lines
2.1 KiB
JavaScript
52 lines
2.1 KiB
JavaScript
// mcias.js — HTMX event wiring for the MCIAS web UI.
|
|
|
|
// Show server error responses in the global #htmx-error-banner.
|
|
//
|
|
// HTMX 2.x fires htmx:responseError for 4xx/5xx responses and does not swap
|
|
// the body into the target by default. The server's renderError() always
|
|
// returns a <div class="alert alert-error"> fragment whose message is
|
|
// HTML-escaped server-side, so setting innerHTML here is safe.
|
|
document.body.addEventListener('htmx:responseError', function (evt) {
|
|
var banner = document.getElementById('htmx-error-banner');
|
|
if (!banner) { return; }
|
|
var body = (evt.detail.xhr && evt.detail.xhr.responseText) || 'An unexpected error occurred.';
|
|
banner.innerHTML = body;
|
|
banner.style.display = '';
|
|
banner.scrollIntoView({ behavior: 'instant', block: 'nearest' });
|
|
});
|
|
|
|
// Toggle visibility of a create-form panel. The button text alternates
|
|
// between the given labels. Used by admin pages (accounts, policies,
|
|
// pgcreds, SSO clients) to show/hide the inline create form.
|
|
//
|
|
// Usage: <button data-toggle-form="create-form"
|
|
// data-label-show="Add Item" data-label-hide="Cancel">
|
|
function toggleForm(btn) {
|
|
var id = btn.getAttribute('data-toggle-form');
|
|
var el = document.getElementById(id);
|
|
if (!el) { return; }
|
|
var show = el.hidden || el.style.display === 'none';
|
|
el.hidden = false;
|
|
el.style.display = show ? '' : 'none';
|
|
var labelShow = btn.getAttribute('data-label-show') || 'Create';
|
|
var labelHide = btn.getAttribute('data-label-hide') || 'Cancel';
|
|
btn.textContent = show ? labelHide : labelShow;
|
|
}
|
|
|
|
// Auto-wire all toggle-form buttons on page load.
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
document.querySelectorAll('[data-toggle-form]').forEach(function (btn) {
|
|
btn.addEventListener('click', function () { toggleForm(btn); });
|
|
});
|
|
});
|
|
|
|
// Clear the error banner whenever a successful HTMX swap completes so
|
|
// stale errors do not persist after the user corrects their input.
|
|
document.body.addEventListener('htmx:afterSwap', function () {
|
|
var banner = document.getElementById('htmx-error-banner');
|
|
if (banner) {
|
|
banner.style.display = 'none';
|
|
banner.innerHTML = '';
|
|
}
|
|
});
|