improving user management
Deploy / deploy (push) Successful in 32s

This commit is contained in:
2026-05-08 00:18:45 +02:00
parent 70349f471f
commit 5cf23289ee
+83 -18
View File
@@ -16,55 +16,115 @@ if (!isset($_SESSION["logged_in"]) || $_SESSION["logged_in"] !== true || !is_adm
include "../assets/components.php"; include "../assets/components.php";
print_csrf_script(); print_csrf_script();
?> ?>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head> </head>
<body> <body>
<div class="container mt-5"> <div class="container my-5">
<h1 class="mb-4">User Management</h1> <div class="row justify-content-center">
<table class="table table-bordered"> <div class="col-md-8 col-lg-6">
<div class="card shadow">
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-4">
<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="table-responsive">
<table class="table table-dark table-hover align-middle mb-0">
<thead> <thead>
<tr> <tr>
<th>ID</th> <th>ID</th>
<th>Username</th> <th>Username</th>
<th>Actions</th> <th class="text-end">Actions</th>
</tr> </tr>
</thead> </thead>
<tbody id="userTableBody"> <tbody id="userTableBody">
<!-- User rows will be dynamically inserted here -->
</tbody> </tbody>
</table> </table>
</div> </div>
<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> <script>
let pendingDeleteId = null;
async function fetchUsers() { async function fetchUsers() {
try { try {
const response = await fetch('/api/manage/fetch_users.php'); const response = await fetch('/api/manage/fetch_users.php');
const data = await response.json(); const data = await response.json();
if (data.success) {
const userTableBody = document.getElementById('userTableBody'); const userTableBody = document.getElementById('userTableBody');
userTableBody.innerHTML = ''; // Clear existing rows const noMsg = document.getElementById('noUsersMessage');
userTableBody.innerHTML = '';
if (data.success && data.data.length > 0) {
noMsg.style.display = 'none';
data.data.forEach(user => { data.data.forEach(user => {
const row = document.createElement('tr'); const row = document.createElement('tr');
row.innerHTML = ` row.innerHTML = `
<td>${user.id}</td> <td class="text-muted">${user.id}</td>
<td>${user.username}</td> <td>${user.username}</td>
<td> <td class="text-end">
<button class="btn btn-danger btn-sm" onclick="deleteUser(${user.id})">Delete</button> <button class="btn btn-outline-danger btn-sm" onclick="showDeleteConfirm(${user.id}, '${user.username.replace(/'/g, "\\'")}')">Delete</button>
</td> </td>
`; `;
userTableBody.appendChild(row); userTableBody.appendChild(row);
}); });
} else { } else {
console.error(data.message); noMsg.style.display = 'block';
} }
} catch (error) { } catch (error) {
console.error('Error fetching users:', error); console.error('Error fetching users:', error);
} }
} }
async function deleteUser(userId) { function showDeleteConfirm(userId, username) {
if (!confirm('Are you sure you want to delete this user?')) return; 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 { try {
const response = await fetch(`/api/manage/delete_user.php?id=${userId}`, { const response = await fetch(`/api/manage/delete_user.php?id=${userId}`, {
@@ -76,17 +136,22 @@ if (!isset($_SESSION["logged_in"]) || $_SESSION["logged_in"] !== true || !is_adm
const data = await response.json(); const data = await response.json();
if (data.success) { if (data.success) {
alert('User deleted successfully!'); showResponseModal('Success', 'User deleted successfully!');
fetchUsers(); // Refresh the user list fetchUsers();
} else { } else {
alert(`Error: ${data.message}`); showResponseModal('Error', data.message || 'Failed to delete user.');
} }
} catch (error) { } catch (error) {
console.error('Error deleting user:', 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();
} }
// Fetch users on page load
fetchUsers(); fetchUsers();
</script> </script>
</body> </body>