error fixes by gpt

frontend_admin/src/App.tsx

@@ -6,45 +6,44 @@ import { useEffect, useState } from "react";
 import { loadTheme } from "./utils/frontendService";
 import "react-toastify/dist/ReactToastify.css";
 import Cookies from "js-cookie";
+import { AuthContext } from "./utils/context";
 
 function App() {
   useEffect(() => {
     loadTheme();
   }, []);
 
-  // Track authentication state
-  const [isAuthenticated, setIsAuthenticated] = useState(
-    !!Cookies.get("token")
-  );
+  const [isAuthenticated, setIsAuthenticated] = useState(!!Cookies.get("token"));
   const [showLogin, setShowLogin] = useState(false);
 
+  const handleLogout = () => {
+    Cookies.remove("token");
+    setIsAuthenticated(false);
+  };
+
   return (
-    <Layout>
-      {isAuthenticated ? (
-        <UserTable isAuthenticated={isAuthenticated} />
-      ) : (
-        <>
-          <div className="flex items-center justify-center h-full">
-            <h2 className="text-2xl font-bold text-gray-700 dark:text-gray-300">
-              Please log in to view the user table.
-            </h2>
-            <button
-              className="ml-4 px-4 py-2 bg-blue-600 text-white rounded"
-              onClick={() => setShowLogin(true)}
-            >
-              Login
-            </button>
-          </div>
-          {showLogin && (
+    <AuthContext.Provider value={{ isAuthenticated, setIsAuthenticated }}>
+      <Layout>
+        {isAuthenticated ? (
+          <UserTable isAuthenticated={isAuthenticated} />
+        ) : (
+          <>
             <LoginCard
               onClose={() => setShowLogin(false)}
               changeAuth={(loggedIn) => setIsAuthenticated(loggedIn)}
             />
-          )}
-        </>
-      )}
-    </Layout>
+            <div className="flex items-center justify-center h-full">
+              <h2 className="text-2xl font-bold text-gray-700 dark:text-gray-300">
+                Please log in to view the user table.
+              </h2>
+            </div>
+          </>
+        )}
+      </Layout>
+    </AuthContext.Provider>
   );
 }
 
+
+
 export default App;

frontend_admin/src/components/Header.tsx

@@ -1,50 +1,37 @@
-import { useState } from "react";
-import React from "react";
-import LoginCard from "./LoginCard";
-import { greeting } from "../utils/frontendService";
-import { changeTheme } from "../utils/frontendService";
+import React, { useContext } from "react";
+import Cookies from "js-cookie";
+import { AuthContext } from "../utils/context";
 
