Fix user creation frontend - replace placeholder alerts with actual API calls

- Replace alert placeholders with proper fetch() calls to /api/users endpoint
- Add proper error handling for user creation and deletion
- Enhanced user list loading with error handling
- Users can now be actually created, deleted, and refreshed properly
- Form resets after successful user creation
- Modal closes automatically after successful creation

This completes the user management functionality that was showing alerts
instead of performing actual database operations.
parent de923e4b
...@@ -91,7 +91,13 @@ ...@@ -91,7 +91,13 @@
const tbody = document.getElementById('users-table-body'); const tbody = document.getElementById('users-table-body');
tbody.innerHTML = ''; tbody.innerHTML = '';
data.forEach(user => { if (data.error) {
tbody.innerHTML = '<tr><td colspan="5" class="text-center text-danger">Error loading users: ' + data.error + '</td></tr>';
return;
}
const users = data.users || [];
users.forEach(user => {
const row = document.createElement('tr'); const row = document.createElement('tr');
row.innerHTML = ` row.innerHTML = `
<td>${user.username}</td> <td>${user.username}</td>
...@@ -134,8 +140,22 @@ ...@@ -134,8 +140,22 @@
// Delete user // Delete user
function deleteUser(userId) { function deleteUser(userId) {
if (confirm('Are you sure you want to delete this user?')) { if (confirm('Are you sure you want to delete this user?')) {
// In a real implementation, this would delete the user fetch(`/api/users/${userId}`, {
alert(`Delete user ${userId} - This would delete the user from the database`); method: 'DELETE'
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('User deleted successfully');
loadUsers();
} else {
alert('Failed to delete user: ' + (data.error || 'Unknown error'));
}
})
.catch(error => {
console.error('Error deleting user:', error);
alert('Error deleting user: ' + error.message);
});
} }
} }
...@@ -157,13 +177,41 @@ ...@@ -157,13 +177,41 @@
return; return;
} }
// In a real implementation, this would create the user // Create user via API
alert(`Create user: ${username} (${email}) - This would save the user to the database`); fetch('/api/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
username: username,
email: email,
password: password,
is_admin: isAdmin
})
})
.then(response => response.json())
.then(data => {
if (data.success) {
alert('User created successfully');
// Reset form
document.getElementById('create-user-form').reset();
// Close modal and refresh user list // Close modal
const modal = bootstrap.Modal.getInstance(document.getElementById('createUserModal')); const modal = bootstrap.Modal.getInstance(document.getElementById('createUserModal'));
modal.hide(); modal.hide();
// Refresh user list
loadUsers(); loadUsers();
} else {
alert('Failed to create user: ' + (data.error || 'Unknown error'));
}
})
.catch(error => {
console.error('Error creating user:', error);
alert('Error creating user: ' + error.message);
});
}); });
// Load users when page loads // Load users when page loads
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment