191 lines
7.8 KiB
PHP
191 lines
7.8 KiB
PHP
<?php
|
|
include "../api/utils/security.php";
|
|
secure_session_start();
|
|
if (!isset($_SESSION["logged_in"]) || $_SESSION["logged_in"] !== true || !is_admin_session()) {
|
|
header("LOCATION:/?send_to=/account/");
|
|
exit();
|
|
}
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en" data-bs-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>User Management</title>
|
|
<?php
|
|
include "../assets/components.php";
|
|
print_csrf_script();
|
|
?>
|
|
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="container my-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-10 col-lg-8">
|
|
<div class="card shadow">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h4 class="card-title mb-0">User Management</h4>
|
|
<a href="/account/" class="btn btn-outline-secondary btn-sm"><span class="material-icons" style="font-size: 18px; vertical-align: middle;">arrow_back</span> Back</a>
|
|
</div>
|
|
<div class="row g-2 mb-3">
|
|
<div class="col">
|
|
<input type="text" id="searchInput" class="form-control" placeholder="Search by username..." oninput="loadUsers()">
|
|
</div>
|
|
<div class="col-auto">
|
|
<select id="sortSelect" class="form-select" onchange="loadUsers()">
|
|
<option value="id">ID</option>
|
|
<option value="username">Username</option>
|
|
</select>
|
|
</div>
|
|
<div class="col-auto">
|
|
<select id="orderSelect" class="form-select" onchange="loadUsers()">
|
|
<option value="ASC">Asc</option>
|
|
<option value="DESC">Desc</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div class="table-responsive" style="max-height: 60vh; overflow-y: auto;">
|
|
<table class="table table-dark table-hover align-middle mb-0">
|
|
<thead class="sticky-top" style="background: var(--bs-card-bg);">
|
|
<tr>
|
|
<th style="width: 80px;">ID</th>
|
|
<th>Username</th>
|
|
<th class="text-end" style="width: 100px;">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="userTableBody">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<p id="loadingMessage" class="text-muted text-center mt-3 mb-0">Loading...</p>
|
|
<p id="noUsersMessage" class="text-muted text-center mt-3 mb-0" style="display:none;">No users found.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="confirmModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title">Confirm Deletion</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Are you sure you want to delete user <strong id="deleteUserName"></strong>?
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-danger" id="confirmDeleteBtn">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="responseModal" tabindex="-1" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="responseModalLabel">Message</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body" id="responseModalMessage"></div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let pendingDeleteId = null;
|
|
let debounceTimer = null;
|
|
|
|
async function loadUsers() {
|
|
const search = document.getElementById('searchInput').value;
|
|
const sort = document.getElementById('sortSelect').value;
|
|
const order = document.getElementById('orderSelect').value;
|
|
|
|
document.getElementById('loadingMessage').style.display = 'block';
|
|
document.getElementById('noUsersMessage').style.display = 'none';
|
|
|
|
try {
|
|
const response = await fetch(`/api/manage/fetch_users.php?search=${encodeURIComponent(search)}&sort=${sort}&order=${order}`);
|
|
const data = await response.json();
|
|
|
|
const userTableBody = document.getElementById('userTableBody');
|
|
const noMsg = document.getElementById('noUsersMessage');
|
|
const loadingMsg = document.getElementById('loadingMessage');
|
|
userTableBody.innerHTML = '';
|
|
loadingMsg.style.display = 'none';
|
|
|
|
if (data.success && data.data.length > 0) {
|
|
noMsg.style.display = 'none';
|
|
data.data.forEach(user => {
|
|
const row = document.createElement('tr');
|
|
row.innerHTML = `
|
|
<td class="text-muted">${user.id}</td>
|
|
<td>${escapeHtml(user.username)}</td>
|
|
<td class="text-end">
|
|
<button class="btn btn-outline-danger btn-sm" onclick="showDeleteConfirm(${user.id}, '${escapeHtml(user.username).replace(/'/g, "\\'")}')">Delete</button>
|
|
</td>
|
|
`;
|
|
userTableBody.appendChild(row);
|
|
});
|
|
} else {
|
|
noMsg.style.display = 'block';
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching users:', error);
|
|
document.getElementById('loadingMessage').textContent = 'Failed to load users.';
|
|
}
|
|
}
|
|
|
|
function escapeHtml(str) {
|
|
const div = document.createElement('div');
|
|
div.textContent = str;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function showDeleteConfirm(userId, username) {
|
|
pendingDeleteId = userId;
|
|
document.getElementById('deleteUserName').textContent = username;
|
|
new bootstrap.Modal(document.getElementById('confirmModal')).show();
|
|
}
|
|
|
|
document.getElementById('confirmDeleteBtn').addEventListener('click', async function() {
|
|
if (pendingDeleteId === null) return;
|
|
const userId = pendingDeleteId;
|
|
pendingDeleteId = null;
|
|
bootstrap.Modal.getInstance(document.getElementById('confirmModal')).hide();
|
|
|
|
try {
|
|
const response = await fetch(`/api/manage/delete_user.php?id=${userId}`, {
|
|
method: 'DELETE',
|
|
headers: { 'X-CSRF-Token': window.csrfToken }
|
|
});
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
showResponseModal('Success', 'User deleted successfully!');
|
|
loadUsers();
|
|
} else {
|
|
showResponseModal('Error', data.message || 'Failed to delete user.');
|
|
}
|
|
} catch (error) {
|
|
showResponseModal('Error', 'An error occurred. Please try again.');
|
|
}
|
|
});
|
|
|
|
function showResponseModal(title, message) {
|
|
document.getElementById('responseModalLabel').textContent = title;
|
|
document.getElementById('responseModalMessage').textContent = message;
|
|
new bootstrap.Modal(document.getElementById('responseModal')).show();
|
|
}
|
|
|
|
loadUsers();
|
|
</script>
|
|
</body>
|
|
</html>
|