changed project struture.

Also addded a functional JWT token service.

Also added user react frontend

frontend_admin/other/App copy.tsx

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

frontend_admin/other/App.tsx

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

frontend_admin/other/components/Header.tsx

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

frontend_admin/other/components/LoginCard.tsx

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