4 Commits

16 changed files with 156 additions and 431 deletions

View File

@@ -1,110 +0,0 @@
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;

View File

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

View File

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

View File

@@ -1,12 +1,13 @@
FROM node:20-alpine
# Build Stage
FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
# Production Stage
FROM nginx:stable-alpine AS production
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 5001
CMD ["npm", "start"]
CMD ["nginx", "-g", "daemon off;"]

View File

@@ -1,67 +0,0 @@
import React, { useState } from "react";
import "./App.css";
import Header from "./Header";
function App() {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
try {
const response = await fetch("http://localhost:5002/api/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
username,
password,
}),
});
if (response.ok) {
console.log("Login successful");
// Handle successful login here
} else {
console.log("Login failed");
// Handle login error here
}
} catch (error) {
console.error("Login error:", error);
}
};
return (
<>
<form onSubmit={handleSubmit}>
<div>
<label htmlFor="username">Username:</label>
<input
type="text"
id="username"
name="username"
value={username}
onChange={(e) => setUsername(e.target.value)}
required
/>
</div>
<div>
<label htmlFor="password">Password:</label>
<input
type="password"
id="password"
name="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
</div>
<button type="submit">Login</button>
</form>
</>
);
}
export default App;

View File

@@ -1,30 +0,0 @@
import React, { useState } from "react";
import Header from "./components/Header";
import LoginCard from "./components/LoginCard";
function App() {
const [showLogin, setShowLogin] = useState(false);
const handleLoginClick = () => setShowLogin(true);
const handleCloseLogin = () => setShowLogin(false);
const handleLoginSubmit = (username: string, password: string) => {
// Hier kannst du fetch einbauen
alert(`Login: ${username} / ${password}`);
setShowLogin(false);
};
return (
<div className="min-h-screen bg-white">
<Header onLoginClick={handleLoginClick} />
<main className="pt-20 w-full h-full flex flex-col items-center justify-start">
{/* Hier kommt später der Seiteninhalt */}
{showLogin && (
<LoginCard onClose={handleCloseLogin} onSubmit={handleLoginSubmit} />
)}
</main>
</div>
);
}
export default App;

View File

@@ -1,29 +0,0 @@
import React from "react";
import bike from "../../src/assets/bicycle-solid.svg";
import user from "../../src/assets/circle-user-solid.svg";
type HeaderProps = {
onLoginClick: () => void;
};
const Header: React.FC<HeaderProps> = ({ onLoginClick }) => (
<header className="fixed top-0 left-0 w-full h-20 bg-[#101c5e] flex items-center justify-between px-10 z-50 shadow">
<div className="flex items-center gap-3">
<img src={bike} alt="Bike Logo" className="h-10 w-10" />
<span className="text-white text-2xl font-semibold select-none">
Bikelane <b>Web</b>
</span>
</div>
<div className="flex items-center gap-4">
<img src={user} alt="User Icon" className="h-8 w-8" />
<button
onClick={onLoginClick}
className="bg-white text-[#101c5e] font-bold px-5 py-1 rounded-lg text-lg border-2 border-white hover:bg-gray-200 transition"
>
Login
</button>
</div>
</header>
);
export default Header;

View File

@@ -1,72 +0,0 @@
import React, { useRef, useEffect } from "react";
type LoginCardProps = {
onClose: () => void;
onSubmit: (username: string, password: string) => void;
};
const LoginCard: React.FC<LoginCardProps> = ({ onClose, onSubmit }) => {
const [username, setUsername] = React.useState("");
const [password, setPassword] = React.useState("");
const cardRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const handler = (e: MouseEvent) => {
if (cardRef.current && !cardRef.current.contains(e.target as Node)) {
onClose();
}
};
document.addEventListener("mousedown", handler);
return () => document.removeEventListener("mousedown", handler);
}, [onClose]);
return (
<div className="fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center z-40">
<div
ref={cardRef}
className="bg-gray-200 rounded-xl shadow-lg w-full max-w-md flex flex-col"
>
<div className="bg-[#101c5e] text-white rounded-t-xl px-8 py-4 text-center text-2xl font-bold">
Login
</div>
<form
className="flex flex-col gap-5 px-8 py-6"
onSubmit={(e) => {
e.preventDefault();
onSubmit(username, password);
}}
>
<label className="font-bold">
username
<input
type="text"
className="mt-2 w-full rounded-full px-5 py-2 bg-gray-400 outline-none"
value={username}
onChange={(e) => setUsername(e.target.value)}
autoFocus
required
/>
</label>
<label className="font-bold">
password
<input
type="password"
className="mt-2 w-full rounded-full px-5 py-2 bg-gray-400 outline-none"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
</label>
<button
type="submit"
className="bg-[#101c5e] text-white font-bold rounded-lg py-3 mt-6 text-xl hover:bg-[#203080] transition"
>
Login
</button>
</form>
</div>
</div>
);
};
export default LoginCard;

