users.ctml
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <title data-text="title">Asteroid Radio - User Management</title> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <link rel="stylesheet" type="text/css" href="/asteroid/static/asteroid.css"> 8 <script src="/asteroid/static/js/users.js"></script> 9 </head> 10 <body> 11 <div class="container"> 12 <h1>👥 USER MANAGEMENT</h1> 13 <div class="nav"> 14 <a href="/asteroid">Home</a> 15 <a href="/asteroid/admin">Admin</a> 16 <a href="/asteroid/logout" class="btn-logout">Logout</a> 17 </div> 18 19 <!-- User Statistics --> 20 <div class="admin-section"> 21 <h2>User Statistics</h2> 22 <div class="user-stats" id="user-stats"> 23 <div class="stat-card"> 24 <span class="stat-number" id="total-users">0</span> 25 <span class="stat-label">Total Users</span> 26 </div> 27 <div class="stat-card"> 28 <span class="stat-number" id="active-users">0</span> 29 <span class="stat-label">Active Users</span> 30 </div> 31 <div class="stat-card"> 32 <span class="stat-number" id="admin-users">0</span> 33 <span class="stat-label">Admins</span> 34 </div> 35 <div class="stat-card"> 36 <span class="stat-number" id="dj-users">0</span> 37 <span class="stat-label">DJs</span> 38 </div> 39 </div> 40 </div> 41 42 <!-- User Management Actions --> 43 <div class="admin-section"> 44 <h2>User Actions</h2> 45 <div class="controls"> 46 <button class="btn btn-primary" onclick="loadUsers()">👥 View All Users</button> 47 <button class="btn btn-success" onclick="toggleCreateUserForm()">➕ Create New User</button> 48 <button class="btn btn-secondary" onclick="refreshStats()">🔄 Refresh Stats</button> 49 </div> 50 </div> 51 52 <!-- Create User Form (hidden by default) --> 53 <div class="admin-section" id="create-user-form" style="display: none;"> 54 <h2>Create New User</h2> 55 <form onsubmit="createNewUser(event)"> 56 <div class="form-group"> 57 <label>Username:</label> 58 <input type="text" id="new-username" required> 59 </div> 60 <div class="form-group"> 61 <label>Email:</label> 62 <input type="email" id="new-email" required> 63 </div> 64 <div class="form-group"> 65 <label>Password:</label> 66 <input type="password" id="new-password" required minlength="6"> 67 </div> 68 <div class="form-group"> 69 <label>Role:</label> 70 <select id="new-role"> 71 <option value="listener">Listener</option> 72 <option value="dj">DJ</option> 73 <option value="admin">Admin</option> 74 </select> 75 </div> 76 <div class="controls"> 77 <button type="submit" class="btn btn-success">Create User</button> 78 <button type="button" class="btn btn-secondary" onclick="toggleCreateUserForm()">Cancel</button> 79 </div> 80 </form> 81 </div> 82 83 <!-- User List Container (populated by JavaScript) --> 84 <div class="admin-section" id="users-list-section" style="display: none;"> 85 <h2>All Users</h2> 86 <div id="users-container"> 87 <!-- Users table will be inserted here by JavaScript --> 88 </div> 89 </div> 90 </div> 91 </body> 92 </html>