Adolfo Delorenzo
fa951c3141
This commit introduces major enhancements to Talk2Me: ## Database Integration - PostgreSQL support with SQLAlchemy ORM - Redis integration for caching and real-time analytics - Automated database initialization scripts - Migration support infrastructure ## User Authentication System - JWT-based API authentication - Session-based web authentication - API key authentication for programmatic access - User roles and permissions (admin/user) - Login history and session tracking - Rate limiting per user with customizable limits ## Admin Dashboard - Real-time analytics and monitoring - User management interface (create, edit, delete users) - System health monitoring - Request/error tracking - Language pair usage statistics - Performance metrics visualization ## Key Features - Dual authentication support (token + user accounts) - Graceful fallback for missing services - Non-blocking analytics middleware - Comprehensive error handling - Session management with security features ## Bug Fixes - Fixed rate limiting bypass for admin routes - Added missing email validation method - Improved error handling for missing database tables - Fixed session-based authentication for API endpoints 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
693 lines
31 KiB
HTML
693 lines
31 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 - Talk2Me Admin</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
|
|
<style>
|
|
.user-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
}
|
|
.status-badge {
|
|
font-size: 0.875rem;
|
|
}
|
|
.action-buttons .btn {
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
.stats-card {
|
|
border: none;
|
|
border-radius: 10px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.stats-card .card-body {
|
|
padding: 1.5rem;
|
|
}
|
|
.stats-number {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
color: #4a5568;
|
|
}
|
|
.table-responsive {
|
|
border-radius: 8px;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
}
|
|
.modal-header {
|
|
background-color: #f8f9fa;
|
|
}
|
|
.search-filters {
|
|
background-color: #f8f9fa;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
margin-bottom: 1rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand" href="/admin">Talk2Me Admin</a>
|
|
<div class="navbar-nav ms-auto">
|
|
<a class="nav-link" href="/" target="_blank">
|
|
<i class="bi bi-box-arrow-up-right"></i> Main App
|
|
</a>
|
|
<a class="nav-link" href="#" onclick="logout()">
|
|
<i class="bi bi-box-arrow-right"></i> Logout
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="container-fluid mt-4">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<h1 class="mb-4">User Management</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistics Cards -->
|
|
<div class="row mb-4">
|
|
<div class="col-md-3">
|
|
<div class="card stats-card">
|
|
<div class="card-body">
|
|
<h6 class="text-muted mb-2">Total Users</h6>
|
|
<div class="stats-number" id="stat-total">0</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card stats-card">
|
|
<div class="card-body">
|
|
<h6 class="text-muted mb-2">Active Users</h6>
|
|
<div class="stats-number text-success" id="stat-active">0</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card stats-card">
|
|
<div class="card-body">
|
|
<h6 class="text-muted mb-2">Suspended Users</h6>
|
|
<div class="stats-number text-warning" id="stat-suspended">0</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card stats-card">
|
|
<div class="card-body">
|
|
<h6 class="text-muted mb-2">Admin Users</h6>
|
|
<div class="stats-number text-primary" id="stat-admins">0</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search and Filters -->
|
|
<div class="search-filters">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<input type="text" class="form-control" id="searchInput" placeholder="Search by email, username, or name...">
|
|
</div>
|
|
<div class="col-md-2">
|
|
<select class="form-select" id="roleFilter">
|
|
<option value="">All Roles</option>
|
|
<option value="admin">Admin</option>
|
|
<option value="user">User</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<select class="form-select" id="statusFilter">
|
|
<option value="">All Status</option>
|
|
<option value="active">Active</option>
|
|
<option value="suspended">Suspended</option>
|
|
<option value="inactive">Inactive</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<select class="form-select" id="sortBy">
|
|
<option value="created_at">Created Date</option>
|
|
<option value="last_login_at">Last Login</option>
|
|
<option value="total_requests">Total Requests</option>
|
|
<option value="username">Username</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-md-2">
|
|
<button class="btn btn-primary w-100" onclick="createUser()">
|
|
<i class="bi bi-plus-circle"></i> Create User
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Users Table -->
|
|
<div class="table-responsive">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>User</th>
|
|
<th>Role</th>
|
|
<th>Status</th>
|
|
<th>Usage</th>
|
|
<th>Last Login</th>
|
|
<th>Created</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="usersTableBody">
|
|
<!-- Users will be loaded here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<nav aria-label="Page navigation">
|
|
<ul class="pagination justify-content-center" id="pagination">
|
|
<!-- Pagination will be loaded here -->
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- User Details Modal -->
|
|
<div class="modal fade" id="userModal" tabindex="-1">
|
|
<div class="modal-dialog modal-lg">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">User Details</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body" id="userModalBody">
|
|
<!-- User details will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Create/Edit User Modal -->
|
|
<div class="modal fade" id="createUserModal" tabindex="-1">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="createUserModalTitle">Create User</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="userForm">
|
|
<div class="mb-3">
|
|
<label for="userEmail" class="form-label">Email</label>
|
|
<input type="email" class="form-control" id="userEmail" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="userUsername" class="form-label">Username</label>
|
|
<input type="text" class="form-control" id="userUsername" required>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="userPassword" class="form-label">Password</label>
|
|
<input type="password" class="form-control" id="userPassword" minlength="8">
|
|
<small class="text-muted">Leave blank to keep existing password (edit mode)</small>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="userFullName" class="form-label">Full Name</label>
|
|
<input type="text" class="form-control" id="userFullName">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="userRole" class="form-label">Role</label>
|
|
<select class="form-select" id="userRole">
|
|
<option value="user">User</option>
|
|
<option value="admin">Admin</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="userVerified">
|
|
<label class="form-check-label" for="userVerified">
|
|
Email Verified
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="userRateLimit" class="form-label">Rate Limit (per minute)</label>
|
|
<input type="number" class="form-control" id="userRateLimit" value="30">
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-primary" onclick="saveUser()">Save User</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
|
|
<script>
|
|
let currentPage = 1;
|
|
let editingUserId = null;
|
|
|
|
// Configure axios defaults for session-based auth
|
|
axios.defaults.withCredentials = true;
|
|
|
|
// Also check if there's a JWT token (for API users)
|
|
let authToken = localStorage.getItem('auth_token');
|
|
if (authToken) {
|
|
axios.defaults.headers.common['Authorization'] = `Bearer ${authToken}`;
|
|
}
|
|
|
|
// For admin token auth, add the admin token header
|
|
const adminToken = '{{ session.get("admin_token", "") }}';
|
|
if (adminToken) {
|
|
axios.defaults.headers.common['X-Admin-Token'] = adminToken;
|
|
}
|
|
|
|
// Load users on page load
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadStats();
|
|
loadUsers();
|
|
|
|
// Add event listeners
|
|
document.getElementById('searchInput').addEventListener('input', debounce(loadUsers, 300));
|
|
document.getElementById('roleFilter').addEventListener('change', loadUsers);
|
|
document.getElementById('statusFilter').addEventListener('change', loadUsers);
|
|
document.getElementById('sortBy').addEventListener('change', loadUsers);
|
|
});
|
|
|
|
function debounce(func, wait) {
|
|
let timeout;
|
|
return function executedFunction(...args) {
|
|
const later = () => {
|
|
clearTimeout(timeout);
|
|
func(...args);
|
|
};
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(later, wait);
|
|
};
|
|
}
|
|
|
|
async function loadStats() {
|
|
try {
|
|
const response = await axios.get('/api/auth/admin/stats/users');
|
|
const stats = response.data.stats;
|
|
|
|
document.getElementById('stat-total').textContent = stats.total_users;
|
|
document.getElementById('stat-active').textContent = stats.active_users;
|
|
document.getElementById('stat-suspended').textContent = stats.suspended_users;
|
|
document.getElementById('stat-admins').textContent = stats.admin_users;
|
|
} catch (error) {
|
|
console.error('Failed to load stats:', error);
|
|
}
|
|
}
|
|
|
|
async function loadUsers(page = 1) {
|
|
try {
|
|
currentPage = page;
|
|
const params = {
|
|
page: page,
|
|
per_page: 20,
|
|
search: document.getElementById('searchInput').value,
|
|
role: document.getElementById('roleFilter').value,
|
|
status: document.getElementById('statusFilter').value,
|
|
sort_by: document.getElementById('sortBy').value,
|
|
sort_order: 'desc'
|
|
};
|
|
|
|
const response = await axios.get('/api/auth/admin/users', { params });
|
|
const data = response.data;
|
|
|
|
displayUsers(data.users);
|
|
displayPagination(data.pagination);
|
|
} catch (error) {
|
|
console.error('Failed to load users:', error);
|
|
showAlert('Failed to load users', 'danger');
|
|
}
|
|
}
|
|
|
|
function displayUsers(users) {
|
|
const tbody = document.getElementById('usersTableBody');
|
|
tbody.innerHTML = '';
|
|
|
|
users.forEach(user => {
|
|
const tr = document.createElement('tr');
|
|
tr.innerHTML = `
|
|
<td>
|
|
<div class="d-flex align-items-center">
|
|
${user.avatar_url ?
|
|
`<img src="${user.avatar_url}" class="user-avatar me-2" alt="${user.username}">` :
|
|
`<div class="user-avatar me-2 bg-secondary d-flex align-items-center justify-content-center text-white">
|
|
${user.username.charAt(0).toUpperCase()}
|
|
</div>`
|
|
}
|
|
<div>
|
|
<div class="fw-bold">${user.username}</div>
|
|
<small class="text-muted">${user.email}</small>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<span class="badge ${user.role === 'admin' ? 'bg-primary' : 'bg-secondary'}">
|
|
${user.role}
|
|
</span>
|
|
</td>
|
|
<td>
|
|
${getStatusBadge(user)}
|
|
</td>
|
|
<td>
|
|
<small>
|
|
<i class="bi bi-translate"></i> ${user.total_translations}<br>
|
|
<i class="bi bi-mic"></i> ${user.total_transcriptions}<br>
|
|
<i class="bi bi-volume-up"></i> ${user.total_tts_requests}
|
|
</small>
|
|
</td>
|
|
<td>
|
|
<small>${user.last_login_at ? new Date(user.last_login_at).toLocaleString() : 'Never'}</small>
|
|
</td>
|
|
<td>
|
|
<small>${new Date(user.created_at).toLocaleDateString()}</small>
|
|
</td>
|
|
<td class="action-buttons">
|
|
<button class="btn btn-sm btn-info" onclick="viewUser('${user.id}')" title="View Details">
|
|
<i class="bi bi-eye"></i>
|
|
</button>
|
|
<button class="btn btn-sm btn-warning" onclick="editUser('${user.id}')" title="Edit">
|
|
<i class="bi bi-pencil"></i>
|
|
</button>
|
|
${user.is_suspended ?
|
|
`<button class="btn btn-sm btn-success" onclick="unsuspendUser('${user.id}')" title="Unsuspend">
|
|
<i class="bi bi-play-circle"></i>
|
|
</button>` :
|
|
`<button class="btn btn-sm btn-warning" onclick="suspendUser('${user.id}')" title="Suspend">
|
|
<i class="bi bi-pause-circle"></i>
|
|
</button>`
|
|
}
|
|
${user.role !== 'admin' ?
|
|
`<button class="btn btn-sm btn-danger" onclick="deleteUser('${user.id}')" title="Delete">
|
|
<i class="bi bi-trash"></i>
|
|
</button>` : ''
|
|
}
|
|
</td>
|
|
`;
|
|
tbody.appendChild(tr);
|
|
});
|
|
}
|
|
|
|
function getStatusBadge(user) {
|
|
if (user.is_suspended) {
|
|
return '<span class="badge bg-warning status-badge">Suspended</span>';
|
|
} else if (!user.is_active) {
|
|
return '<span class="badge bg-secondary status-badge">Inactive</span>';
|
|
} else if (!user.is_verified) {
|
|
return '<span class="badge bg-info status-badge">Unverified</span>';
|
|
} else {
|
|
return '<span class="badge bg-success status-badge">Active</span>';
|
|
}
|
|
}
|
|
|
|
function displayPagination(pagination) {
|
|
const nav = document.getElementById('pagination');
|
|
nav.innerHTML = '';
|
|
|
|
const totalPages = pagination.pages;
|
|
const currentPage = pagination.page;
|
|
|
|
// Previous button
|
|
const prevLi = document.createElement('li');
|
|
prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
|
|
prevLi.innerHTML = `<a class="page-link" href="#" onclick="loadUsers(${currentPage - 1})">Previous</a>`;
|
|
nav.appendChild(prevLi);
|
|
|
|
// Page numbers
|
|
for (let i = 1; i <= totalPages; i++) {
|
|
if (i === 1 || i === totalPages || (i >= currentPage - 2 && i <= currentPage + 2)) {
|
|
const li = document.createElement('li');
|
|
li.className = `page-item ${i === currentPage ? 'active' : ''}`;
|
|
li.innerHTML = `<a class="page-link" href="#" onclick="loadUsers(${i})">${i}</a>`;
|
|
nav.appendChild(li);
|
|
} else if (i === currentPage - 3 || i === currentPage + 3) {
|
|
const li = document.createElement('li');
|
|
li.className = 'page-item disabled';
|
|
li.innerHTML = '<span class="page-link">...</span>';
|
|
nav.appendChild(li);
|
|
}
|
|
}
|
|
|
|
// Next button
|
|
const nextLi = document.createElement('li');
|
|
nextLi.className = `page-item ${currentPage === totalPages ? 'disabled' : ''}`;
|
|
nextLi.innerHTML = `<a class="page-link" href="#" onclick="loadUsers(${currentPage + 1})">Next</a>`;
|
|
nav.appendChild(nextLi);
|
|
}
|
|
|
|
async function viewUser(userId) {
|
|
try {
|
|
const response = await axios.get(`/api/auth/admin/users/${userId}`);
|
|
const data = response.data;
|
|
|
|
const modalBody = document.getElementById('userModalBody');
|
|
modalBody.innerHTML = `
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6>User Information</h6>
|
|
<dl class="row">
|
|
<dt class="col-sm-4">Username:</dt>
|
|
<dd class="col-sm-8">${data.user.username}</dd>
|
|
<dt class="col-sm-4">Email:</dt>
|
|
<dd class="col-sm-8">${data.user.email}</dd>
|
|
<dt class="col-sm-4">Full Name:</dt>
|
|
<dd class="col-sm-8">${data.user.full_name || 'N/A'}</dd>
|
|
<dt class="col-sm-4">Role:</dt>
|
|
<dd class="col-sm-8">${data.user.role}</dd>
|
|
<dt class="col-sm-4">Status:</dt>
|
|
<dd class="col-sm-8">${getStatusBadge(data.user)}</dd>
|
|
<dt class="col-sm-4">API Key:</dt>
|
|
<dd class="col-sm-8">
|
|
<code>${data.user.api_key}</code>
|
|
<button class="btn btn-sm btn-secondary ms-2" onclick="copyToClipboard('${data.user.api_key}')">
|
|
<i class="bi bi-clipboard"></i>
|
|
</button>
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6>Usage Statistics</h6>
|
|
<dl class="row">
|
|
<dt class="col-sm-6">Total Requests:</dt>
|
|
<dd class="col-sm-6">${data.user.total_requests}</dd>
|
|
<dt class="col-sm-6">Translations:</dt>
|
|
<dd class="col-sm-6">${data.user.total_translations}</dd>
|
|
<dt class="col-sm-6">Transcriptions:</dt>
|
|
<dd class="col-sm-6">${data.user.total_transcriptions}</dd>
|
|
<dt class="col-sm-6">TTS Requests:</dt>
|
|
<dd class="col-sm-6">${data.user.total_tts_requests}</dd>
|
|
<dt class="col-sm-6">Rate Limits:</dt>
|
|
<dd class="col-sm-6">
|
|
${data.user.rate_limit_per_minute}/min<br>
|
|
${data.user.rate_limit_per_hour}/hour<br>
|
|
${data.user.rate_limit_per_day}/day
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<h6>Login History</h6>
|
|
<div class="table-responsive">
|
|
<table class="table table-sm">
|
|
<thead>
|
|
<tr>
|
|
<th>Date</th>
|
|
<th>IP Address</th>
|
|
<th>Method</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${data.login_history.map(login => `
|
|
<tr>
|
|
<td>${new Date(login.login_at).toLocaleString()}</td>
|
|
<td>${login.ip_address}</td>
|
|
<td>${login.login_method}</td>
|
|
<td>${login.success ?
|
|
'<span class="badge bg-success">Success</span>' :
|
|
`<span class="badge bg-danger">Failed</span>`
|
|
}</td>
|
|
</tr>
|
|
`).join('')}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<hr>
|
|
<h6>Active Sessions (${data.active_sessions.length})</h6>
|
|
<div class="table-responsive">
|
|
<table class="table table-sm">
|
|
<thead>
|
|
<tr>
|
|
<th>Session ID</th>
|
|
<th>Created</th>
|
|
<th>Last Active</th>
|
|
<th>IP Address</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
${data.active_sessions.map(session => `
|
|
<tr>
|
|
<td><code>${session.session_id.substr(0, 8)}...</code></td>
|
|
<td>${new Date(session.created_at).toLocaleString()}</td>
|
|
<td>${new Date(session.last_active_at).toLocaleString()}</td>
|
|
<td>${session.ip_address}</td>
|
|
</tr>
|
|
`).join('')}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
`;
|
|
|
|
const modal = new bootstrap.Modal(document.getElementById('userModal'));
|
|
modal.show();
|
|
} catch (error) {
|
|
console.error('Failed to load user details:', error);
|
|
showAlert('Failed to load user details', 'danger');
|
|
}
|
|
}
|
|
|
|
function createUser() {
|
|
editingUserId = null;
|
|
document.getElementById('createUserModalTitle').textContent = 'Create User';
|
|
document.getElementById('userForm').reset();
|
|
document.getElementById('userPassword').required = true;
|
|
const modal = new bootstrap.Modal(document.getElementById('createUserModal'));
|
|
modal.show();
|
|
}
|
|
|
|
async function editUser(userId) {
|
|
try {
|
|
const response = await axios.get(`/api/auth/admin/users/${userId}`);
|
|
const user = response.data.user;
|
|
|
|
editingUserId = userId;
|
|
document.getElementById('createUserModalTitle').textContent = 'Edit User';
|
|
document.getElementById('userEmail').value = user.email;
|
|
document.getElementById('userUsername').value = user.username;
|
|
document.getElementById('userPassword').value = '';
|
|
document.getElementById('userPassword').required = false;
|
|
document.getElementById('userFullName').value = user.full_name || '';
|
|
document.getElementById('userRole').value = user.role;
|
|
document.getElementById('userVerified').checked = user.is_verified;
|
|
document.getElementById('userRateLimit').value = user.rate_limit_per_minute;
|
|
|
|
const modal = new bootstrap.Modal(document.getElementById('createUserModal'));
|
|
modal.show();
|
|
} catch (error) {
|
|
console.error('Failed to load user for editing:', error);
|
|
showAlert('Failed to load user', 'danger');
|
|
}
|
|
}
|
|
|
|
async function saveUser() {
|
|
try {
|
|
const data = {
|
|
email: document.getElementById('userEmail').value,
|
|
username: document.getElementById('userUsername').value,
|
|
full_name: document.getElementById('userFullName').value,
|
|
role: document.getElementById('userRole').value,
|
|
is_verified: document.getElementById('userVerified').checked,
|
|
rate_limit_per_minute: parseInt(document.getElementById('userRateLimit').value)
|
|
};
|
|
|
|
if (editingUserId) {
|
|
// Update existing user
|
|
if (document.getElementById('userPassword').value) {
|
|
data.password = document.getElementById('userPassword').value;
|
|
}
|
|
await axios.put(`/api/auth/admin/users/${editingUserId}`, data);
|
|
showAlert('User updated successfully', 'success');
|
|
} else {
|
|
// Create new user
|
|
data.password = document.getElementById('userPassword').value;
|
|
await axios.post('/api/auth/admin/users', data);
|
|
showAlert('User created successfully', 'success');
|
|
}
|
|
|
|
bootstrap.Modal.getInstance(document.getElementById('createUserModal')).hide();
|
|
loadUsers(currentPage);
|
|
loadStats();
|
|
} catch (error) {
|
|
console.error('Failed to save user:', error);
|
|
showAlert(error.response?.data?.error || 'Failed to save user', 'danger');
|
|
}
|
|
}
|
|
|
|
async function suspendUser(userId) {
|
|
if (!confirm('Are you sure you want to suspend this user?')) return;
|
|
|
|
try {
|
|
const reason = prompt('Enter suspension reason:');
|
|
if (!reason) return;
|
|
|
|
await axios.post(`/api/auth/admin/users/${userId}/suspend`, { reason });
|
|
showAlert('User suspended successfully', 'success');
|
|
loadUsers(currentPage);
|
|
loadStats();
|
|
} catch (error) {
|
|
console.error('Failed to suspend user:', error);
|
|
showAlert('Failed to suspend user', 'danger');
|
|
}
|
|
}
|
|
|
|
async function unsuspendUser(userId) {
|
|
if (!confirm('Are you sure you want to unsuspend this user?')) return;
|
|
|
|
try {
|
|
await axios.post(`/api/auth/admin/users/${userId}/unsuspend`);
|
|
showAlert('User unsuspended successfully', 'success');
|
|
loadUsers(currentPage);
|
|
loadStats();
|
|
} catch (error) {
|
|
console.error('Failed to unsuspend user:', error);
|
|
showAlert('Failed to unsuspend user', 'danger');
|
|
}
|
|
}
|
|
|
|
async function deleteUser(userId) {
|
|
if (!confirm('Are you sure you want to delete this user? This action cannot be undone.')) return;
|
|
|
|
try {
|
|
await axios.delete(`/api/auth/admin/users/${userId}`);
|
|
showAlert('User deleted successfully', 'success');
|
|
loadUsers(currentPage);
|
|
loadStats();
|
|
} catch (error) {
|
|
console.error('Failed to delete user:', error);
|
|
showAlert('Failed to delete user', 'danger');
|
|
}
|
|
}
|
|
|
|
function copyToClipboard(text) {
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
showAlert('Copied to clipboard', 'success');
|
|
});
|
|
}
|
|
|
|
function showAlert(message, type) {
|
|
const alertDiv = document.createElement('div');
|
|
alertDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed top-0 start-50 translate-middle-x mt-3`;
|
|
alertDiv.style.zIndex = '9999';
|
|
alertDiv.innerHTML = `
|
|
${message}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
|
|
`;
|
|
document.body.appendChild(alertDiv);
|
|
|
|
setTimeout(() => {
|
|
alertDiv.remove();
|
|
}, 5000);
|
|
}
|
|
|
|
function logout() {
|
|
localStorage.removeItem('auth_token');
|
|
window.location.href = '/login';
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |