From 31bb7771cd3822a78bebf55ce89816cb5b8321e2 Mon Sep 17 00:00:00 2001
From: cclohmar <claus.lohmar@lohmar.co.uk>
Date: Fri, 10 Jul 2026 13:15:48 +0100
Subject: [PATCH] feat: user management in Access tab with modal

---
 main.go | 119 ++++++++++++++++++++++++++++----------------------------
 1 file changed, 59 insertions(+), 60 deletions(-)
diff --git a/main.go b/main.go
index 58b091b..9fd6962 100644
--- a/main.go
+++ b/main.go
@@ -1399,47 +1399,45 @@ const adminHTML = `<!DOCTYPE html>
 
       <!-- Access (Users) -->
       <div id="page-access" class="page hidden">
-        <div class="page-header">
-          <h2>Access Management</h2>
-          <p>Manage users, groups, and authentication policies.</p>
+        <div class="page-header" style="display:flex;justify-content:space-between;align-items:center;">
+          <div><h2>Access Management</h2><p>Manage users, groups, and authentication policies.</p></div>
+          <button class="btn btn-primary" onclick="showCreateModal()">+ Add User</button>
         </div>
-        <div class="card">
-          <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;">
-            <h3 style="margin:0;">Users</h3>
-            <button class="btn btn-primary btn-sm" onclick="switchSection('create')">+ Create User</button>
-          </div>
-          <table>
-            <thead><tr><th>Username</th><th>Display Name</th><th>Email</th><th>Groups</th><th>Status</th><th></th></tr></thead>
+        <div style="background:#fff;border-radius:10px;border:1px solid #edf2f7;overflow:hidden;">
+          <table style="width:100%;border-collapse:collapse;">
+            <thead><tr style="background:#f7fafc;"><th style="padding:12px 16px;text-align:left;font-size:0.85rem;color:#718096;text-transform:uppercase;">Username</th><th style="padding:12px 16px;text-align:left;font-size:0.85rem;color:#718096;text-transform:uppercase;">Display Name</th><th style="padding:12px 16px;text-align:left;font-size:0.85rem;color:#718096;text-transform:uppercase;">Email</th><th style="padding:12px 16px;text-align:left;font-size:0.85rem;color:#718096;text-transform:uppercase;">Groups</th><th style="padding:12px 16px;text-align:left;font-size:0.85rem;color:#718096;text-transform:uppercase;">Status</th><th style="padding:12px 16px;text-align:left;font-size:0.85rem;color:#718096;text-transform:uppercase;">Actions</th></tr></thead>
             <tbody id="usersTable"></tbody>
           </table>
-          <div id="accessEmpty" class="empty-state hidden">
-            <div class="icon">&#128101;</div>
-            <p>No users found. Create one to get started.</p>
-          </div>
         </div>
-        <div id="page-create" class="hidden">
-          <div class="card">
-            <h3>Create User</h3>
-            <form id="createForm" onsubmit="createUser(event)">
-              <div class="form-row">
-                <input name="username" placeholder="Username" required style="width:180px;">
-                <input name="display_name" placeholder="Display Name" required style="width:200px;">
-                <input name="email" placeholder="Email" type="email" required style="width:220px;">
-                <select name="groups" multiple size="3" style="width:160px;">
-                  <option value="users">users</option>
-                  <option value="drive">drive</option>
-                  <option value="office">office</option>
-                  <option value="erp">erp</option>
-                  <option value="chat">chat</option>
-                  <option value="meet">meet</option>
-                  <option value="mail">mail</option>
-                  <option value="ai">ai</option>
-                </select>
-                <button type="submit" class="btn btn-primary">Create</button>
+      </div>
+
+      <!-- Create User Modal -->
+      <div id="createModal" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:1000;">
+        <div style="background:#fff;border-radius:12px;padding:2rem;width:500px;max-width:90%;margin:5vh auto;">
+          <h3 style="margin-bottom:1.5rem;">Add User</h3>
+          <form id="createForm" onsubmit="return createUser(event)">
+            <div class="field"><label>Username</label><input type="text" name="username" required pattern="[a-z0-9._-]+"></div>
+            <div class="field"><label>Display Name</label><input type="text" name="display_name" required></div>
+            <div class="field"><label>Email</label><input type="email" name="email" required></div>
+            <div class="field"><label>Groups</label>
+              <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:0.4rem;">
+                <label style="font-size:0.9rem;display:flex;align-items:center;gap:0.3rem;"><input type="checkbox" name="groups" value="users" checked> Users</label>
+                <label style="font-size:0.9rem;display:flex;align-items:center;gap:0.3rem;"><input type="checkbox" name="groups" value="drive"> Drive</label>
+                <label style="font-size:0.9rem;display:flex;align-items:center;gap:0.3rem;"><input type="checkbox" name="groups" value="office"> Office</label>
+                <label style="font-size:0.9rem;display:flex;align-items:center;gap:0.3rem;"><input type="checkbox" name="groups" value="erp"> ERP</label>
+                <label style="font-size:0.9rem;display:flex;align-items:center;gap:0.3rem;"><input type="checkbox" name="groups" value="chat"> Chat</label>
+                <label style="font-size:0.9rem;display:flex;align-items:center;gap:0.3rem;"><input type="checkbox" name="groups" value="meet"> Meet</label>
+                <label style="font-size:0.9rem;display:flex;align-items:center;gap:0.3rem;"><input type="checkbox" name="groups" value="mail"> Mail</label>
+                <label style="font-size:0.9rem;display:flex;align-items:center;gap:0.3rem;"><input type="checkbox" name="groups" value="ai"> AI</label>
+                <label style="font-size:0.9rem;display:flex;align-items:center;gap:0.3rem;"><input type="checkbox" name="groups" value="admins"> Admin</label>
               </div>
-            </form>
-            <div id="createResult"></div>
-          </div>
+            </div>
+            <div style="display:flex;gap:0.75rem;margin-top:1.5rem;">
+              <button type="submit" class="btn btn-primary">Create</button>
+              <button type="button" class="btn btn-ghost" onclick="closeCreateModal()">Cancel</button>
+            </div>
+          </form>
+          <div id="createResult"></div>
         </div>
       </div>
 
@@ -1500,52 +1498,53 @@ const adminHTML = `<!DOCTYPE html>
       return false;
     }
 
