changed files
This commit is contained in:
@@ -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;
|
|
||||||
@@ -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;
|
|
||||||
@@ -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;
|
|
||||||
@@ -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;
|
|
||||||
@@ -16,7 +16,7 @@ function App() {
|
|||||||
const [isAuthenticated, setIsAuthenticated] = useState(
|
const [isAuthenticated, setIsAuthenticated] = useState(
|
||||||
!!Cookies.get("token")
|
!!Cookies.get("token")
|
||||||
);
|
);
|
||||||
const [showLogin, setShowLogin] = useState(false);
|
const [, setShowLogin] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AuthContext.Provider value={{ isAuthenticated, setIsAuthenticated }}>
|
<AuthContext.Provider value={{ isAuthenticated, setIsAuthenticated }}>
|
||||||
|
|||||||
Reference in New Issue
Block a user