441 lines
12 KiB
Plaintext
441 lines
12 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 -->
|
|
<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;
|
|
}
|
|
|
|
.main {
|
|
flex: 1;
|
|
padding: 24px;
|
|
overflow: auto;
|
|
}
|
|
|
|
/* ✅ Header */
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background: #111827;
|
|
color: #fff;
|
|
border-radius: 12px;
|
|
padding: 14px 16px;
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.page-header .title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.page-header .title i {
|
|
font-size: 20px;
|
|
}
|
|
|
|
/* ✅ Tabelle optisch besser */
|
|
.table thead th {
|
|
background: #111827 !important;
|
|
color: #fff !important;
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.table td {
|
|
vertical-align: middle;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* ✅ Inline edit Inputs */
|
|
input.form-control {
|
|
box-shadow: none !important;
|
|
font-size: 13px;
|
|
}
|
|
|
|
input.form-control:disabled {
|
|
background-color: transparent !important;
|
|
border: none !important;
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
color: #111827 !important;
|
|
}
|
|
|
|
select.form-select {
|
|
font-size: 13px;
|
|
}
|
|
|
|
select.form-select:disabled {
|
|
background-color: transparent !important;
|
|
border: none !important;
|
|
padding-left: 0 !important;
|
|
padding-right: 0 !important;
|
|
color: #111827 !important;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
}
|
|
|
|
/* ✅ Inaktive User rot */
|
|
tr.table-secondary > td {
|
|
background-color: #f8d7da !important;
|
|
}
|
|
|
|
/* ✅ Icon Buttons */
|
|
.icon-btn {
|
|
width: 34px;
|
|
height: 34px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 8px;
|
|
padding: 0;
|
|
}
|
|
|
|
.badge-soft {
|
|
font-size: 12px;
|
|
padding: 6px 10px;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
/* ✅ Tabelle soll sich an Inhalt anpassen */
|
|
.table-auto {
|
|
table-layout: auto !important;
|
|
width: auto !important;
|
|
}
|
|
|
|
.table-auto th,
|
|
.table-auto td {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ✅ Inputs sollen nicht zu klein werden */
|
|
.table-auto td input,
|
|
.table-auto td select {
|
|
min-width: 110px;
|
|
}
|
|
|
|
/* Username darf umbrechen wenn extrem lang */
|
|
.table-auto td:nth-child(5) {
|
|
white-space: normal;
|
|
}
|
|
|
|
/* ✅ Wrapper: sorgt dafür dass Suche & Tabelle exakt gleich breit sind */
|
|
.table-wrapper {
|
|
width: fit-content;
|
|
max-width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.toolbar {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.searchbar {
|
|
flex: 1;
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
min-width: 320px;
|
|
}
|
|
|
|
.searchbar input {
|
|
flex: 1;
|
|
}
|
|
.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;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="layout">
|
|
|
|
<!-- ✅ ADMIN SIDEBAR -->
|
|
<%- include("partials/admin-sidebar", { active: "users" }) %>
|
|
|
|
<div class="main">
|
|
|
|
<!-- ✅ TOP HEADER -->
|
|
<div class="page-header">
|
|
<div class="title">
|
|
<i class="bi bi-shield-lock"></i>
|
|
User Verwaltung
|
|
</div>
|
|
|
|
<div>
|
|
<a href="/dashboard" class="btn btn-outline-light btn-sm">
|
|
⬅️ Dashboard
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container-fluid p-0">
|
|
<%- include("partials/flash") %>
|
|
|
|
<div class="card shadow border-0 rounded-3">
|
|
<div class="card-body">
|
|
|
|
<h4 class="mb-3">Benutzerübersicht</h4>
|
|
|
|
<!-- ✅ Suche + Tabelle zusammen breit -->
|
|
<div class="table-wrapper">
|
|
|
|
<!-- ✅ Toolbar: Suche links, Button rechts -->
|
|
<div class="toolbar">
|
|
<form method="GET" action="/admin/users" class="searchbar">
|
|
<input
|
|
type="text"
|
|
name="q"
|
|
class="form-control"
|
|
placeholder="🔍 Benutzer suchen (Name oder Username)"
|
|
value="<%= query?.q || '' %>"
|
|
>
|
|
<button class="btn btn-outline-primary">
|
|
<i class="bi bi-search"></i>
|
|
Suchen
|
|
</button>
|
|
|
|
<% if (query?.q) { %>
|
|
<a href="/admin/users" class="btn btn-outline-secondary">
|
|
Reset
|
|
</a>
|
|
<% } %>
|
|
</form>
|
|
|
|
<div class="actions">
|
|
<a href="/admin/create-user" class="btn btn-primary">
|
|
<i class="bi bi-plus-circle"></i>
|
|
Neuer Benutzer
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ✅ Tabelle -->
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-hover table-sm align-middle mb-0 table-auto">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 60px;">ID</th>
|
|
<th>Titel</th>
|
|
<th>Vorname</th>
|
|
<th>Nachname</th>
|
|
<th>Username</th>
|
|
<th style="width: 180px;">Rolle</th>
|
|
<th style="width: 110px;" class="text-center">Status</th>
|
|
<th style="width: 200px;">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 class="fw-semibold"><%= 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 badge-soft">Inaktiv</span>
|
|
<% } else if (u.lock_until && new Date(u.lock_until) > new Date()) { %>
|
|
<span class="badge bg-danger badge-soft">Gesperrt</span>
|
|
<% } else { %>
|
|
<span class="badge bg-success badge-soft">Aktiv</span>
|
|
<% } %>
|
|
</td>
|
|
|
|
<td class="d-flex gap-2 align-items-center">
|
|
|
|
<!-- ✅ Save -->
|
|
<button
|
|
class="btn btn-outline-success icon-btn save-btn"
|
|
disabled
|
|
title="Speichern"
|
|
>
|
|
<i class="bi bi-save"></i>
|
|
</button>
|
|
|
|
<!-- ✅ Unlock -->
|
|
<button
|
|
type="button"
|
|
class="btn btn-outline-warning icon-btn lock-btn"
|
|
title="Bearbeiten aktivieren"
|
|
>
|
|
<i class="bi bi-pencil-square"></i>
|
|
</button>
|
|
|
|
</form>
|
|
|
|
<!-- ✅ Aktiv / Deaktiv -->
|
|
<% if (u.id !== currentUser.id) { %>
|
|
<form method="POST" action="/admin/users/<%= u.active ? "deactivate" : "activate" %>/<%= u.id %>">
|
|
<button
|
|
class="btn icon-btn <%= u.active ? "btn-outline-danger" : "btn-outline-success" %>"
|
|
title="<%= u.active ? "Deaktivieren" : "Aktivieren" %>"
|
|
>
|
|
<i class="bi <%= u.active ? "bi-person-x" : "bi-person-check" %>"></i>
|
|
</button>
|
|
</form>
|
|
<% } else { %>
|
|
<span class="badge bg-light text-dark border">
|
|
👤 Du selbst
|
|
</span>
|
|
<% } %>
|
|
|
|
</td>
|
|
</tr>
|
|
|
|
<% }) %>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
</div><!-- /table-wrapper -->
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|