feat: add user management modal with SSO/Local badges and fix OIDC session serialization

public/css/main.css

@@ -4141,4 +4141,166 @@ kbd {
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 60%;
+}
+
+/* =====================================================
+   Edit User Modal
+   ===================================================== */
+.modal-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(4px);
+  z-index: 10000;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal-overlay.active {
+  display: flex;
+}
+
+.modal-overlay .modal {
+  display: block;
+  position: relative;
+  inset: auto;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  width: 90%;
+  max-width: 500px;
+  max-height: 90vh;
+  overflow: hidden;
+  box-shadow: var(--shadow-lg);
+  animation: modalFadeIn 0.2s ease;
+}
+
+@keyframes modalFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.modal-overlay .modal-header {
+  padding: var(--space-md);
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.modal-overlay .modal-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin: 0;
+}
+
+.modal-overlay .modal-close {
+  background: none;
+  border: none;
+  color: var(--color-text-muted);
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0;
+  transition: color 0.2s;
+}
+
+.modal-overlay .modal-close:hover {
+  color: var(--color-text-primary);
+}
+
+.modal-overlay .modal-body {
+  padding: var(--space-lg);
+}
+
+.modal-overlay .modal-footer {
+  padding: var(--space-md);
+  border-top: 1px solid var(--color-border);
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-sm);
+  background: var(--color-bg-tertiary);
+}
+
+/* Modal Form Styles */
+.modal-overlay .modal-form-group {
+  margin-bottom: var(--space-md);
+}
+
+.modal-overlay .modal-form-group label {
+  display: block;
+  margin-bottom: var(--space-xs);
+  color: var(--color-text-secondary);
+  font-size: 0.875rem;
+}
+
+.modal-overlay .modal-form-group .form-input {
+  width: 100%;
+  padding: var(--space-sm);
+  background: var(--color-bg-primary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  color: var(--color-text-primary);
+}
+
+.modal-overlay .modal-form-group .form-input:focus {
+  outline: none;
+  border-color: var(--color-accent);
+}
+
+.modal-overlay .modal-form-group .form-input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  background: var(--color-bg-tertiary);
+}
+
+/* =====================================================
+   User Management Badges
+   ===================================================== */
+.user-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 10px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-radius: 12px;
+  white-space: nowrap;
+}
+
+.user-badge-sso {
+  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+  color: #fff;
+  box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
+}
+
+.user-badge-local {
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--color-text-secondary);
+  border: 1px solid var(--color-border);
+}
+
+.user-badge-admin {
+  background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
+  color: #000;
+  box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
+}
+
+.user-badge-viewer {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--color-text-muted);
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }

public/index.html

@@ -339,6 +339,7 @@
             </button>
           </div>
         </div>
+
         <div class="series-content">
           <div id="series-grid" class="series-grid">
             <div class="empty-state">
@@ -710,6 +711,7 @@
                   <thead>
                     <tr>
                       <th>Username</th>
+                      <th>Email</th>
                       <th>Role</th>
                       <th>Created</th>
                       <th>Actions</th>
@@ -976,6 +978,57 @@
       </svg> Hide</button>
   </div>
 
