From d888371b8d03a137eee16bb135ccf1c97a4c2e8a Mon Sep 17 00:00:00 2001
From: CallMeTechie <34693633+CallMeTechie@users.noreply.github.com>
Date: Thu, 25 Jun 2026 21:43:49 +0200
Subject: [PATCH] fix(users): Aurora add/edit user (and token) modals never
 opened
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Root cause: aurora.css base `.modal-overlay{display:none}` is loaded after
pro.css (same specificity → wins). The shared users.js opened the user/token
modal overlays with `style.display = ''`, which clears the inline 'display:none'
and falls back to that CSS rule → still none, so the modals stayed invisible
in the Aurora theme (handlers fired, nothing showed). default/pro have base
`display:flex`, so '' worked there.

Fix: open the overlays with explicit `style.display = 'flex'` (inline beats the
class rule in every theme), matching routes.js's working pattern. Hide path
('none') is unchanged. Regression tests assert both overlays open with 'flex'
and document aurora.css's display:none base.
---
 public/js/users.js         |  9 +++++++--
 tests/aurora_theme.test.js | 24 ++++++++++++++++++++++++
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/public/js/users.js b/public/js/users.js
index 9d6e8dd6..c7398925 100644
--- a/public/js/users.js
+++ b/public/js/users.js
@@ -343,7 +343,10 @@
 
   function openUserModal() {
     hideError(userFormError);
-    userOverlay.style.display = '';
+    // Explicit 'flex' (not '') so the overlay overrides aurora.css's base
+    // `.modal-overlay{display:none}`; inline style beats the class rule. Matches
+    // routes.js. Opening with '' would fall back to that rule and stay hidden.
+    userOverlay.style.display = 'flex';
   }
 
   function closeUserModal() {
@@ -595,7 +598,9 @@
     // Custom scopes checkboxes
     renderCustomScopes();
 
-    tokenOverlay.style.display = '';
+    // Explicit 'flex' (not '') — see openUserModal: aurora.css base hides
+    // .modal-overlay, so '' would fall back to display:none and stay hidden.
+    tokenOverlay.style.display = 'flex';
   }
 
   function renderCustomScopes() {
diff --git a/tests/aurora_theme.test.js b/tests/aurora_theme.test.js
index d998797b..3774c2df 100644
--- a/tests/aurora_theme.test.js
+++ b/tests/aurora_theme.test.js
@@ -1580,3 +1580,27 @@ describe('aurora theme — settings + sidebar UX fixes (Issues 17/18/19)', () =>
     assert.match(res.text, /class="[^"]*app[^"]*"/, '.app shell present');
   });
 });
+
+describe('users modals — Aurora-safe overlay open (regression)', () => {
+  // aurora.css base `.modal-overlay{display:none}` (loaded after pro.css, same
+  // specificity → wins). The shared users.js must therefore open overlays with an
+  // explicit inline display:flex (inline beats the class rule), exactly like
+  // routes.js does. Opening with style.display='' falls back to aurora.css → none,
+  // so the Add User / Edit User (and token) modals never appear in Aurora.
+  const js = fs.readFileSync(path.join(__dirname, '..', 'public', 'js', 'users.js'), 'utf8');
+
+  it('aurora.css hides .modal-overlay by default (documents why flex is required)', () => {
+    const css = fs.readFileSync(path.join(__dirname, '..', 'public', 'css', 'aurora.css'), 'utf8');
+    assert.match(css, /\.modal-overlay\s*\{[^}]*display\s*:\s*none/, 'aurora .modal-overlay base is display:none');
+  });
+
+  it('user modal overlay is opened with display:flex, not an empty string', () => {
+    assert.match(js, /userOverlay\.style\.display\s*=\s*'flex'/, "openUserModal must set userOverlay display to 'flex'");
+    assert.doesNotMatch(js, /userOverlay\.style\.display\s*=\s*''/, "userOverlay must not be opened with '' (aurora.css → none)");
+  });
+
+  it('token modal overlay is opened with display:flex, not an empty string', () => {
+    assert.match(js, /tokenOverlay\.style\.display\s*=\s*'flex'/, "token modal must set tokenOverlay display to 'flex'");
+    assert.doesNotMatch(js, /tokenOverlay\.style\.display\s*=\s*''/, "tokenOverlay must not be opened with '' (aurora.css → none)");
+  });
+});