theis.gaedigk/bikelane
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/test'

Browse Source
This commit is contained in:
theis.gaedigk
2025-07-25 12:20:51 +02:00
parent 6a8d13b69b fcb8af574c
commit 9241257d30
11 changed files with 332 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
frontend_admin/src/App.tsx
View File

@@ -1,16 +1,15 @@
import "./App.css";
import Layout from "./layout/Layout";
import { useUsers } from "./utils/useUsers";
import UserTable from "./components/UserTable";
import { useEffect } from "react";
import LoginCard from "./components/LoginCard";
import { 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() {
const users = useUsers();
useEffect(() => {
loadTheme();
if (Cookies.get("token")) {
@@ -18,10 +17,31 @@ function App() {
}
}, []);
const [isAuthenticated, setIsAuthenticated] = useState(
!!Cookies.get("token")
);
const [showLogin, setShowLogin] = useState(false);
return (
<Layout>
<UserTable users={users} />
</Layout>
<AuthContext.Provider value={{ isAuthenticated, setIsAuthenticated }}>
<Layout>
{isAuthenticated ? (
<UserTable isAuthenticated={isAuthenticated} />
) : (
<>
<LoginCard
onClose={() => setShowLogin(false)}
changeAuth={(loggedIn) => setIsAuthenticated(loggedIn)}
/>
<div className="flex items-center justify-center h-full">
<h2 className="text-2xl font-bold text-gray-700 dark:text-gray-300">
Please log in to view the user table.
</h2>
</div>
</>
)}
</Layout>
</AuthContext.Provider>
);
}

65
frontend_admin/src/components/Header.tsx
View File

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

160
frontend_admin/src/components/LoginCard.tsx
View File

@@ -1,93 +1,85 @@
import React from "react";
import React, { useState, useContext } from "react";
import Cookies from "js-cookie";
import { logout, loginUser } from "../utils/userHandler";
type LoginCardProps = {
onClose: () => void;
};
import { AuthContext } from "../utils/context";
import { myToast } from "../utils/frontendService";
interface LoginCardProps {
onClose: () => void;
changeAuth?: (loggedIn: boolean) => void;
}
const LoginCard: React.FC<LoginCardProps> = ({ onClose, changeAuth }) => {
const [username, setUsername] = useState("");
const [password, setPassword] = useState("");
const [error, setError] = useState("");
const { setIsAuthenticated } = useContext(AuthContext);
const handleLogin = async (e: React.FormEvent) => {
e.preventDefault();
setError("");
try {
const response = await fetch("http://localhost:5002/api/login", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ username, password }),
});
const data = await response.json();
if (response.ok && data.token) {
Cookies.set("token", data.token);
Cookies.set("firstName", data.user.first_name);
setIsAuthenticated(true);
if (changeAuth) changeAuth(true);
onClose();
myToast("Login successful!", "success");
} else {
myToast("Login failed!", "error");
setError(data.message || "Login fehlgeschlagen");
}
} catch (err) {
setError("Netzwerkfehler");
}
};
const LoginCard: React.FC<LoginCardProps> = ({ onClose }) => {
return (
<div className="fixed inset-0 flex items-center justify-center bg-black/35">
<div className="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}
aria-label="Close"
>
&times;
</button>
<h2 className="text-black dark:text-white text-2xl font-bold mb-6 text-center">
<div className="fixed inset-0 z-50 pointer-events-none">
{/* Overlay */}
<div className="absolute inset-0 bg-white bg-opacity-40 backdrop-blur-sm pointer-events-auto"></div>
{/* Card oben am Dashboard */}
<form
onSubmit={handleLogin}
className="absolute left-1/2 -translate-x-1/2 top-10 z-10 bg-white dark:bg-gray-900 rounded-2xl shadow-2xl px-8 py-10 flex flex-col gap-6 min-w-[340px] max-w-[90vw] border border-blue-200 dark:border-gray-800 pointer-events-auto"
>
<h2 className="text-2xl font-bold text-center text-blue-700 dark:text-blue-200 mb-2">
Login
</h2>
<form
onSubmit={async (event) => {
event.preventDefault();
const formData = new FormData(event.currentTarget);
const username = formData.get("username");
const password = formData.get("password");
loginUser(username as string, password as string);
}}
className="space-y-4 text-black dark:text-white"
>
<div>
<label
htmlFor="username"
className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
>
Username
</label>
<input
type="text"
name="username"
required
id="username"
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 dark:text-gray-300 mb-1"
>
Password
</label>
<input
type="password"
name="password"
required
id="password"
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") ? (
<p></p>
) : (
<input
type="submit"
value="Login"
className="w-full bg-blue-600 text-white font-semibold py-2 rounded-md hover:bg-blue-700 transition"
/>
)}
</form>
{Cookies.get("name") ? (
<button
className="w-full bg-black 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 dark:text-gray-400 mt-4">
Don't have an account?{" "}
<a
href="/register"
className="text-blue-600 dark:text-blue-400 hover:underline"
>
Register here
</a>
</p>
{error && (
<div className="text-red-600 text-center font-semibold">{error}</div>
)}
</div>
<input
type="text"
placeholder="Benutzername"
value={username}
onChange={(e) => setUsername(e.target.value)}
className="border border-blue-300 dark:border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-800 dark:text-white"
required
/>
<input
type="password"
placeholder="Passwort"
value={password}
onChange={(e) => setPassword(e.target.value)}
className="border border-blue-300 dark:border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-gray-800 dark:text-white"
required
/>
<div className="flex gap-3 mt-2 justify-center">
<button
type="submit"
className="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-5 py-2 rounded-lg shadow transition"
>
Login
</button>
</div>
</form>
</div>
);
};