+  <!-- Edit User Modal -->
+  <div class="modal-overlay" id="edit-user-modal">
+    <div class="modal">
+      <div class="modal-header">
+        <h3 class="modal-title">Edit User</h3>
+        <button class="modal-close" id="edit-user-close">&times;</button>
+      </div>
+      <div class="modal-body">
+        <form id="edit-user-form">
+          <input type="hidden" id="edit-user-id">
+
+          <div class="modal-form-group">
+            <label for="edit-username">Username</label>
+            <input type="text" id="edit-username" name="username" class="form-input" required>
+          </div>
+
+          <div class="modal-form-group">
+            <label for="edit-email">Email</label>
+            <input type="text" id="edit-email" class="form-input" readonly disabled placeholder="No email associated">
+          </div>
+
+          <div class="modal-form-group">
+            <label for="edit-role">Role</label>
+            <select id="edit-role" name="role" class="form-input" required>
+              <option value="viewer">Viewer</option>
+              <option value="admin">Admin</option>
+            </select>
+          </div>
+
+          <div class="modal-form-group">
+            <label for="edit-password">New Password</label>
+            <input type="password" id="edit-password" name="password" class="form-input"
+              placeholder="Leave blank to keep current">
+            <p class="hint" id="edit-password-hint" style="margin-top: 4px;">Optional. Leave blank to keep unchanged.
+            </p>
+          </div>
+
+          <div class="modal-form-group hidden" id="oidc-info-group">
+            <label>OIDC Provider ID</label>
+            <code id="edit-oidc-id"
+              style="font-size: 0.8rem; color: var(--color-text-muted); padding: 4px; background: rgba(0,0,0,0.3); border-radius: 4px; display: block;"></code>
+          </div>
+        </form>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-ghost" id="edit-user-cancel">Cancel</button>
+        <button class="btn btn-primary" id="edit-user-save">Save Changes</button>
+      </div>
+    </div>
+  </div>
+
   <!-- JavaScript -->
   <script src="/js/icons.js"></script>
   <script src="/js/api.js?v=2"></script>

public/js/pages/Settings.js

@@ -303,53 +303,166 @@ class SettingsPage {
 
         try {
             const users = await API.users.getAll();
+            // Store users in memory for easy access during edit
+            this.users = users;
 
             if (users.length === 0) {
-                userList.innerHTML = '<tr><td colspan="4" class="hint">No users found</td></tr>';
+                userList.innerHTML = '<tr><td colspan="5" class="hint">No users found</td></tr>';
                 return;
             }
 
-            userList.innerHTML = users.map(user => `
+            userList.innerHTML = users.map(user => {
+                const isSSO = !!user.oidcId;
+                const typeBadge = isSSO
+                    ? '<span class="user-badge user-badge-sso">SSO</span>'
+                    : '<span class="user-badge user-badge-local">Local</span>';
+
+                const roleBadge = user.role === 'admin'
+                    ? '<span class="user-badge user-badge-admin">Admin</span>'
+                    : '<span class="user-badge user-badge-viewer">Viewer</span>';
+
+                return `
                 <tr>
-                    <td>${user.username}</td>
+                    <td>
-                    <td><span class="badge badge-${user.role === 'admin' ? 'primary' : 'secondary'}">${user.role}</span></td>
+                        <div style="display:flex;align-items:center;gap:8px;">
+                            <strong>${user.username}</strong>
+                            ${typeBadge}
+                        </div>
+                    </td>
+                    <td>${user.email || '<span class="hint">-</span>'}</td>
+                    <td>${roleBadge}</td>
                     <td>${user.createdAt ? new Date(user.createdAt).toLocaleDateString() : 'N/A'}</td>
                     <td>
-                        <button class="btn btn-sm btn-secondary" onclick="window.app.pages.settings.editUser(${user.id})">Edit</button>
+                        <button class="btn btn-sm btn-secondary" onclick="window.app.pages.settings.openEditUserModal(${user.id})">Edit</button>
                         <button class="btn btn-sm btn-error" onclick="window.app.pages.settings.deleteUser(${user.id}, '${user.username}')">Delete</button>
                     </td>
                 </tr>
-            `).join('');
+            `}).join('');
         } catch (err) {
             console.error('Error loading users:', err);
-            userList.innerHTML = '<tr><td colspan="4" class="hint">Error loading users</td></tr>';
+            userList.innerHTML = '<tr><td colspan="5" class="hint">Error loading users</td></tr>';
         }
     }
 
