<!DOCTYPE html>
<html>
<head>
<title>Users - Auth Framework Admin</title>
<style>
body {
font-family: system-ui, sans-serif;
margin: 0;
padding: 0;
background: #f5f5f5;
color: #333;
}
nav {
background: #1a1a2e;
padding: 0.75rem 1.5rem;
display: flex;
gap: 1.5rem;
align-items: center;
}
nav a {
color: #e0e0e0;
text-decoration: none;
font-size: 0.9rem;
}
nav a:hover {
color: #fff;
}
nav .brand {
font-weight: bold;
font-size: 1.1rem;
color: #fff;
margin-right: 1rem;
}
nav .active {
color: #fff;
border-bottom: 2px solid #4fc3f7;
}
.container {
max-width: 960px;
margin: 1.5rem auto;
padding: 0 1rem;
}
.card {
background: #fff;
border-radius: 6px;
padding: 1.25rem;
margin-bottom: 1rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
h1 {
margin-top: 0;
}
h2 {
margin-top: 0;
font-size: 1.1rem;
}
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
text-align: left;
padding: 0.5rem;
border-bottom: 1px solid #eee;
font-size: 0.9rem;
}
th {
background: #fafafa;
font-size: 0.85rem;
color: #555;
text-transform: uppercase;
}
.badge {
display: inline-block;
padding: 0.1rem 0.5rem;
border-radius: 3px;
font-size: 0.8rem;
}
.badge-active {
background: #e8f5e9;
color: #2e7d32;
}
.badge-inactive {
background: #fce4ec;
color: #c62828;
}
.badge-role {
background: #e3f2fd;
color: #1565c0;
}
input[type="email"],
input[type="password"] {
padding: 0.4rem 0.5rem;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 0.9rem;
}
button {
padding: 0.4rem 0.8rem;
background: #1a1a2e;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
font-size: 0.85rem;
}
button:hover {
background: #16213e;
}
.btn-danger {
background: #c62828;
}
.btn-danger:hover {
background: #b71c1c;
}
label {
font-size: 0.9rem;
margin-right: 1rem;
}
.form-row {
display: flex;
gap: 0.5rem;
align-items: center;
flex-wrap: wrap;
}
</style>
</head>
<body>
<nav>
<span class="brand">AuthFramework</span>
<a href="/">Dashboard</a>
<a href="/config">Config</a>
<a href="/users" class="active">Users</a>
<a href="/security">Security</a>
<a href="/servers">Servers</a>
<a href="/logs">Logs</a>
<a href="/logout">Logout</a>
</nav>
<div class="container">
<h1>Users ({{ user_count }})</h1>
<div class="card">
<h2>Create User</h2>
<form method="post" action="/users/create?csrf_token={{ csrf_token }}">
<div class="form-row">
<input type="email" name="email" placeholder="Email" required>
<input type="password" name="password" placeholder="Password" required>
<label><input type="checkbox" name="admin" value="true"> Admin</label>
<button type="submit">Create</button>
</div>
</form>
</div>
<div class="card">
{% if users.is_empty() %}
<p>No users found.</p>
{% else %}
<table>
<thead>
<tr>
<th>Username</th>
<th>Email</th>
<th>Status</th>
<th>Roles</th>
<th>Created</th>
<th>Last Login</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{% for user in users %}
<tr>
<td>{{ user.username }}</td>
<td>{{ user.email }}</td>
<td>
{% if user.active %}
<span class="badge badge-active">Active</span>
{% else %}
<span class="badge badge-inactive">Inactive</span>
{% endif %}
</td>
<td>{% for role in user.roles %}<span class="badge badge-role">{{ role }}</span> {% endfor %}</td>
<td>{{ user.created }}</td>
<td>{% match user.last_login %}{% when Some with (dt) %}{{ dt }}{% when None %}—{% endmatch %}</td>
<td>
<form method="post" action="/users/delete?csrf_token={{ csrf_token }}" style="display:inline"
onsubmit="return confirm('Delete user {{ user.username }}?');">
<input type="hidden" name="user_id" value="{{ user.id }}">
<button type="submit" class="btn-danger">Delete</button>
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% endif %}
</div>
</div>
</body>
</html>