361 lines
12 KiB
HTML
361 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>User Management - Admin</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh;
|
|
padding: 20px;
|
|
}
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 20px;
|
|
padding: 40px;
|
|
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
|
|
}
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 30px;
|
|
padding-bottom: 20px;
|
|
border-bottom: 2px solid #e0e0e0;
|
|
}
|
|
h1 { color: #333; font-size: 32px; }
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
}
|
|
.role-badge {
|
|
padding: 5px 15px;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
.role-admin {
|
|
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
|
|
color: white;
|
|
}
|
|
.role-operation {
|
|
background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
|
|
color: white;
|
|
}
|
|
.back-link {
|
|
display: inline-block;
|
|
margin-bottom: 20px;
|
|
color: #667eea;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
}
|
|
.back-link:hover { text-decoration: underline; }
|
|
|
|
.alert {
|
|
padding: 15px 20px;
|
|
margin-bottom: 20px;
|
|
border-radius: 8px;
|
|
font-weight: 500;
|
|
}
|
|
.alert-success {
|
|
background: #51cf66;
|
|
color: white;
|
|
}
|
|
.alert-error {
|
|
background: #ff6b6b;
|
|
color: white;
|
|
}
|
|
|
|
.stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
.stat-card {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
text-align: center;
|
|
}
|
|
.stat-number {
|
|
font-size: 36px;
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
}
|
|
.stat-label {
|
|
font-size: 14px;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-top: 20px;
|
|
background: white;
|
|
}
|
|
th, td {
|
|
padding: 15px;
|
|
text-align: left;
|
|
border-bottom: 1px solid #e0e0e0;
|
|
}
|
|
th {
|
|
background: #f8f9fa;
|
|
font-weight: 600;
|
|
color: #495057;
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
tr:hover { background: #f8f9fa; }
|
|
|
|
.status-active {
|
|
color: #51cf66;
|
|
font-weight: 600;
|
|
}
|
|
.status-inactive {
|
|
color: #ff6b6b;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.btn {
|
|
padding: 8px 16px;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
transition: all 0.3s;
|
|
font-weight: 500;
|
|
}
|
|
.btn-primary {
|
|
background: #667eea;
|
|
color: white;
|
|
}
|
|
.btn-primary:hover {
|
|
background: #5568d3;
|
|
transform: translateY(-2px);
|
|
}
|
|
.btn-danger {
|
|
background: #ff6b6b;
|
|
color: white;
|
|
}
|
|
.btn-danger:hover {
|
|
background: #ee5a52;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.loading {
|
|
text-align: center;
|
|
padding: 40px;
|
|
color: #666;
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 60px;
|
|
color: #999;
|
|
}
|
|
.empty-state-icon {
|
|
font-size: 64px;
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<a href="{{ root_path }}/" class="back-link">← Back to Dashboard</a>
|
|
|
|
<div class="header">
|
|
<h1>👥 User Management</h1>
|
|
{% if user %}
|
|
<div class="user-info">
|
|
<span>{{ user.name or user.username }}</span>
|
|
{% if user.roles %}
|
|
{% for role in user.roles %}
|
|
<span class="role-badge role-{{ role }}">{{ role }}</span>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div id="alertContainer"></div>
|
|
|
|
<div class="stats" id="statsContainer">
|
|
<div class="stat-card">
|
|
<div class="stat-number" id="totalUsers">-</div>
|
|
<div class="stat-label">Total Users</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number" id="activeUsers">-</div>
|
|
<div class="stat-label">Active Users</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number" id="adminUsers">-</div>
|
|
<div class="stat-label">Admins</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number" id="operationUsers">-</div>
|
|
<div class="stat-label">Operations</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tableContainer">
|
|
<div class="loading">Loading users...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const rootPath = "{{ root_path }}";
|
|
|
|
async function loadUsers() {
|
|
try {
|
|
const response = await fetch(`${rootPath}/admin/users/`);
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
|
|
}
|
|
|
|
const users = await response.json();
|
|
|
|
// Update stats
|
|
document.getElementById('totalUsers').textContent = users.length;
|
|
document.getElementById('activeUsers').textContent = users.filter(u => u.is_active).length;
|
|
document.getElementById('adminUsers').textContent = users.filter(u =>
|
|
u.roles.some(r => r.name === 'admin')
|
|
).length;
|
|
document.getElementById('operationUsers').textContent = users.filter(u =>
|
|
u.roles.some(r => r.name === 'operation')
|
|
).length;
|
|
|
|
// Render table
|
|
const tableContainer = document.getElementById('tableContainer');
|
|
|
|
if (users.length === 0) {
|
|
tableContainer.innerHTML = `
|
|
<div class="empty-state">
|
|
<div class="empty-state-icon">📭</div>
|
|
<h3>No users found</h3>
|
|
<p>Users will appear here when they log in for the first time.</p>
|
|
</div>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
tableContainer.innerHTML = `
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Username</th>
|
|
<th>Email</th>
|
|
<th>Full Name</th>
|
|
<th>Roles</th>
|
|
<th>Status</th>
|
|
<th>Last Login</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${users.map(user => `
|
|
<tr>
|
|
<td><strong>${escapeHtml(user.username)}</strong></td>
|
|
<td>${user.email ? escapeHtml(user.email) : '-'}</td>
|
|
<td>${user.full_name ? escapeHtml(user.full_name) : '-'}</td>
|
|
<td>
|
|
${user.roles.map(role =>
|
|
`<span class="role-badge role-${role.name}">${role.name}</span>`
|
|
).join(' ') || '<span style="color: #999;">No roles</span>'}
|
|
</td>
|
|
<td class="${user.is_active ? 'status-active' : 'status-inactive'}">
|
|
${user.is_active ? '✅ Active' : '❌ Inactive'}
|
|
</td>
|
|
<td>${user.last_login ? formatDate(user.last_login) : 'Never'}</td>
|
|
<td>
|
|
<button class="btn btn-primary" onclick="editUser(${user.id})">Edit</button>
|
|
<button class="btn btn-danger" onclick="deleteUser(${user.id}, '${escapeHtml(user.username)}')">Delete</button>
|
|
</td>
|
|
</tr>
|
|
`).join('')}
|
|
</tbody>
|
|
</table>
|
|
`;
|
|
} catch (error) {
|
|
console.error('Error loading users:', error);
|
|
document.getElementById('tableContainer').innerHTML = `
|
|
<div class="empty-state">
|
|
<div class="empty-state-icon">⚠️</div>
|
|
<h3>Error loading users</h3>
|
|
<p>${escapeHtml(error.message)}</p>
|
|
</div>
|
|
`;
|
|
showAlert('Failed to load users: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
function showAlert(message, type) {
|
|
const alertContainer = document.getElementById('alertContainer');
|
|
alertContainer.innerHTML = `
|
|
<div class="alert alert-${type}">
|
|
${escapeHtml(message)}
|
|
</div>
|
|
`;
|
|
setTimeout(() => alertContainer.innerHTML = '', 5000);
|
|
}
|
|
|
|
function editUser(userId) {
|
|
// TODO: Implement edit modal
|
|
showAlert('Edit functionality coming soon!', 'success');
|
|
}
|
|
|
|
async function deleteUser(userId, username) {
|
|
if (!confirm(`Are you sure you want to delete user "${username}"?`)) return;
|
|
|
|
try {
|
|
const response = await fetch(`${rootPath}/admin/users/${userId}`, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
if (response.ok) {
|
|
showAlert(`User "${username}" deleted successfully`, 'success');
|
|
loadUsers();
|
|
} else {
|
|
const error = await response.json();
|
|
showAlert('Failed to delete user: ' + error.detail, 'error');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error deleting user:', error);
|
|
showAlert('Failed to delete user: ' + error.message, 'error');
|
|
}
|
|
}
|
|
|
|
function formatDate(dateString) {
|
|
const date = new Date(dateString);
|
|
return date.toLocaleString('en-US', {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
});
|
|
}
|
|
|
|
function escapeHtml(text) {
|
|
const div = document.createElement('div');
|
|
div.textContent = text;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
// Load users on page load
|
|
loadUsers();
|
|
</script>
|
|
</body>
|
|
</html>
|