From 79a535feaea2e9f65ec7d79cf9945f62593b3a07 Mon Sep 17 00:00:00 2001 From: ISA Date: Mon, 28 Apr 2025 15:47:28 +0200 Subject: [PATCH] feat: Benutzerverwaltung als neuen Reiter in Einstellungen-Seite integriert --- README.md | 79 ++++++++++++++++ .../UserManagementSettings.tsx | 92 +++++++++++++++++++ config/webVersion.ts | 2 +- pages/einstellungen.tsx | 12 +++ 4 files changed, 184 insertions(+), 1 deletion(-) create mode 100644 components/main/settingsPageComponents/UserManagementSettings.tsx diff --git a/README.md b/README.md index 8c547c3..0d3f412 100644 --- a/README.md +++ b/README.md @@ -237,3 +237,82 @@ Angezeigt mit [Mermaid.js](https://mermaid-js.github.io/). ## 👋 Kontakt für Fragen Bei Fragen oder Problemen bitte an das CPLv4.0 Entwicklungsteam wenden. + +# 🔐 Benutzerverwaltung und Sicherheit + +## Backend TLS-Authentifizierung + +- **TLS-Authentifizierung** erfolgt über das Backend (Embedded-System, CPL). +- Wird genutzt für HTTPS-Verbindungen und verschlüsselte OPC UA-Kommunikation. +- TLS-Benutzername und Passwort werden **nicht** vom Frontend verwaltet. +- Diese Login-Daten dienen **nur der sicheren Netzwerkverbindung** (z.B. HTTPS, Zertifikate). + +## Frontend-Admin-Login (eigene Benutzerverwaltung) + +- Das **Frontend** besitzt eine eigene **Benutzerverwaltung** für erweiterte Funktionen. +- Beispiele für geschützte Funktionen: + - Firmware-Update der Kabelüberwachungsmodule + - Erweiterte Systemeinstellungen + +### Benutzerstruktur + +Benutzer werden definiert unter: + +```text +/components/main/settingsPageComponents/config/users.ts +``` + +Beispiel für die Benutzerstruktur: + +```ts +const USERS = { + AdminUser: { + username: "admin", + password: "$2a$10$xpq/.tcOJN/LXfzdCcCVrenlBh2nRlM1R1ISY7dd1q2qGWC9Fyd2G", // bcrypt Hash von "admin" + role: "Admin", + }, +}; + +export default USERS; +``` + +### Sicherheit + +- **Passwörter sind verschlüsselt** mit `bcryptjs`. +- Klartext-Passwörter werden **niemals** im Quellcode gespeichert. + +### Rollenbeschreibung + +| Benutzerrolle | Beschreibung | +| :------------------- | :-------------------------------------------------------------- | +| TLS-User (Backend) | Anmeldung für sichere HTTPS-Verbindung, keine Frontend-Funktion | +| AdminUser (Frontend) | Darf Firmware-Updates durchführen, Konfiguration ändern | + +### Anleitung für Entwickler: Passwort-Hash erzeugen + +Um ein neues Passwort zu erstellen, benutze folgendes Script: + +```ts +import bcrypt from "bcryptjs"; + +const hash = bcrypt.hashSync("meinNeuesPasswort", 10); +console.log(hash); // Kopieren und in users.ts einfügen +``` + +**Hinweis:** Stelle sicher, dass das neue Passwort korrekt gehasht ist, bevor es ins Repository hochgeladen wird. + +--- + +## Zusammenfassung + +| Thema | Hinweis | +| :--------------------- | :-------------------------------------------------------- | +| TLS-Login (Backend) | Nur für Netzwerkverschlüsselung | +| Admin-Login (Frontend) | Schutz für kritische Funktionen | +| Passwort-Handling | Immer bcrypt verwenden | +| Benutzerdatei | `/components/main/settingsPageComponents/config/users.ts` | + +--- + +**Stand:** 28. April 2025 +**Projekt:** CPLv4.0 Weboberfläche diff --git a/components/main/settingsPageComponents/UserManagementSettings.tsx b/components/main/settingsPageComponents/UserManagementSettings.tsx new file mode 100644 index 0000000..13ad853 --- /dev/null +++ b/components/main/settingsPageComponents/UserManagementSettings.tsx @@ -0,0 +1,92 @@ +"use client"; +// /components/main/settingsPageComponents/UserManagementSettings.tsx +import React, { useState } from "react"; +import { useDispatch } from "react-redux"; +import { AppDispatch } from "../../../redux/store"; +import { useAdminAuth } from "./hooks/useAdminAuth"; +import handleAdminLogin from "./handlers/handleAdminLogin"; + +const UserManagementSettings: React.FC = () => { + const dispatch = useDispatch(); + const { isAdminLoggedIn, logoutAdmin } = useAdminAuth(true); + + const [username, setUsername] = useState(""); + const [password, setPassword] = useState(""); + const [loginSuccess, setLoginSuccess] = useState(false); + const [error, setError] = useState(""); + + const handleLogin = async () => { + handleAdminLogin( + username, + password, + () => { + setLoginSuccess(true); + setError(""); + }, + (errorMsg) => { + setLoginSuccess(false); + setError(errorMsg); + }, + dispatch + ); + }; + + return ( +
+

+ Benutzerverwaltung (nur Login) +

+ + {/* Admin Login/Logout */} +
+ {isAdminLoggedIn ? ( + + ) : ( + <> +
+ setUsername(e.target.value)} + /> + setPassword(e.target.value)} + /> + +
+ + )} +
+ + {loginSuccess && ( +

Login erfolgreich!

+ )} + {error &&

{error}

} + + {/* + // Benutzerverwaltungstabelle (kommt später) + ...
+ */} +
+ ); +}; + +export default UserManagementSettings; diff --git a/config/webVersion.ts b/config/webVersion.ts index e216d23..35e457e 100644 --- a/config/webVersion.ts +++ b/config/webVersion.ts @@ -6,5 +6,5 @@ 2: Patch oder Hotfix (Bugfixes oder kleine Änderungen). */ -const webVersion = "1.6.292"; +const webVersion = "1.6.293"; export default webVersion; diff --git a/pages/einstellungen.tsx b/pages/einstellungen.tsx index 2d67fc2..cb0fa87 100644 --- a/pages/einstellungen.tsx +++ b/pages/einstellungen.tsx @@ -6,6 +6,7 @@ import GeneralSettings from "../components/main/settingsPageComponents/GeneralSe import OPCUAInterfaceSettings from "../components/main/settingsPageComponents/OPCUAInterfaceSettings"; import DatabaseSettings from "../components/main/settingsPageComponents/DatabaseSettings"; import NTPSettings from "../components/main/settingsPageComponents/NTPSettings"; +import UserManagementSettings from "../components/main/settingsPageComponents/UserManagementSettings"; export default function Settings() { const [activeTab, setActiveTab] = useState("tab1"); @@ -59,6 +60,16 @@ export default function Settings() { > NTP + {/* Tab-Inhalt */} @@ -67,6 +78,7 @@ export default function Settings() { {activeTab === "tab2" && } {activeTab === "tab3" && } {activeTab === "tab4" && } + {activeTab === "tab5" && } );