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>

internal/ui/handlers_sso_clients.go

@@ -12,12 +12,14 @@ import (
 func (u *UIServer) handleSSOClientsPage(w http.ResponseWriter, r *http.Request) {
 	csrfToken, err := u.setCSRFCookies(w)
 	if err != nil {
+		u.logger.Error("sso-clients: set CSRF cookies", "error", err)
 		http.Error(w, "internal error", http.StatusInternalServerError)
 		return
 	}
 
 	clients, err := u.db.ListSSOClients()
 	if err != nil {
+		u.logger.Error("sso-clients: list clients", "error", err)
 		u.renderError(w, r, http.StatusInternalServerError, "failed to load SSO clients")
 		return
 	}

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 () {

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; }

web/templates/sso_clients.html

@@ -1,3 +1,4 @@
+{{define "sso_clients"}}{{template "base" .}}{{end}}
 {{define "title"}} - SSO Clients{{end}}
 {{define "content"}}
 <div class="page-header d-flex justify-between align-center">
@@ -5,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>
@@ -48,6 +52,6 @@
       {{end}}
     </tbody>
   </table>
-  {{if not .Clients}}<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}}