-export interface HeaderProps {
-  changeAuth?: (isLoggedIn: boolean) => void;
-}
+const Header: React.FC = () => {
+  const { isAuthenticated, setIsAuthenticated } = useContext(AuthContext);
+  const username = Cookies.get("username");
 
-const Header: React.FC<HeaderProps> = ({ changeAuth }) => {
-  const [loginCardVisible, setLoginCardVisible] = useState(false);
-
-  const closeLoginCard = () => {
-    setLoginCardVisible(false);
+  const handleLogout = () => {
+    Cookies.remove("token");
+    Cookies.remove("username");
+    setIsAuthenticated(false);
   };
 
-  let loginBtnVal: string = "Hello, " + greeting() + "!";
-
   return (
-    <header className="bg-blue-600 dark:bg-gray-900 text-white p-4 shadow-md">
-      <div className="container mx-auto flex justify-between items-center">
-        <h1 className="text-xl font-bold">
-          Bikelane <strong>Admin Panel</strong>
-        </h1>
-        <nav>
-          <ul className="flex space-x-4">
-            <li>
-              <a className="hover:underline">
-                <button
-                  onClick={() => changeTheme()}
-                  className="bg-blue-700 dark:bg-gray-800 shadow-md hover:bg-blue-800 dark:hover:bg-gray-700 transition padding px-4 py-2 rounded-md text-white font-semibold"
-                >
-                  Change Theme
-                </button>
-                <button
-                  onClick={() => setLoginCardVisible(true)}
-                  className="bg-blue-700 dark:bg-gray-800 shadow-md hover:bg-blue-800 dark:hover:bg-gray-700 transition padding px-4 py-2 rounded-md text-white font-semibold"
-                >
-                  {loginBtnVal ?? "Login"}
-                </button>
-              </a>
-            </li>
-          </ul>
-        </nav>
+    <header className="w-full flex justify-between items-center px-8 py-4 bg-gradient-to-r from-blue-100 via-blue-200 to-blue-100 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900 shadow-lg">
+      <h1 className="text-2xl font-bold text-blue-700 dark:text-blue-200 tracking-wide">
+        🚲 Bikelane Dashboard
+      </h1>
+      <div className="flex items-center gap-4">
+        {isAuthenticated && (
+          <>
+            <span className="text-lg font-semibold text-blue-700 dark:text-blue-200">
+              Hello, {username || "User"}
+            </span>
+            <button
+              onClick={handleLogout}
+              className="px-4 py-2 bg-red-600 text-white rounded shadow hover:bg-red-700 transition"
+            >
+              Logout
+            </button>
+          </>
+        )}
       </div>
-      <div>{loginCardVisible && <LoginCard changeAuth={changeAuth} onClose={closeLoginCard} />}</div>
     </header>
   );
 };

frontend_admin/src/components/LoginCard.tsx

@@ -1,106 +1,85 @@
-import React from "react";
+import React, { useState, useContext } from "react";
 import Cookies from "js-cookie";
-import { logout, loginUser } from "../utils/userHandler";
-type LoginCardProps = {
+import { AuthContext } from "../utils/context";
+
+interface LoginCardProps {
   onClose: () => void;
-  changeAuth?: (isLoggedIn: boolean) => void;
-};
+  changeAuth?: (loggedIn: boolean) => void;
+}
 
 const LoginCard: React.FC<LoginCardProps> = ({ onClose, changeAuth }) => {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const { setIsAuthenticated } = useContext(AuthContext);
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    try {
+      const response = await fetch("http://localhost:5002/api/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ username, password }),
+      });
+      const data = await response.json();
+      if (response.ok && data.token) {
+        Cookies.set("token", data.token);
+        Cookies.set("username", username);
+        setIsAuthenticated(true);
+        if (changeAuth) changeAuth(true);
+        onClose();
+      } else {
+        setError(data.message || "Login fehlgeschlagen");
+      }
+    } catch (err) {
+      setError("Netzwerkfehler");
+    }
+  };
+
   return (
-    <div className="fixed inset-0 flex items-center justify-center bg-black/35">
-      <div className="max-w-sm bg-white dark:bg-gray-900 rounded-xl shadow-md p-8 relative">
-        <button
-          className="absolute top-4 right-4 bg-red-500 text-white w-8 h-8 rounded-full flex items-center justify-center font-bold shadow hover:bg-red-600 transition focus:outline-none focus:ring-2 focus:ring-red-400"
-          onClick={onClose}
-          aria-label="Close"
-        >
-          &times;
-        </button>
-        <h2 className="text-black dark:text-white text-2xl font-bold mb-6 text-center">
+    <div className="fixed inset-0 z-50 pointer-events-none">
+      {/* Overlay */}
+      <div className="absolute inset-0 bg-white bg-opacity-40 backdrop-blur-sm pointer-events-auto"></div>
+      {/* Card oben am Dashboard */}
+      <form
+        onSubmit={handleLogin}
+        className="absolute left-1/2 -translate-x-1/2 top-10 z-10 bg-white dark:bg-gray-900 rounded-2xl shadow-2xl px-8 py-10 flex flex-col gap-6 min-w-[340px] max-w-[90vw] border border-blue-200 dark:border-gray-800 pointer-events-auto"
+      >
+        <h2 className="text-2xl font-bold text-center text-blue-700 dark:text-blue-200 mb-2">
           Login
         </h2>
-        <form
-          onSubmit={async (event) => {
-            event.preventDefault();
-            const formData = new FormData(event.currentTarget);
-            const username = formData.get("username") as string;
-            const password = formData.get("password") as string;
-            const success = await loginUser(username, password); // Make loginUser return true/false
-            if (success) {
-              changeAuth?.(true);
-              onClose();
-            }
-          }}
-          className="space-y-4 text-black dark:text-white"
-        >
-          <div>
-            <label
-              htmlFor="username"
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
-            >
-              Username
-            </label>
-            <input
-              type="text"
-              name="username"
-              required
-              id="username"
-              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white"
-            />
-          </div>
-          <div>
-            <label
-              htmlFor="password"
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
-            >
-              Password
-            </label>
-            <input
-              type="password"
-              name="password"
-              required
-              id="password"
-              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-white"
-            />
-          </div>
-          {Cookies.get("name") ? (
-            <p></p>
-          ) : (
-            <input
-              type="submit"
-              value="Login"
-              className="w-full bg-blue-600 text-white font-semibold py-2 rounded-md hover:bg-blue-700 transition"
-            />
-          )}
-        </form>
-        {Cookies.get("token") ? (
-          <button
-            className="w-full bg-black dark:bg-gray-800 text-white font-semibold py-2 rounded-md hover:bg-green-400 dark:hover:bg-green-600 transition"
-            onClick={() => {
-              logout();
-              if (changeAuth) {
-                changeAuth(false);
-                onClose();
-              }
-            }}
-          >
-            Logout
-          </button>
-        ) : (
-          <p className="text-center text-gray-500 dark:text-gray-400 mt-4">
-            Don't have an account?{" "}
-            <a
-              href="/register"
-              className="text-blue-600 dark:text-blue-400 hover:underline"
-            >
-              Register here
-            </a>
-          </p>
+        {error && (
+          <div className="text-red-600 text-center font-semibold">{error}</div>
         )}
-      </div>
+        <input
+          type="text"
+          placeholder="Benutzername"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          className="border border-blue-300 dark:border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-800 dark:text-white"
+          required
+        />
+        <input
+          type="password"
+          placeholder="Passwort"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          className="border border-blue-300 dark:border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-800 dark:text-white"
+          required
+        />
+        <div className="flex gap-3 mt-2 justify-center">
+          <button
+            type="submit"
+            className="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-5 py-2 rounded-lg shadow transition"
+          >
+            Login
+          </button>
+        </div>
+      </form>
     </div>
   );
 };
 
 export default LoginCard;
+

frontend_admin/src/layout/Layout.tsx

@@ -1,44 +1,22 @@
-import React, { useEffect } from "react";
+import React from "react";
 import Header from "../components/Header";
-import Cookies from "js-cookie";
 import Sidebar from "../components/Sidebar";
 import { ToastContainer } from "react-toastify";
-import { AuthContext } from "../utils/context";
 
 type LayoutProps = {
   children: React.ReactNode;
 };
 
 const Layout: React.FC<LayoutProps> = ({ children }) => {
-  const [loggedIn, setLoggedIn] = React.useState(false);
-
-  useEffect(() => {
-    const token = Cookies.get("token");
-    if (token) {
-      setLoggedIn(true);
-    } else {
-      setLoggedIn(false);
-    }
-  }, [loggedIn]);
-
   return (
     <div className="flex flex-col min-h-screen bg-gradient-to-br from-blue-50 via-blue-100 to-blue-200 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900">
-      <Header changeAuth={
-        (isLoggedIn: boolean) => setLoggedIn(isLoggedIn)
-      } />
+      <Header />
       <ToastContainer />
       <div className="flex flex-1">
-        <AuthContext.Provider value={loggedIn}>
-          {/* Main content */}
-          {loggedIn && (
-            <>
-              <Sidebar />
-              <main className="flex-1 p-10 bg-white/80 dark:bg-gray-900/80 rounded-l-3xl shadow-2xl m-6 overflow-auto text-black dark:text-white">
-                {children}
-              </main>
-            </>
-          )}
-        </AuthContext.Provider>
+        <Sidebar />
+        <main className="flex-1 p-10 bg-white/80 dark:bg-gray-900/80 rounded-l-3xl shadow-2xl m-6 overflow-auto text-black dark:text-white">
+          {children}
+        </main>
       </div>
       <footer className="bg-gradient-to-r from-blue-800 via-blue-900 to-blue-800 dark:from-gray-900 dark:via-gray-950 dark:to-gray-900 text-blue-100 dark:text-gray-400 py-6 px-5 text-center rounded-t-3xl shadow-xl mt-8 tracking-wide border-t border-blue-700 dark:border-gray-800">
         <div className="flex flex-col items-center gap-2">

frontend_admin/src/utils/context.ts

@@ -0,0 +1,9 @@
+import React from "react";
+
+export const AuthContext = React.createContext<{
+  isAuthenticated: boolean;
+  setIsAuthenticated: (auth: boolean) => void;
+}>({
+  isAuthenticated: false,
+  setIsAuthenticated: () => { },
+});

frontend_admin/src/utils/frontendService.ts

@@ -2,7 +2,7 @@ import Cookies from "js-cookie";
 import { toast, type ToastOptions } from "react-toastify";
 
 export const greeting = () => {
-  return Cookies.get("name") ?? "Login";
+  return Cookies.get("username") ?? "Login";
 };
 
 export const loadTheme = () => {

frontend_admin/src/utils/userHandler.ts

@@ -14,7 +14,7 @@ export const loginUser = async (
     if (response.ok) {
       const data = await response.json();
       Cookies.set("token", data.token); // Set cookie here
-      Cookies.set("name", data.name);
+      Cookies.set("username", username); // Set username cookie
       return true;
     }
     return false;
@@ -24,7 +24,7 @@ export const loginUser = async (
 };
 
 export const logout = () => {
-  Cookies.remove("name");
+  Cookies.remove("username");
   Cookies.remove("token");
   localStorage.removeItem("users");
   myToast("Logged out successfully!", "info");