302 lines
8.4 KiB
Plaintext
302 lines
8.4 KiB
Plaintext
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>User Verwaltung</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
||
<link rel="stylesheet" href="/css/bootstrap.min.css">
|
||
<link rel="stylesheet" href="/css/style.css">
|
||
<link rel="stylesheet" href="/bootstrap-icons/bootstrap-icons.min.css">
|
||
<script src="/js/bootstrap.bundle.min.js"></script>
|
||
|
||
<!-- ✅ Inline Edit wie bei medications -->
|
||
<script src="/js/services-lock.js"></script>
|
||
|
||
<style>
|
||
body {
|
||
margin: 0;
|
||
background: #f4f6f9;
|
||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu;
|
||
}
|
||
|
||
.layout {
|
||
display: flex;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* Sidebar (gleiches Design wie dein Dashboard) */
|
||
.sidebar {
|
||
width: 240px;
|
||
background: #111827;
|
||
color: white;
|
||
padding: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.logo {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
margin-bottom: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.nav-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 12px 15px;
|
||
border-radius: 8px;
|
||
color: #cbd5e1;
|
||
text-decoration: none;
|
||
margin-bottom: 6px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.nav-item:hover {
|
||
background: #1f2937;
|
||
color: white;
|
||
}
|
||
|
||
.nav-item.active {
|
||
background: #2563eb;
|
||
color: white;
|
||
}
|
||
|
||
.sidebar .spacer {
|
||
flex: 1;
|
||
}
|
||
|
||
.nav-item.locked {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
.nav-item.locked:hover {
|
||
background: transparent;
|
||
color: #cbd5e1;
|
||
}
|
||
|
||
/* Main Content */
|
||
.main {
|
||
flex: 1;
|
||
padding: 24px;
|
||
overflow: auto;
|
||
}
|
||
|
||
/* Original Styles */
|
||
input.form-control { box-shadow: none !important; }
|
||
|
||
input.form-control:disabled {
|
||
background-color: #fff !important;
|
||
color: #212529 !important;
|
||
opacity: 1 !important;
|
||
border: none !important;
|
||
box-shadow: none !important;
|
||
outline: none !important;
|
||
}
|
||
|
||
input.form-control:disabled:focus {
|
||
box-shadow: none !important;
|
||
outline: none !important;
|
||
}
|
||
|
||
/* Inaktive User ROT */
|
||
tr.table-secondary > td {
|
||
background-color: #f8d7da !important;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div class="layout">
|
||
|
||
<!-- ✅ ADMIN SIDEBAR -->
|
||
<%- include("partials/admin-sidebar", { active: "users" }) %>
|
||
|
||
<!-- ✅ MAIN -->
|
||
<div class="main">
|
||
|
||
<nav class="navbar navbar-dark bg-dark position-relative px-3 rounded mb-4">
|
||
<div class="position-absolute top-50 start-50 translate-middle d-flex align-items-center gap-2 text-white">
|
||
<i class="bi bi-shield-lock fs-4"></i>
|
||
<span class="fw-semibold fs-5">User Verwaltung</span>
|
||
</div>
|
||
|
||
<div class="ms-auto">
|
||
<a href="/dashboard" class="btn btn-outline-light btn-sm">⬅️ Dashboard</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<div class="container-fluid">
|
||
<%- include("partials/flash") %>
|
||
|
||
<div class="card shadow">
|
||
<div class="card-body">
|
||
|
||
<h4 class="mb-3">Benutzerübersicht</h4>
|
||
|
||
<!-- ➕ Neu -->
|
||
<div class="mb-3 text-end">
|
||
<a href="/admin/create-user" class="btn btn-primary">
|
||
+ Neuen Benutzer anlegen
|
||
</a>
|
||
</div>
|
||
|
||
<!-- 🔍 Suche -->
|
||
<form method="GET" action="/admin/users" class="d-flex gap-2 mb-3">
|
||
<input
|
||
type="text"
|
||
name="q"
|
||
class="form-control"
|
||
placeholder="🔍 Benutzer suchen (Name oder Username)"
|
||
value="<%= query?.q || '' %>"
|
||
>
|
||
<button class="btn btn-outline-primary">Suchen</button>
|
||
|
||
<% if (query?.q) { %>
|
||
<a href="/admin/users" class="btn btn-outline-secondary">Reset</a>
|
||
<% } %>
|
||
</form>
|
||
|
||
<div class="table-responsive">
|
||
<table class="table table-bordered table-hover table-sm align-middle">
|
||
|
||
<thead class="table-dark">
|
||
<tr>
|
||
<th>ID</th>
|
||
<th>Titel</th>
|
||
<th>Vorname</th>
|
||
<th>Nachname</th>
|
||
<th>Username</th>
|
||
<th>Rolle</th>
|
||
<th>Status</th>
|
||
<th style="width: 260px;">Aktionen</th>
|
||
</tr>
|
||
</thead>
|
||
|
||
<tbody>
|
||
<% users.forEach(u => { %>
|
||
|
||
<tr class="<%= u.active ? '' : 'table-secondary' %>">
|
||
|
||
<!-- ✅ UPDATE-FORM -->
|
||
<form method="POST" action="/admin/users/update/<%= u.id %>">
|
||
|
||
<td><%= u.id %></td>
|
||
|
||
<td>
|
||
<input
|
||
type="text"
|
||
name="title"
|
||
value="<%= u.title || '' %>"
|
||
class="form-control form-control-sm"
|
||
disabled
|
||
>
|
||
</td>
|
||
|
||
<td>
|
||
<input
|
||
type="text"
|
||
name="first_name"
|
||
value="<%= u.first_name %>"
|
||
class="form-control form-control-sm"
|
||
disabled
|
||
>
|
||
</td>
|
||
|
||
<td>
|
||
<input
|
||
type="text"
|
||
name="last_name"
|
||
value="<%= u.last_name %>"
|
||
class="form-control form-control-sm"
|
||
disabled
|
||
>
|
||
</td>
|
||
|
||
<td>
|
||
<input
|
||
type="text"
|
||
name="username"
|
||
value="<%= u.username %>"
|
||
class="form-control form-control-sm"
|
||
disabled
|
||
>
|
||
</td>
|
||
|
||
<td>
|
||
<select
|
||
name="role"
|
||
class="form-select form-select-sm"
|
||
disabled
|
||
>
|
||
<option value="mitarbeiter" <%= u.role === "mitarbeiter" ? "selected" : "" %>>
|
||
Mitarbeiter
|
||
</option>
|
||
<option value="arzt" <%= u.role === "arzt" ? "selected" : "" %>>
|
||
Arzt
|
||
</option>
|
||
<option value="admin" <%= u.role === "admin" ? "selected" : "" %>>
|
||
Admin
|
||
</option>
|
||
</select>
|
||
</td>
|
||
|
||
<td class="text-center">
|
||
<% if (u.active === 0) { %>
|
||
<span class="badge bg-secondary">Inaktiv</span>
|
||
<% } else if (u.lock_until && new Date(u.lock_until) > new Date()) { %>
|
||
<span class="badge bg-danger">Gesperrt</span>
|
||
<% } else { %>
|
||
<span class="badge bg-success">Aktiv</span>
|
||
<% } %>
|
||
</td>
|
||
|
||
<td class="d-flex gap-2">
|
||
|
||
<button class="btn btn-sm btn-outline-success save-btn" disabled>
|
||
💾
|
||
</button>
|
||
|
||
<button type="button" class="btn btn-sm btn-outline-warning lock-btn">
|
||
🔓
|
||
</button>
|
||
|
||
</form>
|
||
|
||
<!-- ✅ Aktiv / Deaktiv separat -->
|
||
<% if (u.id !== currentUser.id) { %>
|
||
<form method="POST" action="/admin/users/<%= u.active ? "deactivate" : "activate" %>/<%= u.id %>">
|
||
<button class="btn btn-sm <%= u.active ? "btn-outline-danger" : "btn-outline-success" %>">
|
||
<%= u.active ? "⛔" : "✅" %>
|
||
</button>
|
||
</form>
|
||
<% } else { %>
|
||
<span class="text-muted fst-italic small align-self-center">
|
||
Du selbst
|
||
</span>
|
||
<% } %>
|
||
|
||
</td>
|
||
</tr>
|
||
|
||
<% }) %>
|
||
</tbody>
|
||
|
||
</table>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</body>
|
||
</html>
|