inital commit
This commit is contained in:
KingKDot
@@ -0,0 +1,199 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user