shortened the server.js file

Going to fix this in one of the next commits.

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/routes/api.js

@@ -0,0 +1,110 @@
+import express from "express";
+import {
+  loginUser,
+  createUser,
+  updateUser,
+  deleteUser,
+  getAllUsers,
+} from "../services/database.js";
+import { generateToken, authenticate } from "../services/tokenService.js";
+
+const router = express.Router();
+
+router.post("/login", async (req, res) => {
+  try {
+    const result = await loginUser(req.body.username, req.body.password);
+    if (result.success && result.user.role === "admin") {
+      const userToken = await generateToken({
+        role: result.user.role,
+        username: result.user.username,
+      });
+      console.log("User token generated: ", userToken);
+      res.status(200).json({
+        success: true,
+        message: "Login successful",
+        token: userToken,
+        ...result,
+      });
+    } else if (result.success && result.user.role === "user") {
+      res.status(403).json(result, { message: "You are not an Admin!" }); // Event Handler is in LoginCard.tsx - there is defined what happens when the status is 403
+    } else {
+      res.status(401).json(result, { message: "Invalid credentials" }); // Event Handler is in LoginCard.tsx - there is defined what happens when the status is 401
+    }
+  } catch (err) {
+    console.error("Error logging in:", err);
+    res.status(500).json({ success: false, message: "Internal server error" });
+  }
+});
+
+router.get("/getAllUsers", authenticate, async (req, res) => {
+  if (req.user.role === "admin") {
+    getAllUsers()
+      .then((users) => {
+        res.status(200).json(users);
+      })
+      .catch((err) => {
+        console.error("Error fetching users:", err);
+        res
+          .status(500)
+          .json({ success: false, message: "Internal server error" });
+      });
+    console.log("Fetched all users successfully");
+  } else if (req.user.role === "user") {
+    res.status(403).json({ success: false, message: "Access denied" });
+    console.log("Access denied for user role");
+  } else {
+    res.status(500).json({ success: false, message: "Server error" });
+    console.log("Server error while fetching users");
+  }
+});
+
+router.post("/deleteUser", authenticate, async (req, res) => {
+  if (req.user.role === "admin") {
+    deleteUser(req.body.id)
+      .then((result) => {
+        if (result.success) {
+          res.status(200).json(result);
+        } else {
+          throw new Error("Failed to delete user");
+        }
+      })
+      .catch((err) => {
+        console.error("Error deleting user:", err);
+        res
+          .status(500)
+          .json({ success: false, message: "Internal server error" });
+      });
+    console.log("User deleted successfully");
+  } else {
+    console.log("Access denied for user role");
+  }
+});
+
+router.post("/updateUser", authenticate, async (req, res) => {
+  if (req.user.role === "admin") {
+    updateUser(
+      req.body.username,
+      req.body.first_name,
+      req.body.last_name,
+      req.body.password,
+      req.body.email,
+      req.body.id
+    )
+      .then((result) => {
+        if (result.success) {
+          res.status(200).json(result);
+        } else {
+          throw new Error("Failed to update user");
+        }
+      })
+      .catch((err) => {
+        console.error("Error updating user:", err);
+        res
+          .status(500)
+          .json({ success: false, message: "Internal server error" });
+      });
+    console.log("User updated successfully");
+  }
+});
+
+export default router;

backend/server.js

@@ -3,15 +3,8 @@ import express from "express";
 import cors from "cors";
 const app = express();
 const port = 5002;
-import {
-  loginUser,
-  createUser,
-  updateUser,
-  deleteUser,
-  getAllUsers,
-} from "./services/database.js";
-import { generateToken, authenticate } from "./services/tokenService.js";
 import cookieParser from "cookie-parser";
+import router from "./routes/api.js";
 
 //view engine ejs
 app.set("view engine", "ejs");
@@ -20,102 +13,7 @@ app.use(express.json());
 app.use(cors());
 app.use(cookieParser());
 
