Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: JWT-Authentifizierung in SettingModal implementiert und Modal-Stabilität verbessert

Browse Source 
- JWT-Token-Erstellung und -Speicherung für sichere Admin-Authentifizierung in SettingModal hinzugefügt.
- Stabilitätsprobleme des Modals behoben.
- Funktionalität des Modals und des Tokens überprüft, um eine reibungslose Benutzererfahrung sicherzustellen.
This commit is contained in:
ISA
2024-11-14 13:48:04 +01:00
parent 172134a16f
commit c0ffbbcf38
5 changed files with 279 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
pages/login.js
View File

@@ -1,126 +0,0 @@
// pages/index.js
import Image from "next/image";
import { useState } from "react";
import { useRouter } from "next/router";
const USERS = {
Admin: { username: "admin", password: "admin", role: "Admin" },
Ismail: { username: "ismail", password: "ismail", role: "Admin" },
};
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 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 = Object.values(USERS).find(
(u) => u.username.toLowerCase() === username.toLowerCase()
);
if (user && user.password === password) {
const token = generateToken(user);
localStorage.setItem("token", token);
// Überprüfen, ob es sich um die Produktionsumgebung handelt
const targetPath =
process.env.NODE_ENV === "production"
? "/kabelueberwachung.html"
: "/kabelueberwachung";
router.replace(targetPath);
} else {
setError("Login fehlgeschlagen");
}
};
return (
<div className="relative flex items-center justify-center h-5/6 overflow-hidden bg-gray-900">
{/* Hintergrundbild */}
<div
className="absolute inset-0 bg-cover bg-center opacity-80"
style={{
backgroundImage: "url('/loginPageImg/background.png')",
height: "75vh", // Setzt die Höhe auf 75% des Viewports
}}
></div>
{/* Overlay */}
<div className="absolute inset-0 bg-gradient-to-r from-gray-900 via-transparent to-gray-900 opacity-90"></div>
<div className="relative z-10 flex flex-col items-center p-3 bg-white bg-opacity-80 rounded-lg shadow-lg md:w-1/5 lg:w-1/6 max-h-[90vh]">
{/* Logo */}
<div className="mb-2">
<Image
src="/loginPageImg/logo.png"
alt="Littwin Logo"
width={60}
height={60}
/>
</div>
{/* Titel */}
<h2 className="text-xl font-semibold text-gray-800 mb-3">Willkommen</h2>
{/* Formular */}
<form className="w-full" onSubmit={handleLogin}>
{/* Benutzername */}
<div className="mb-3">
<label
className="block text-gray-600 text-xs mb-1"
htmlFor="username"
>
Benutzername
</label>
<input
type="text"
id="username"
placeholder="Benutzername"
value={username}
onChange={(e) => setUsername(e.target.value)}
className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent"
/>
</div>
{/* Passwort */}
<div className="mb-3">
<label
className="block text-gray-600 text-xs mb-1"
htmlFor="password"
>
Passwort
</label>
<input
type="password"
id="password"
placeholder="Passwort"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="w-full px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent"
/>
</div>
{/* Login Button */}
<button
type="submit"
className="w-full bg-blue-600 text-white py-1 text-sm rounded-md hover:bg-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-500"
>
Einloggen
</button>
</form>
{error && <p className="text-red-500 mt-2 text-sm">{error}</p>}
</div>
</div>
);
}