93 lines
3.2 KiB
Plaintext
93 lines
3.2 KiB
Plaintext
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<title data-text="title">Asteroid Radio - User Management</title>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<link rel="stylesheet" type="text/css" href="/asteroid/static/asteroid.css">
|
||
<script src="/asteroid/static/js/users.js"></script>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<h1>👥 USER MANAGEMENT</h1>
|
||
<div class="nav">
|
||
<a href="/asteroid">Home</a>
|
||
<a href="/asteroid/admin">Admin</a>
|
||
<a href="/asteroid/logout" class="btn-logout">Logout</a>
|
||
</div>
|
||
|
||
<!-- User Statistics -->
|
||
<div class="admin-section">
|
||
<h2>User Statistics</h2>
|
||
<div class="user-stats" id="user-stats">
|
||
<div class="stat-card">
|
||
<span class="stat-number" id="total-users">0</span>
|
||
<span class="stat-label">Total Users</span>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span class="stat-number" id="active-users">0</span>
|
||
<span class="stat-label">Active Users</span>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span class="stat-number" id="admin-users">0</span>
|
||
<span class="stat-label">Admins</span>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span class="stat-number" id="dj-users">0</span>
|
||
<span class="stat-label">DJs</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- User Management Actions -->
|
||
<div class="admin-section">
|
||
<h2>User Actions</h2>
|
||
<div class="controls">
|
||
<button class="btn btn-primary" onclick="loadUsers()">👥 View All Users</button>
|
||
<button class="btn btn-success" onclick="toggleCreateUserForm()">➕ Create New User</button>
|
||
<button class="btn btn-secondary" onclick="refreshStats()">🔄 Refresh Stats</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Create User Form (hidden by default) -->
|
||
<div class="admin-section" id="create-user-form" style="display: none;">
|
||
<h2>Create New User</h2>
|
||
<form onsubmit="createNewUser(event)">
|
||
<div class="form-group">
|
||
<label>Username:</label>
|
||
<input type="text" id="new-username" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Email:</label>
|
||
<input type="email" id="new-email" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Password:</label>
|
||
<input type="password" id="new-password" required minlength="6">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>Role:</label>
|
||
<select id="new-role">
|
||
<option value="listener">Listener</option>
|
||
<option value="dj">DJ</option>
|
||
<option value="admin">Admin</option>
|
||
</select>
|
||
</div>
|
||
<div class="controls">
|
||
<button type="submit" class="btn btn-success">Create User</button>
|
||
<button type="button" class="btn btn-secondary" onclick="toggleCreateUserForm()">Cancel</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<!-- User List Container (populated by JavaScript) -->
|
||
<div class="admin-section" id="users-list-section" style="display: none;">
|
||
<h2>All Users</h2>
|
||
<div id="users-container">
|
||
<!-- Users table will be inserted here by JavaScript -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|