200 lines
7.0 KiB
HTML
200 lines
7.0 KiB
HTML
<!doctype html>
|
|
<html lang="en" class="h-full">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>User Management - Overlord</title>
|
|
<link rel="stylesheet" href="/assets/tailwind.css" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
|
|
crossorigin="anonymous"
|
|
referrerpolicy="no-referrer"
|
|
/>
|
|
<link rel="stylesheet" href="/assets/main.css" />
|
|
<script src="/assets/toast.js"></script>
|
|
<script src="/assets/ripple.js"></script>
|
|
</head>
|
|
<body class="min-h-screen bg-slate-950 text-slate-100">
|
|
<header id="top-nav"></header>
|
|
|
|
<div class="min-h-full flex flex-col">
|
|
<!-- Main Content -->
|
|
<main class="flex-1 max-w-7xl w-full mx-auto px-4 py-8">
|
|
<!-- Actions Bar -->
|
|
<div class="mb-6 flex items-center justify-between">
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-slate-100 mb-1">Users</h2>
|
|
<p class="text-slate-400 text-sm">Manage user accounts and roles</p>
|
|
</div>
|
|
<button
|
|
id="add-user-btn"
|
|
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors font-medium"
|
|
>
|
|
<i class="fa-solid fa-user-plus mr-2"></i>Add User
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Users Table -->
|
|
<div
|
|
class="bg-slate-900/50 border border-slate-800 rounded-xl overflow-hidden"
|
|
>
|
|
<table class="w-full">
|
|
<thead class="bg-slate-800/50 border-b border-slate-700">
|
|
<tr>
|
|
<th
|
|
class="text-left px-6 py-4 text-sm font-semibold text-slate-300"
|
|
>
|
|
Username
|
|
</th>
|
|
<th
|
|
class="text-left px-6 py-4 text-sm font-semibold text-slate-300"
|
|
>
|
|
Role
|
|
</th>
|
|
<th
|
|
class="text-left px-6 py-4 text-sm font-semibold text-slate-300"
|
|
>
|
|
Created
|
|
</th>
|
|
<th
|
|
class="text-left px-6 py-4 text-sm font-semibold text-slate-300"
|
|
>
|
|
Last Login
|
|
</th>
|
|
<th
|
|
class="text-left px-6 py-4 text-sm font-semibold text-slate-300"
|
|
>
|
|
Created By
|
|
</th>
|
|
<th
|
|
class="text-right px-6 py-4 text-sm font-semibold text-slate-300"
|
|
>
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="users-table-body" class="divide-y divide-slate-800">
|
|
<tr>
|
|
<td colspan="6" class="px-6 py-12 text-center text-slate-400">
|
|
<i class="fa-solid fa-spinner fa-spin mr-2"></i>Loading
|
|
users...
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Add/Edit User Modal -->
|
|
<div
|
|
id="user-modal"
|
|
class="hidden fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
|
|
>
|
|
<div
|
|
class="bg-slate-900 border border-slate-700 rounded-xl max-w-md w-full p-6 shadow-2xl"
|
|
>
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h3 id="modal-title" class="text-xl font-bold text-slate-100">
|
|
Add User
|
|
</h3>
|
|
<button
|
|
id="close-modal"
|
|
class="text-slate-400 hover:text-slate-200 transition-colors"
|
|
>
|
|
<i class="fa-solid fa-times text-xl"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<form id="user-form" class="space-y-4">
|
|
<div>
|
|
<label
|
|
for="username"
|
|
class="block text-sm font-medium text-slate-300 mb-2"
|
|
>Username</label
|
|
>
|
|
<input
|
|
type="text"
|
|
id="username"
|
|
name="username"
|
|
required
|
|
pattern="[a-zA-Z0-9_-]+"
|
|
minlength="3"
|
|
maxlength="32"
|
|
class="w-full px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
placeholder="Enter username"
|
|
/>
|
|
<p class="text-xs text-slate-500 mt-1">
|
|
3-32 characters, letters, numbers, hyphens, and underscores only
|
|
</p>
|
|
</div>
|
|
|
|
<div id="password-field">
|
|
<label
|
|
for="password"
|
|
class="block text-sm font-medium text-slate-300 mb-2"
|
|
>Password</label
|
|
>
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
name="password"
|
|
required
|
|
minlength="6"
|
|
class="w-full px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-slate-200 placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
placeholder="Enter password"
|
|
/>
|
|
<p class="text-xs text-slate-500 mt-1">Minimum 6 characters</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label
|
|
for="role"
|
|
class="block text-sm font-medium text-slate-300 mb-2"
|
|
>Role</label
|
|
>
|
|
<select
|
|
id="role"
|
|
name="role"
|
|
required
|
|
class="w-full px-4 py-2 bg-slate-800 border border-slate-700 rounded-lg text-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
>
|
|
<option value="viewer">Viewer - Read-only access</option>
|
|
<option value="operator">Operator - Can control clients</option>
|
|
<option value="admin">Admin - Full access</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div
|
|
id="error-message"
|
|
class="hidden p-3 bg-red-900/20 border border-red-800 rounded-lg text-red-400 text-sm"
|
|
>
|
|
<i class="fa-solid fa-exclamation-triangle mr-2"></i>
|
|
<span id="error-text"></span>
|
|
</div>
|
|
|
|
<div class="flex gap-3 pt-2">
|
|
<button
|
|
type="button"
|
|
id="cancel-btn"
|
|
class="flex-1 px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-200 rounded-lg border border-slate-700 transition-colors font-medium"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
class="flex-1 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors font-medium"
|
|
>
|
|
<i class="fa-solid fa-check mr-2"></i>Save
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/assets/nav.js"></script>
|
|
<script type="module" src="/assets/users.js"></script>
|
|
</body>
|
|
</html>
|