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

components/Header.jsx

@@ -1,20 +1,27 @@
 "use client"; // components/Header.jsx
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import Image from "next/image";
+import { useRouter } from "next/router";
 import "bootstrap-icons/font/bootstrap-icons.css";
 import SettingsModal from "./modales/settingsModal/SettingsModal";
 import { useSelector } from "react-redux";
 
 function Header() {
+  const router = useRouter();
   const deviceName = useSelector((state) => state.variables.deviceName);
-  const [cplStatus, setCplStatus] = useState("Lädt...");
   const [showSettingsModal, setShowSettingsModal] = useState(false);
 
   const handleSettingsClick = () => setShowSettingsModal(true);
   const handleCloseSettingsModal = () => setShowSettingsModal(false);
   const handleLogout = () => (window.location.href = "/offline.html");
 
-  //------------------------------------------------------------------
+  // Funktion zur Weiterleitung zur Login-Seite abhängig von der Umgebung
+  const handleAdminLogin = () => {
+    const loginPath =
+      process.env.NODE_ENV === "production" ? "/login.html" : "/login";
+    router.push(loginPath);
+  };
+
   return (
     <header className="bg-gray-300 flex justify-between items-center w-full h-28 relative text-black">
       <div className="absolute left-32 top-32 transform -translate-y-1/2">
@@ -44,7 +51,15 @@ function Header() {
             <i className="bi bi-gear"></i>
           </button>
         </div>
-        <div className="flex items-center justify-end w-full">
+        <div className="flex items-center justify-end w-full space-x-2">
+          <button
+            onClick={handleAdminLogin}
+            title="Als Admin anmelden"
+            className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
+          >
+            <i className="bi bi-person-circle mr-2"></i>
+          </button>
+
           <button
             onClick={handleLogout}
             className="bg-littwin-blue text-white px-4 py-2 rounded"

pages/index.js

@@ -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) => {
+  useEffect(() => {
-    e.preventDefault();
+    // Prüft die Umgebung und hängt .html in der Produktion an
-    const user = USERS[username];
+    const isProduction = process.env.NEXT_PUBLIC_NODE_ENV === "production";
-    if (user && user.password === password) {
+    const dashboardPath = `/dashboard${isProduction ? ".html" : ""}`;
-      const token = generateToken(user);
-      localStorage.setItem("token", token);
-      router.replace("/dashboard");
-    } else {
-      setError("Login fehlgeschlagen");
-    }
-  };
 
-  return (
+    // Leitet den Benutzer sofort zur richtigen Dashboard-Seite weiter
-    <form onSubmit={handleLogin}>
+    router.replace(dashboardPath);
-      <input
+  }, [router]);
-        type="text"
+
-        placeholder="Benutzername"
+  return null; // Die Seite zeigt keinen Inhalt an und leitet sofort um
-        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>
-  );
 }

pages/login.js

@@ -0,0 +1,120 @@
+// 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: "ismailpasswort", 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);
+      router.replace("/dashboard");
+    } 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>
+  );
+}