commited with bugs

Going to fix this in one of the next commits.

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,105 +13,10 @@ app.use(express.json());
 app.use(cors());
 app.use(cookieParser());
 
-app.post("/api/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" });
-  }
-});
-
-app.get("/api/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");
-  }
-});
-
-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.use("/api", router);
 
 app.listen(port, () => {
-  console.log(`Express backend server is running at http://localhost:${port}`);
+  console.log(`Express backend server is running at http://45.133.75.67:5002:${port}`);
 });
 
 // error handling code

docker-compose.yml

@@ -1,33 +1,42 @@
 services:
-  #  admin_react-frontend:
-  #    container_name: bikelane-frontend_react-admin
-  #    build: ./frontend_admin
-  #    ports:
-  #      - "5001:5001"
-  #    environment:
-  #      - CHOKIDAR_USEPOLLING=true
-  #    volumes:
-  #      - ./frontend_admin:/app
-  #      - /app/node_modules
-  #    restart: unless-stopped
+  admin_react-frontend:
+    container_name: bikelane-frontend_react-admin
+    build: ./frontend_admin
+    ports:
+      - "5001:5001"
+    networks:
+      - proxynet
+      - bikelane_network
+    environment:
+      - CHOKIDAR_USEPOLLING=true
+    volumes:
+      - ./frontend_admin:/app
+      - /app/node_modules
+    restart: unless-stopped
 
-  #  user_react-frontend:
-  #    container_name: bikelane-frontend_react-user
-  #    build: ./frontend_user
-  #    ports:
-  #      - "5003:5003"
-  #    environment:
-  #      - CHOKIDAR_USEPOLLING=true
-  #    volumes:
-  #      - ./frontend_user:/app
-  #      - /app/node_modules
-  #    restart: unless-stopped
+  user_react-frontend:
+    container_name: bikelane-frontend_react-user
+    build: ./frontend_user
+    networks:
+      - proxynet
+      - bikelane_network
+    ports:
+      - "5003:5003"
+    environment:
+      - CHOKIDAR_USEPOLLING=true
+    volumes:
+      - ./frontend_user:/app
+      - /app/node_modules
+    restart: unless-stopped
 
   bikelane-backend:
     container_name: bikelane-backend_express
     build: ./backend
     ports:
       - "5002:5002"
+    networks:
+      - proxynet
+      - bikelane_network
     environment:
       DB_HOST: mysql
       DB_USER: root
@@ -43,6 +52,8 @@ services:
     container_name: bikelane-mysql
     image: mysql:8.0
     restart: unless-stopped
+    networks:
+      - bikelane_network
     environment:
       MYSQL_ROOT_PASSWORD: D7Ze0lwV9hMrNQHdz1Q8yi0MIQuOO8
       MYSQL_DATABASE: bikelane
@@ -53,3 +64,9 @@ services:
 
 volumes:
   mysql-data:
+
+networks:
+  proxynet:
+    external: true
+  bikelane_network:
+    external: false

frontend_admin/.env

@@ -0,0 +1 @@
+REACT_APP_SERVER_URL=http://45.133.75.67

frontend_admin/package-lock.json

@@ -12,6 +12,7 @@
         "@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",
@@ -2640,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",

frontend_admin/package.json

@@ -15,6 +15,7 @@
     "@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",

frontend_admin/src/App.tsx

@@ -4,13 +4,15 @@ import UserTable from "./components/UserTable";
 import LoginCard from "./components/LoginCard";
 import { useEffect, useState } from "react";
 import { loadTheme } from "./utils/frontendService";
+import { myToast } from "./utils/frontendService";
 import "react-toastify/dist/ReactToastify.css";
-import Cookies from "js-cookie";
-import { AuthContext } from "./utils/context";
 
 function App() {
   useEffect(() => {
     loadTheme();
+    if (Cookies.get("token")) {
+      myToast("User list updated", "success");
+    }
   }, []);
 
   const [isAuthenticated, setIsAuthenticated] = useState(

frontend_admin/src/utils/userHandler.ts

@@ -1,58 +1,17 @@
 import Cookies from "js-cookie";
 import { myToast } from "./frontendService";
 
-export const loginUser = async (
-  username: string,
-  password: string
-): Promise<boolean> => {
-  try {
-    const response = await fetch("http://localhost:5002/api/login", {
+export const loginUser = (username: string, password: string) => {
+  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); // Set cookie here
-      Cookies.set("username", username); // Set username cookie
-      return true;
-    }
-    return false;
-  } catch {
-    return false;
-  }
-};
-
-export const logout = () => {
-  Cookies.remove("username");
-  Cookies.remove("token");
-  localStorage.removeItem("users");
-  myToast("Logged out successfully!", "info");
-};
-
-export 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) {
-        replaceUsers();
-      } else {
-        alert("Failed to delete user");
-      }
-    })
-    .catch((error) => {
-      console.log("Error deleting user: ", error);
-    });
-};
-
-export const replaceUsers = async () => {
-  localStorage.removeItem("users");
+        Cookies.set("token", data.token, { expires: 7 });
+        Cookies.set("name", data.user.first_name, { expires: 7 });
         await fetch("http://localhost:5002/api/getAllUsers", {
           method: "GET",
           headers: {
@@ -62,7 +21,59 @@ export const replaceUsers = async () => {
           .then((res) => res.json())
           .then((users) => {
             localStorage.setItem("users", JSON.stringify(users));
-      window.location.reload();
+          });
+        myToast("Logged in successfully!", "success");
+      } else if (response.status === 401) {
+        myToast("Invalid username or password!", "error");
+      } else if (response.status === 403) {
+        myToast("You are not an Admin!", "error");
+      }
+    })
+    .catch((error) => {
+      console.log("Login failed: ", error);
+    });
+};
+
+export const logout = () => {
+  Cookies.remove("username");
+  Cookies.remove("token");
+  localStorage.removeItem("users");
+  myToast("Logged out successfully!", "success");
+};
+
+export const deleteUser = (id: number) => {
+  fetch("http://45.133.75.67: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) {
+        replaceUsers("User deleted successfully!");
+      } else {
+        myToast("Failed to delete user", "error");
+      }
+    })
+    .catch((error) => {
+      console.log("Error deleting user: ", error);
+    });
+};
+
+export const replaceUsers = async (alertMessage: string) => {
+  localStorage.removeItem("users");
+  await fetch("http://45.133.75.67:5002/api/getAllUsers", {
+    method: "GET",
+    headers: {
+      Authorization: `Bearer ${Cookies.get("token")}`,
+    },
+  })
+    .then((res) => res.json())
+    .then((users) => {
+      localStorage.setItem("users", JSON.stringify(users));
+      myToast(alertMessage, "success");
     });
 };
 
