Admin User Dashboard - Copy this Html, Bootstrap Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Admin User Management</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap icons@1.11.1/font/bootstrap icons.css"> <style> .modal .modal header { display: flex; justify content: space between; align items: center; } </style> </head> <body class="bg light"> <div class="container py 5"> <div class="card shadow sm"> <div class="card header bg white d flex justify content between align items center py 3"> <h5 class="card title mb 0">User Management</h5> <button id="reload data btn" class="btn btn primary d flex align items center gap 2"> <i class="bi bi arrow clockwise"></i> Reload Data </button> </div> <div class="card body p 0"> <div class="table responsive"> <table class="table table hover table striped mb 0"> <thead class="table light"> <tr> <th class="px 4">Identifier</th> <th>Providers</th> <th>Created</th> <th>Signed In</th> <th>UID</th> <th>Actions</th> </tr> </thead> <tbody id="user table body"> </tbody> </table> </div> </div> </div> </div> <! Modal Template > <div class="modal fade" id="actionModal" tabindex=" 1" aria hidden="true"> <div class="modal dialog"> <div class="modal content"> <div class="modal header"> <h5 class="modal title" id="modalTitle"></h5> <button type="button" class="btn close" data bs dismiss="modal" aria label="Close"></button> </div> <div class="modal body" id="modalBody"> <! Dynamic Content Here > </div> <div class="modal footer"> <button type="button" class="btn btn secondary" data bs dismiss="modal">Close</button> <button type="button" class="btn btn primary" id="modalConfirmButton">Confirm</button> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> <script> async function fetchAndRenderUsers() { try { const response = await fetch(`/users/`); if (!response.ok) throw new Error(`Error fetching user data: ${response.statusText}`); const users = await response.json(); console.log('Fetched users:', users); const tableBody = document.getElementById('user table body'); tableBody.innerHTML = ''; users.forEach(user => { const row = document.createElement('tr'); row.innerHTML = ` <td class="px 4">${user.email}</td> <td>${user.provider}</td> <td>${user.creation_timestamp ? new Date(user.creation_timestamp).toLocaleString() : ''}</td> <td>${user.last_sign_in_timestamp ? new Date(user.last_sign_in_timestamp).toLocaleString() : ''}</td> <td>${user.userId}</td> <td> <button class="btn btn light btn sm" onclick="openModal('Reset Password', 'Are you sure you want to reset the password for user <b>${user.email}</b>?', () => resetPassword('${user.userId}'))"> Reset Password </button> <button class="btn btn light btn sm" onclick="openModal('Disable Account', 'Are you sure you want to disable the account for user <b>${user.email}</b>?', () => disableAccount('${user.userId}'))"> Disable Account </button> <button class="btn btn danger btn sm" onclick="openModal('Delete Account', 'Are you sure you want to delete the account for user <b>${user.email}</b>?', () => deleteAccount('${user.userId}'))"> Delete Account </button> </td> `; tableBody.appendChild(row); }); } catch (error) { console.error('Error:', error); alert('Failed to load user data.'); } } function openModal(title, body, confirmCallback) { const modalTitle = document.getElementById('modalTitle'); const modalBody = document.getElementById('modalBody'); const modalConfirmButton = document.getElementById('modalConfirmButton'); modalTitle.innerHTML = title; modalBody.innerHTML = body; modalConfirmButton.onclick = function() { confirmCallback(); const modalElement = document.getElementById('actionModal'); const modal = bootstrap.Modal.getInstance(modalElement); modal.hide(); }; const modal = new bootstrap.Modal(document.getElementById('actionModal')); modal.show(); } function resetPassword(userId) { alert(`Resetting password for user: ${userId}`); // Add your logic for resetting the password here. } function disableAccount(userId) { alert(`Disabling account for user: ${userId}`); // Add your logic for disabling the account here. } function deleteAccount(userId) { alert(`Deleting account for user: ${userId}`); // Add your logic for deleting the account here. } document.addEventListener('DOMContentLoaded', function () { fetchAndRenderUsers(); const reloadButton = document.getElementById('reload data btn'); reloadButton.addEventListener('click', fetchAndRenderUsers); }); </script> </body> </html> this is my code. make my code more beautiful
