mc/mcias
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix CSP-blocked inline handlers on SSO clients page

Browse Source 
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>
This commit is contained in:
Kyle Isom
2026-04-01 08:22:17 -07:00
parent ef28805042
commit e082671f53
3 changed files with 39 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
web/static/mcias.js
View File

@@ -15,6 +15,31 @@ document.body.addEventListener('htmx:responseError', function (evt) {
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 () {

5
web/static/style.css
View File

@@ -34,3 +34,8 @@ th { background: #e9ecef; }
input, select { padding: 0.4rem; border: 1px solid #ced4da; border-radius: 4px; }
.clickable-row { cursor: pointer; }
.clickable-row:hover { background: #e9ecef; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; min-width: 200px; }
.flex-2 { flex: 2; min-width: 300px; }
.text-center { text-align: center; }
.p-2 { padding: 2rem; }