@@ -88,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;
   }
 
@@ -104,7 +115,7 @@ export const updateUserFunc = async (userID: number) => {
   console.log("Sending user data:", userData);
 
   try {
-    const response = await fetch("http://localhost:5002/api/updateUser", {
+    const response = await fetch("http://45.133.75.67:5002/api/updateUser", {
       method: "POST",
       body: JSON.stringify(userData),
       headers: {
@@ -118,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);

scheme.sql

@@ -11,8 +11,51 @@ CREATE TABLE users (
 );
 
 -- Mock data for users
+INSERT INTO users (username, first_name, last_name, email, password, role)
+VALUES 
+('t', 'John', 'Doe', 'd@example.com', 'g', 'admin');
+
 INSERT INTO users (username, first_name, last_name, email, password)
 VALUES 
 ('test1', 'John', 'Doe', 'jdoe@example.com', '1test'),
-('t', 'John', 'Doe', 'd@example.com', 'g'),
-('test2', 'Alice', 'Smith', 'asmith@example.com', '2test');
+('test2', 'Alice', 'Smith', 'asmith@example.com', '2test'),
+('test3', 'Bob', 'Johnson', 'bjohnson@example.com', '3test'),
+('test4', 'Carol', 'Williams', 'cwilliams@example.com', '4test'),
+('test5', 'David', 'Brown', 'dbrown@example.com', '5test'),
+('test6', 'Eve', 'Davis', 'edavis@example.com', '6test'),
+('test7', 'Frank', 'Miller', 'fmiller@example.com', '7test'),
+('test8', 'Grace', 'Wilson', 'gwilson@example.com', '8test'),
+('test9', 'Hank', 'Moore', 'hmoore@example.com', '9test'),
+('test10', 'Ivy', 'Taylor', 'itaylor@example.com', '10test'),
+('test11', 'Jack', 'Anderson', 'janderson@example.com', '11test'),
+('test12', 'Kathy', 'Thomas', 'kthomas@example.com', '12test'),
+('test13', 'Leo', 'Jackson', 'ljackson@example.com', '13test'),
+('test14', 'Mona', 'White', 'mwhite@example.com', '14test'),
+('test15', 'Nina', 'Harris', 'nharris@example.com', '15test'),
+('test16', 'Oscar', 'Martin', 'omartin@example.com', '16test'),
+('test17', 'Paul', 'Thompson', 'pthompson@example.com', '17test'),
+('test18', 'Quinn', 'Garcia', 'qgarcia@example.com', '18test'),
+('test19', 'Rita', 'Martinez', 'rmartinez@example.com', '19test'),
+('test20', 'Sam', 'Robinson', 'srobinson@example.com', '20test'),
+('test21', 'Tina', 'Clark', 'tclark@example.com', '21test'),
+('test22', 'Uma', 'Rodriguez', 'urodriguez@example.com', '22test'),
+('test23', 'Vince', 'Lewis', 'vlewis@example.com', '23test'),
+('test24', 'Wendy', 'Lee', 'wlee@example.com', '24test'),
+('test25', 'Xander', 'Walker', 'xwalker@example.com', '25test'),
+('test26', 'Yara', 'Hall', 'yhall@example.com', '26test'),
+('test27', 'Zane', 'Allen', 'zallen@example.com', '27test'),
+('test28', 'Amy', 'Young', 'ayoung@example.com', '28test'),
+('test29', 'Ben', 'King', 'bking@example.com', '29test'),
+('test30', 'Cathy', 'Wright', 'cwright@example.com', '30test'),
+('test31', 'Dan', 'Scott', 'dscott@example.com', '31test'),
+('test32', 'Ella', 'Green', 'egreen@example.com', '32test'),
+('test33', 'Finn', 'Baker', 'fbaker@example.com', '33test'),
+('test34', 'Gina', 'Adams', 'gadams@example.com', '34test'),
+('test35', 'Hugo', 'Nelson', 'hnelson@example.com', '35test'),
+('test36', 'Iris', 'Carter', 'icarter@example.com', '36test'),
+('test37', 'Jake', 'Mitchell', 'jmitchell@example.com', '37test'),
+('test38', 'Kara', 'Perez', 'kperez@example.com', '38test'),
+('test39', 'Liam', 'Roberts', 'lroberts@example.com', '39test'),
+('test40', 'Mia', 'Turner', 'mturner@example.com', '40test'),
+('test41', 'Noah', 'Phillips', 'nphillips@example.com', '41test'),
+('test42', 'Olga', 'Campbell', 'ocampbell@example.com', '42test');