+    function esc(t) { var d=document.createElement('div'); d.textContent=t; return d.innerHTML; }
+
     async function loadUsers() {
       const resp = await fetch('/api/users');
       if (!resp.ok) return;
       const users = await resp.json();
       const tbody = document.getElementById('usersTable');
-      const empty = document.getElementById('accessEmpty');
-      if (!users || users.length === 0) {
-        tbody.innerHTML = '';
-        empty.classList.remove('hidden');
-        return;
-      }
-      empty.classList.add('hidden');
+      if (!users || users.length === 0) { tbody.innerHTML = '<tr><td colspan="6" style="padding:2rem;text-align:center;color:#a0aec0;">No users found.</td></tr>'; return; }
       tbody.innerHTML = users.map(u => {
-        const groups = (u.groups||[]).map(g => '<span class="badge">' + g + '</span>').join('');
-        const status = u.disabled ? '<span class="badge badge-red">disabled</span>' : '<span class="badge badge-green">active</span>';
-        return '<tr><td><strong>' + u.username + '</strong></td><td>' + (u.display_name||'') + '</td><td>' + (u.email||'') + '</td><td>' + groups + '</td><td>' + status + '</td><td><button class="btn btn-danger btn-sm" onclick="deleteUser(\'' + u.username + '\')">Delete</button></td></tr>';
+        const groups = (u.groups||[]).map(g => '<span class="badge">' + esc(g) + '</span>').join(' ');
+        const status = u.disabled ? '<span style="color:#e53e3e;font-weight:500;">Disabled</span>' : '<span style="color:#38a169;font-weight:500;">Active</span>';
+        const del = u.username === 'master' ? '<button class="btn btn-danger btn-sm" disabled title="Cannot delete master">Delete</button>' : '<button class="btn btn-danger btn-sm" onclick="deleteUser(\'' + u.username + '\')">Delete</button>';
+        return '<tr><td style="padding:12px 16px;border-top:1px solid #edf2f7;"><strong>' + esc(u.username) + '</strong></td><td style="padding:12px 16px;border-top:1px solid #edf2f7;">' + esc(u.display_name||'') + '</td><td style="padding:12px 16px;border-top:1px solid #edf2f7;">' + esc(u.email||'') + '</td><td style="padding:12px 16px;border-top:1px solid #edf2f7;">' + groups + '</td><td style="padding:12px 16px;border-top:1px solid #edf2f7;">' + status + '</td><td style="padding:12px 16px;border-top:1px solid #edf2f7;">' + del + '</td></tr>';
       }).join('');
     }
 
     async function createUser(e) {
       e.preventDefault();
-      const form = e.target;
-      const data = Object.fromEntries(new FormData(form));
-      data.groups = Array.from(form.querySelector('[name=groups]').selectedOptions).map(o => o.value);
-      if (!data.groups.length) data.groups = ['users'];
-      const resp = await fetch('/api/users/bulk', {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({users:[data]})});
-      const result = await resp.json();
-      const div = document.getElementById('createResult');
-      if (result.success) {
-        const pwd = (result.users && result.users[0] && result.users[0].placeholder_password) || 'check email';
-        div.innerHTML = '<div class="success">User created! <div class="password-box">Initial password: ' + pwd + '</div></div>';
-        setTimeout(() => div.innerHTML = '', 8000);
+      const form = document.getElementById('createForm');
+      const data = new FormData(form);
+      const chk = Array.from(form.querySelectorAll('input[name="groups"]:checked')).map(c => c.value);
+      const body = JSON.stringify({users:[{username:data.get('username'),display_name:data.get('display_name'),email:data.get('email'),groups:chk.length?chk:['users']}]});
+      const resp = await fetch('/api/users/bulk', {method:'POST', headers:{'Content-Type':'application/json'}, body});
+      if (resp.ok) {
+        const result = await resp.json();
+        if (result.users && result.users[0] && result.users[0].placeholder_password) {
+          alert('User created!\n\nUsername: ' + result.users[0].username + '\nPassword: ' + result.users[0].placeholder_password);
+        }
+        closeCreateModal();
+        form.reset();
         loadUsers();
       } else {
-        div.innerHTML = '<div class="error">Error: ' + JSON.stringify(result) + '</div>';
+        alert('Failed to create user');
       }
+      return false;
     }
 
     async function deleteUser(username) {
       if (!confirm('Delete user "' + username + '"?')) return;
       const resp = await fetch('/api/users/' + username, {method:'DELETE'});
       if (resp.ok) loadUsers();
-      else alert('Delete failed: ' + await resp.text());
+      else alert('Failed to delete user');
     }
 
-    // Load users on initial render if Access tab is active
+    function showCreateModal() { document.getElementById('createModal').style.display = 'block'; }
+    function closeCreateModal() { document.getElementById('createModal').style.display = 'none'; }
+
     if (document.querySelector('[data-section="access"].active')) loadUsers();
   </script>
 </body>