-app.post("/api/login", async (req, res) => {
+app.use("/api", router);
-  try {
-    const result = await loginUser(req.body.username, req.body.password);
-    if (result.success && result.user.role === "admin") {
-      const userToken = await generateToken({
-        role: result.user.role,
-        username: result.user.username,
-      });
-      console.log("User token generated: ", userToken);
-      res.status(200).json({
-        success: true,
-        message: "Login successful",
-        token: userToken,
-        ...result,
-      });
-    } else if (result.success && result.user.role === "user") {
-      res.status(403).json(result, { message: "You are not an Admin!" }); // Event Handler is in LoginCard.tsx - there is defined what happens when the status is 403
-    } else {
-      res.status(401).json(result, { message: "Invalid credentials" }); // Event Handler is in LoginCard.tsx - there is defined what happens when the status is 401
-    }
-  } catch (err) {
-    console.error("Error logging in:", err);
-    res.status(500).json({ success: false, message: "Internal server error" });
-  }
-});
-
-app.get("/api/getAllUsers", authenticate, async (req, res) => {
-  if (req.user.role === "admin") {
-    getAllUsers()
-      .then((users) => {
-        res.status(200).json(users).reload();
-      })
-      .catch((err) => {
-        console.error("Error fetching users:", err);
-        res
-          .status(500)
-          .json({ success: false, message: "Internal server error" });
-      });
-    console.log("Fetched all users successfully");
-  } else if (req.user.role === "user") {
-    res.status(403).json({ success: false, message: "Access denied" });
-    console.log("Access denied for user role");
-  } else {
-    res.status(500).json({ success: false, message: "Server error" });
-    console.log("Server error while fetching users");
-  }
-});
-
-app.post("/api/deleteUser", authenticate, async (req, res) => {
-  if (req.user.role === "admin") {
-    deleteUser(req.body.id)
-      .then((result) => {
-        if (result.success) {
-          res.status(200).json(result);
-        } else {
-          throw new Error("Failed to delete user");
-        }
-      })
-      .catch((err) => {
-        console.error("Error deleting user:", err);
-        res
-          .status(500)
-          .json({ success: false, message: "Internal server error" });
-      });
-    console.log("User deleted successfully");
-  } else {
-    console.log("Access denied for user role");
-  }
-});
-
-app.post("/api/updateUser", authenticate, async (req, res) => {
-  if (req.user.role === "admin") {
-    updateUser(
-      req.body.username,
-      req.body.first_name,
-      req.body.last_name,
-      req.body.password,
-      req.body.email,
-      req.body.id
-    )
-      .then((result) => {
-        if (result.success) {
-          res.status(200).json(result);
-        } else {
-          throw new Error("Failed to update user");
-        }
-      })
-      .catch((err) => {
-        console.error("Error updating user:", err);
-        res
-          .status(500)
-          .json({ success: false, message: "Internal server error" });
-      });
-    console.log("User updated successfully");
-  }
-});
 
 app.listen(port, () => {
   console.log(`Express backend server is running at http://localhost:${port}`);

frontend_admin/.env

@@ -0,0 +1 @@
+REACT_APP_SERVER_URL=http://localhost:5002

frontend_admin/package-lock.json

@@ -12,10 +12,12 @@
         "@tanstack/react-table": "^8.21.3",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "dotenv": "^17.2.0",
         "js-cookie": "^3.0.5",
         "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"
@@ -2639,6 +2641,18 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/dotenv": {
+      "version": "17.2.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.2.0.tgz",
+      "integrity": "sha512-Q4sgBT60gzd0BB0lSyYD3xM4YxrXA9y4uBDof1JNYGzOXrQdQ6yX+7XIAqoFOGQFOTK1D3Hts5OllpxMDZFONQ==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.187",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.187.tgz",
@@ -4010,6 +4024,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

@@ -15,10 +15,12 @@
     "@tanstack/react-table": "^8.21.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "dotenv": "^17.2.0",
     "js-cookie": "^3.0.5",
     "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

@@ -3,13 +3,19 @@ import Layout from "./layout/Layout";
 import { useUsers } from "./utils/useUsers";
 import UserTable from "./components/UserTable";
 import { useEffect } from "react";
-import { loadTheme } from "./utils/functions";
+import { loadTheme } from "./utils/frontendService";
+import { myToast } from "./utils/frontendService";
+import "react-toastify/dist/ReactToastify.css";
+import Cookies from "js-cookie";
 
 function App() {
   const users = useUsers();
 
   useEffect(() => {
     loadTheme();
+    if (Cookies.get("token")) {
+      myToast("User list updated", "success");
+    }
   }, []);
 
   return (

frontend_admin/src/components/Header.tsx

@@ -1,8 +1,8 @@
 import { useState } from "react";
 import React from "react";
 import LoginCard from "./LoginCard";
-import { greeting } from "../utils/functions";
+import { greeting } from "../utils/frontendService";
-import { changeTheme } from "../utils/functions";
+import { changeTheme } from "../utils/frontendService";
 
 const Header: React.FC = () => {
   const [loginCardVisible, setLoginCardVisible] = useState(false);
@@ -14,7 +14,7 @@ const Header: React.FC = () => {
   let loginBtnVal: string = "Hello, " + greeting() + "!";
 
   return (
-    <header className="bg-blue-600 text-white p-4 shadow-md">
+    <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>
@@ -25,13 +25,13 @@ const Header: React.FC = () => {
               <a className="hover:underline">
                 <button
                   onClick={() => changeTheme()}
-                  className="bg-blue-700 shadow-md hover:bg-blue-800 transition padding px-4 py-2 rounded-md text-white font-semibold"
+                  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 shadow-md hover:bg-blue-800 transition padding px-4 py-2 rounded-md text-white font-semibold"
+                  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>

frontend_admin/src/components/LoginCard.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Cookies from "js-cookie";
-import { logout } from "../utils/functions";
+import { logout, loginUser } from "../utils/userHandler";
 type LoginCardProps = {
   onClose: () => void;
 };
@@ -8,7 +8,7 @@ type LoginCardProps = {
 const LoginCard: React.FC<LoginCardProps> = ({ onClose }) => {
   return (
     <div className="fixed inset-0 flex items-center justify-center bg-black/35">
-      <div className="max-w-sm bg-white rounded-xl shadow-md p-8 relative">
+      <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}
@@ -16,7 +16,7 @@ const LoginCard: React.FC<LoginCardProps> = ({ onClose }) => {
         >
           &times;
         </button>
-        <h2 className="text-black text-2xl font-bold mb-6 text-center">
+        <h2 className="text-black dark:text-white text-2xl font-bold mb-6 text-center">
           Login
         </h2>
         <form
@@ -25,45 +25,14 @@ const LoginCard: React.FC<LoginCardProps> = ({ onClose }) => {
             const formData = new FormData(event.currentTarget);
             const username = formData.get("username");
             const password = formData.get("password");
-            // Example: send login request
+            loginUser(username as string, password as string);
-            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"
+          className="space-y-4 text-black dark:text-white"
         >
           <div>
             <label
               htmlFor="username"
-              className="block text-sm font-medium text-gray-700 mb-1"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
             >
               Username
             </label>
@@ -72,13 +41,13 @@ const LoginCard: React.FC<LoginCardProps> = ({ onClose }) => {
               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"
+              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 mb-1"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
             >
               Password
             </label>
@@ -87,7 +56,7 @@ const LoginCard: React.FC<LoginCardProps> = ({ onClose }) => {
               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"
+              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") ? (
@@ -102,15 +71,18 @@ const LoginCard: React.FC<LoginCardProps> = ({ onClose }) => {
         </form>
         {Cookies.get("name") ? (
           <button
-            className="w-full bg-black text-white font-semibold py-2 rounded-md hover:bg-green-400 transition"
+            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}
           >
             Logout
           </button>
         ) : (
-          <p className="text-center text-gray-500 mt-4">
+          <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 hover:underline">
+            <a
+              href="/register"
+              className="text-blue-600 dark:text-blue-400 hover:underline"
+            >
               Register here
             </a>
           </p>

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 React, { useEffect, useState } from "react";
-import { useEffect, useState } from "react";
+import { deleteUser, updateUserFunc } from "../utils/userHandler.ts";
-import { deleteUser, updateUserFunc } from "../utils/functions.ts";
 
 interface User {
   id: number;
@@ -39,138 +38,137 @@ const UserTable: React.FC<UserTableProps> = ({ users }) => {
   };
 
   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) => (
+        {userList.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 >= userList.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,42 @@
 import React from "react";
 import Header from "../components/Header";
-import Cookies from "js-cookie"; // Add this import
+import Cookies from "js-cookie";
 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
+  const isLoggedIn = !!Cookies.get("name");
 
   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 */}
             <Sidebar />
             {/* Main content */}
-            <main className="flex-1 p-10 bg-white/80 rounded-l-3xl shadow-2xl m-6 overflow-auto">
+            <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 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/frontendService.ts

@@ -0,0 +1,69 @@
+import Cookies from "js-cookie";
+import { toast, type ToastOptions } from "react-toastify";
+
+export const greeting = () => {
+  return Cookies.get("name") ?? "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/userHandler.ts

@@ -1,51 +1,44 @@
 import Cookies from "js-cookie";
+import { myToast } from "./frontendService";
 
-export const greeting = () => {
+export const loginUser = (username: string, password: string) => {
-  return Cookies.get("name") ?? "Login";
+  fetch(`http://localhost:5002/api/login`, {
-};
+    method: "POST",
-
+    headers: { "Content-Type": "application/json" },
-export const loadTheme = () => {
+    body: JSON.stringify({ username, password }),
-  if (
+  })
-    window.matchMedia &&
+    .then(async (response) => {
-    window.matchMedia("(prefers-color-scheme: dark)").matches
+      if (response.ok) {
-  ) {
+        const data = await response.json();
-    // Switch to dark theme
+        Cookies.set("token", data.token, { expires: 7 });
-    console.log("dark");
+        Cookies.set("name", data.user.first_name, { expires: 7 });
-    document.documentElement.classList.add("dark");
+        await fetch("http://localhost:5002/api/getAllUsers", {
-    document.body.classList.add("dark");
+          method: "GET",
-    Cookies.set("theme", "dark", { expires: 365 });
+          headers: {
-  } else {
+            Authorization: `Bearer ${Cookies.get("token")}`,
-    // Switch to light theme
+          },
-    console.log("light");
+        })
-    document.documentElement.classList.remove("dark");
+          .then((res) => res.json())
-    document.body.classList.remove("dark");
+          .then((users) => {
-    Cookies.set("theme", "light", { expires: 365 });
+            localStorage.setItem("users", JSON.stringify(users));
-  }
+          });
-};
+        myToast("Logged in successfully!", "success");
-
+      } else if (response.status === 401) {
-export const changeTheme = () => {
+        myToast("Invalid username or password!", "error");
-  if (Cookies.get("theme") === "dark") {
+      } else if (response.status === 403) {
-    // Switch to light theme
+        myToast("You are not an Admin!", "error");
-    console.log("light");
+      }
-    document.documentElement.classList.remove("dark");
+    })
-    document.body.classList.remove("dark");
+    .catch((error) => {
-    Cookies.set("theme", "light", { expires: 365 });
+      console.log("Login failed: ", error);
-  } 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("token");
   localStorage.removeItem("users");
-  window.location.reload();
+  myToast("Logged out successfully!", "success");
 };
 
 export const deleteUser = (id: number) => {
@@ -59,9 +52,9 @@ export const deleteUser = (id: number) => {
   })
     .then((response) => {
       if (response.ok) {
-        replaceUsers();
+        replaceUsers("User deleted successfully!");
       } else {
-        alert("Failed to delete user");
+        myToast("Failed to delete user", "error");
       }
     })
     .catch((error) => {
@@ -69,7 +62,7 @@ export const deleteUser = (id: number) => {
     });
 };
 
-export const replaceUsers = async () => {
+export const replaceUsers = async (alertMessage: string) => {
   localStorage.removeItem("users");
   await fetch("http://localhost:5002/api/getAllUsers", {
     method: "GET",
@@ -80,7 +73,7 @@ export const replaceUsers = async () => {
     .then((res) => res.json())
     .then((users) => {
       localStorage.setItem("users", JSON.stringify(users));
-      window.location.reload();
+      myToast(alertMessage, "success");
     });
 };
 
@@ -106,7 +99,7 @@ export const updateUserFunc = async (userID: number) => {
 
   if (!usernameEl || !firstNameEl || !lastNameEl || !emailEl) {
     console.error("Required form elements not found");
-    alert("Form elements not found");
+    myToast("Form elements not found", "error");
     return;
   }
 
@@ -136,7 +129,7 @@ export const updateUserFunc = async (userID: number) => {
 
     if (response.ok) {
       console.log("User updated successfully");
-      replaceUsers();
+      replaceUsers("User updated successfully!");
     } else {
       const errorText = await response.text();
       console.error("Server error:", response.status, errorText);

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: [],
+};