110 lines
4.9 KiB
HTML
110 lines
4.9 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<title>Admin Dashboard - Mischkomposition</title>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
|
|
<link rel="stylesheet" href="/assets/css/main.min.css" />
|
|
<style>
|
|
.admin-section { background: rgba(0,0,0,0.5); padding: 2em; margin-bottom: 2em; border-radius: 4px; }
|
|
table { width: 100%; border-collapse: collapse; }
|
|
th, td { text-align: left; padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.2); }
|
|
.badge { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 0.8em; }
|
|
.badge-admin { background: #e44d26; }
|
|
.badge-user { background: #2196F3; }
|
|
.badge-client { background: #4CAF50; }
|
|
.badge-expired { background: #666; }
|
|
.btn-small { padding: 4px 10px; font-size: 0.85em; margin: 2px; cursor: pointer; }
|
|
.folder-row { cursor: pointer; transition: background 0.2s; }
|
|
.folder-row:hover { background: rgba(255,255,255,0.1); }
|
|
.folder-row.assigned { background: rgba(76,175,80,0.25); }
|
|
.folder-row.assigned:hover { background: rgba(76,175,80,0.35); }
|
|
.folder-status { font-weight: bold; }
|
|
.folder-status.yes { color: #4CAF50; }
|
|
.folder-status.no { color: #888; }
|
|
#folder-table-wrap { display: none; margin-top: 1em; }
|
|
</style>
|
|
</head>
|
|
<body class="is-preload">
|
|
<div id="wrapper">
|
|
<header id="header">
|
|
<h1><a href="/index.html"><strong>Mischkomposition</strong> Admin</a></h1>
|
|
<nav><ul>
|
|
<li><a href="#" id="logout-btn">Logout <i class="fa fa-sign-out"></i></a></li>
|
|
</ul></nav>
|
|
</header>
|
|
|
|
<div id="main" style="display:block; padding: 2em; max-width: 1000px; margin: 0 auto; width: 100%;">
|
|
|
|
<div class="admin-section">
|
|
<h2>Nutzer erstellen</h2>
|
|
<form id="create-user-form" style="display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;">
|
|
<div>
|
|
<label>Username</label><br/>
|
|
<input type="text" id="new-username" placeholder="Nutzername" required />
|
|
</div>
|
|
<div>
|
|
<label>Passwort</label><br/>
|
|
<input type="password" id="new-password" placeholder="Passwort" required />
|
|
</div>
|
|
<div>
|
|
<label>Rolle</label><br/>
|
|
<select id="new-role">
|
|
<option value="client">Client (30 Tage)</option>
|
|
<option value="user">User (permanent)</option>
|
|
<option value="admin">Admin</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<button type="submit">Erstellen</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="admin-section">
|
|
<h2>Nutzerverwaltung</h2>
|
|
<table>
|
|
<thead><tr><th>ID</th><th>Username</th><th>Rolle</th><th>Erstellt</th><th>Aktionen</th></tr></thead>
|
|
<tbody id="users-tbody"></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="admin-section">
|
|
<h2>Ordner-Zuweisung</h2>
|
|
<p>Waehle einen Nutzer und klicke auf Ordner um sie zuzuweisen oder zu entfernen.</p>
|
|
<select id="user-select">
|
|
<option value="">Nutzer waehlen...</option>
|
|
</select>
|
|
<div id="folder-table-wrap">
|
|
<table id="folder-table">
|
|
<thead><tr><th><i class="fa fa-folder"></i> Ordner</th><th style="width:120px; text-align:center;">Status</th></tr></thead>
|
|
<tbody id="folder-tbody"></tbody>
|
|
</table>
|
|
<span id="assign-status" style="display:inline-block; margin-top:10px;"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="admin-section">
|
|
<h2>Eigenes Passwort aendern</h2>
|
|
<form id="admin-pw-form" style="display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;">
|
|
<div>
|
|
<label>Altes Passwort</label><br/>
|
|
<input type="password" id="admin-pw-old" required />
|
|
</div>
|
|
<div>
|
|
<label>Neues Passwort</label><br/>
|
|
<input type="password" id="admin-pw-new" required />
|
|
</div>
|
|
<div>
|
|
<button type="submit">Aendern</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<script src="/assets/js/jquery.min.js"></script>
|
|
<script src="/assets/js/admin.js"></script>
|
|
</body>
|
|
</html>
|