648 lines
19 KiB
HTML
648 lines
19 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 - Sky Art Shop Admin</title>
|
||
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
|
||
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
|
||
|
|
<link rel="stylesheet" href="/assets/css/main.css" />
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: 'Roboto', sans-serif;
|
||
|
|
background: #f5f7fa;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
.admin-header {
|
||
|
|
background: white;
|
||
|
|
padding: 16px 32px;
|
||
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
.admin-header h1 {
|
||
|
|
margin: 0;
|
||
|
|
font-size: 24px;
|
||
|
|
color: #1a1a1a;
|
||
|
|
}
|
||
|
|
.container {
|
||
|
|
max-width: 1400px;
|
||
|
|
margin: 32px auto;
|
||
|
|
padding: 0 32px;
|
||
|
|
}
|
||
|
|
.action-bar {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 24px;
|
||
|
|
}
|
||
|
|
.btn {
|
||
|
|
padding: 10px 20px;
|
||
|
|
border: none;
|
||
|
|
border-radius: 6px;
|
||
|
|
font-weight: 500;
|
||
|
|
cursor: pointer;
|
||
|
|
transition: all 0.2s;
|
||
|
|
text-decoration: none;
|
||
|
|
display: inline-flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
}
|
||
|
|
.btn-primary {
|
||
|
|
background: #6b46c1;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
.btn-primary:hover {
|
||
|
|
background: #5936a3;
|
||
|
|
}
|
||
|
|
.btn-secondary {
|
||
|
|
background: #e5e7eb;
|
||
|
|
color: #374151;
|
||
|
|
}
|
||
|
|
.btn-secondary:hover {
|
||
|
|
background: #d1d5db;
|
||
|
|
}
|
||
|
|
.btn-danger {
|
||
|
|
background: #dc2626;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
.btn-danger:hover {
|
||
|
|
background: #b91c1c;
|
||
|
|
}
|
||
|
|
.btn-success {
|
||
|
|
background: #10b981;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
.btn-success:hover {
|
||
|
|
background: #059669;
|
||
|
|
}
|
||
|
|
.users-table {
|
||
|
|
background: white;
|
||
|
|
border-radius: 8px;
|
||
|
|
overflow: hidden;
|
||
|
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||
|
|
}
|
||
|
|
table {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: collapse;
|
||
|
|
}
|
||
|
|
thead {
|
||
|
|
background: #f9fafb;
|
||
|
|
}
|
||
|
|
th {
|
||
|
|
padding: 16px;
|
||
|
|
text-align: left;
|
||
|
|
font-weight: 600;
|
||
|
|
color: #6b7280;
|
||
|
|
font-size: 13px;
|
||
|
|
text-transform: uppercase;
|
||
|
|
letter-spacing: 0.5px;
|
||
|
|
}
|
||
|
|
td {
|
||
|
|
padding: 16px;
|
||
|
|
border-top: 1px solid #e5e7eb;
|
||
|
|
color: #374151;
|
||
|
|
}
|
||
|
|
tbody tr:hover {
|
||
|
|
background: #f9fafb;
|
||
|
|
}
|
||
|
|
.status-badge {
|
||
|
|
display: inline-block;
|
||
|
|
padding: 4px 12px;
|
||
|
|
border-radius: 12px;
|
||
|
|
font-size: 12px;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
.status-active {
|
||
|
|
background: #d1fae5;
|
||
|
|
color: #065f46;
|
||
|
|
}
|
||
|
|
.status-inactive {
|
||
|
|
background: #fee2e2;
|
||
|
|
color: #991b1b;
|
||
|
|
}
|
||
|
|
.role-badge {
|
||
|
|
display: inline-block;
|
||
|
|
padding: 4px 12px;
|
||
|
|
border-radius: 6px;
|
||
|
|
font-size: 13px;
|
||
|
|
font-weight: 500;
|
||
|
|
background: #e0e7ff;
|
||
|
|
color: #3730a3;
|
||
|
|
}
|
||
|
|
.btn-group {
|
||
|
|
display: flex;
|
||
|
|
gap: 8px;
|
||
|
|
}
|
||
|
|
.btn-icon {
|
||
|
|
width: 32px;
|
||
|
|
height: 32px;
|
||
|
|
padding: 0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
border-radius: 6px;
|
||
|
|
font-size: 16px;
|
||
|
|
}
|
||
|
|
.modal {
|
||
|
|
display: none;
|
||
|
|
position: fixed;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
background: rgba(0,0,0,0.5);
|
||
|
|
z-index: 1000;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.modal.active {
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
.modal-content {
|
||
|
|
background: white;
|
||
|
|
border-radius: 12px;
|
||
|
|
padding: 32px;
|
||
|
|
max-width: 500px;
|
||
|
|
width: 90%;
|
||
|
|
max-height: 90vh;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
.modal-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 24px;
|
||
|
|
}
|
||
|
|
.modal-header h2 {
|
||
|
|
margin: 0;
|
||
|
|
font-size: 24px;
|
||
|
|
color: #1a1a1a;
|
||
|
|
}
|
||
|
|
.form-group {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
.form-group label {
|
||
|
|
display: block;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #374151;
|
||
|
|
}
|
||
|
|
.form-group input,
|
||
|
|
.form-group select {
|
||
|
|
width: 100%;
|
||
|
|
padding: 10px 14px;
|
||
|
|
border: 1px solid #d1d5db;
|
||
|
|
border-radius: 6px;
|
||
|
|
font-size: 14px;
|
||
|
|
font-family: 'Roboto', sans-serif;
|
||
|
|
}
|
||
|
|
.form-group input:focus,
|
||
|
|
.form-group select:focus {
|
||
|
|
outline: none;
|
||
|
|
border-color: #6b46c1;
|
||
|
|
box-shadow: 0 0 0 3px rgba(107, 70, 193, 0.1);
|
||
|
|
}
|
||
|
|
.checkbox-group {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
}
|
||
|
|
.checkbox-group input[type="checkbox"] {
|
||
|
|
width: auto;
|
||
|
|
}
|
||
|
|
.alert {
|
||
|
|
padding: 12px 16px;
|
||
|
|
border-radius: 6px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.alert.active {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.alert-success {
|
||
|
|
background: #d1fae5;
|
||
|
|
color: #065f46;
|
||
|
|
}
|
||
|
|
.alert-error {
|
||
|
|
background: #fee2e2;
|
||
|
|
color: #991b1b;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="admin-header">
|
||
|
|
<h1><i class="bi bi-people"></i> User Management</h1>
|
||
|
|
<a href="/admin/dashboard.html" class="btn btn-secondary">
|
||
|
|
<i class="bi bi-arrow-left"></i> Back to Dashboard
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="container">
|
||
|
|
<div class="action-bar">
|
||
|
|
<h2 style="margin: 0; font-size: 20px; color: #374151;">All Users</h2>
|
||
|
|
<button class="btn btn-primary" onclick="openCreateUserModal()">
|
||
|
|
<i class="bi bi-person-plus"></i> Create New User
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div id="alert" class="alert"></div>
|
||
|
|
|
||
|
|
<div class="users-table">
|
||
|
|
<table>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>Username</th>
|
||
|
|
<th>Email</th>
|
||
|
|
<th>Role</th>
|
||
|
|
<th>Status</th>
|
||
|
|
<th>Last Login</th>
|
||
|
|
<th>Password</th>
|
||
|
|
<th>Actions</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody id="usersTableBody">
|
||
|
|
<tr>
|
||
|
|
<td colspan="7" style="text-align: center; padding: 40px;">
|
||
|
|
Loading users...
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Create/Edit User Modal -->
|
||
|
|
<div id="userModal" class="modal">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h2 id="modalTitle">Create New User</h2>
|
||
|
|
<button class="btn-icon btn-secondary" onclick="closeUserModal()">
|
||
|
|
<i class="bi bi-x-lg"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<form id="userForm">
|
||
|
|
<input type="hidden" id="userId" />
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="username">Username *</label>
|
||
|
|
<input type="text" id="username" required />
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="email">Email *</label>
|
||
|
|
<input type="email" id="email" required />
|
||
|
|
</div>
|
||
|
|
<div class="form-group" id="passwordGroup">
|
||
|
|
<label for="password">Password *</label>
|
||
|
|
<input type="password" id="password" minlength="6" />
|
||
|
|
<small style="color: #6b7280;">Minimum 6 characters</small>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="role_id">Role *</label>
|
||
|
|
<select id="role_id" required>
|
||
|
|
<option value="">Select a role...</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<div class="checkbox-group">
|
||
|
|
<input type="checkbox" id="password_never_expires" />
|
||
|
|
<label for="password_never_expires" style="margin: 0;">Password never expires</label>
|
||
|
|
</div>
|
||
|
|
<small style="color: #6b7280; display: block; margin-top: 4px;">
|
||
|
|
If unchecked, password will expire after 90 days
|
||
|
|
</small>
|
||
|
|
</div>
|
||
|
|
<div style="display: flex; gap: 12px; margin-top: 24px;">
|
||
|
|
<button type="submit" class="btn btn-primary" style="flex: 1;">
|
||
|
|
<i class="bi bi-check-lg"></i> Save User
|
||
|
|
</button>
|
||
|
|
<button type="button" class="btn btn-secondary" onclick="closeUserModal()">
|
||
|
|
Cancel
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Reset Password Modal -->
|
||
|
|
<div id="resetPasswordModal" class="modal">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal-header">
|
||
|
|
<h2>Reset Password</h2>
|
||
|
|
<button class="btn-icon btn-secondary" onclick="closeResetPasswordModal()">
|
||
|
|
<i class="bi bi-x-lg"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<form id="resetPasswordForm">
|
||
|
|
<input type="hidden" id="resetUserId" />
|
||
|
|
<p style="color: #6b7280; margin-bottom: 20px;">
|
||
|
|
Enter a new password for <strong id="resetUsername"></strong>
|
||
|
|
</p>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="new_password">New Password *</label>
|
||
|
|
<input type="password" id="new_password" minlength="6" required />
|
||
|
|
<small style="color: #6b7280;">Minimum 6 characters</small>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="confirm_password">Confirm Password *</label>
|
||
|
|
<input type="password" id="confirm_password" minlength="6" required />
|
||
|
|
</div>
|
||
|
|
<div style="display: flex; gap: 12px; margin-top: 24px;">
|
||
|
|
<button type="submit" class="btn btn-primary" style="flex: 1;">
|
||
|
|
<i class="bi bi-key"></i> Reset Password
|
||
|
|
</button>
|
||
|
|
<button type="button" class="btn btn-secondary" onclick="closeResetPasswordModal()">
|
||
|
|
Cancel
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
let users = [];
|
||
|
|
let roles = [];
|
||
|
|
let editingUserId = null;
|
||
|
|
|
||
|
|
// Check authentication
|
||
|
|
async function checkAuth() {
|
||
|
|
try {
|
||
|
|
const response = await fetch('/api/admin/session');
|
||
|
|
const data = await response.json();
|
||
|
|
if (!data.authenticated) {
|
||
|
|
window.location.href = '/admin/login.html';
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
window.location.href = '/admin/login.html';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Load roles
|
||
|
|
async function loadRoles() {
|
||
|
|
try {
|
||
|
|
const response = await fetch('/api/admin/users/roles');
|
||
|
|
const data = await response.json();
|
||
|
|
if (data.success) {
|
||
|
|
roles = data.roles;
|
||
|
|
const select = document.getElementById('role_id');
|
||
|
|
select.innerHTML = '<option value="">Select a role...</option>' +
|
||
|
|
roles.map(role => \`<option value="\${role.id}">\${role.name} - \${role.description}</option>\`).join('');
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error loading roles:', error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Load users
|
||
|
|
async function loadUsers() {
|
||
|
|
try {
|
||
|
|
const response = await fetch('/api/admin/users');
|
||
|
|
const data = await response.json();
|
||
|
|
if (data.success) {
|
||
|
|
users = data.users;
|
||
|
|
renderUsers();
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error loading users:', error);
|
||
|
|
showAlert('Error loading users', 'error');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Render users table
|
||
|
|
function renderUsers() {
|
||
|
|
const tbody = document.getElementById('usersTableBody');
|
||
|
|
if (users.length === 0) {
|
||
|
|
tbody.innerHTML = '<tr><td colspan="7" style="text-align: center; padding: 40px; color: #9ca3af;">No users found</td></tr>';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
tbody.innerHTML = users.map(user => \`
|
||
|
|
<tr>
|
||
|
|
<td style="font-weight: 500;">\${user.username}</td>
|
||
|
|
<td>\${user.email}</td>
|
||
|
|
<td><span class="role-badge">\${user.role_name || 'Unknown'}</span></td>
|
||
|
|
<td>
|
||
|
|
<span class="status-badge \${user.isactive ? 'status-active' : 'status-inactive'}">
|
||
|
|
\${user.isactive ? 'Active' : 'Inactive'}
|
||
|
|
</span>
|
||
|
|
</td>
|
||
|
|
<td>\${user.last_login ? new Date(user.last_login).toLocaleDateString() : 'Never'}</td>
|
||
|
|
<td>
|
||
|
|
\${user.password_never_expires ?
|
||
|
|
'<span style="color: #10b981;">Never expires</span>' :
|
||
|
|
'<span style="color: #f59e0b;">Expires in 90 days</span>'
|
||
|
|
}
|
||
|
|
</td>
|
||
|
|
<td>
|
||
|
|
<div class="btn-group">
|
||
|
|
<button class="btn-icon btn-secondary" onclick="editUser('\${user.id}')" title="Edit">
|
||
|
|
<i class="bi bi-pencil"></i>
|
||
|
|
</button>
|
||
|
|
<button class="btn-icon btn-primary" onclick="resetPassword('\${user.id}', '\${user.username}')" title="Reset Password">
|
||
|
|
<i class="bi bi-key"></i>
|
||
|
|
</button>
|
||
|
|
<button class="btn-icon \${user.isactive ? 'btn-secondary' : 'btn-success'}"
|
||
|
|
onclick="toggleStatus('\${user.id}')"
|
||
|
|
title="\${user.isactive ? 'Deactivate' : 'Activate'}">
|
||
|
|
<i class="bi bi-\${user.isactive ? 'pause' : 'play'}-circle"></i>
|
||
|
|
</button>
|
||
|
|
<button class="btn-icon btn-danger" onclick="deleteUser('\${user.id}')" title="Delete">
|
||
|
|
<i class="bi bi-trash"></i>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
\`).join('');
|
||
|
|
}
|
||
|
|
|
||
|
|
// Open create user modal
|
||
|
|
function openCreateUserModal() {
|
||
|
|
editingUserId = null;
|
||
|
|
document.getElementById('modalTitle').textContent = 'Create New User';
|
||
|
|
document.getElementById('userId').value = '';
|
||
|
|
document.getElementById('userForm').reset();
|
||
|
|
document.getElementById('passwordGroup').style.display = 'block';
|
||
|
|
document.getElementById('password').required = true;
|
||
|
|
document.getElementById('userModal').classList.add('active');
|
||
|
|
}
|
||
|
|
|
||
|
|
// Edit user
|
||
|
|
function editUser(id) {
|
||
|
|
const user = users.find(u => u.id === id);
|
||
|
|
if (!user) return;
|
||
|
|
|
||
|
|
editingUserId = id;
|
||
|
|
document.getElementById('modalTitle').textContent = 'Edit User';
|
||
|
|
document.getElementById('userId').value = user.id;
|
||
|
|
document.getElementById('username').value = user.username;
|
||
|
|
document.getElementById('email').value = user.email;
|
||
|
|
document.getElementById('role_id').value = user.role_id;
|
||
|
|
document.getElementById('password_never_expires').checked = user.password_never_expires;
|
||
|
|
document.getElementById('passwordGroup').style.display = 'none';
|
||
|
|
document.getElementById('password').required = false;
|
||
|
|
document.getElementById('userModal').classList.add('active');
|
||
|
|
}
|
||
|
|
|
||
|
|
// Close user modal
|
||
|
|
function closeUserModal() {
|
||
|
|
document.getElementById('userModal').classList.remove('active');
|
||
|
|
document.getElementById('userForm').reset();
|
||
|
|
editingUserId = null;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Submit user form
|
||
|
|
document.getElementById('userForm').addEventListener('submit', async (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
const formData = {
|
||
|
|
username: document.getElementById('username').value,
|
||
|
|
email: document.getElementById('email').value,
|
||
|
|
role_id: document.getElementById('role_id').value,
|
||
|
|
password_never_expires: document.getElementById('password_never_expires').checked
|
||
|
|
};
|
||
|
|
|
||
|
|
if (!editingUserId) {
|
||
|
|
formData.password = document.getElementById('password').value;
|
||
|
|
}
|
||
|
|
|
||
|
|
try {
|
||
|
|
const url = editingUserId ? \`/api/admin/users/\${editingUserId}\` : '/api/admin/users';
|
||
|
|
const method = editingUserId ? 'PUT' : 'POST';
|
||
|
|
|
||
|
|
const response = await fetch(url, {
|
||
|
|
method,
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
body: JSON.stringify(formData)
|
||
|
|
});
|
||
|
|
|
||
|
|
const data = await response.json();
|
||
|
|
|
||
|
|
if (data.success) {
|
||
|
|
showAlert(data.message, 'success');
|
||
|
|
closeUserModal();
|
||
|
|
loadUsers();
|
||
|
|
} else {
|
||
|
|
showAlert(data.message, 'error');
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error saving user:', error);
|
||
|
|
showAlert('Error saving user', 'error');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Reset password
|
||
|
|
function resetPassword(id, username) {
|
||
|
|
document.getElementById('resetUserId').value = id;
|
||
|
|
document.getElementById('resetUsername').textContent = username;
|
||
|
|
document.getElementById('resetPasswordForm').reset();
|
||
|
|
document.getElementById('resetPasswordModal').classList.add('active');
|
||
|
|
}
|
||
|
|
|
||
|
|
// Close reset password modal
|
||
|
|
function closeResetPasswordModal() {
|
||
|
|
document.getElementById('resetPasswordModal').classList.remove('active');
|
||
|
|
document.getElementById('resetPasswordForm').reset();
|
||
|
|
}
|
||
|
|
|
||
|
|
// Submit reset password form
|
||
|
|
document.getElementById('resetPasswordForm').addEventListener('submit', async (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
const newPassword = document.getElementById('new_password').value;
|
||
|
|
const confirmPassword = document.getElementById('confirm_password').value;
|
||
|
|
|
||
|
|
if (newPassword !== confirmPassword) {
|
||
|
|
showAlert('Passwords do not match', 'error');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const userId = document.getElementById('resetUserId').value;
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch(\`/api/admin/users/\${userId}/reset-password\`, {
|
||
|
|
method: 'POST',
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
body: JSON.stringify({ new_password: newPassword })
|
||
|
|
});
|
||
|
|
|
||
|
|
const data = await response.json();
|
||
|
|
|
||
|
|
if (data.success) {
|
||
|
|
showAlert(data.message, 'success');
|
||
|
|
closeResetPasswordModal();
|
||
|
|
} else {
|
||
|
|
showAlert(data.message, 'error');
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error resetting password:', error);
|
||
|
|
showAlert('Error resetting password', 'error');
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// Toggle user status
|
||
|
|
async function toggleStatus(id) {
|
||
|
|
if (!confirm('Are you sure you want to change this user\'s status?')) return;
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch(\`/api/admin/users/\${id}/toggle-status\`, {
|
||
|
|
method: 'POST'
|
||
|
|
});
|
||
|
|
|
||
|
|
const data = await response.json();
|
||
|
|
|
||
|
|
if (data.success) {
|
||
|
|
showAlert(data.message, 'success');
|
||
|
|
loadUsers();
|
||
|
|
} else {
|
||
|
|
showAlert(data.message, 'error');
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error toggling status:', error);
|
||
|
|
showAlert('Error toggling status', 'error');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Delete user
|
||
|
|
async function deleteUser(id) {
|
||
|
|
if (!confirm('Are you sure you want to delete this user? This action cannot be undone.')) return;
|
||
|
|
|
||
|
|
try {
|
||
|
|
const response = await fetch(\`/api/admin/users/\${id}\`, {
|
||
|
|
method: 'DELETE'
|
||
|
|
});
|
||
|
|
|
||
|
|
const data = await response.json();
|
||
|
|
|
||
|
|
if (data.success) {
|
||
|
|
showAlert(data.message, 'success');
|
||
|
|
loadUsers();
|
||
|
|
} else {
|
||
|
|
showAlert(data.message, 'error');
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Error deleting user:', error);
|
||
|
|
showAlert('Error deleting user', 'error');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Show alert
|
||
|
|
function showAlert(message, type) {
|
||
|
|
const alert = document.getElementById('alert');
|
||
|
|
alert.textContent = message;
|
||
|
|
alert.className = \`alert alert-\${type} active\`;
|
||
|
|
setTimeout(() => {
|
||
|
|
alert.classList.remove('active');
|
||
|
|
}, 5000);
|
||
|
|
}
|
||
|
|
|
||
|
|
// Initialize
|
||
|
|
checkAuth();
|
||
|
|
loadRoles();
|
||
|
|
loadUsers();
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|