View File

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

View File

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

View File

@@ -4,21 +4,19 @@ 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(
!!Cookies.get("token")
);
const [showLogin, setShowLogin] = useState(false);
const [, setShowLogin] = useState(false);
return (
<AuthContext.Provider value={{ isAuthenticated, setIsAuthenticated }}>

View File

@@ -18,7 +18,7 @@ const LoginCard: React.FC<LoginCardProps> = ({ onClose, changeAuth }) => {
e.preventDefault();
setError("");
try {
const response = await fetch("http://localhost:5002/api/login", {
const response = await fetch("http://45.133.75.67:5002/api/login", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ username, password }),

View File

@@ -33,7 +33,7 @@ export function useUsers(): UserReturn {
const fetchUsers = async () => {
try {
const response = await fetch("http://localhost:5002/api/getAllUsers", {
const response = await fetch("http://45.133.75.67:5002/api/getAllUsers", {
method: "GET",
headers: headers,
});
@@ -50,7 +50,7 @@ export function useUsers(): UserReturn {
};
const deleteUser = (id: number) => {
fetch("http://localhost:5002/api/deleteUser", {
fetch("http://45.133.75.67:5002/api/deleteUser", {
method: "POST",
body: JSON.stringify({ id: id }),
headers: {
@@ -109,7 +109,7 @@ export function useUsers(): UserReturn {
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: {

View File

@@ -1,44 +1,33 @@
import Cookies from "js-cookie";
import { myToast } from "./frontendService";
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, { expires: 7 });
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));
});
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 loginUser = async (
username: string,
password: string
): Promise<boolean> => {
try {
const response = await fetch("http://45.133.75.67:5002/api/login", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ username, password }),
});
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!", "success");
myToast("Logged out successfully!", "info");
};
export const deleteUser = (id: number) => {
@@ -52,9 +41,9 @@ export const deleteUser = (id: number) => {
})
.then((response) => {
if (response.ok) {
replaceUsers("User deleted successfully!");
replaceUsers();
} else {
myToast("Failed to delete user", "error");
alert("Failed to delete user");
}
})
.catch((error) => {
@@ -62,7 +51,7 @@ export const deleteUser = (id: number) => {
});
};
export const replaceUsers = async (alertMessage: string) => {
export const replaceUsers = async () => {
localStorage.removeItem("users");
await fetch("http://45.133.75.67:5002/api/getAllUsers", {
method: "GET",
@@ -73,7 +62,7 @@ export const replaceUsers = async (alertMessage: string) => {
.then((res) => res.json())
.then((users) => {
localStorage.setItem("users", JSON.stringify(users));
myToast(alertMessage, "success");
window.location.reload();
});
};
@@ -99,7 +88,7 @@ export const updateUserFunc = async (userID: number) => {
if (!usernameEl || !firstNameEl || !lastNameEl || !emailEl) {
console.error("Required form elements not found");
myToast("Form elements not found", "error");
alert("Form elements not found");
return;
}
@@ -129,7 +118,7 @@ export const updateUserFunc = async (userID: number) => {
if (response.ok) {
console.log("User updated successfully");
replaceUsers("User updated successfully!");
replaceUsers();
} else {
const errorText = await response.text();
console.error("Server error:", response.status, errorText);

View File

@@ -1,12 +1,13 @@
FROM node:20-alpine
# Build Stage
FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
# Production Stage
FROM nginx:stable-alpine AS production
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 5003
CMD ["npm", "start"]
CMD ["nginx", "-g", "daemon off;"]

View File

@@ -11,51 +11,8 @@ 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'),
('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');
('t', 'John', 'Doe', 'd@example.com', 'g'),
('test2', 'Alice', 'Smith', 'asmith@example.com', '2test');