3 Commits

Author SHA1 Message Date
489b29d8e5 changed server url 2025-07-24 20:01:41 +02:00
e98c6474f0 feat: update server URL and enhance Docker configuration with user frontends 2025-07-24 19:43:10 +02:00
850c475329 added functional badges. You still have to reload the page manually aft every event.
Going to fix this in one of the next commits.
2025-07-24 19:10:27 +02:00
8 changed files with 114 additions and 37 deletions

View File

@@ -118,7 +118,7 @@ app.post("/api/updateUser", authenticate, async (req, res) => {
}); });
app.listen(port, () => { 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 // error handling code

View File

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

1
frontend_admin/.env Normal file
View File

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

View File

@@ -12,6 +12,7 @@
"@tanstack/react-table": "^8.21.3", "@tanstack/react-table": "^8.21.3",
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"dotenv": "^17.2.0",
"js-cookie": "^3.0.5", "js-cookie": "^3.0.5",
"lucide-react": "^0.525.0", "lucide-react": "^0.525.0",
"react": "^19.1.0", "react": "^19.1.0",
@@ -2640,6 +2641,18 @@
"tslib": "^2.0.3" "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": { "node_modules/electron-to-chromium": {
"version": "1.5.187", "version": "1.5.187",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.187.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.187.tgz",

View File

@@ -15,6 +15,7 @@
"@tanstack/react-table": "^8.21.3", "@tanstack/react-table": "^8.21.3",
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"dotenv": "^17.2.0",
"js-cookie": "^3.0.5", "js-cookie": "^3.0.5",
"lucide-react": "^0.525.0", "lucide-react": "^0.525.0",
"react": "^19.1.0", "react": "^19.1.0",

View File

@@ -4,6 +4,7 @@ import { useUsers } from "./utils/useUsers";
import UserTable from "./components/UserTable"; import UserTable from "./components/UserTable";
import { useEffect } from "react"; import { useEffect } from "react";
import { loadTheme } from "./utils/frontendService"; import { loadTheme } from "./utils/frontendService";
import { myToast } from "./utils/frontendService";
import "react-toastify/dist/ReactToastify.css"; import "react-toastify/dist/ReactToastify.css";
function App() { function App() {
@@ -11,6 +12,7 @@ function App() {
useEffect(() => { useEffect(() => {
loadTheme(); loadTheme();
myToast("User list updated", "success");
}, []); }, []);
return ( return (

View File

@@ -2,7 +2,7 @@ import Cookies from "js-cookie";
import { myToast } from "./frontendService"; import { myToast } from "./frontendService";
export const loginUser = (username: string, password: string) => { export const loginUser = (username: string, password: string) => {
fetch("http://localhost:5002/api/login", { fetch(`http://45.133.75.67:5002/api/login`, {
method: "POST", method: "POST",
headers: { "Content-Type": "application/json" }, headers: { "Content-Type": "application/json" },
body: JSON.stringify({ username, password }), body: JSON.stringify({ username, password }),
@@ -12,7 +12,7 @@ export const loginUser = (username: string, password: string) => {
const data = await response.json(); const data = await response.json();
Cookies.set("token", data.token, { expires: 7 }); Cookies.set("token", data.token, { expires: 7 });
Cookies.set("name", data.user.first_name, { expires: 7 }); Cookies.set("name", data.user.first_name, { expires: 7 });
await fetch("http://localhost:5002/api/getAllUsers", { await fetch("http://45.133.75.67:5002/api/getAllUsers", {
method: "GET", method: "GET",
headers: { headers: {
Authorization: `Bearer ${Cookies.get("token")}`, Authorization: `Bearer ${Cookies.get("token")}`,
@@ -38,11 +38,11 @@ export const logout = () => {
Cookies.remove("name"); Cookies.remove("name");
Cookies.remove("token"); Cookies.remove("token");
localStorage.removeItem("users"); localStorage.removeItem("users");
myToast("Logged out successfully!", "info"); myToast("Logged out successfully!", "success");
}; };
export const deleteUser = (id: number) => { export const deleteUser = (id: number) => {
fetch("http://localhost:5002/api/deleteUser", { fetch("http://45.133.75.67:5002/api/deleteUser", {
method: "POST", method: "POST",
body: JSON.stringify({ id: id }), body: JSON.stringify({ id: id }),
headers: { headers: {
@@ -52,9 +52,9 @@ export const deleteUser = (id: number) => {
}) })
.then((response) => { .then((response) => {
if (response.ok) { if (response.ok) {
replaceUsers(); replaceUsers("User deleted successfully!");
} else { } else {
alert("Failed to delete user"); myToast("Failed to delete user", "error");
} }
}) })
.catch((error) => { .catch((error) => {
@@ -62,9 +62,9 @@ export const deleteUser = (id: number) => {
}); });
}; };
export const replaceUsers = async () => { export const replaceUsers = async (alertMessage: string) => {
localStorage.removeItem("users"); localStorage.removeItem("users");
await fetch("http://localhost:5002/api/getAllUsers", { await fetch("http://45.133.75.67:5002/api/getAllUsers", {
method: "GET", method: "GET",
headers: { headers: {
Authorization: `Bearer ${Cookies.get("token")}`, Authorization: `Bearer ${Cookies.get("token")}`,
@@ -73,7 +73,7 @@ export const replaceUsers = async () => {
.then((res) => res.json()) .then((res) => res.json())
.then((users) => { .then((users) => {
localStorage.setItem("users", JSON.stringify(users)); localStorage.setItem("users", JSON.stringify(users));
window.location.reload(); myToast(alertMessage, "success");
}); });
}; };
@@ -99,7 +99,7 @@ export const updateUserFunc = async (userID: number) => {
if (!usernameEl || !firstNameEl || !lastNameEl || !emailEl) { if (!usernameEl || !firstNameEl || !lastNameEl || !emailEl) {
console.error("Required form elements not found"); console.error("Required form elements not found");
alert("Form elements not found"); myToast("Form elements not found", "error");
return; return;
} }
@@ -115,7 +115,7 @@ export const updateUserFunc = async (userID: number) => {
console.log("Sending user data:", userData); console.log("Sending user data:", userData);
try { try {
const response = await fetch("http://localhost:5002/api/updateUser", { const response = await fetch("http://45.133.75.67:5002/api/updateUser", {
method: "POST", method: "POST",
body: JSON.stringify(userData), body: JSON.stringify(userData),
headers: { headers: {
@@ -129,7 +129,7 @@ export const updateUserFunc = async (userID: number) => {
if (response.ok) { if (response.ok) {
console.log("User updated successfully"); console.log("User updated successfully");
replaceUsers(); replaceUsers("User updated successfully!");
} else { } else {
const errorText = await response.text(); const errorText = await response.text();
console.error("Server error:", response.status, errorText); console.error("Server error:", response.status, errorText);

View File

@@ -11,8 +11,51 @@ CREATE TABLE users (
); );
-- Mock data for 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) INSERT INTO users (username, first_name, last_name, email, password)
VALUES VALUES
('test1', 'John', 'Doe', 'jdoe@example.com', '1test'), ('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');