feat: add user management modal with SSO/Local badges and fix OIDC session serialization
This commit is contained in:
Trevor Mears
@@ -4142,3 +4142,165 @@ kbd {
|
||||
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);
|
||||
}
|
||||
@@ -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">×</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>
|
||||
|
||||
+132
-20
@@ -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><span class="badge badge-${user.role === 'admin' ? 'primary' : 'secondary'}">${user.role}</span></td>
|
||||
<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) {
|
||||
const username = prompt('Enter new username (leave blank to keep current):');
|
||||
const password = prompt('Enter new password (leave blank to keep current):');
|
||||
const role = prompt('Enter role (admin or viewer, leave blank to keep current):');
|
||||
openEditUserModal(userId) {
|
||||
console.log('openEditUserModal called with ID:', userId, 'Type:', typeof userId);
|
||||
console.log('Current users list:', this.users);
|
||||
|
||||
const updates = {};
|
||||
if (username) updates.username = username;
|
||||
if (password) updates.password = password;
|
||||
if (role) updates.role = role;
|
||||
|
||||
if (Object.keys(updates).length === 0) {
|
||||
alert('No changes made');
|
||||
const user = this.users.find(u => u.id === userId);
|
||||
if (!user) {
|
||||
console.error('User not found in this.users cache!');
|
||||
console.log('Available IDs:', this.users.map(u => u.id));
|
||||
return;
|
||||
}
|
||||
console.log('User found:', user);
|
||||
|
||||
const modal = document.getElementById('edit-user-modal');
|
||||
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 {
|
||||
const editId = document.getElementById('edit-user-id');
|
||||
const editUsername = document.getElementById('edit-username');
|
||||
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) {
|
||||
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!');
|
||||
// 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);
|
||||
|
||||
+26
-4
@@ -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) {
|
||||
const email = profile.emails[0].value;
|
||||
// Extract email - handle both profile.emails[] (Google) and profile.email (others)
|
||||
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,
|
||||
|
||||
@@ -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),
|
||||
|
||||
Reference in New Issue
Block a user