all bugs removed

Currently, after every Event, you have to reload the page manually!!!

README.md

@@ -2,6 +2,8 @@
 
 Bikelane is a full-stack web application for managing users and administration tasks for a bike lane system. It features a React-based admin panel, a user-facing frontend, and an Express.js backend with a MySQL database.
 
+**Bikelane is currently WIP - later iterations will focus on improving user experience and adding more features. - and will be a fully hosted web app and not a local one**
+
 ## Project Structure
 
 ```

backend/server.js

@@ -50,7 +50,7 @@ app.get("/api/getAllUsers", authenticate, async (req, res) => {
   if (req.user.role === "admin") {
     getAllUsers()
       .then((users) => {
-        res.status(200).json(users).reload();
+        res.status(200).json(users);
       })
       .catch((err) => {
         console.error("Error fetching users:", err);

frontend_admin/package-lock.json

@@ -16,6 +16,7 @@
         "lucide-react": "^0.525.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
+        "react-toastify": "^11.0.5",
         "tailwind-merge": "^3.3.1",
         "tailwindcss-animate": "^1.0.7",
         "tw-animate-css": "^1.3.5"
@@ -4010,6 +4011,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-toastify": {
+      "version": "11.0.5",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-11.0.5.tgz",
+      "integrity": "sha512-EpqHBGvnSTtHYhCPLxML05NLY2ZX0JURbAdNYa6BUkk+amz4wbKBQvoKQAB0ardvSarUBuY4Q4s1sluAzZwkmA==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19",
+        "react-dom": "^18 || ^19"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",

frontend_admin/package.json

@@ -19,6 +19,7 @@
     "lucide-react": "^0.525.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-toastify": "^11.0.5",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7",
     "tw-animate-css": "^1.3.5"

frontend_admin/src/App.css

@@ -1,17 +1 @@
 @import "tailwindcss";
-
-/* Example: App.css */
-body.dark {
-  background: #222;
-  color: #fff;
-}
-
-body {
-  background: #fff;
-  color: #222;
-}
-
-html.dark body {
-  background: #222;
-  color: #fff;
-}

frontend_admin/src/App.tsx

@@ -1,21 +1,43 @@
 import "./App.css";
 import Layout from "./layout/Layout";
-import { useUsers } from "./utils/useUsers";
 import UserTable from "./components/UserTable";
-import { useEffect } from "react";
+import LoginCard from "./components/LoginCard";
-import { loadTheme } from "./utils/functions";
+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() {
-  const users = useUsers();
-
   useEffect(() => {
     loadTheme();
   }, []);
 
+  const [isAuthenticated, setIsAuthenticated] = useState(
+    !!Cookies.get("token")
+  );
+  const [showLogin, setShowLogin] = useState(false);
+
   return (
-    <Layout>
+    <AuthContext.Provider value={{ isAuthenticated, setIsAuthenticated }}>
-      <UserTable users={users} />
+      <Layout>
-    </Layout>
+        {isAuthenticated ? (
+          <UserTable isAuthenticated={isAuthenticated} />
+        ) : (
+          <>
+            <LoginCard
+              onClose={() => setShowLogin(false)}
+              changeAuth={(loggedIn) => setIsAuthenticated(loggedIn)}
+            />
+            <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>
   );
 }
 

frontend_admin/src/components/Header.tsx

@@ -1,46 +1,39 @@
-import { useState } from "react";
+import React, { useContext } from "react";
-import React from "react";
+import Cookies from "js-cookie";
-import LoginCard from "./LoginCard";
+import { AuthContext } from "../utils/context";
-import { greeting } from "../utils/functions";
+import { myToast } from "../utils/frontendService";
-import { changeTheme } from "../utils/functions";
 
 const Header: React.FC = () => {
-  const [loginCardVisible, setLoginCardVisible] = useState(false);
+  const { isAuthenticated, setIsAuthenticated } = useContext(AuthContext);
+  const firstName = Cookies.get("firstName");
 
-  const closeLoginCard = () => {
+  const handleLogout = () => {
-    setLoginCardVisible(false);
+    Cookies.remove("token");
+    Cookies.remove("firstName");
+    setIsAuthenticated(false);
+    myToast("Logged out successfully!", "info");
   };
 
-  let loginBtnVal: string = "Hello, " + greeting() + "!";
-
   return (
-    <header className="bg-blue-600 text-white p-4 shadow-md">
+    <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">
-      <div className="container mx-auto flex justify-between items-center">
+      <h1 className="text-2xl font-bold text-blue-700 dark:text-blue-200 tracking-wide">
-        <h1 className="text-xl font-bold">
+        🚲 Bikelane Dashboard
-          Bikelane <strong>Admin Panel</strong>
+      </h1>
-        </h1>
+      <div className="flex items-center gap-4">
-        <nav>
+        {isAuthenticated && (
-          <ul className="flex space-x-4">
+          <>
-            <li>
+            <span className="text-lg font-semibold text-blue-700 dark:text-blue-200">
-              <a className="hover:underline">
+              Hello, {firstName || "User"}
-                <button
+            </span>
-                  onClick={() => changeTheme()}
+            <button
-                  className="bg-blue-700 shadow-md hover:bg-blue-800 transition padding px-4 py-2 rounded-md text-white font-semibold"
+              onClick={handleLogout}
-                >
+              className="px-4 py-2 bg-red-600 text-white rounded shadow hover:bg-red-700 transition"
-                  Change Theme
+            >
-                </button>
+              Logout
-                <button
+            </button>
-                  onClick={() => setLoginCardVisible(true)}
+          </>
-                  className="bg-blue-700 shadow-md hover:bg-blue-800 transition padding px-4 py-2 rounded-md text-white font-semibold"
+        )}
-                >
-                  {loginBtnVal ?? "Login"}
-                </button>
-              </a>
-            </li>
-          </ul>
-        </nav>
       </div>
-      <div>{loginCardVisible && <LoginCard onClose={closeLoginCard} />}</div>
     </header>
   );
 };

frontend_admin/src/components/LoginCard.tsx

@@ -1,121 +1,85 @@
-import React from "react";
+import React, { useState, useContext } from "react";
 import Cookies from "js-cookie";
-import { logout } from "../utils/functions";
+import { AuthContext } from "../utils/context";
-type LoginCardProps = {
+import { myToast } from "../utils/frontendService";
-  onClose: () => void;
+
-};
+interface LoginCardProps {
+  onClose: () => 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("firstName", data.user.first_name);
+        setIsAuthenticated(true);
+        if (changeAuth) changeAuth(true);
+        onClose();
+        myToast("Login successful!", "success");
+      } else {
+        myToast("Login failed!", "error");
+        setError(data.message || "Login fehlgeschlagen");
+      }
+    } catch (err) {
+      setError("Netzwerkfehler");
+    }
+  };
 
-const LoginCard: React.FC<LoginCardProps> = ({ onClose }) => {
   return (
-    <div className="fixed inset-0 flex items-center justify-center bg-black/35">
+    <div className="fixed inset-0 z-50 pointer-events-none">
-      <div className="max-w-sm bg-white rounded-xl shadow-md p-8 relative">
+      {/* Overlay */}
-        <button
+      <div className="absolute inset-0 bg-white bg-opacity-40 backdrop-blur-sm pointer-events-auto"></div>
-          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"
+      {/* Card oben am Dashboard */}
-          onClick={onClose}
+      <form
-          aria-label="Close"
+        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"
-          &times;
+      >
-        </button>
+        <h2 className="text-2xl font-bold text-center text-blue-700 dark:text-blue-200 mb-2">
-        <h2 className="text-black text-2xl font-bold mb-6 text-center">
           Login
         </h2>
-        <form
+        {error && (
-          onSubmit={async (event) => {
+          <div className="text-red-600 text-center font-semibold">{error}</div>
-            event.preventDefault();
-            const formData = new FormData(event.currentTarget);
-            const username = formData.get("username");
-            const password = formData.get("password");
-            // Example: send login request
-            await fetch("http://localhost:5002/api/login", {
-              method: "POST",
-              headers: { "Content-Type": "application/json" },
-              body: JSON.stringify({ username, password }),
-            })
-              .then(async (response) => {
-                if (response.ok) {
-                  const data = await response.json();
-                  Cookies.set("token", data.token, { expires: 7 });
-                  onClose();
-                  Cookies.set("name", data.user.first_name, { expires: 7 });
-                  await fetch("http://localhost:5002/api/getAllUsers", {
-                    method: "GET",
-                    headers: {
-                      Authorization: `Bearer ${Cookies.get("token")}`,
-                    },
-                  })
-                    .then((res) => res.json())
-                    .then((users) => {
-                      localStorage.setItem("users", JSON.stringify(users));
-                    });
-                  document.location.reload();
-                } else if (response.status === 401) {
-                  alert("Invalid credentials");
-                } else if (response.status === 403) {
-                  alert("You are not an Admin!");
-                }
-              })
-              .catch((error) => {
-                console.log("Login failed: ", error);
-              });
-          }}
-          className="space-y-4 text-black"
-        >
-          <div>
-            <label
-              htmlFor="username"
-              className="block text-sm font-medium text-gray-700 mb-1"
-            >
-              Username
-            </label>
-            <input
-              type="text"
-              name="username"
-              required
-              id="username"
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-            />
-          </div>
-          <div>
-            <label
-              htmlFor="password"
-              className="block text-sm font-medium text-gray-700 mb-1"
-            >
-              Password
-            </label>
-            <input
-              type="password"
-              name="password"
-              required
-              id="password"
-              className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
-            />
-          </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("name") ? (
-          <button
-            className="w-full bg-black text-white font-semibold py-2 rounded-md hover:bg-green-400 transition"
-            onClick={logout}
-          >
-            Logout
-          </button>
-        ) : (
-          <p className="text-center text-gray-500 mt-4">
-            Don't have an account?{" "}
-            <a href="/register" className="text-blue-600 hover:underline">
-              Register here
-            </a>
-          </p>
         )}
-      </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>
   );
 };

frontend_admin/src/components/Sidebar.tsx

@@ -3,14 +3,14 @@ import userIcon from "../assets/circle-user-solid-full.svg";
 import logoIcon from "../assets/bicycle-solid-full.svg";
 
 const Sidebar: React.FC = () => (
-  <aside className="w-72 bg-white/90 shadow-2xl rounded-r-3xl p-8 flex flex-col gap-10 border-r border-blue-100">
+  <aside className="w-72 bg-white/90 dark:bg-gray-900 shadow-2xl rounded-r-3xl p-8 flex flex-col gap-10 border-r border-blue-100 dark:border-gray-800">
     <div className="flex items-center gap-4 mb-10">
       <img
         src={logoIcon}
         alt="Bikelane Logo"
-        className="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center shadow-lg"
+        className="w-12 h-12 bg-blue-500 dark:bg-blue-700 rounded-full flex items-center justify-center shadow-lg"
       />
-      <span className="font-extrabold text-2xl text-blue-700 tracking-wide drop-shadow">
+      <span className="font-extrabold text-2xl text-blue-700 dark:text-blue-200 tracking-wide drop-shadow">
         Web-Panel
       </span>
     </div>
@@ -19,7 +19,7 @@ const Sidebar: React.FC = () => (
         <li>
           <a
             href="/#"
-            className="flex items-center gap-3 px-4 py-3 rounded-xl text-blue-700 font-medium bg-blue-50 hover:bg-blue-200 hover:text-blue-900 transition-all shadow-sm"
+            className="flex items-center gap-3 px-4 py-3 rounded-xl text-blue-700 dark:text-blue-200 font-medium bg-blue-50 dark:bg-gray-800 hover:bg-blue-200 dark:hover:bg-gray-700 hover:text-blue-900 dark:hover:text-white transition-all shadow-sm"
           >
             <img src={userIcon} alt="Users" className="w-6 h-6" />
             <span className="text-lg">Users</span>
@@ -28,7 +28,7 @@ const Sidebar: React.FC = () => (
         {/* Add more links as needed */}
       </ul>
     </nav>
-    <div className="mt-auto text-xs text-blue-300 text-center pt-6 border-t border-blue-100">
+    <div className="mt-auto text-xs text-blue-300 dark:text-gray-500 text-center pt-6 border-t border-blue-100 dark:border-gray-800">
       <span>Bikelane pre-0.1</span>
     </div>
   </aside>

frontend_admin/src/components/UserTable.tsx

@@ -1,7 +1,6 @@
 import { MoreVertical } from "lucide-react";
-import React from "react";
 import { useEffect, useState } from "react";
-import { deleteUser, updateUserFunc } from "../utils/functions.ts";
+import { useUsers } from "../utils/useUsers.ts";
 
 interface User {
   id: number;
@@ -15,16 +14,25 @@ interface User {
 }
 
 interface UserTableProps {
-  users: User[];
+  isAuthenticated: boolean;
 }
 
-const UserTable: React.FC<UserTableProps> = ({ users }) => {
+const UserTable: React.FC<UserTableProps> = ({ isAuthenticated }) => {
   const [openMenu, setOpenMenu] = useState<number | null>(null);
-  const [userList, setUserList] = useState<User[]>(users);
+
+  const {
+    users,
+    refresh: refreshUsers,
+    setUsers,
+    deleteUser,
+    updateUser: updateUserFunc,
+  } = useUsers();
 
   useEffect(() => {
-    setUserList(users);
+    if (isAuthenticated) {
-  }, [users]);
+      refreshUsers();
+    }
+  }, [isAuthenticated]);
 
   const handleMenuClick = (userId: number) => {
     setOpenMenu(openMenu === userId ? null : userId);
@@ -33,144 +41,145 @@ const UserTable: React.FC<UserTableProps> = ({ users }) => {
   const handleMenuClose = () => setOpenMenu(null);
 
   const handleInputChange = (id: number, field: keyof User, value: string) => {
-    setUserList((prev) =>
+    setUsers((prevUsers) =>
-      prev.map((user) => (user.id === id ? { ...user, [field]: value } : user))
+      prevUsers.map((user) =>
+        user.id === id ? { ...user, [field]: value } : user
+      )
     );
   };
 
   return (
-    <table className="min-w-full divide-y divide-gray-200 shadow rounded-lg overflow-hidden">
+    <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700 shadow rounded-lg overflow-hidden">
-      <thead className="bg-gray-50">
+      <thead className="bg-gray-50 dark:bg-gray-800">
         <tr>
-          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
             #
           </th>
-          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
             Username
           </th>
-          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
             First name
           </th>
-          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
             Last name
           </th>
-          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
             Email
           </th>
-          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
             Password
           </th>
-          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
             Created
           </th>
-          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
             Role
           </th>
-          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
+          <th className="px-4 py-2 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
             Actions
           </th>
         </tr>
       </thead>
-      <tbody className="bg-white divide-y divide-gray-100">
+      <tbody className="bg-white text-black dark:bg-gray-900 dark:text-white divide-y divide-gray-100 dark:divide-gray-800 z-10">
-        {userList.map((user) => (
+        {(users ?? []).map((user, idx) => {
-          <tr key={user.id} className="hover:bg-blue-50 transition">
+          // If this is one of the last 2 rows, open menu upwards
-            <td className="px-4 py-2 whitespace-nowrap">{user.id}</td>
+          const openUp = idx >= users.length - 2;
-            <td className="px-4 py-2 whitespace-nowrap">
+          return (
-              <input
+            <tr
-                type="text"
+              key={user.id}
-                className="w-20"
+              className="hover:bg-gray-50 dark:hover:bg-gray-800 transition"
-                id={`username-${user.id}`}
+            >
-                value={user.username}
+              <td className="px-4 py-2 whitespace-nowrap">{user.id}</td>
-                onChange={(e) =>
+              <td className="px-4 py-2 whitespace-nowrap">
-                  handleInputChange(user.id, "username", e.target.value)
+                <input
-                }
+                  type="text"
-              />
+                  className="w-20 bg-transparent border-b border-gray-200 dark:border-gray-600 focus:outline-none focus:border-blue-400 dark:focus:border-blue-300 text-black dark:text-white"
-            </td>
+                  id={`username-${user.id}`}
-            <td className="px-4 py-2 whitespace-nowrap">
+                  value={user.username}
-              <input
+                  onChange={(e) =>
-                type="text"
+                    handleInputChange(user.id, "username", e.target.value)
-                className="w-20"
+                  }
-                id={`first_name-${user.id}`}
+                />
-                value={user.first_name}
+              </td>
-                onChange={(e) =>
+              <td className="px-4 py-2 whitespace-nowrap">
-                  handleInputChange(user.id, "first_name", e.target.value)
+                <input
-                }
+                  type="text"
-              />
+                  className="w-20 bg-transparent border-b border-gray-200 dark:border-gray-600 focus:outline-none focus:border-blue-400 dark:focus:border-blue-300 text-black dark:text-white"
-            </td>
+                  id={`first_name-${user.id}`}
-            <td className="px-4 py-2 whitespace-nowrap">
+                  value={user.first_name}
-              <input
+                  onChange={(e) =>
-                type="text"
+                    handleInputChange(user.id, "first_name", e.target.value)
-                className="w-20"
+                  }
-                id={`last_name-${user.id}`}
+                />
-                value={user.last_name}
+              </td>
-                onChange={(e) =>
+              <td className="px-4 py-2 whitespace-nowrap">
-                  handleInputChange(user.id, "last_name", e.target.value)
+                <input
-                }
+                  type="text"
-              />
+                  className="w-20 bg-transparent border-b border-gray-200 dark:border-gray-600 focus:outline-none focus:border-blue-400 dark:focus:border-blue-300 text-black dark:text-white"
-            </td>
+                  id={`last_name-${user.id}`}
-            <td className="px-4 py-2 whitespace-nowrap">
+                  value={user.last_name}
-              <input
+                  onChange={(e) =>
-                type="text"
+                    handleInputChange(user.id, "last_name", e.target.value)
-                className="w-60"
+                  }
-                id={`email-${user.id}`}
+                />
-                value={user.email}
+              </td>
-                onChange={(e) =>
+              <td className="px-4 py-2 whitespace-nowrap">
-                  handleInputChange(user.id, "email", e.target.value)
+                <input
-                }
+                  type="text"
-              />
+                  className="w-60 bg-transparent border-b border-gray-200 dark:border-gray-600 focus:outline-none focus:border-blue-400 dark:focus:border-blue-300 text-black dark:text-white"
-            </td>
+                  id={`email-${user.id}`}
-            <td className="px-4 py-2 whitespace-nowrap">
+                  value={user.email}
-              <input
+                  onChange={(e) =>
-                type="text"
+                    handleInputChange(user.id, "email", e.target.value)
-                className="w-25"
+                  }
-                id={`password-${user.id}`}
+                />
-                value={user.password}
+              </td>
-                onChange={(e) =>
+              <td className="px-4 py-2 whitespace-nowrap">
-                  handleInputChange(user.id, "password", e.target.value)
+                <input
-                }
+                  type="text"
-              />
+                  className="w-25 bg-transparent border-b border-gray-200 dark:border-gray-600 focus:outline-none focus:border-blue-400 dark:focus:border-blue-300 text-black dark:text-white"
-            </td>
+                  id={`password-${user.id}`}
-            <td className="px-4 py-2 whitespace-nowrap">{user.created}</td>
+                  value={user.password}
-            <td className="px-4 py-2 whitespace-nowrap">
+                  onChange={(e) =>
-              <input
+                    handleInputChange(user.id, "password", e.target.value)
-                type="text"
+                  }
-                className="w-15"
+                />
-                value={user.role}
+              </td>
-                onChange={(e) =>
+              <td className="px-4 py-2 whitespace-nowrap">{user.created}</td>
-                  handleInputChange(user.id, "role", e.target.value)
+              <td className="px-4 py-2 whitespace-nowrap">{user.role}</td>
-                }
+              <td className="px-4 py-2 whitespace-nowrap relative">
-              />
+                <button
-            </td>
+                  onClick={() => handleMenuClick(user.id)}
-            <td className="px-4 py-2 whitespace-nowrap relative">
+                  className="p-1 rounded hover:bg-gray-200 dark:hover:bg-gray-700"
-              <button
+                  aria-label="Open actions menu"
-                onClick={() => handleMenuClick(user.id)}
-                className="p-1 rounded hover:bg-gray-200"
-                aria-label="Open actions menu"
-              >
-                <MoreVertical size={18} />
-              </button>
-              {openMenu === user.id && (
-                <div
-                  className="absolute right-0 mt-2 w-32 bg-white border rounded shadow-lg z-10"
-                  onMouseLeave={handleMenuClose}
                 >
-                  <button
+                  <MoreVertical size={18} />
-                    onClick={() => updateUserFunc(user.id)}
+                </button>
-                    className="block w-full text-left px-4 py-2 hover:bg-gray-100"
+                {openMenu === user.id && (
+                  <div
+                    className={`absolute right-0 w-32 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded shadow-lg z-50 overflow-visible
+              ${openUp ? "bottom-full mb-2" : "mt-2"}`}
+                    onMouseLeave={handleMenuClose}
                   >
-                    Save
+                    <button
-                  </button>
+                      onClick={() => updateUserFunc(user.id)}
-                  <button
+                      className="block w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"
-                    onClick={() => deleteUser(user.id)}
+                    >
-                    className="block w-full text-left px-4 py-2 hover:bg-gray-100"
+                      Save
-                  >
+                    </button>
-                    Delete
+                    <button
-                  </button>
+                      onClick={() => deleteUser(user.id)}
-                </div>
+                      className="block w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-700"
-              )}
+                    >
-            </td>
+                      Delete
-          </tr>
+                    </button>
-        ))}
+                  </div>
+                )}
+              </td>
+            </tr>
+          );
+        })}
       </tbody>
     </table>
   );

frontend_admin/src/layout/Layout.tsx

@@ -1,40 +1,33 @@
 import React from "react";
 import Header from "../components/Header";
-import Cookies from "js-cookie"; // Add this import
 import Sidebar from "../components/Sidebar";
+import { ToastContainer } from "react-toastify";
 
 type LayoutProps = {
   children: React.ReactNode;
 };
 
 const Layout: React.FC<LayoutProps> = ({ children }) => {
-  const isLoggedIn = !!Cookies.get("name"); // Check login status
-
   return (
-    <div className="flex flex-col min-h-screen bg-gradient-to-br from-blue-50 via-blue-100 to-blue-200">
+    <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 />
+      <ToastContainer />
       <div className="flex flex-1">
-        {isLoggedIn && (
+        <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">
-            {/* Sidebar */}
+          {children}
-            <Sidebar />
+        </main>
-            {/* Main content */}
-            <main className="flex-1 p-10 bg-white/80 rounded-l-3xl shadow-2xl m-6 overflow-auto">
-              {children}
-            </main>
-          </>
-        )}
       </div>
-      <footer className="bg-gradient-to-r from-blue-800 via-blue-900 to-blue-800 text-blue-100 py-6 px-5 text-center rounded-t-3xl shadow-xl mt-8 tracking-wide border-t border-blue-700">
+      <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">
           <span className="font-bold text-lg tracking-widest drop-shadow">
             Bikelane Web
           </span>
-          <span className="text-xs text-blue-200">
+          <span className="text-xs text-blue-200 dark:text-gray-500">
             &copy; {new Date().getFullYear()} —
             <a
               href="https://git.the1s.de/theis.gaedigk/bikelane"
-              className="underline hover:text-blue-300 transition"
+              className="underline hover:text-blue-300 dark:hover:text-white transition"
               target="_blank"
               rel="noopener noreferrer"
             >

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/context.tsx

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const AuthContext = createContext(false);

frontend_admin/src/utils/frontendService.ts

@@ -0,0 +1,69 @@
+import Cookies from "js-cookie";
+import { toast, type ToastOptions } from "react-toastify";
+
+export const greeting = () => {
+  return Cookies.get("username") ?? "Login";
+};
+
+export const loadTheme = () => {
+  if (
+    window.matchMedia &&
+    window.matchMedia("(prefers-color-scheme: dark)").matches
+  ) {
+    // Switch to dark theme
+    console.log("dark");
+    document.documentElement.classList.add("dark");
+    document.body.classList.add("dark");
+    Cookies.set("theme", "dark", { expires: 365 });
+  } else {
+    // Switch to light theme
+    console.log("light");
+    document.documentElement.classList.remove("dark");
+    document.body.classList.remove("dark");
+    Cookies.set("theme", "light", { expires: 365 });
+  }
+};
+
+export const changeTheme = () => {
+  if (Cookies.get("theme") === "dark") {
+    // Switch to light theme
+    console.log("light");
+    removeDarkTheme();
+  } else if (Cookies.get("theme") === "light") {
+    // Switch to dark theme
+    console.log("dark");
+    setDarkTheme();
+  } else {
+    console.error("Theme not set or recognized");
+  }
+};
+
+export const removeDarkTheme = () => {
+  console.log("Removing dark theme");
+  document.documentElement.classList.remove("dark");
+  document.body.classList.remove("dark");
+  Cookies.set("theme", "light", { expires: 365 });
+};
+
+export const setDarkTheme = () => {
+  console.log("Setting dark theme");
+  document.documentElement.classList.add("dark");
+  document.body.classList.add("dark");
+  Cookies.set("theme", "dark", { expires: 365 });
+};
+
+export type ToastType = "success" | "error" | "info" | "warning";
+
+export const myToast = (message: string, msgType: ToastType) => {
+  let config: ToastOptions = {
+    position: "top-right",
+    autoClose: 5000,
+    hideProgressBar: false,
+    closeOnClick: true,
+    pauseOnHover: true,
+    draggable: true,
+    progress: undefined,
+    theme: "dark",
+  };
+  toast[msgType](message, config);
+};

frontend_admin/src/utils/useUsers.ts

@@ -1,4 +1,6 @@
-import { useState, useEffect } from "react";
+import { useState, type Dispatch, type SetStateAction } from "react";
+import Cookies from "js-cookie";
+import { myToast } from "./frontendService";
 
 export interface User {
   id: number;
@@ -11,20 +13,139 @@ export interface User {
   role: string;
 }
 
-export function useUsers(): User[] {
+export type UserReturn = {
+  users: User[];
+  refresh: () => void;
+  setUsers: Dispatch<SetStateAction<User[]>>;
+  deleteUser: (id: number) => void;
+  updateUser: (id: number) => void;
+};
+
+export function useUsers(): UserReturn {
   const [users, setUsers] = useState<User[]>([]);
 
-  useEffect(() => {
+  const token = Cookies.get("token");
-    const data = localStorage.getItem("users");
-    if (data) {
-      try {
-        const parsed = JSON.parse(data);
-        setUsers(parsed.result || []);
-      } catch {
-        setUsers([]);
-      }
-    }
-  }, []);
 
-  return users;
+  const headers = {
+    "Content-Type": "application/json",
+    Authorization: `Bearer ${token}`,
+  };
+
+  const fetchUsers = async () => {
+    try {
+      const response = await fetch("http://localhost:5002/api/getAllUsers", {
+        method: "GET",
+        headers: headers,
+      });
+      if (response.ok) {
+        const data = await response.json();
+        setUsers(data.result);
+        myToast("Users fetched successfully", "success");
+      } else {
+        console.error("Failed to fetch users");
+      }
+    } catch (error) {
+      console.error("Error fetching users:", error);
+    }
+  };
+
+  const deleteUser = (id: number) => {
+    fetch("http://localhost:5002/api/deleteUser", {
+      method: "POST",
+      body: JSON.stringify({ id: id }),
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${Cookies.get("token")}`,
+      },
+    })
+      .then((response) => {
+        if (response.ok) {
+          setUsers((prevUsers) => prevUsers.filter((user) => user.id !== id));
+          myToast("User deleted successfully", "success");
+        } else {
+          alert("Failed to delete user");
+        }
+      })
+      .catch((error) => {
+        console.log("Error deleting user: ", error);
+      });
+  };
+
+  const updateUserFunc = async (userID: number) => {
+    console.log("UpdateFunc" + userID);
+
+    // Validate that required DOM elements exist
+    const usernameEl = document.getElementById(
+      `username-${userID}`
+    ) as HTMLInputElement;
+    const firstNameEl = document.getElementById(
+      `first_name-${userID}`
+    ) as HTMLInputElement;
+    const lastNameEl = document.getElementById(
+      `last_name-${userID}`
+    ) as HTMLInputElement;
+    const emailEl = document.getElementById(
+      `email-${userID}`
+    ) as HTMLInputElement;
+    const passwordEl = document.getElementById(
+      `password-${userID}`
+    ) as HTMLInputElement;
+
+    if (!usernameEl || !firstNameEl || !lastNameEl || !emailEl) {
+      console.error("Required form elements not found");
+      alert("Form elements not found");
+      return;
+    }
+
+    const userData = {
+      id: userID,
+      username: usernameEl.value,
+      first_name: firstNameEl.value,
+      last_name: lastNameEl.value,
+      email: emailEl.value,
+      password: passwordEl?.value || "", // password might be optional
+    };
+
+    console.log("Sending user data:", userData);
+
+    try {
+      const response = await fetch("http://localhost:5002/api/updateUser", {
+        method: "POST",
+        body: JSON.stringify(userData),
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${Cookies.get("token")}`,
+        },
+      });
+
+      console.log("Response status:", response.status);
+      console.log("Response ok:", response.ok);
+
+      if (response.ok) {
+        console.log("User updated successfully");
+        setUsers((prevUsers) =>
+          prevUsers.map((user) =>
+            user.id === userID ? { ...user, ...userData } : user
+          )
+        );
+
+        myToast("User updated successfully", "success");
+      } else {
+        const errorText = await response.text();
+        console.error("Server error:", response.status, errorText);
+        alert(`Failed to update user: ${response.status} - ${errorText}`);
+      }
+    } catch (error) {
+      console.error("Network error updating user:", error);
+      alert("Network error occurred while updating user");
+    }
+  };
+
+  return {
+    users: users,
+    setUsers: setUsers,
+    refresh: () => fetchUsers(),
+    deleteUser: (id: number) => deleteUser(id),
+    updateUser: (id: number) => updateUserFunc(id),
+  };
 }

frontend_admin/src/utils/userHandler.ts

@@ -1,51 +1,33 @@
 import Cookies from "js-cookie";
+import { myToast } from "./frontendService";
 
-export const greeting = () => {
+export const loginUser = async (
-  return Cookies.get("name") ?? "Login";
+  username: string,
-};
+  password: string
-
+): Promise<boolean> => {
-export const loadTheme = () => {
+  try {
-  if (
+    const response = await fetch("http://localhost:5002/api/login", {
-    window.matchMedia &&
+      method: "POST",
-    window.matchMedia("(prefers-color-scheme: dark)").matches
+      headers: { "Content-Type": "application/json" },
-  ) {
+      body: JSON.stringify({ username, password }),
-    // Switch to dark theme
+    });
-    console.log("dark");
+    if (response.ok) {
-    document.documentElement.classList.add("dark");
+      const data = await response.json();
-    document.body.classList.add("dark");
+      Cookies.set("token", data.token); // Set cookie here
-    Cookies.set("theme", "dark", { expires: 365 });
+      Cookies.set("username", username); // Set username cookie
-  } else {
+      return true;
-    // Switch to light theme
+    }
-    console.log("light");
+    return false;
-    document.documentElement.classList.remove("dark");
+  } catch {
-    document.body.classList.remove("dark");
+    return false;
-    Cookies.set("theme", "light", { expires: 365 });
-  }
-};
-
-export const changeTheme = () => {
-  if (Cookies.get("theme") === "dark") {
-    // Switch to light theme
-    console.log("light");
-    document.documentElement.classList.remove("dark");
-    document.body.classList.remove("dark");
-    Cookies.set("theme", "light", { expires: 365 });
-  } else if (Cookies.get("theme") === "light") {
-    // Switch to dark theme
-    console.log("dark");
-    document.documentElement.classList.add("dark");
-    document.body.classList.add("dark");
-    Cookies.set("theme", "dark", { expires: 365 });
-  } else {
-    console.error("Theme not set or recognized");
   }
 };
 
 export const logout = () => {
-  Cookies.remove("name");
+  Cookies.remove("username");
   Cookies.remove("token");
   localStorage.removeItem("users");
-  window.location.reload();
+  myToast("Logged out successfully!", "info");
 };
 
 export const deleteUser = (id: number) => {

frontend_admin/tailwind.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+    // add other paths if needed
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "bikelane",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}