From e082671f53df29a0693857f0ece336a6ebbd634f Mon Sep 17 00:00:00 2001
From: Kyle Isom <kyle@imap.cc>
Date: Wed, 1 Apr 2026 08:22:17 -0700
Subject: [PATCH] Fix CSP-blocked inline handlers on SSO clients page

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>
---
 web/static/mcias.js            | 25 +++++++++++++++++++++++++
 web/static/style.css           |  5 +++++
 web/templates/sso_clients.html | 15 +++++++++------
 3 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/web/static/mcias.js b/web/static/mcias.js
index af5937d..7a6492f 100644
--- a/web/static/mcias.js
+++ b/web/static/mcias.js
@@ -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 () {
diff --git a/web/static/style.css b/web/static/style.css
index f3aeea0..edb3608 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -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; }
diff --git a/web/templates/sso_clients.html b/web/templates/sso_clients.html
index fec6b62..cd2085a 100644
--- a/web/templates/sso_clients.html
+++ b/web/templates/sso_clients.html
@@ -6,22 +6,25 @@
     <h2>SSO Clients</h2>
     <p class="text-muted text-small">Registered applications that use MCIAS for single sign-on.</p>
   </div>
-  <button class="btn btn-primary" onclick="var f=document.getElementById('create-form');f.hidden=!f.hidden;this.textContent=f.hidden?'Add Client':'Cancel'">Add Client</button>
+  <button class="btn btn-primary"
+          data-toggle-form="create-form"
+          data-label-show="Add Client"
+          data-label-hide="Cancel">Add Client</button>
 </div>
 
 <div id="create-form" class="card mt-2" hidden>
   <div class="card-title">Register SSO Client</div>
   <form hx-post="/sso-clients" hx-target="#sso-clients-tbody" hx-swap="afterbegin">
-    <div class="d-flex gap-1" style="flex-wrap:wrap">
-      <div class="form-group" style="flex:1;min-width:200px">
+    <div class="d-flex gap-1 flex-wrap">
+      <div class="form-group flex-1">
         <label class="form-label">Client ID / Service Name</label>
         <input class="form-control" type="text" name="client_id" required placeholder="e.g. mcr">
       </div>
-      <div class="form-group" style="flex:2;min-width:300px">
+      <div class="form-group flex-2">
         <label class="form-label">Redirect URI</label>
         <input class="form-control" type="url" name="redirect_uri" required placeholder="https://service.example.com/sso/callback">
       </div>
-      <div class="form-group" style="flex:1;min-width:200px">
+      <div class="form-group flex-1">
         <label class="form-label">Tags <span class="text-muted text-small">(comma-separated)</span></label>
         <input class="form-control" type="text" name="tags" placeholder="env:prod,tier:web">
       </div>
@@ -49,6 +52,6 @@
       {{end}}
     </tbody>
   </table>
-  {{if eq (len .Clients) 0}}<p class="text-muted" style="text-align:center;padding:2rem">No SSO clients registered.</p>{{end}}
+  {{if eq (len .Clients) 0}}<p class="text-muted text-center p-2">No SSO clients registered.</p>{{end}}
 </div>
 {{end}}