error fixes by gpt
This commit is contained in:
@@ -6,45 +6,44 @@ import { useEffect, useState } from "react";
|
||||
import { loadTheme } from "./utils/frontendService";
|
||||
import "react-toastify/dist/ReactToastify.css";
|
||||
import Cookies from "js-cookie";
|
||||
import { AuthContext } from "./utils/context";
|
||||
|
||||
function App() {
|
||||
useEffect(() => {
|
||||
loadTheme();
|
||||
}, []);
|
||||
|
||||
// Track authentication state
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(
|
||||
!!Cookies.get("token")
|
||||
);
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(!!Cookies.get("token"));
|
||||
const [showLogin, setShowLogin] = useState(false);
|
||||
|
||||
const handleLogout = () => {
|
||||
Cookies.remove("token");
|
||||
setIsAuthenticated(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
{isAuthenticated ? (
|
||||
<UserTable isAuthenticated={isAuthenticated} />
|
||||
) : (
|
||||
<>
|
||||
<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>
|
||||
<button
|
||||
className="ml-4 px-4 py-2 bg-blue-600 text-white rounded"
|
||||
onClick={() => setShowLogin(true)}
|
||||
>
|
||||
Login
|
||||
</button>
|
||||
</div>
|
||||
{showLogin && (
|
||||
<AuthContext.Provider value={{ isAuthenticated, setIsAuthenticated }}>
|
||||
<Layout>
|
||||
{isAuthenticated ? (
|
||||
<UserTable isAuthenticated={isAuthenticated} />
|
||||
) : (
|
||||
<>
|
||||
<LoginCard
|
||||
onClose={() => setShowLogin(false)}
|
||||
changeAuth={(loggedIn) => setIsAuthenticated(loggedIn)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Layout>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default App;
|
||||
|
@@ -1,50 +1,37 @@
|
||||
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";
|
||||
|
||||
export interface HeaderProps {
|
||||
changeAuth?: (isLoggedIn: boolean) => void;
|
||||
}
|
||||
const Header: React.FC = () => {
|
||||
const { isAuthenticated, setIsAuthenticated } = useContext(AuthContext);
|
||||
const username = Cookies.get("username");
|
||||
|
||||
const Header: React.FC<HeaderProps> = ({ changeAuth }) => {
|
||||
const [loginCardVisible, setLoginCardVisible] = useState(false);
|
||||
|
||||
const closeLoginCard = () => {
|
||||
setLoginCardVisible(false);
|
||||
const handleLogout = () => {
|
||||
Cookies.remove("token");
|
||||
Cookies.remove("username");
|
||||
setIsAuthenticated(false);
|
||||
};
|
||||
|
||||
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, {username || "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 changeAuth={changeAuth} onClose={closeLoginCard} />}</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
@@ -1,106 +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 = {
|
||||
import { AuthContext } from "../utils/context";
|
||||
|
||||
interface LoginCardProps {
|
||||
onClose: () => void;
|
||||
changeAuth?: (isLoggedIn: boolean) => 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("username", username);
|
||||
setIsAuthenticated(true);
|
||||
if (changeAuth) changeAuth(true);
|
||||
onClose();
|
||||
} else {
|
||||
setError(data.message || "Login fehlgeschlagen");
|
||||
}
|
||||
} catch (err) {
|
||||
setError("Netzwerkfehler");
|
||||
}
|
||||
};
|
||||
|
||||
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"
|
||||
>
|
||||
×
|
||||
</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") as string;
|
||||
const password = formData.get("password") as string;
|
||||
const success = await loginUser(username, password); // Make loginUser return true/false
|
||||
if (success) {
|
||||
changeAuth?.(true);
|
||||
onClose();
|
||||
}
|
||||
}}
|
||||
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("token") ? (
|
||||
<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();
|
||||
if (changeAuth) {
|
||||
changeAuth(false);
|
||||
onClose();
|
||||
}
|
||||
}}
|
||||
>
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
export default LoginCard;
|
||||
|
||||
|
@@ -1,44 +1,22 @@
|
||||
import React, { useEffect } from "react";
|
||||
import React from "react";
|
||||
import Header from "../components/Header";
|
||||
import Cookies from "js-cookie";
|
||||
import Sidebar from "../components/Sidebar";
|
||||
import { ToastContainer } from "react-toastify";
|
||||
import { AuthContext } from "../utils/context";
|
||||
|
||||
type LayoutProps = {
|
||||
children: React.ReactNode;
|
||||
};
|
||||
|
||||
const Layout: React.FC<LayoutProps> = ({ children }) => {
|
||||
const [loggedIn, setLoggedIn] = React.useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const token = Cookies.get("token");
|
||||
if (token) {
|
||||
setLoggedIn(true);
|
||||
} else {
|
||||
setLoggedIn(false);
|
||||
}
|
||||
}, [loggedIn]);
|
||||
|
||||
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 changeAuth={
|
||||
(isLoggedIn: boolean) => setLoggedIn(isLoggedIn)
|
||||
} />
|
||||
<Header />
|
||||
<ToastContainer />
|
||||
<div className="flex flex-1">
|
||||
<AuthContext.Provider value={loggedIn}>
|
||||
{/* Main content */}
|
||||
{loggedIn && (
|
||||
<>
|
||||
<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>
|
||||
</>
|
||||
)}
|
||||
</AuthContext.Provider>
|
||||
<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
9
frontend_admin/src/utils/context.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import React from "react";
|
||||
|
||||
export const AuthContext = React.createContext<{
|
||||
isAuthenticated: boolean;
|
||||
setIsAuthenticated: (auth: boolean) => void;
|
||||
}>({
|
||||
isAuthenticated: false,
|
||||
setIsAuthenticated: () => { },
|
||||
});
|
@@ -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 = () => {
|
||||
|
@@ -14,7 +14,7 @@ export const loginUser = async (
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
Cookies.set("token", data.token); // Set cookie here
|
||||
Cookies.set("name", data.name);
|
||||
Cookies.set("username", username); // Set username cookie
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
@@ -24,7 +24,7 @@ export const loginUser = async (
|
||||
};
|
||||
|
||||
export const logout = () => {
|
||||
Cookies.remove("name");
|
||||
Cookies.remove("username");
|
||||
Cookies.remove("token");
|
||||
localStorage.removeItem("users");
|
||||
myToast("Logged out successfully!", "info");
|
||||
|
Reference in New Issue
Block a user