feat: user management in Access tab with modal
This commit is contained in:
parent
bb00b5cfb7
commit
31bb7771cd
1 changed files with 59 additions and 60 deletions
119
main.go
119
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">👥</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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue