MrDiderot/Photography
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve folder access admin dashboard
All checks were successful
Build & Push Docker Image to Gitea Registry / build-and-push (push) Successful in 20s
Details

Browse Source
This commit is contained in:
Kroonk
2026-05-20 18:44:47 +02:00
parent c211d2bf9d
commit e6a11f2eed
8 changed files with 556 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
admin.html
View File

@@ -6,18 +6,29 @@
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/assets/css/main.min.css" />
<style>
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25em; align-items: start; }
.admin-section { background: rgba(0,0,0,0.5); padding: 1.5em; border-radius: 4px; min-width: 0; }
.admin-section h2 { margin-top: 0; }
body { background: #111418; }
.dashboard-shell { display:block; padding: 1.25em; max-width: 1320px; margin: 0 auto; width: 100%; }
.admin-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 1em; align-items: start; }
.admin-section { background: rgba(20,23,27,0.92); border: 1px solid rgba(255,255,255,0.08); padding: 1em; border-radius: 8px; min-width: 0; box-shadow: 0 12px 30px rgba(0,0,0,0.18); }
.admin-section h2 { margin: 0 0 .75em 0; font-size: .95em; letter-spacing: .08em; text-transform: uppercase; color: #fff; }
.admin-section p { margin: 0 0 .75em 0; color: rgba(255,255,255,.62); font-size: .9em; }
.admin-section.wide { grid-column: 1 / -1; }
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; }
.toolbar-row, .compact-form { display:flex; gap:.55em; flex-wrap:wrap; align-items:flex-end; }
.compact-form .field-inline { min-width: 150px; flex: 1 1 150px; }
.compact-form label { display:block; margin: 0 0 .25em 0; font-size:.72em; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.55); }
.compact-form input, .compact-form select { height: 2.45em; }
table { width: 100%; border-collapse: collapse; font-size: .9em; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.09); vertical-align: middle; }
th { color: rgba(255,255,255,.58); font-size: .72em; text-transform: uppercase; letter-spacing: .08em; font-weight: 400; }
.badge { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 0.76em; line-height: 1.6; }
.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-badge { background: rgba(52,165,142,.16); color:#8ee6d2; margin: 2px 3px 2px 0; border: 1px solid rgba(52,165,142,.28); }
.muted { color: rgba(255,255,255,.48); }
.btn-small { padding: 3px 9px; font-size: 0.78em; margin: 2px; cursor: pointer; height: auto; line-height: 1.6; border-radius: 5px; }
.btn-danger { border-color: rgba(228,77,38,.55) !important; color: #ffad9c !important; }
.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); }
@@ -26,9 +37,25 @@
.folder-status.yes { color: #4CAF50; }
.folder-status.no { color: #888; }
#folder-table-wrap { display: none; margin-top: 1em; }
.folder-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:.75em; }
.folder-card { border: 1px solid rgba(255,255,255,.09); border-radius: 8px; padding:.85em; background: rgba(255,255,255,.035); }
.folder-card h3 { margin:0 0 .35em 0; font-size:1em; color:#fff; }
.folder-meta { display:flex; gap:.45em; flex-wrap:wrap; margin:.5em 0; }
.folder-pill { border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:.15em .55em; font-size:.78em; color:rgba(255,255,255,.68); }
.folder-actions { margin-top:.65em; display:flex; gap:.35em; flex-wrap:wrap; }
.access-list { display:grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap:.35em .7em; margin-top:.75em; }
.access-item { display:flex; align-items:center; gap:.45em; padding:.45em .55em; border:1px solid rgba(255,255,255,.08); border-radius:6px; background:rgba(255,255,255,.025); cursor:pointer; }
.access-item input { width:auto; margin:0; }
.preview-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap:.55em; margin-top:.75em; max-height: 360px; overflow:auto; padding-right:.25em; }
.preview-grid a { border:0; display:block; border-radius:6px; overflow:hidden; background:#0b0d10; aspect-ratio: 1 / 1; }
.preview-grid img { width:100%; height:100%; object-fit:cover; display:block; }
#folder-preview-title { margin-top:0; }
#assign-status, #sync-status { font-size:.85em; color:#8ee6d2; }
@media screen and (max-width: 900px) {
.admin-grid { grid-template-columns: 1fr; }
.admin-section { padding: 1.25em; }
.admin-section { padding: .9em; }
.dashboard-shell { padding: .75em; }
table { font-size:.82em; }
}
</style>
</head>
@@ -41,22 +68,22 @@
</ul></nav>
</header>
<div id="main" style="display:block; padding: 2em; max-width: 1180px; margin: 0 auto; width: 100%;">
<div id="main" class="dashboard-shell">
<div class="admin-grid">
<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/>
<form id="create-user-form" class="compact-form">
<div class="field-inline">
<label>Username</label>
<input type="text" id="new-username" placeholder="Nutzername" required />
</div>
<div>
<label>Passwort</label><br/>
<div class="field-inline">
<label>Passwort</label>
<input type="password" id="new-password" placeholder="Passwort" required />
</div>
<div>
<label>Rolle</label><br/>
<div class="field-inline">
<label>Rolle</label>
<select id="new-role">
<option value="client">Client (30 Tage)</option>
<option value="user">User (permanent)</option>
@@ -71,47 +98,54 @@
<div class="admin-section">
<h2>Website aktualisieren</h2>
<p>Laedt das neueste Docker-Image und startet den Website-Container neu.</p>
<button id="sync-site">Sync starten</button>
<p>Laedt das neueste Registry-Image und startet den Container neu.</p>
<button id="sync-site" class="btn-small">Sync starten</button>
<span id="sync-status" style="margin-left:10px;"></span>
</div>
<div class="admin-section wide">
<h2>Nutzerverwaltung</h2>
<h2>Nutzer, Rollen und Ordnerzugriffe</h2>
<table>
<thead><tr><th>ID</th><th>Username</th><th>Rolle</th><th>Erstellt</th><th>Aktionen</th></tr></thead>
<thead><tr><th>ID</th><th>Username</th><th>Rolle</th><th>Status</th><th>Ordnerzugriff</th><th>Aktionen</th></tr></thead>
<tbody id="users-tbody"></tbody>
</table>
</div>
<div class="admin-section wide">
<h2>Ordner im Bilderpfad</h2>
<p>Unterordner sind privat. Nur explizit freigegebene Nutzer sehen sie nach dem Login.</p>
<div id="folders-overview" class="folder-grid"></div>
</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>
<p>Nutzer waehlen, Ordner anhaken, fertig.</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>
<div id="folder-access-list" class="access-list"></div>
<span id="assign-status" style="display:inline-block; margin-top:10px;"></span>
</div>
</div>
<div class="admin-section">
<h2 id="folder-preview-title">Ordnerinhalt</h2>
<p id="folder-preview-note">Waehle in der Ordneruebersicht "Ansehen".</p>
<div id="folder-preview" class="preview-grid"></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/>
<form id="admin-pw-form" class="compact-form">
<div class="field-inline">
<label>Altes Passwort</label>
<input type="password" id="admin-pw-old" required />
</div>
<div>
<label>Neues Passwort</label><br/>
<div class="field-inline">
<label>Neues Passwort</label>
<input type="password" id="admin-pw-new" required />
</div>
<div>
<button type="submit">Aendern</button>
<button type="submit" class="btn-small">Aendern</button>
</div>
</form>
</div>
@@ -120,6 +154,6 @@
</div>
</div>
<script src="/assets/js/jquery.min.js"></script>
<script src="/assets/js/admin.js"></script>
<script src="/assets/js/admin.js?v=2"></script>
</body>
</html>