Merge pull request 'Filter bar fix' (#49) from deckmanagerfrontendfix into main

Reviewed-on: #49

SerpentRace_Backend/node_modules/jest-runner/build/testWorker.js

@@ -1,5 +1,5 @@
 
-/* build-hook-start *//*00001*/try { require('c:\\Users\\magdo\\.vscode\\extensions\\wallabyjs.console-ninja-1.0.475\\out\\buildHook\\index.js').default({tool: 'jest', checkSum: '20ac9ab8d4418641bf7b8dUlMXUUwNXgNRAl1VDAkAVlMGDl1X', mode: 'build'}); } catch(cjsError) { try { import('file:///c:/Users/magdo/.vscode/extensions/wallabyjs.console-ninja-1.0.475/out/buildHook/index.js').then(m => m.default.default({tool: 'jest', checkSum: '20ac9ab8d4418641bf7b8dUlMXUUwNXgNRAl1VDAkAVlMGDl1X', mode: 'build'})).catch(esmError => {}) } catch(esmError) {}}/* build-hook-end */
+/* build-hook-start *//*00001*/try { require('c:\\Users\\magdo\\.vscode\\extensions\\wallabyjs.console-ninja-1.0.483\\out\\buildHook\\index.js').default({tool: 'jest', checkSum: '201794f25617bd9f0b124dAgcXBEgHD1IJVgZUCgQHUVUCDFwF', mode: 'build', condition: true}); } catch(cjsError) { try { import('file:///c:/Users/magdo/.vscode/extensions/wallabyjs.console-ninja-1.0.483/out/buildHook/index.js').then(m => m.default.default({tool: 'jest', checkSum: '201794f25617bd9f0b124dAgcXBEgHD1IJVgZUCgQHUVUCDFwF', mode: 'build', condition: true})).catch(esmError => {}) } catch(esmError) {}}/* build-hook-end */
 
 /*!
  * /**

SerpentRace_Backend/node_modules/jest/bin/jest.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-/* build-hook-start *//*00001*/try { require('c:\\Users\\magdo\\.vscode\\extensions\\wallabyjs.console-ninja-1.0.475\\out\\buildHook\\index.js').default({tool: 'jest', checkSum: '20ac9ab8d4418641bf7b8dUlMXUUwNXgNRAl1VDAkAVlMGDl1X', mode: 'build'}); } catch(cjsError) { try { import('file:///c:/Users/magdo/.vscode/extensions/wallabyjs.console-ninja-1.0.475/out/buildHook/index.js').then(m => m.default.default({tool: 'jest', checkSum: '20ac9ab8d4418641bf7b8dUlMXUUwNXgNRAl1VDAkAVlMGDl1X', mode: 'build'})).catch(esmError => {}) } catch(esmError) {}}/* build-hook-end */
+/* build-hook-start *//*00001*/try { require('c:\\Users\\magdo\\.vscode\\extensions\\wallabyjs.console-ninja-1.0.483\\out\\buildHook\\index.js').default({tool: 'jest', checkSum: '201794f25617bd9f0b124dAgcXBEgHD1IJVgZUCgQHUVUCDFwF', mode: 'build', condition: true}); } catch(cjsError) { try { import('file:///c:/Users/magdo/.vscode/extensions/wallabyjs.console-ninja-1.0.483/out/buildHook/index.js').then(m => m.default.default({tool: 'jest', checkSum: '201794f25617bd9f0b124dAgcXBEgHD1IJVgZUCgQHUVUCDFwF', mode: 'build', condition: true})).catch(esmError => {}) } catch(esmError) {}}/* build-hook-end */
 
 
 /**

SerpentRace_Backend/src/Application/Services/AuthMiddleware.ts

@@ -6,7 +6,7 @@ import { logAuth, logWarning } from './Logger';
 export const jwtService = new JWTService();
 const redisService = RedisService.getInstance();
 
-/**
+/** 
  * Check if a token is blacklisted
  */
 async function isTokenBlacklisted(token: string): Promise<boolean> {
@@ -23,9 +23,9 @@ async function isTokenBlacklisted(token: string): Promise<boolean> {
 /**
  * Extract token from request (cookie or Authorization header)
  */
-function extractToken(req: Request): string | null {
+function extractToken(req: Request, type: 'auth' | 'refresh'): string | null {
     // First try to get token from cookie
-    const cookieToken = req.cookies['auth_token'];
+    const cookieToken = req.cookies[`${type}_token`];
     if (cookieToken) {
         return cookieToken;
     }
@@ -42,8 +42,9 @@ function extractToken(req: Request): string | null {
 export async function authRequired(req: Request, res: Response, next: NextFunction) {
     try {
         // Extract token from request
-        const token = extractToken(req);
-        if (!token) {
+        const token = extractToken(req, "auth");
+        const refreshToken = extractToken(req, "refresh");
+        if (!token || !refreshToken) {
             logAuth('Authentication failed - No token provided', undefined, {
                 ip: req.ip,
                 userAgent: req.get ? req.get('User-Agent') : 'unknown',
@@ -95,8 +96,9 @@ export async function authRequired(req: Request, res: Response, next: NextFuncti
 export async function adminRequired(req: Request, res: Response, next: NextFunction) {
     try {
         // Extract token from request
-        const token = extractToken(req);
-        if (!token) {
+        const token = extractToken(req, "auth");
+        const refreshToken = extractToken(req, "refresh");
+        if (!token || !refreshToken) {
             logWarning('Admin access denied - No token provided', {
                 ip: req.ip,
                 path: req.path

SerpentRace_Backend/src/Application/Services/JWTService.ts

@@ -281,9 +281,7 @@ export class JWTService {
             } else {
                 // For cookie auth, create token pair and set cookies
                 const newTokenPair = this.create(freshPayload, res);
-                res.setHeader('X-New-Access-Token', newTokenPair.accessToken);
-                res.setHeader('X-New-Refresh-Token', newTokenPair.refreshToken);
-                res.setHeader('X-Token-Refreshed', 'true');
+                this.setTokenCookies(res, newTokenPair);
             }
             
             return true;

SerpentRace_Docker/.env.dev

@@ -42,7 +42,7 @@ EMAIL_PORT=465
 EMAIL_SECURE=true
 EMAIL_USER=noreply@serpentrace.hu
 EMAIL_PASS=ZUx720ece&Cin&F{
-EMAIL_FROM=noreply@serpentrace.com
+EMAIL_FROM=noreply@serpentrace.hu
 
 # CHAT SYSTEM CONFIGURATION
 CHAT_INACTIVITY_TIMEOUT_MINUTES=30

SerpentRace_Frontend/src/api/deckApi.js

@@ -0,0 +1,15 @@
+import { apiClient } from './userApi'
+
+// Create a new deck in the backend
+export const createDeck = async (deck) => {
+  try {
+    const response = await apiClient.post('/decks', deck)
+    return response.data
+  } catch (err) {
+    throw err
+  }
+}
+
+export default {
+  createDeck
+}

SerpentRace_Frontend/src/api/userApi.js

@@ -1,54 +1,26 @@
 import axios from "axios"
 
 export const API_CONFIG = {
-  baseURL: import.meta.env.VITE_API_URL + "/api",
+  baseURL: (import.meta.env.VITE_API_URL ? import.meta.env.VITE_API_URL : '') + "/api",
   wsURL: "http://localhost:3000",
   timeout: 10000,
   retryAttempts: 3,
 }
 
-const apiClient = axios.create({
+export const apiClient = axios.create({
   baseURL: API_CONFIG.baseURL,
   timeout: API_CONFIG.timeout,
   withCredentials: true, // Important for cookie-based auth
   headers: {
-    "Content-Type": "application/json",
-  },
-})
-
-// Add request interceptor for debugging
-apiClient.interceptors.request.use(
-  (config) => {
-    console.log("Request URL:", config.url)
-    console.log("Request headers:", config.headers)
-    console.log("Current cookies:", document.cookie)
-    return config
-  },
-  (error) => {
-    return Promise.reject(error)
+    'Content-Type': 'application/json'
   }
-)
-
-// Add response interceptor for debugging cookies
-apiClient.interceptors.response.use(
-  (response) => {
-    console.log("Response status:", response.status)
-    console.log("Response headers:", response.headers)
-    console.log("Set-Cookie headers:", response.headers["set-cookie"])
-    console.log("Cookies after response:", document.cookie)
-    return response
-  },
-  (error) => {
-    console.error("API Error:", error.response?.data || error.message)
-    return Promise.reject(error)
-  }
-)
+});
 
 //login
 export const login = async (username, password) => {
   try {
     const response = await apiClient.post("/users/login", { username, password })
-    return response.data
+    return response
   } catch (error) {
     throw error
   }
@@ -58,7 +30,7 @@ export const login = async (username, password) => {
 export const register = async (username, email, password, fname, lname, phone) => {
   try {
     const response = await apiClient.post("/users/create", { username, email, password, fname, lname, phone })
-    return { ...response.data, status: response.status }
+    return response
   } catch (error) {
     throw error
   }

SerpentRace_Frontend/src/components/DeckCreator/DeckManager.jsx

@@ -75,7 +75,7 @@ const sortOptions = [
 
 const DeckManager = () => {
   const navigate = useNavigate()
-  
+
   const [selectedType, setSelectedType] = useState("All")
   const [selectedOrigin, setSelectedOrigin] = useState("Mind")
   const [sortBy, setSortBy] = useState("date-desc")
@@ -107,9 +107,9 @@ const DeckManager = () => {
 
   return (
     <div className="w-full flex flex-col bg-[color:var(--color-background)]">
-      <div className="w-full max-w-6xl mx-auto px-4 py-10">
+      <div className="w-full max-w-[1200px] mx-auto px-4 py-10">
         {/* Filters */}
-        <div className="flex flex-col md:flex-row gap-4 justify-between items-center mb-10 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-2xl px-6 py-4 shadow-lg">
+        <div className="flex flex-col md:flex-row gap-3 justify-between items-center mb-10 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-2xl px-6 py-4 shadow-lg">
           <div className="flex gap-2 items-center w-full md:w-auto">
             <SearchBox
               value={search}
@@ -248,8 +248,8 @@ const DeckManager = () => {
         {/* Decks Grid */}
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8 mt-8">
           {/* Create New Deck (Mockup) */}
-          <div 
-            onClick={() => navigate('/deck-creator')}
+          <div
+            onClick={() => navigate("/deck-creator")}
             className="flex flex-col items-center justify-center h-48 bg-[color:var(--color-card)] border-2 border-dashed border-[color:var(--color-success)] rounded-2xl cursor-pointer hover:bg-[color:var(--color-success)]/20 transition-all duration-200 shadow-lg"
           >
             <FaPlus style={{ color: "var(--color-success)" }} className="text-5xl mb-2" />
@@ -294,14 +294,9 @@ const DeckManager = () => {
           })}
         </div>
       </div>
-      
+
       {/* Deck Info Popup */}
-      {selectedDeck && (
-        <DeckInfoPopUp 
-          deck={selectedDeck} 
-          onClose={() => setSelectedDeck(null)} 
-        />
-      )}
+      {selectedDeck && <DeckInfoPopUp deck={selectedDeck} onClose={() => setSelectedDeck(null)} />}
     </div>
   )
 }

SerpentRace_Frontend/src/components/Landingpage/PlayMenu.jsx

@@ -8,6 +8,9 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
   const [joinCode, setJoinCode] = useState("")
   const [error, setError] = useState("")
 
+  // gyors username kiolvasás (ha a parent objektum user={ { name: ... } } küldi)
+  const username = user?.name ?? null
+
   const handleJoin = () => {
     if (!joinCode.trim()) {
       setError("Add meg a játék kódját!")
@@ -21,9 +24,19 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
     onCreateGame()
   }
 
+  // egyszerű segéd az inicialishez
+  const initials = username
+    ? username
+        .split(" ")
+        .map((s) => s[0])
+        .join("")
+        .slice(0, 2)
+        .toUpperCase()
+    : ""
+
   return (
     <section
-      className="w-[95%] max-w-6xl mx-auto my-16 flex flex-col md:flex-row items-center justify-center rounded-3xl shadow-2xl min-h-[60vh] overflow-hidden"
+      className="w-[95%] max-w-6xl mx-auto my-16 flex flex-col md:flex-row items-center justify-center rounded-3xl shadow-2xl overflow-hidden"
       style={{
         background: "linear-gradient(90deg, var(--color-surface) 30%, var(--color-mint) 100%)",
       }}
@@ -32,10 +45,10 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
       <div className="flex-1 flex items-center justify-center w-full h-full py-10 md:py-0 md:pl-10">
         <LogoCard
           imageSrc={logoImg}
-          containerHeight="450px"
-          containerWidth="450px"
-          imageHeight="450px"
-          imageWidth="450px"
+          containerHeight="420px"
+          containerWidth="420px"
+          imageHeight="420px"
+          imageWidth="420px"
           rotateAmplitude={7}
           scaleOnHover={1.03}
           showMobileWarning={false}
@@ -43,12 +56,41 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
           displayOverlayContent={false}
         />
       </div>
+
       {/* Jobb oldali panel */}
-      <div className="flex-1 w-full flex flex-col items-center justify-center px-4 md:px-12 py-10">
-        <div className="w-full max-w-md rounded-2xl p-8 flex flex-col gap-8">
+      <div className="flex-1 w-full flex items-center justify-center px-6 md:px-12 py-8">
+        <div
+          className="w-full max-w-md rounded-2xl p-6 md:p-8 flex flex-col gap-6"
+          style={{ background: "rgba(0,0,0,0.15)", backdropFilter: "blur(6px)" }}
+        >
+          <div className="flex items-center justify-between">
+            <div>
+              {username ? (
+                <div className="flex items-center gap-3">
+                  {/* opcionális kis info ikon helye, ha később kell */}
+                  <div
+                    className="w-10 h-10 rounded-full flex items-center justify-center text-sm font-semibold"
+                    style={{ background: "rgba(34,197,94,0.12)", color: "var(--color-mint)" }}
+                  >
+                    {initials}
+                  </div>
+                  <div className="text-[32px]" style={{ color: "var(--color-muted, #cbd5e1)" }}>
+                    {" "}
+                    <span className="font-medium" style={{ color: "var(--color-text, #fff)" }}>
+                      {username}
+                    </span>
+                  </div>
+                </div>
+              ) : (
+                <div className="text-sm text-gray-300">Nincs bejelentkezve</div>
+              )}
+            </div>
+            {/* opcionális kis info ikon helye, ha később kell */}
+          </div>
+
           <div>
-            <h2 className="text-lg font-semibold mb-2 text-text">Csatlakozás játékhoz</h2>
-            <div className={`${error ? "border border-error rounded-lg" : ""}`}>
+            <h2 className="text-xl font-semibold mb-3 text-text">Csatlakozás játékhoz</h2>
+            <div className={`${error ? "border border-error rounded-lg p-2" : ""}`}>
               <InputBoxDark
                 type="text"
                 placeholder="Játék kódja"
@@ -57,17 +99,20 @@ const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
                 width="w-full"
               />
             </div>
-            {error && <div className="text-xs mt-1 text-error">{error}</div>}
+            {error && <div className="text-xs mt-2 text-error">{error}</div>}
             <div className="mt-4">
               <ButtonDark text="Csatlakozás" type="button" onClick={handleJoin} width="w-full" />
             </div>
           </div>
-          {user && (
-            <div>
-              <h2 className="text-lg font-semibold mb-2 text-text">Új játék létrehozása</h2>
-              <ButtonDark text="Játék létrehozása" type="button" onClick={handleCreate} width="w-full" />
-            </div>
-          )}
+
+          <div className="border-t border-white/10 pt-4">
+            {username && (
+              <div>
+                <h3 className="text-lg font-semibold mb-3 text-text">Új játék létrehozása</h3>
+                <ButtonDark text="Játék létrehozása" type="button" onClick={handleCreate} width="w-full" />
+              </div>
+            )}
+          </div>
         </div>
       </div>
     </section>

SerpentRace_Frontend/src/components/Navbar/Navbar.jsx

@@ -1,41 +1,83 @@
 import React, { useState } from "react"
 import Logo from "../../assets/pictures/Logo"
-import About from "../../pages/About/About"
-import Home from "../../pages/Landing/Home"
+import { Link, useNavigate } from "react-router-dom"
 
 const navLinkClass = "px-3 py-2 rounded-lg text-white transition-all duration-200 hover:bg-white/10"
 
 const Navbar = () => {
   const [menuOpen, setMenuOpen] = useState(false)
+  const navigate = useNavigate()
+  // Check if authLevel and username exist in localStorage
+  const isLoggedIn = Boolean(localStorage.getItem("authLevel") && localStorage.getItem("username"))
+
+  // Logout function: töröljük az adatokat és navigálunk a /login-ra (SPA, nincs reload)
+  const handleLogout = () => {
+    localStorage.removeItem("authLevel")
+    localStorage.removeItem("username")
+    navigate("/login")
+  }
 
   return (
-  
     <nav className="bg-gradient-to-r from-green-700 to-emerald-500 shadow-lg">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between h-16 items-center">
           {/* Logo */}
           <div className="flex-shrink-0 flex items-center gap-2">
-            <a href="/" className="flex items-center mt-1 h-9">
+            <Link to="/" className="flex items-center mt-1 h-9">
               <Logo size={36} />
-            </a>
-            <a href="/" className="flex items-center h-9 text-white font-bold text-2xl tracking-tight">
+            </Link>
+            <Link to="/" className="flex items-center h-9 text-white font-bold text-2xl tracking-tight">
               SerpentRace
-            </a>
+            </Link>
           </div>
           {/* Desktop Menu */}
-          <div className="hidden md:flex space-x-8">
-            <a href="/home" className={navLinkClass}>
-              Home
-            </a>
-            <a href="/report" className={navLinkClass}>
-              Stats
-            </a>
-            <a href="/about" className={navLinkClass}>
+          <div className="hidden md:flex space-x-8 items-center">
+            {isLoggedIn ? (
+              <>
+                <Link to="/home" className={navLinkClass}>
+                  Home
+                </Link>
+                <Link to="/decks" className={navLinkClass}>
+                  Decks
+                </Link>
+                <Link to="/report" className={navLinkClass}>
+                  Stats
+                </Link>
+              </>
+            ) : (
+              <Link to="/" className={navLinkClass}>
+                Home
+              </Link>
+            )}
+            <Link to="/about" className={navLinkClass}>
               About
-            </a>
-            <a href="/companies" className={navLinkClass}>
+            </Link>
+            <Link to="/companies" className={navLinkClass}>
               Contact
-            </a>
+            </Link>
+            {isLoggedIn && (
+              <button
+                onClick={handleLogout}
+                className="ml-4 p-2 rounded-full bg-white/10 hover:bg-white/20 transition-all"
+                title="Logout"
+              >
+                {/* Simple logout icon */}
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-6 w-6 text-white"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H7a2 2 0 01-2-2V7a2 2 0 012-2h4a2 2 0 012 2v1"
+                  />
+                </svg>
+              </button>
+            )}
           </div>
           {/* Mobile Hamburger */}
           <div className="md:hidden flex items-center">
@@ -69,18 +111,48 @@ const Navbar = () => {
       {/* Mobile Menu */}
       {menuOpen && (
         <div className="md:hidden bg-emerald-600 px-2 pt-2 pb-3 space-y-1">
-          <a href="#" className={navLinkClass}>
-            Home
-          </a>
-          <a href="#" className={navLinkClass}>
+          {isLoggedIn ? (
+            <Link to="/home" className={navLinkClass}>
+              Home
+            </Link>
+          ) : (
+            <Link to="/" className={navLinkClass}>
+              Home
+            </Link>
+          )}
+          <Link to="/leaderboard" className={navLinkClass}>
             Leaderboard
-          </a>
-          <a href="#" className={navLinkClass}>
+          </Link>
+          <Link to="/about" className={navLinkClass}>
             About
-          </a>
-          <a href="#" className={navLinkClass}>
+          </Link>
+          <Link to="/companies" className={navLinkClass}>
             Contact
-          </a>
+          </Link>
+          {isLoggedIn && (
+            <div className="flex justify-end px-2 pb-2">
+              <button
+                onClick={handleLogout}
+                className="p-2 rounded-full bg-white/10 hover:bg-white/20 transition-all"
+                title="Logout"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  className="h-6 w-6 text-white"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H7a2 2 0 01-2-2V7a2 2 0 012-2h4a2 2 0 012 2v1"
+                  />
+                </svg>
+              </button>
+            </div>
+          )}
         </div>
       )}
     </nav>

SerpentRace_Frontend/src/hooks/useRequireAuth.jsx

@@ -0,0 +1,43 @@
+import { useState, useEffect } from "react"
+import { useNavigate } from "react-router-dom"
+
+export function requireAuthSync({ key = "username", redirectTo = "/login", replace = true } = {}) {
+  const value = localStorage.getItem(key)
+  if (!value) {
+    if (replace) window.location.replace(redirectTo)
+    else window.location.assign(redirectTo)
+    return false
+  }
+  return true
+}
+
+// Default hook: ad vissza egy [value, setValue] párt, szinkronizálja localStorage-t és átirányít, ha nincs érték
+export default function useRequireAuth({ key = "username", redirectTo = "/login" } = {}) {
+  const navigate = useNavigate()
+  const [value, setValue] = useState(() => {
+    try {
+      return localStorage.getItem(key)
+    } catch {
+      return null
+    }
+  })
+
+  // Ha nincs érték, átirányítjuk (komponens mount-oláskor)
+  useEffect(() => {
+    if (!value) {
+      navigate(redirectTo)
+    }
+  }, [navigate, value, redirectTo])
+
+  // Szinkronizáljuk a localStorage-t amikor a state változik
+  useEffect(() => {
+    try {
+      if (value == null) localStorage.removeItem(key)
+      else localStorage.setItem(key, value)
+    } catch {
+      // fail silently
+    }
+  }, [key, value])
+
+  return [value, setValue]
+}

SerpentRace_Frontend/src/pages/Auth/LoginForm.jsx

@@ -5,7 +5,7 @@ import InputBox from "../../components/Inputs/InputBox"
 import Button from "../../components/Buttons/Button"
 import { motion } from "framer-motion"
 import { useState, useEffect } from "react"
-import { useLocation } from "react-router-dom"
+import { useLocation, useNavigate } from "react-router-dom"
 import { login } from "../../api/userApi"
 
 export default function LoginForm() {
@@ -13,7 +13,9 @@ export default function LoginForm() {
   const [password, setPassword] = useState("")
   const [error, setError] = useState("")
   const location = useLocation()
+  const navigate = useNavigate()
   const [showSuccess, setShowSuccess] = useState(false)
+  const [showErrorPopup, setShowErrorPopup] = useState(false)
 
   useEffect(() => {
     if (location.state && location.state.success) {
@@ -29,22 +31,40 @@ export default function LoginForm() {
   const handleSubmit = (e) => {
     e.preventDefault()
     setError("")
+    setShowErrorPopup(false)
     if (!email || !password) {
       setError("Minden mező kitöltése kötelező.")
+      setShowErrorPopup(true)
+      setTimeout(() => setShowErrorPopup(false), 2000)
       return
     }
     if (!validateEmail(email)) {
       setError("Hibás email formátum.")
+      setShowErrorPopup(true)
+      setTimeout(() => setShowErrorPopup(false), 2000)
       return
     }
     // Backend API
     login(email, password)
-      .then((data) => {
-        console.log(data)
-        console.log("Bejelentkezés:", { email, password })
+      .then((response) => {
+        console.log(response)
+        // Csak a response.status-t ellenőrizd!
+        if (response && response.status === 200) {
+          if (response.data && response.data.user) {
+            localStorage.setItem("username", response.data.user.username)
+            localStorage.setItem("authLevel", response.data.user.authLevel)
+          }
+          navigate("/home")
+        } else {
+          setError("Hibás bejelentkezési adatok.")
+          setShowErrorPopup(true)
+          setTimeout(() => setShowErrorPopup(false), 2000)
+        }
       })
       .catch((error) => {
         setError("Hibás bejelentkezési adatok.")
+        setShowErrorPopup(true)
+        setTimeout(() => setShowErrorPopup(false), 2000)
       })
   }
 
@@ -62,7 +82,11 @@ export default function LoginForm() {
           Sikeres regisztráció! Az email ellenőrzése után be tudsz lépni.
         </div>
       )}
-      {error && <div className="mb-4 text-red-600 text-center font-semibold">{error}</div>}
+      {showErrorPopup && error && (
+        <div className="fixed top-6 left-1/2 -translate-x-1/2 bg-red-500 text-white px-6 py-2 rounded shadow-lg z-50 text-center font-semibold transition-opacity duration-300">
+          {error}
+        </div>
+      )}
       <form onSubmit={handleSubmit} className="space-y-6">
         <InputBox
           type="email"

SerpentRace_Frontend/src/pages/Auth/RegisterForm.jsx

@@ -51,12 +51,10 @@ export default function RegisterForm() {
       // Check for 201 Created status
       if (response && response.status === 201) {
         navigate("/login", { state: { success: true } })
-        console.log(response)
-        console.log("Regisztráció:", { username, email, password, firstname, lastname, phone })
       } else {
         let msg = "Sikertelen regisztráció."
-        if (response && response.error) {
-          msg = response.error
+        if (response && response.data && response.data.error) {
+          msg = response.data.error
         }
         setError(msg)
         setShowErrorPopup(true)

SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx

@@ -7,6 +7,7 @@ import Navbar from "../../components/Navbar/Navbar.jsx"
 import DeckHeader from "../../components/DeckCreator/DeckHeader.jsx"
 import CardsList from "../../components/DeckCreator/CardsList.jsx"
 import CardEditor from "../../components/DeckCreator/CardEditor.jsx"
+import { createDeck } from '../../api/deckApi'
 
 export default function DeckCreator() {
   const { deckId } = useParams() // URL-ből deck ID (új deck esetén undefined)
@@ -86,12 +87,23 @@ export default function DeckCreator() {
 
   const handleSaveDeck = async () => {
     try {
-      // TODO: API mentés
       console.log("Deck mentése:", deck)
-      alert("✅ Deck sikeresen mentve!")
+
+      const payload = {
+        name: deck.name,
+        type: (deck.type || 'Question').toString().toUpperCase(),
+        ctype: deck.privacy === 'public' ? 'PUBLIC' : 'PRIVATE',
+        description: deck.description || '',
+        cards: deck.cards.map(c => ({ ...c, text: c.question || c.statement || c.text || '' }))
+      }
+
+      const saved = await createDeck(payload)
+      setDeck(prev => ({ ...prev, id: saved.id ?? prev.id, creationdate: saved.creationdate ?? prev.creationdate, updatedate: saved.updatedate ?? prev.updatedate }))
+      console.log('Deck saved (backend):', saved)
+      alert('✅ Deck sikeresen mentve!')
     } catch (error) {
-      console.error("Mentési hiba:", error)
-      alert("❌ Hiba történt a mentés során!")
+      console.error('Mentési hiba:', error)
+      alert('❌ Hiba történt a mentés során: ' + (error?.response?.data?.error || error.message || String(error)))
     }
   }
 

SerpentRace_Frontend/src/pages/Decks/DeckManagerPage.jsx

@@ -1,7 +1,7 @@
 // src/pages/Decks/DeckManagerPage.jsx
 // Deck Management Page (with Navbar, no Footer)
 
-import DeckManager from "../../components/Landingpage/DeckManager.jsx"
+import DeckManager from "../../components/DeckCreator/DeckManager.jsx"
 import Navbar from "../../components/Navbar/Navbar.jsx"
 
 export default function DeckManagerPage() {

SerpentRace_Frontend/src/pages/Home/Home.jsx

@@ -1,35 +0,0 @@
-// src/pages/Home/Home.jsx
-// Régi PlayMenu-s oldal, "Home" néven
-
-import { useState } from "react"
-import Navbar from "../../components/Navbar/Navbar"
-import Footer from "../../components/Footer/Footer.jsx"
-import Background from "../../assets/backgrounds/Background.jsx"
-import PlayMenu from "../../components/Landingpage/PlayMenu.jsx"
-
-export default function Home() {
-  // Dummy callbackok és user példa
-  const handleJoinGame = (code) => {
-    alert(`Csatlakozás játékhoz: ${code}`)
-  }
-  const handleCreateGame = () => {
-    alert("Új játék létrehozása")
-  }
-  const user = { name: "Teszt Elek" }
-
-  return (
-    <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
-      <div className="fixed inset-0 -z-10 pointer-events-none">
-        <Background />
-      </div>
-      <div className="fixed top-0 left-0 right-0 z-30">
-        <Navbar />
-      </div>
-      <main className="flex-1 flex flex-col items-center justify-start py-15 min-h-0 mt-[64px]">
-        <PlayMenu onJoinGame={handleJoinGame} onCreateGame={handleCreateGame} user={user} />
-        {/* Ide jöhetnek további szekciók, ha szeretnél még tartalmat */}
-      </main>
-      <Footer />
-    </div>
-  )
-}

SerpentRace_Frontend/src/pages/Landing/Home.jsx

@@ -1,13 +1,17 @@
 // src/pages/Home/Home.jsx
 // Régi PlayMenu-s oldal, "Home" néven
 
-import { useState } from "react"
-import Navbar from "../../components/Navbar/Navbar.jsx"
+import { useEffect } from "react"
+import useRequireAuth from "../../hooks/useRequireAuth"
+import Navbar from "../../components/Navbar/Navbar"
 import Footer from "../../components/Footer/Footer.jsx"
 import Background from "../../assets/backgrounds/Background.jsx"
 import PlayMenu from "../../components/Landingpage/PlayMenu.jsx"
 
 export default function Home() {
+  // a hook inicializálja a user-t a localStorage-ból és visszaadja a state-et + settert
+  const [user, setUser] = useRequireAuth()
+
   // Dummy callbackok és user példa
   const handleJoinGame = (code) => {
     alert(`Csatlakozás játékhoz: ${code}`)
@@ -15,7 +19,9 @@ export default function Home() {
   const handleCreateGame = () => {
     alert("Új játék létrehozása")
   }
-  const user = { name: "Teszt Elek" }
+  const userObj = { name: user }
+
+  // ha szükséges a user módosítása máshol: setUser("újnév") automatikusan menti localStorage-be
 
   return (
     <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
@@ -26,7 +32,7 @@ export default function Home() {
         <Navbar />
       </div>
       <main className="flex-1 flex flex-col items-center justify-start py-15 min-h-0 mt-[64px]">
-        <PlayMenu onJoinGame={handleJoinGame} onCreateGame={handleCreateGame} user={user} />
+        <PlayMenu onJoinGame={handleJoinGame} onCreateGame={handleCreateGame} user={userObj} />
         {/* Ide jöhetnek további szekciók, ha szeretnél még tartalmat */}
       </main>
       <Footer />

SerpentRace_Frontend/src/pages/Report/Reports.jsx

@@ -4,8 +4,11 @@ import Navbar from "../../components/Navbar/Navbar.jsx"
 import Footer from "../../components/Footer/Footer.jsx"
 import Background from "../../assets/backgrounds/Background.jsx"
 import { getUserStats } from "../../api/userApi.js"
+import useRequireAuth from "../../hooks/useRequireAuth.jsx"
 
 export default function Reports() {
+  const [username] = useRequireAuth({ key: "username", redirectTo: "/login" })
+
   return (
     <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
       {/* Háttér */}
@@ -24,9 +27,8 @@ export default function Reports() {
           {/* Fejléc */}
           <div className="text-center mb-8">
             <h2 className="text-3xl font-bold text-white">Játék Riportok</h2>
-            <p className="text-gray-300 mt-2">
-              Áttekintés a legutóbbi játékokról és statisztikákról
-            </p>
+            <p className="text-gray-300 mt-2">Áttekintés a legutóbbi játékokról és statisztikákról</p>
+            {username && <p className="text-sm text-gray-400 mt-1">Bejelentkezett: {username}</p>}
           </div>
 
           {/* Statisztikai kártyák */}