33
frontend_admin/src/components/UserTable.tsx
View File

@@ -1,6 +1,6 @@
import { MoreVertical } from "lucide-react";
import React, { useEffect, useState } from "react";
import { deleteUser, updateUserFunc } from "../utils/userHandler.ts";
import { useEffect, useState } from "react";
import { useUsers } from "../utils/useUsers.ts";
interface User {
id: number;
@@ -14,16 +14,25 @@ interface User {
}
interface UserTableProps {
users: User[];
isAuthenticated: boolean;
}
const UserTable: React.FC<UserTableProps> = ({ users }) => {
const UserTable: React.FC<UserTableProps> = ({ isAuthenticated }) => {
const [openMenu, setOpenMenu] = useState<number | null>(null);
const [userList, setUserList] = useState<User[]>(users);
const {
users,
refresh: refreshUsers,
setUsers,
deleteUser,
updateUser: updateUserFunc,
} = useUsers();
useEffect(() => {
setUserList(users);
}, [users]);
if (isAuthenticated) {
refreshUsers();
}
}, [isAuthenticated]);
const handleMenuClick = (userId: number) => {
setOpenMenu(openMenu === userId ? null : userId);
@@ -32,8 +41,10 @@ const UserTable: React.FC<UserTableProps> = ({ users }) => {
const handleMenuClose = () => setOpenMenu(null);
const handleInputChange = (id: number, field: keyof User, value: string) => {
setUserList((prev) =>
prev.map((user) => (user.id === id ? { ...user, [field]: value } : user))
setUsers((prevUsers) =>
prevUsers.map((user) =>
user.id === id ? { ...user, [field]: value } : user
)
);
};
@@ -71,9 +82,9 @@ const UserTable: React.FC<UserTableProps> = ({ users }) => {
</tr>
</thead>
<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, idx) => {
{(users ?? []).map((user, idx) => {
// If this is one of the last 2 rows, open menu upwards
const openUp = idx >= userList.length - 2;
const openUp = idx >= users.length - 2;
return (
<tr
key={user.id}

17
frontend_admin/src/layout/Layout.tsx
View File

@@ -1,6 +1,5 @@
import React from "react";
import Header from "../components/Header";
import Cookies from "js-cookie";
import Sidebar from "../components/Sidebar";
import { ToastContainer } from "react-toastify";
@@ -9,23 +8,15 @@ type LayoutProps = {
};
const Layout: React.FC<LayoutProps> = ({ children }) => {
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 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 dark:bg-gray-900/80 rounded-l-3xl shadow-2xl m-6 overflow-auto text-black dark:text-white">
{children}
</main>
</>
)}
<Sidebar />
<main className="flex-1 p-10 bg-white/80 dark:bg-gray-900/80 rounded-l-3xl shadow-2xl m-6 overflow-auto text-black dark:text-white">
{children}
</main>
</div>
<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">

9
frontend_admin/src/utils/context.ts Normal file
View File

@@ -0,0 +1,9 @@
import React from "react";
export const AuthContext = React.createContext<{
isAuthenticated: boolean;
setIsAuthenticated: (auth: boolean) => void;
}>({
isAuthenticated: false,
setIsAuthenticated: () => {},
});

3
frontend_admin/src/utils/context.tsx Normal file
View File

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

2
frontend_admin/src/utils/frontendService.ts
View File

@@ -2,7 +2,7 @@ import Cookies from "js-cookie";
import { toast, type ToastOptions } from "react-toastify";
export const greeting = () => {
return Cookies.get("name") ?? "Login";
return Cookies.get("username") ?? "Login";
};
export const loadTheme = () => {

149
frontend_admin/src/utils/useUsers.ts
View File

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

51
frontend_admin/src/utils/userHandler.ts
View File

@@ -1,41 +1,30 @@
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://localhost: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("name");
Cookies.remove("username");
Cookies.remove("token");
localStorage.removeItem("users");
myToast("Logged out successfully!", "success");

6
package-lock.json generated Normal file
View File

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