-    async editUser(userId) {
+    openEditUserModal(userId) {
-        const username = prompt('Enter new username (leave blank to keep current):');
+        console.log('openEditUserModal called with ID:', userId, 'Type:', typeof userId);
-        const password = prompt('Enter new password (leave blank to keep current):');
+        console.log('Current users list:', this.users);
-        const role = prompt('Enter role (admin or viewer, leave blank to keep current):');
 
-        const updates = {};
+        const user = this.users.find(u => u.id === userId);
-        if (username) updates.username = username;
+        if (!user) {
-        if (password) updates.password = password;
+            console.error('User not found in this.users cache!');
-        if (role) updates.role = role;
+            console.log('Available IDs:', this.users.map(u => u.id));
+            return;
+        }
+        console.log('User found:', user);
 
-        if (Object.keys(updates).length === 0) {
+        const modal = document.getElementById('edit-user-modal');
-            alert('No changes made');
+        console.log('Modal element:', modal);
+        if (!modal) {
+            console.error('CRITICAL: Modal element #edit-user-modal not found in DOM!');
+            alert('Error: Modal not found. Please refresh the page.');
             return;
         }
 
+        const isSSO = !!user.oidcId;
+        console.log('Is SSO user:', isSSO);
+
+        // Populate form with null checks
         try {
-            await API.users.update(userId, updates);
+            const editId = document.getElementById('edit-user-id');
-            alert('User updated successfully!');
+            const editUsername = document.getElementById('edit-username');
-            this.loadUsers();
+            const editEmail = document.getElementById('edit-email');
+            const editRole = document.getElementById('edit-role');
+            const editPassword = document.getElementById('edit-password');
+
+            console.log('Form elements found:', { editId, editUsername, editEmail, editRole, editPassword });
+
+            if (editId) editId.value = user.id;
+            if (editUsername) editUsername.value = user.username;
+            if (editEmail) editEmail.value = user.email || '';
+            if (editRole) editRole.value = user.role;
+            if (editPassword) editPassword.value = '';
+
+            // Handle SSO specific UI
+            const passwordHint = document.getElementById('edit-password-hint');
+            const oidcGroup = document.getElementById('oidc-info-group');
+            const oidcIdDisplay = document.getElementById('edit-oidc-id');
+
+            if (isSSO) {
+                if (editPassword) {
+                    editPassword.disabled = true;
+                    editPassword.placeholder = "Managed by SSO Provider";
+                }
+                if (passwordHint) passwordHint.textContent = "Password cannot be changed for SSO users.";
+                if (oidcGroup) oidcGroup.classList.remove('hidden');
+                if (oidcIdDisplay) oidcIdDisplay.textContent = user.oidcId;
+            } else {
+                if (editPassword) {
+                    editPassword.disabled = false;
+                    editPassword.placeholder = "Leave blank to keep current";
+                }
+                if (passwordHint) passwordHint.textContent = "Optional. Leave blank to keep unchanged.";
+                if (oidcGroup) oidcGroup.classList.add('hidden');
+            }
+
+            // Show modal
+            console.log('Adding active class to modal...');
+            modal.classList.add('active');
+            console.log('Modal classes after add:', modal.classList.toString());
+
+            // Setup Close/Cancel handlers (once)
+            this.setupModalHandlers(modal);
+            console.log('Modal should now be visible!');
         } catch (err) {
-            alert('Error updating user: ' + err.message);
+            console.error('Error populating modal:', err);
+            alert('Error opening edit modal: ' + err.message);
         }
     }
 
+    setupModalHandlers(modal) {
+        if (this.modalHandlersSetup) return;
+
+        const closeBtn = document.getElementById('edit-user-close');
+        const cancelBtn = document.getElementById('edit-user-cancel');
+        const saveBtn = document.getElementById('edit-user-save');
+
+        const closeModal = () => modal.classList.remove('active');
+
+        closeBtn.onclick = closeModal;
+        cancelBtn.onclick = closeModal;
+
+        // Click outside to close
+        modal.onclick = (e) => {
+            if (e.target === modal) closeModal();
+        };
+
+        // Save Handler
+        saveBtn.onclick = async () => {
+            const userId = document.getElementById('edit-user-id').value;
+            const updates = {
+                username: document.getElementById('edit-username').value,
+                role: document.getElementById('edit-role').value
+            };
+
+            const newPassword = document.getElementById('edit-password').value;
+            if (newPassword && !document.getElementById('edit-password').disabled) {
+                updates.password = newPassword;
+            }
+
+            try {
+                await API.users.update(userId, updates);
+                // alert('User updated successfully!'); // Optional: Replace with toast?
+                closeModal();
+                this.loadUsers();
+            } catch (err) {
+                alert('Error updating user: ' + err.message);
+            }
+        };
+
+        this.modalHandlersSetup = true;
+    }
+
+
     async deleteUser(userId, username) {
         if (!confirm(`Are you sure you want to delete user "${username}"?`)) {
             return;
@@ -357,7 +470,6 @@ class SettingsPage {
 
         try {
             await API.users.delete(userId);
-            alert('User deleted successfully!');
             this.loadUsers();
         } catch (err) {
             alert('Error deleting user: ' + err.message);

server/auth.js

@@ -110,6 +110,25 @@ function configureJwtStrategy(getUserById) {
     }));
 }
 
+/**
+ * Configure Passport session serialization
+ * Required for OIDC flow which uses sessions
+ */
+function configureSessionSerialization(getUserById) {
+    passport.serializeUser((user, done) => {
+        done(null, user.id);
+    });
+
+    passport.deserializeUser(async (id, done) => {
+        try {
+            const user = await getUserById(id);
+            done(null, user);
+        } catch (err) {
+            done(err, null);
+        }
+    });
+}
+
 /**
  * Configure Passport OpenID Connect Strategy
  */
@@ -173,8 +192,10 @@ function configureOidcStrategy(findUserByOidcId, findUserByEmail, createUser) {
                 let user = await findUserByOidcId(sub);
 
                 // 2. If not found, try to match by email
-                if (!user && profile.emails && profile.emails.length > 0) {
+                // Extract email - handle both profile.emails[] (Google) and profile.email (others)
-                    const email = profile.emails[0].value;
+                const email = profile.emails?.[0]?.value || profile.email || profile._json?.email;
+
+                if (!user && email) {
                     user = await findUserByEmail(email);
 
                     // If found by email but no OIDC ID, link them
@@ -187,13 +208,13 @@ function configureOidcStrategy(findUserByOidcId, findUserByEmail, createUser) {
 
                 // 3. If still not found, create new user (JIT Provisioning)
                 if (!user) {
-                    const username = profile.username || profile.displayName || (profile.emails ? profile.emails[0].value.split('@')[0] : `user_${sub.substring(0, 8)}`);
+                    const username = profile.username || profile.displayName || (email ? email.split('@')[0] : `user_${sub.substring(0, 8)}`);
 
                     user = await createUser({
                         username: username,
                         role: 'viewer', // Default role for SSO users
                         oidcId: sub,
-                        email: profile.emails ? profile.emails[0].value : null
+                        email: email || null
                     });
                 }
 
@@ -239,6 +260,7 @@ module.exports = {
     verifyToken,
     configureLocalStrategy,
     configureJwtStrategy,
+    configureSessionSerialization,
     configureOidcStrategy,
     requireAuth,
     requireAdmin,

server/routes/auth.js

@@ -13,6 +13,11 @@ auth.configureJwtStrategy(
     async (id) => await db.users.getById(id)
 );
 
+// Configure Passport session serialization (required for OIDC)
+auth.configureSessionSerialization(
+    async (id) => await db.users.getById(id)
+);
+
 // Configure OIDC Strategy
 auth.configureOidcStrategy(
     async (oidcId) => await db.users.getByOidcId(oidcId),