feat: Admin-Login-Button mit Umgebungsabhängiger Weiterleitung hinzugefügt

- Button zum Admin-Login im Header hinzugefügt, der abhängig von der Umgebung (`NODE_ENV`) zu "/login" (Entwicklung) oder "/login.html" (Produktion) weiterleitet
- Tooltip "Als Admin anmelden" hinzugefügt, der angezeigt wird, wenn der Benutzer über den Admin-Button fährt
- Icon für Admin-Login-Button mit `bi-person-circle` ergänzt für eine ansprechendere UI
This commit is contained in:
ISA
2024-11-13 15:17:23 +01:00
parent 8412d0b9c2
commit 1420569a59
5 changed files with 149 additions and 55 deletions

View File

@@ -1,58 +1,17 @@
import { useState } from "react";
import { useEffect } from "react";
import { useRouter } from "next/router";
const USERS = {
Admin: { username: "Admin", password: "adminpasswort", role: "Admin" },
Techniker: {
username: "Techniker",
password: "technikerpasswort",
role: "Techniker",
},
};
function generateToken(user) {
const payload = {
username: user.username,
role: user.role,
exp: Date.now() + 5 * 60 * 1000, // Ablauf in 5 Minuten
};
return btoa(JSON.stringify(payload)); // Verwende btoa nur für das Payload
}
export default function Home() {
const router = useRouter();
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");
const handleLogin = (e) => {
e.preventDefault();
const user = USERS[username];
if (user && user.password === password) {
const token = generateToken(user);
localStorage.setItem("token", token);
router.replace("/dashboard");
} else {
setError("Login fehlgeschlagen");
}
};
useEffect(() => {
// Prüft die Umgebung und hängt .html in der Produktion an
const isProduction = process.env.NEXT_PUBLIC_NODE_ENV === "production";
const dashboardPath = `/dashboard${isProduction ? ".html" : ""}`;
return (
<form onSubmit={handleLogin}>
<input
type="text"
placeholder="Benutzername"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<input
type="password"
placeholder="Passwort"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<button type="submit">Login</button>
{error && <p>{error}</p>}
</form>
);
// Leitet den Benutzer sofort zur richtigen Dashboard-Seite weiter
router.replace(dashboardPath);
}, [router]);
return null; // Die Seite zeigt keinen Inhalt an und leitet sofort um
}