From 498c7e28e04e84fbfb868be9351dbe1e3ce5b54c Mon Sep 17 00:00:00 2001 From: Friederich Loheide Date: Tue, 22 Sep 2026 20:33:52 +0000 Subject: [PATCH 1/2] =?UTF-8?q?Redesign:=20gemeinsames=20Design-System=20f?= =?UTF-8?q?=C3=BCr=20Frontend=20und=20Backend?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Frontend, Login/Installer/Updater und der komplette Admin-Bereich nutzen jetzt ein einziges Stylesheet (assets/global.css) statt pro Seite dupliziertem Inline-CSS. Design-System - Tokens für Flächen, Text, Linien, Marke, Status, Radien, Schatten und Layout-Maße; Dark Mode ausschließlich über Tokens (keine !important- Overrides mehr) - Komponenten: Buttons, Formularfelder, Cards, Tabellen, Badges, Alerts, Tabs, Pagination, Modals, Toasts, Statistik-Kacheln, Empty States - Schrift Inter mit System-Fallback Oberfläche - Admin-Shell neu: durchgehende Sidebar mit Marke, gruppierter Navigation und Benutzerbereich; schlanke Topbar mit Breadcrumb - Dashboard: ruhige KPI-Kacheln mit Icon-Chips, Charts an Theme-Farben gekoppelt - Öffentliche Voucher-Seite: App-Topbar, klare Formularstruktur und Ticket-Darstellung des erstellten Codes inkl. QR-Code - Login/Passwort/2FA: zweispaltiges Auth-Layout bzw. Fokus-Karten - Updater und Wartungsmodus im gleichen Look (Wartungsseite bleibt bewusst eigenständig ohne externe Abhängigkeiten) - Emoji-Icons in der UI durch Font-Awesome-Icons ersetzt Nebenbei behoben - Falscher SRI-Hash blockierte qrcode.min.js – QR-Codes wurden auf der Voucher-Seite und bei der 2FA-Einrichtung nie gerendert - assets/global.css wurde in mehreren Admin-Seiten über einen falschen Pfad eingebunden ($adminBase = '' statt '../') - TinyMCE lädt ohne API-Key jetzt die GPL-Variante von cdnjs – kein "valid API key required"-Banner mehr im Einstellungs-Editor - Tabellen in Cards scrollen horizontal statt zu überlaufen Screenshots in docs/screenshots neu erstellt, README aktualisiert (neuer Abschnitt "Design-System", Version 2.5.0). Co-Authored-By: Claude Opus 5 --- Readme.md | 66 +- admin/api_keys.php | 36 +- admin/audit_log.php | 72 +- admin/backup.php | 24 +- admin/import.php | 24 +- admin/index.php | 146 +- admin/integrations.php | 28 +- admin/reports.php | 48 +- admin/security.php | 70 +- admin/settings.php | 68 +- admin/sites.php | 48 +- admin/templates.php | 48 +- admin/users.php | 52 +- admin/vouchers.php | 82 +- assets/global.css | 1875 ++++++++++++++++----- assets/global.js | 11 +- docs/screenshots/admin-dashboard-dark.png | Bin 224919 -> 386260 bytes docs/screenshots/admin-dashboard.png | Bin 220948 -> 386260 bytes docs/screenshots/api-keys.png | Bin 288144 -> 323098 bytes docs/screenshots/bulk-vouchers.png | Bin 1183151 -> 319584 bytes docs/screenshots/integrations.png | Bin 239712 -> 313406 bytes docs/screenshots/login.png | Bin 1252928 -> 1470019 bytes docs/screenshots/maintenance.png | Bin 1239640 -> 249376 bytes docs/screenshots/settings.png | Bin 0 -> 266276 bytes docs/screenshots/two-factor.png | Bin 1140368 -> 286669 bytes docs/screenshots/updater-available.png | Bin 1048494 -> 293432 bytes docs/screenshots/updater.png | Bin 1119928 -> 234636 bytes docs/screenshots/voucher-form.png | Bin 995529 -> 308931 bytes docs/screenshots/voucher-result.png | Bin 1320283 -> 768407 bytes docs/screenshots/vouchers.png | Bin 0 -> 420625 bytes forgot_password.php | 31 +- includes/admin_nav.php | 190 +-- index.php | 195 +-- install.php | 183 +- lang/de.php | 17 +- lang/en.php | 17 +- login.php | 99 +- login_simple.php | 170 +- m365_debug.php | 55 +- reset_password.php | 35 +- test.php | 16 +- updater/templates/maintenance.html | 78 +- updater/templates/update.php | 121 +- 43 files changed, 2165 insertions(+), 1740 deletions(-) create mode 100644 docs/screenshots/settings.png create mode 100644 docs/screenshots/vouchers.png diff --git a/Readme.md b/Readme.md index 7019def..ba33425 100644 --- a/Readme.md +++ b/Readme.md @@ -8,7 +8,7 @@ ![MySQL](https://img.shields.io/badge/MySQL-5.7%2B%20%2F%20MariaDB-4479A1?logo=mysql&logoColor=white) ![UniFi OS](https://img.shields.io/badge/UniFi%20OS-7.0%2B-0559C9?logo=ubiquiti&logoColor=white) ![License](https://img.shields.io/badge/Lizenz-MIT-green) -![Version](https://img.shields.io/badge/Version-2.4.0-blueviolet) +![Version](https://img.shields.io/badge/Version-2.5.0-blueviolet) ![CI](https://github.com/friloo/unifi-voucher-tool/actions/workflows/ci.yml/badge.svg) @@ -45,6 +45,7 @@ - 💾 **Config-Backup & -Restore** (JSON Export/Import) - 🐳 **Docker** – Dockerfile + docker-compose (MariaDB) - 🌍 **Öffentlicher Modus** – optional ohne Login nutzbar (mit CSRF-Schutz & Throttle) +- 🎨 **Einheitliches Design-System** – ein Stylesheet für Frontend, Login und Backend (Tokens, Komponenten, Light/Dark) - 🌗 **Dark Mode** – umschaltbar, Einstellung wird im Browser gespeichert - 🌐 **Mehrsprachig** – Deutsch / Englisch per Umschalter (`lang/`) - 📱 **Responsive Admin-Layout** mit Hamburger-Menü & Sidebar-Overlay @@ -59,31 +60,30 @@ ## 📸 Screenshots +> Alle Screenshots stammen aus der Oberfläche in Version 2.5.0 (neues Design-System). + ### Anmeldung & Voucher-Erstellung
- Login mit Microsoft 365 - Voucher erstellen - Voucher-Ergebnis + Anmeldung + Voucher erstellen
-### Bulk-Erstellung & Dark Mode -
+ Voucher-Ergebnis mit QR-Code Bulk-Voucher-Erstellung - Dashboard im Dark Mode
-### Administration & Updater +### Administration
Dashboard - Auto-Updater + Dashboard im Dark Mode
- Updater – Ausgangszustand - Wartungsmodus + Live-Voucher-Verwaltung + Einstellungen
### REST-API, 2FA & Integrationen @@ -97,6 +97,17 @@ Zwei-Faktor-Authentifizierung +### Updater & Wartungsmodus + +
+ Updater – Ausgangszustand + Auto-Updater mit verfügbarem Update +
+ +
+ Wartungsmodus +
+ --- ## 📋 Anforderungen @@ -220,6 +231,36 @@ Den Token finden Sie unter **Administration → Einstellungen → Cron**. --- +## 🎨 Design-System + +Frontend, Login-Seiten, Installer, Updater und der gesamte Admin-Bereich nutzen ein +gemeinsames Stylesheet: **`assets/global.css`**. + +- **Design-Tokens** (`:root` bzw. `[data-theme="dark"]`) für Flächen, Text, Linien, + Markenfarbe, Statusfarben, Radien, Schatten und Layout-Maße +- **Komponenten** darauf aufgebaut: Buttons, Formularfelder, Cards, Tabellen, Badges, + Alerts, Tabs, Pagination, Modals, Toasts, Statistik-Kacheln, Sidebar/Topbar +- **Dark Mode** ausschließlich über Tokens – keine `!important`-Overrides mehr +- **Schriftart** Inter (via Google Fonts) mit System-Font-Fallback + +Eigenes Branding lässt sich meist mit wenigen Zeilen umsetzen – z. B. in einer +eigenen CSS-Datei oder direkt in `assets/global.css`: + +```css +:root { + --accent: #0f766e; /* Primärfarbe (Buttons, aktive Navigation) */ + --accent-hover: #0d5f59; + --accent-soft: #e6f4f2; /* Flächen für aktive Zustände */ + --brand-gradient: linear-gradient(135deg, #0f766e 0%, #0ea5e9 100%); + --r-lg: 14px; /* Eckenradius für Cards */ +} +``` + +Logo und Favicon werden nicht über CSS, sondern unter +**Administration → Einstellungen → Allgemein** gesetzt. + +--- + ## 🛡️ Sicherheit Das Tool ist auf einen sicheren Standardbetrieb ausgelegt: @@ -378,11 +419,12 @@ setzen (`DB_*`, `APP_KEY`). - [x] Docker-Container - [x] Erweiterte Reporting-Funktionen (CSV/PDF) + Health-Endpoint - [x] 2FA-Recovery-Codes, API-Scopes/Rate-Limit/OpenAPI, Test-Suite (PHPUnit/PHPStan) +- [x] Gemeinsames Design-System für Frontend, Login und Backend ---
-**Version 2.4.0** · Autor: **Friederich Loheide** · Lizenz: **MIT** +**Version 2.5.0** · Autor: **Friederich Loheide** · Lizenz: **MIT**
diff --git a/admin/api_keys.php b/admin/api_keys.php index a2bbbfb..4817b71 100644 --- a/admin/api_keys.php +++ b/admin/api_keys.php @@ -68,28 +68,12 @@ $adminBase = ''; API-Schlüssel – <?= htmlspecialchars($appTitle) ?> - - - -

🔑 API-Schlüssel

+
@@ -130,6 +114,7 @@ code { font-family:monospace; background:var(--bg-hover); padding:2px 6px; borde

Noch keine API-Schlüssel angelegt.

+
@@ -139,15 +124,16 @@ code { font-family:monospace; background:var(--bg-hover); padding:2px 6px; borde - +
NamePräfixScopeLimitStatusZuletzt genutztErstellt von
- Löschen + Löschen
+
@@ -165,7 +151,7 @@ curl https://IHRE-DOMAIN/api/sites.php -H "X-API-Key: uvt_…"

OpenAPI-Spezifikation (Import in Postman/Swagger): /api/openapi.php

- + diff --git a/admin/audit_log.php b/admin/audit_log.php index 0af636a..edde07b 100644 --- a/admin/audit_log.php +++ b/admin/audit_log.php @@ -46,21 +46,21 @@ $currentPage = 'audit_log'; $adminBase = ''; $actionLabels = [ - 'voucher_created' => '🎫 Voucher erstellt', - 'voucher_bulk' => '🎫 Bulk Voucher', - 'user_login' => '🔐 Login', - 'user_logout' => '🚪 Logout', - 'user_created' => '👤 Benutzer erstellt', - 'user_updated' => '👤 Benutzer geändert', - 'user_deleted' => '👤 Benutzer gelöscht', - 'site_added' => '🌐 Site hinzugefügt', - 'site_updated' => '🌐 Site geändert', - 'site_deleted' => '🌐 Site gelöscht', - 'settings_saved' => '⚙️ Einstellungen gespeichert', - 'password_reset' => '🔑 Passwort-Reset', - 'template_created' => '📋 Profil erstellt', - 'template_updated' => '📋 Profil geändert', - 'template_deleted' => '📋 Profil gelöscht', + 'voucher_created' => 'Voucher erstellt', + 'voucher_bulk' => 'Bulk Voucher', + 'user_login' => 'Login', + 'user_logout' => 'Logout', + 'user_created' => 'Benutzer erstellt', + 'user_updated' => 'Benutzer geändert', + 'user_deleted' => 'Benutzer gelöscht', + 'site_added' => 'Site hinzugefügt', + 'site_updated' => 'Site geändert', + 'site_deleted' => 'Site gelöscht', + 'settings_saved' => 'Einstellungen gespeichert', + 'password_reset' => 'Passwort-Reset', + 'template_created' => 'Profil erstellt', + 'template_updated' => 'Profil geändert', + 'template_deleted' => 'Profil gelöscht', ]; ?> @@ -70,42 +70,12 @@ $actionLabels = [ <?= __('audit_title') ?> - <?= htmlspecialchars($appTitle) ?> - - @@ -151,6 +121,7 @@ $actionLabels = [

+
@@ -197,6 +168,7 @@ $actionLabels = [
+
1): ?> @@ -221,7 +193,7 @@ $actionLabels = [ - + diff --git a/admin/backup.php b/admin/backup.php index 0faf942..b8afeee 100644 --- a/admin/backup.php +++ b/admin/backup.php @@ -114,22 +114,12 @@ $adminBase = ''; Backup & Restore – <?= htmlspecialchars($appTitle) ?> - - - -

💾 Backup & Restore

+
@@ -153,7 +143,7 @@ input[type=file] { margin:10px 0; color:var(--text-primary); } - + diff --git a/admin/import.php b/admin/import.php index dfb9725..d938ac5 100644 --- a/admin/import.php +++ b/admin/import.php @@ -93,22 +93,12 @@ $adminBase = ''; CSV-Import – <?= htmlspecialchars($appTitle) ?> - - - -

📥 Voucher-Import (CSV)

+
@@ -142,7 +132,7 @@ code { font-family:monospace; background:var(--bg-hover); padding:2px 6px; borde - + diff --git a/admin/index.php b/admin/index.php index e432205..a7fa9a0 100644 --- a/admin/index.php +++ b/admin/index.php @@ -92,74 +92,6 @@ $currentPage = 'dashboard'; <?= __('dashboard_title') ?> – <?= htmlspecialchars($appTitle) ?> -