User Management 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"> </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> </tr> </thead> <tbody id="user table body"> </tbody> </table> </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> `; tableBody.appendChild(row); }); } catch (error) { console.error('Error:', error); alert('Failed to load user data.'); } } document.addEventListener('DOMContentLoaded', function () { fetchAndRenderUsers(); const reloadButton = document.getElementById('reload data btn'); reloadButton.addEventListener('click', fetchAndRenderUsers); }); </script> </body> </html>
