Add user management system with JWT authentication
- Database schema: users, permissions, client_access tables - Auth: JWT tokens with Argon2 password hashing - API: login, user CRUD, permission management - Dashboard: login required, admin Users tab - Auto-creates initial admin user on first run
This commit is contained in:
@@ -348,6 +348,7 @@
|
||||
<button class="tab" data-tab="access">Access</button>
|
||||
<button class="tab" data-tab="build">Build</button>
|
||||
<button class="tab" data-tab="settings">Settings</button>
|
||||
<button class="tab admin-only" data-tab="users" style="display: none;">Users</button>
|
||||
</nav>
|
||||
|
||||
<main class="content">
|
||||
@@ -510,6 +511,21 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Users Tab (Admin Only) -->
|
||||
<div class="tab-panel" id="users-panel">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<h2 class="card-title">User Management</h2>
|
||||
<p class="card-description">Manage user accounts and permissions</p>
|
||||
</div>
|
||||
</div>
|
||||
<p style="color: hsl(var(--muted-foreground));">
|
||||
<a href="/users" style="color: hsl(var(--primary));">Open User Management</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Chat Modal -->
|
||||
@@ -546,19 +562,59 @@
|
||||
});
|
||||
|
||||
// Check auth
|
||||
const token = localStorage.getItem("token");
|
||||
const user = JSON.parse(localStorage.getItem("user") || "null");
|
||||
const token = localStorage.getItem("guruconnect_token");
|
||||
const user = JSON.parse(localStorage.getItem("guruconnect_user") || "null");
|
||||
|
||||
if (!token) {
|
||||
document.getElementById("userInfo").textContent = "Demo Mode";
|
||||
} else if (user) {
|
||||
document.getElementById("userInfo").textContent = user.email || user.name || "Technician";
|
||||
// Verify authentication
|
||||
async function checkAuth() {
|
||||
if (!token) {
|
||||
window.location.href = "/login";
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/auth/me", {
|
||||
headers: { "Authorization": `Bearer ${token}` }
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
localStorage.removeItem("guruconnect_token");
|
||||
localStorage.removeItem("guruconnect_user");
|
||||
window.location.href = "/login";
|
||||
return;
|
||||
}
|
||||
|
||||
const userData = await response.json();
|
||||
|
||||
// Update user display
|
||||
document.getElementById("userInfo").textContent = userData.username + " (" + userData.role + ")";
|
||||
|
||||
// Show admin-only elements
|
||||
if (userData.role === "admin") {
|
||||
document.querySelectorAll(".admin-only").forEach(el => {
|
||||
el.style.display = "";
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Auth check failed:", err);
|
||||
// Don't redirect on network error, just show what we have
|
||||
if (user) {
|
||||
document.getElementById("userInfo").textContent = user.username || "User";
|
||||
if (user.role === "admin") {
|
||||
document.querySelectorAll(".admin-only").forEach(el => {
|
||||
el.style.display = "";
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
checkAuth();
|
||||
|
||||
// Logout
|
||||
document.getElementById("logoutBtn").addEventListener("click", () => {
|
||||
localStorage.removeItem("token");
|
||||
localStorage.removeItem("user");
|
||||
localStorage.removeItem("guruconnect_token");
|
||||
localStorage.removeItem("guruconnect_user");
|
||||
window.location.href = "/login";
|
||||
});
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>GuruConnect - Technician Login</title>
|
||||
<title>GuruConnect - Login</title>
|
||||
<style>
|
||||
:root {
|
||||
--background: 222.2 84% 4.9%;
|
||||
@@ -53,7 +53,7 @@
|
||||
|
||||
label { font-size: 14px; font-weight: 500; color: hsl(var(--foreground)); }
|
||||
|
||||
input[type="email"], input[type="password"] {
|
||||
input[type="text"], input[type="password"] {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
font-size: 14px;
|
||||
@@ -119,40 +119,24 @@
|
||||
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
.loading .spinner { display: inline-block; }
|
||||
|
||||
.demo-hint {
|
||||
margin-top: 16px;
|
||||
padding: 12px;
|
||||
background: hsla(var(--primary), 0.1);
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
color: hsl(var(--muted-foreground));
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.demo-hint a {
|
||||
color: hsl(var(--primary));
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="logo">
|
||||
<h1>GuruConnect</h1>
|
||||
<p>Technician Login</p>
|
||||
<p>Sign in to your account</p>
|
||||
</div>
|
||||
|
||||
<form class="login-form" id="loginForm">
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" id="email" placeholder="you@company.com" required>
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" placeholder="Enter your username" autocomplete="username" required>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" placeholder="Enter your password" required>
|
||||
<input type="password" id="password" placeholder="Enter your password" autocomplete="current-password" required>
|
||||
</div>
|
||||
|
||||
<div class="error-message" id="errorMessage"></div>
|
||||
@@ -163,10 +147,6 @@
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="demo-hint">
|
||||
<p>Auth not yet configured. <a href="/dashboard">Skip to Dashboard</a></p>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p><a href="/">Back to Support Portal</a></p>
|
||||
</div>
|
||||
@@ -177,10 +157,29 @@
|
||||
const loginBtn = document.getElementById("loginBtn");
|
||||
const errorMessage = document.getElementById("errorMessage");
|
||||
|
||||
// Check if already logged in
|
||||
const token = localStorage.getItem("guruconnect_token");
|
||||
if (token) {
|
||||
// Verify token is still valid
|
||||
fetch('/api/auth/me', {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
}).then(res => {
|
||||
if (res.ok) {
|
||||
window.location.href = '/dashboard';
|
||||
} else {
|
||||
localStorage.removeItem('guruconnect_token');
|
||||
localStorage.removeItem('guruconnect_user');
|
||||
}
|
||||
}).catch(() => {
|
||||
localStorage.removeItem('guruconnect_token');
|
||||
localStorage.removeItem('guruconnect_user');
|
||||
});
|
||||
}
|
||||
|
||||
form.addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const email = document.getElementById("email").value;
|
||||
const username = document.getElementById("username").value;
|
||||
const password = document.getElementById("password").value;
|
||||
|
||||
setLoading(true);
|
||||
@@ -190,7 +189,7 @@
|
||||
const response = await fetch("/api/auth/login", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ email, password })
|
||||
body: JSON.stringify({ username, password })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
@@ -201,12 +200,13 @@
|
||||
return;
|
||||
}
|
||||
|
||||
localStorage.setItem("token", data.token);
|
||||
localStorage.setItem("user", JSON.stringify(data.user));
|
||||
// Store token and user info
|
||||
localStorage.setItem("guruconnect_token", data.token);
|
||||
localStorage.setItem("guruconnect_user", JSON.stringify(data.user));
|
||||
window.location.href = "/dashboard";
|
||||
|
||||
} catch (err) {
|
||||
showError("Auth not configured yet. Use the demo link below.");
|
||||
showError("Connection error. Please try again.");
|
||||
setLoading(false);
|
||||
}
|
||||
});
|
||||
@@ -222,9 +222,8 @@
|
||||
loginBtn.querySelector(".btn-text").textContent = loading ? "Signing in..." : "Sign In";
|
||||
}
|
||||
|
||||
if (localStorage.getItem("token")) {
|
||||
window.location.href = "/dashboard";
|
||||
}
|
||||
// Focus username field
|
||||
document.getElementById("username").focus();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
602
server/static/users.html
Normal file
602
server/static/users.html
Normal file
@@ -0,0 +1,602 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>GuruConnect - User Management</title>
|
||||
<style>
|
||||
:root {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
--primary: 217.2 91.2% 59.8%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--ring: 224.3 76.3% 48%;
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
|
||||
background-color: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 24px;
|
||||
border-bottom: 1px solid hsl(var(--border));
|
||||
background: hsl(var(--card));
|
||||
}
|
||||
|
||||
.header-left { display: flex; align-items: center; gap: 24px; }
|
||||
.logo { font-size: 20px; font-weight: 700; color: hsl(var(--foreground)); }
|
||||
.back-link { color: hsl(var(--muted-foreground)); text-decoration: none; font-size: 14px; }
|
||||
.back-link:hover { color: hsl(var(--foreground)); }
|
||||
|
||||
.content { padding: 24px; max-width: 1200px; margin: 0 auto; }
|
||||
|
||||
.card {
|
||||
background: hsl(var(--card));
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card-title { font-size: 18px; font-weight: 600; }
|
||||
.card-description { color: hsl(var(--muted-foreground)); font-size: 14px; margin-top: 4px; }
|
||||
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
|
||||
.btn-primary:hover { opacity: 0.9; }
|
||||
.btn-outline { background: transparent; color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); }
|
||||
.btn-outline:hover { background: hsl(var(--accent)); }
|
||||
.btn-danger { background: hsl(var(--destructive)); color: white; }
|
||||
.btn-danger:hover { opacity: 0.9; }
|
||||
.btn-sm { padding: 6px 12px; font-size: 12px; }
|
||||
|
||||
table { width: 100%; border-collapse: collapse; }
|
||||
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid hsl(var(--border)); }
|
||||
th { font-size: 12px; font-weight: 600; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
|
||||
td { font-size: 14px; }
|
||||
tr:hover { background: hsla(var(--muted), 0.3); }
|
||||
|
||||
.badge { display: inline-block; padding: 4px 10px; font-size: 12px; font-weight: 500; border-radius: 9999px; }
|
||||
.badge-admin { background: hsla(270, 76%, 50%, 0.2); color: hsl(270, 76%, 60%); }
|
||||
.badge-operator { background: hsla(45, 93%, 47%, 0.2); color: hsl(45, 93%, 55%); }
|
||||
.badge-viewer { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
|
||||
.badge-enabled { background: hsla(142, 76%, 36%, 0.2); color: hsl(142, 76%, 50%); }
|
||||
.badge-disabled { background: hsla(0, 70%, 50%, 0.2); color: hsl(0, 70%, 60%); }
|
||||
|
||||
.empty-state { text-align: center; padding: 48px 24px; color: hsl(var(--muted-foreground)); }
|
||||
.empty-state h3 { font-size: 16px; margin-bottom: 8px; color: hsl(var(--foreground)); }
|
||||
|
||||
/* Modal */
|
||||
.modal-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
z-index: 1000;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.modal-overlay.active { display: flex; }
|
||||
|
||||
.modal {
|
||||
background: hsl(var(--card));
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: 12px;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid hsl(var(--border));
|
||||
}
|
||||
|
||||
.modal-title { font-size: 18px; font-weight: 600; }
|
||||
|
||||
.modal-close {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: hsl(var(--muted-foreground));
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
}
|
||||
.modal-close:hover { color: hsl(var(--foreground)); }
|
||||
|
||||
.modal-body { padding: 20px; }
|
||||
.modal-footer { padding: 16px 20px; border-top: 1px solid hsl(var(--border)); display: flex; gap: 12px; justify-content: flex-end; }
|
||||
|
||||
.form-group { margin-bottom: 16px; }
|
||||
.form-group label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 8px; }
|
||||
.form-group input, .form-group select {
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
font-size: 14px;
|
||||
background: hsl(var(--input));
|
||||
border: 1px solid hsl(var(--border));
|
||||
border-radius: 6px;
|
||||
color: hsl(var(--foreground));
|
||||
outline: none;
|
||||
}
|
||||
.form-group input:focus, .form-group select:focus {
|
||||
border-color: hsl(var(--ring));
|
||||
box-shadow: 0 0 0 3px hsla(var(--ring), 0.3);
|
||||
}
|
||||
|
||||
.permissions-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
.permission-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
background: hsl(var(--muted));
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.permission-item input[type="checkbox"] {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: hsla(0, 70%, 50%, 0.1);
|
||||
border: 1px solid hsla(0, 70%, 50%, 0.3);
|
||||
color: hsl(0, 70%, 70%);
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
margin-bottom: 16px;
|
||||
display: none;
|
||||
}
|
||||
.error-message.visible { display: block; }
|
||||
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: none;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 2000;
|
||||
}
|
||||
.loading-overlay.active { display: flex; }
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 3px solid hsl(var(--muted));
|
||||
border-top-color: hsl(var(--primary));
|
||||
border-radius: 50%;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="header-left">
|
||||
<div class="logo">GuruConnect</div>
|
||||
<a href="/dashboard" class="back-link">← Back to Dashboard</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="content">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<h2 class="card-title">User Management</h2>
|
||||
<p class="card-description">Create and manage user accounts</p>
|
||||
</div>
|
||||
<button class="btn btn-primary" onclick="openCreateModal()">Create User</button>
|
||||
</div>
|
||||
|
||||
<div class="error-message" id="errorMessage"></div>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Email</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
<th>Last Login</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="usersTable">
|
||||
<tr>
|
||||
<td colspan="6">
|
||||
<div class="empty-state">
|
||||
<h3>Loading users...</h3>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Create/Edit User Modal -->
|
||||
<div class="modal-overlay" id="userModal">
|
||||
<div class="modal">
|
||||
<div class="modal-header">
|
||||
<div class="modal-title" id="modalTitle">Create User</div>
|
||||
<button class="modal-close" onclick="closeModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="userForm">
|
||||
<input type="hidden" id="userId">
|
||||
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" required minlength="3">
|
||||
</div>
|
||||
|
||||
<div class="form-group" id="passwordGroup">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" minlength="8">
|
||||
<small style="color: hsl(var(--muted-foreground)); font-size: 12px;">Minimum 8 characters. Leave blank to keep existing password.</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">Email (optional)</label>
|
||||
<input type="email" id="email">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="role">Role</label>
|
||||
<select id="role">
|
||||
<option value="viewer">Viewer - View only access</option>
|
||||
<option value="operator">Operator - Can control machines</option>
|
||||
<option value="admin">Admin - Full access</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>
|
||||
<input type="checkbox" id="enabled" checked style="width: auto; margin-right: 8px;">
|
||||
Account Enabled
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Permissions</label>
|
||||
<div class="permissions-grid">
|
||||
<label class="permission-item">
|
||||
<input type="checkbox" id="perm-view" checked>
|
||||
View
|
||||
</label>
|
||||
<label class="permission-item">
|
||||
<input type="checkbox" id="perm-control">
|
||||
Control
|
||||
</label>
|
||||
<label class="permission-item">
|
||||
<input type="checkbox" id="perm-transfer">
|
||||
Transfer
|
||||
</label>
|
||||
<label class="permission-item">
|
||||
<input type="checkbox" id="perm-manage_users">
|
||||
Manage Users
|
||||
</label>
|
||||
<label class="permission-item">
|
||||
<input type="checkbox" id="perm-manage_clients">
|
||||
Manage Clients
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="error-message" id="formError"></div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button class="btn btn-outline" onclick="closeModal()">Cancel</button>
|
||||
<button class="btn btn-primary" onclick="saveUser()">Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="loading-overlay" id="loadingOverlay">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const token = localStorage.getItem("guruconnect_token");
|
||||
let users = [];
|
||||
let editingUser = null;
|
||||
|
||||
// Check auth
|
||||
if (!token) {
|
||||
window.location.href = "/login";
|
||||
}
|
||||
|
||||
// Verify admin access
|
||||
async function checkAdmin() {
|
||||
try {
|
||||
const response = await fetch("/api/auth/me", {
|
||||
headers: { "Authorization": `Bearer ${token}` }
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
window.location.href = "/login";
|
||||
return;
|
||||
}
|
||||
|
||||
const user = await response.json();
|
||||
if (user.role !== "admin") {
|
||||
alert("Admin access required");
|
||||
window.location.href = "/dashboard";
|
||||
return;
|
||||
}
|
||||
|
||||
loadUsers();
|
||||
} catch (err) {
|
||||
console.error("Auth check failed:", err);
|
||||
window.location.href = "/login";
|
||||
}
|
||||
}
|
||||
|
||||
checkAdmin();
|
||||
|
||||
async function loadUsers() {
|
||||
try {
|
||||
const response = await fetch("/api/users", {
|
||||
headers: { "Authorization": `Bearer ${token}` }
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to load users");
|
||||
}
|
||||
|
||||
users = await response.json();
|
||||
renderUsers();
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
}
|
||||
}
|
||||
|
||||
function renderUsers() {
|
||||
const tbody = document.getElementById("usersTable");
|
||||
|
||||
if (users.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="6"><div class="empty-state"><h3>No users found</h3></div></td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = users.map(user => {
|
||||
const roleClass = user.role === "admin" ? "badge-admin" :
|
||||
user.role === "operator" ? "badge-operator" : "badge-viewer";
|
||||
const statusClass = user.enabled ? "badge-enabled" : "badge-disabled";
|
||||
const lastLogin = user.last_login ? new Date(user.last_login).toLocaleString() : "Never";
|
||||
|
||||
return `<tr>
|
||||
<td><strong>${escapeHtml(user.username)}</strong></td>
|
||||
<td>${escapeHtml(user.email || "-")}</td>
|
||||
<td><span class="badge ${roleClass}">${user.role}</span></td>
|
||||
<td><span class="badge ${statusClass}">${user.enabled ? "Enabled" : "Disabled"}</span></td>
|
||||
<td>${lastLogin}</td>
|
||||
<td>
|
||||
<button class="btn btn-outline btn-sm" onclick="editUser('${user.id}')">Edit</button>
|
||||
<button class="btn btn-danger btn-sm" onclick="deleteUser('${user.id}', '${escapeHtml(user.username)}')" style="margin-left: 4px;">Delete</button>
|
||||
</td>
|
||||
</tr>`;
|
||||
}).join("");
|
||||
}
|
||||
|
||||
function openCreateModal() {
|
||||
editingUser = null;
|
||||
document.getElementById("modalTitle").textContent = "Create User";
|
||||
document.getElementById("userForm").reset();
|
||||
document.getElementById("userId").value = "";
|
||||
document.getElementById("username").disabled = false;
|
||||
document.getElementById("password").required = true;
|
||||
document.getElementById("perm-view").checked = true;
|
||||
document.getElementById("formError").classList.remove("visible");
|
||||
document.getElementById("userModal").classList.add("active");
|
||||
}
|
||||
|
||||
function editUser(id) {
|
||||
editingUser = users.find(u => u.id === id);
|
||||
if (!editingUser) return;
|
||||
|
||||
document.getElementById("modalTitle").textContent = "Edit User";
|
||||
document.getElementById("userId").value = editingUser.id;
|
||||
document.getElementById("username").value = editingUser.username;
|
||||
document.getElementById("username").disabled = true;
|
||||
document.getElementById("password").value = "";
|
||||
document.getElementById("password").required = false;
|
||||
document.getElementById("email").value = editingUser.email || "";
|
||||
document.getElementById("role").value = editingUser.role;
|
||||
document.getElementById("enabled").checked = editingUser.enabled;
|
||||
|
||||
// Set permissions
|
||||
["view", "control", "transfer", "manage_users", "manage_clients"].forEach(perm => {
|
||||
document.getElementById("perm-" + perm).checked = editingUser.permissions.includes(perm);
|
||||
});
|
||||
|
||||
document.getElementById("formError").classList.remove("visible");
|
||||
document.getElementById("userModal").classList.add("active");
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
document.getElementById("userModal").classList.remove("active");
|
||||
editingUser = null;
|
||||
}
|
||||
|
||||
async function saveUser() {
|
||||
const userId = document.getElementById("userId").value;
|
||||
const username = document.getElementById("username").value;
|
||||
const password = document.getElementById("password").value;
|
||||
const email = document.getElementById("email").value || null;
|
||||
const role = document.getElementById("role").value;
|
||||
const enabled = document.getElementById("enabled").checked;
|
||||
|
||||
const permissions = [];
|
||||
["view", "control", "transfer", "manage_users", "manage_clients"].forEach(perm => {
|
||||
if (document.getElementById("perm-" + perm).checked) {
|
||||
permissions.push(perm);
|
||||
}
|
||||
});
|
||||
|
||||
// Validation
|
||||
if (!username || username.length < 3) {
|
||||
showFormError("Username must be at least 3 characters");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!userId && (!password || password.length < 8)) {
|
||||
showFormError("Password must be at least 8 characters");
|
||||
return;
|
||||
}
|
||||
|
||||
showLoading(true);
|
||||
|
||||
try {
|
||||
let response;
|
||||
|
||||
if (userId) {
|
||||
// Update existing user
|
||||
const updateData = { email, role, enabled };
|
||||
if (password) updateData.password = password;
|
||||
|
||||
response = await fetch("/api/users/" + userId, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Authorization": `Bearer ${token}`,
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify(updateData)
|
||||
});
|
||||
|
||||
if (response.ok && permissions.length > 0) {
|
||||
// Update permissions separately
|
||||
await fetch("/api/users/" + userId + "/permissions", {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Authorization": `Bearer ${token}`,
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({ permissions })
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// Create new user
|
||||
response = await fetch("/api/users", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Authorization": `Bearer ${token}`,
|
||||
"Content-Type": "application/json"
|
||||
},
|
||||
body: JSON.stringify({ username, password, email, role, permissions })
|
||||
});
|
||||
}
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json();
|
||||
throw new Error(data.error || "Operation failed");
|
||||
}
|
||||
|
||||
closeModal();
|
||||
loadUsers();
|
||||
} catch (err) {
|
||||
showFormError(err.message);
|
||||
} finally {
|
||||
showLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteUser(id, username) {
|
||||
if (!confirm(`Delete user "${username}"?\n\nThis action cannot be undone.`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
showLoading(true);
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/users/" + id, {
|
||||
method: "DELETE",
|
||||
headers: { "Authorization": `Bearer ${token}` }
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json();
|
||||
throw new Error(data.error || "Delete failed");
|
||||
}
|
||||
|
||||
loadUsers();
|
||||
} catch (err) {
|
||||
showError(err.message);
|
||||
} finally {
|
||||
showLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
const el = document.getElementById("errorMessage");
|
||||
el.textContent = message;
|
||||
el.classList.add("visible");
|
||||
}
|
||||
|
||||
function showFormError(message) {
|
||||
const el = document.getElementById("formError");
|
||||
el.textContent = message;
|
||||
el.classList.add("visible");
|
||||
}
|
||||
|
||||
function showLoading(show) {
|
||||
document.getElementById("loadingOverlay").classList.toggle("active", show);
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
if (!text) return "";
|
||||
const div = document.createElement("div");
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user