backend

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

@@ -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/userApi.js

@@ -1,75 +1,38 @@
-import axios from "axios"
+import axios from 'axios';
+
 
 export const API_CONFIG = {
-  baseURL: import.meta.env.VITE_API_URL + "/api",
-  wsURL: "http://localhost:3000",
+  baseURL: import.meta.env.VITE_API_URL+'/api',
+  wsURL: 'http://localhost:3000',
   timeout: 10000,
-  retryAttempts: 3,
-}
+  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
-  } catch (error) {
-    throw error
-  }
-}
+    try {
+        const response = await apiClient.post('/users/login', { username, password });
+        return response.data;
+    } catch (error) {
+        throw error;
+    }
+};
 
 //register
 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 }
-  } catch (error) {
-    throw error
-  }
-}
-
-//verify email
-export const verifyEmail = async (token) => {
-  try {
-    const response = await apiClient.get(`/users/verify-email/${token}`)
-    return response.data
-  } catch (error) {
-    throw error
-  }
-}
+    try {
+        const response = await apiClient.post('/users/create', { username, email, password, fname, lname, phone });
+        return response.data;
+    } catch (error) {
+        throw error;
+    }
+};

SerpentRace_Frontend/src/components/Footer/Footer.jsx

@@ -1,17 +1,43 @@
-import React from "react"
+import React, { useEffect, useRef, useState } from "react"
 import { Link } from "react-router-dom"
 import Logo from "../../assets/pictures/Logo"
 
+
 const ArrowUpIcon = () => <span style={{ fontSize: "1.25rem" }}>↑</span>
 
 const Footer = () => {
+  const [isVisible, setIsVisible] = useState(false)
+  const footerRef = useRef(null)
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsVisible(entry.isIntersecting)
+      },
+      { threshold: 0.3 }
+    )
+
+    if (footerRef.current) {
+      observer.observe(footerRef.current)
+    }
+
+    return () => {
+      if (footerRef.current) {
+        observer.unobserve(footerRef.current)
+      }
+    }
+  }, [])
+
   const scrollToTop = () => {
     window.scrollTo({ top: 0, behavior: "smooth" })
   }
 
   return (
     <footer
-      className="relative bg-zinc-900 text-white border-t-2 border-zinc-800 mt-auto py-8"
+      ref={footerRef}
+      className={`relative bg-zinc-900 text-white border-t-2 border-zinc-800 mt-auto py-8 transition-all duration-700 ease-out ${
+        isVisible ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-95 translate-y-10"
+      }`}
       style={{ transformOrigin: "bottom center" }}
     >
       <style>
@@ -25,7 +51,10 @@ const Footer = () => {
       <div className="max-w-6xl mx-auto flex flex-wrap justify-between items-start gap-8 px-4">
         {/* Logó */}
         <div className="flex flex-col items-center footer-animate">
-          <a href="/" className="transition-transform duration-500 hover:scale-105 hover:brightness-125">
+          <a
+            href="/"
+            className="transition-transform duration-500 hover:scale-105 hover:brightness-125"
+          >
             <Logo size={100} />
           </a>
           <span className="font-extrabold text-xl mt-2 tracking-wide">SerpentRace</span>
@@ -36,15 +65,11 @@ const Footer = () => {
           <span className="text-lg font-semibold text-green-400 underline underline-offset-4 mb-2 drop-shadow-sm">
             Oldalak
           </span>
-          <a href="/" className="hover:underline hover:text-green-400 transition">
-            Főoldal
-          </a>
+          <a href="/" className="hover:underline hover:text-green-400 transition">Főoldal</a>
           <a href="/about" className="hover:underline hover:text-green-400 transition">
             Rólunk
           </a>
-          <a href="/contact" className="hover:underline hover:text-green-400 transition">
-            Kapcsolat
-          </a>
+          <a href="/contact" className="hover:underline hover:text-green-400 transition">Kapcsolat</a>
         </div>
 
         {/* Közösség */}
@@ -52,22 +77,8 @@ const Footer = () => {
           <span className="text-lg font-semibold text-green-400 underline underline-offset-4 mb-2 drop-shadow-sm">
             Közösség
           </span>
-          <a
-            href="https://discord.gg/"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="hover:underline hover:text-green-400 transition"
-          >
-            Discord
-          </a>
-          <a
-            href="https://github.com/"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="hover:underline hover:text-green-400 transition"
-          >
-            GitHub
-          </a>
+          <a href="https://discord.gg/" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-green-400 transition">Discord</a>
+          <a href="https://github.com/" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-green-400 transition">GitHub</a>
         </div>
 
         {/* Elérhetőség */}
@@ -85,13 +96,15 @@ const Footer = () => {
       </div>
 
       {/* Scroll to top */}
-      <button
-        onClick={scrollToTop}
-        className="fixed bottom-6 right-6 bg-green-500 hover:bg-green-600 text-white p-3 rounded-full shadow-lg transition transform hover:scale-110"
-        aria-label="Ugrás az oldal tetejére"
-      >
-        <ArrowUpIcon />
-      </button>
+      {isVisible && (
+        <button
+          onClick={scrollToTop}
+          className="fixed bottom-6 right-6 bg-green-500 hover:bg-green-600 text-white p-3 rounded-full shadow-lg transition transform hover:scale-110"
+          aria-label="Ugrás az oldal tetejére"
+        >
+          <ArrowUpIcon />
+        </button>
+      )}
     </footer>
   )
 }

SerpentRace_Frontend/src/components/Landingpage/LandingPage.jsx

@@ -6,13 +6,7 @@ import ButtonGreen from "../Buttons/ButtonGreen.jsx"
 import { FaUsers, FaPaintBrush, FaHeadset } from "react-icons/fa"
 import { motion } from "framer-motion"
 
-import { useNavigate } from "react-router-dom"
-
-const LandingPage = ({ onNavigateToPlay }) => {
-  const navigate = useNavigate()
-  const handleNavigateToAuth = () => {
-    navigate("/register")
-  }
+const LandingPage = ({ onNavigateToPlay, onNavigateToAuth }) => {
   return (
     <div className="w-full">
       {/* Hero Section */}
@@ -62,7 +56,7 @@ const LandingPage = ({ onNavigateToPlay }) => {
             transition={{ duration: 0.7, delay: 1 }}
           >
             <ButtonGreen text="Játék" onClick={onNavigateToPlay} width="w-60" />
-            <ButtonGreen text="Regisztráció" onClick={handleNavigateToAuth} width="w-60" />
+            <ButtonGreen text="Regisztráció" onClick={onNavigateToAuth} width="w-60" />
           </motion.div>
         </div>
       </motion.section>
@@ -171,7 +165,7 @@ const LandingPage = ({ onNavigateToPlay }) => {
 
             <ButtonGreen
               text="Kapcsolatfelvétel"
-              onClick={handleNavigateToAuth}
+              onClick={onNavigateToAuth}
               className="px-12 py-4 text-xl font-bold"
             />
           </motion.div>

SerpentRace_Frontend/src/pages/Auth/AuthCard.jsx

@@ -1,27 +1,25 @@
 // src/pages/Auth/AuthLogin.jsx
 // Kártya amelyiken a bejelentkezés és regisztráció van
 
-import { motion, AnimatePresence } from "framer-motion"
-import Animation from "../../assets/SerpentRace_Animation/SerpentRace_Animation"
-import LoginForm from "./LoginForm"
-import RegisterForm from "./RegisterForm"
-import Logo from "../../assets/pictures/Logo"
+import { motion, AnimatePresence } from "framer-motion";
+import Animation from "../../assets/SerpentRace_Animation/SerpentRace_Animation";
+import LoginForm from "./LoginForm";
+import RegisterForm from "./RegisterForm";
+import Logo from "../../assets/pictures/Logo";
 
 export default function AuthCard({ isRegistering, setIsRegistering }) {
   return (
     <motion.div
       initial={{ height: "auto" }}
-      animate={{ height: isRegistering ? "750px" : "385px" }}
+      animate={{ height: isRegistering ? "600px" : "385px" }}
       transition={{ duration: 0.5, ease: "easeInOut" }}
       className="absolute flex max-w-4xl w-full bg-white rounded-2xl shadow-lg overflow-hidden"
     >
       {/* Bal oldali kép és szöveg */}
       <div
-        className={`transition-all duration-500 ${
-          isRegistering ? "w-0 p-0" : "w-2/5 p-8"
-        } flex flex-col justify-center items-center bg-gradient-to-r from-mint-darker to-mint text-white `}
+        className={`transition-all duration-500 ${isRegistering ? 'w-0 p-0' : 'w-2/5 p-8'} flex flex-col justify-center items-center bg-gradient-to-r from-mint-darker to-mint text-white `}
       >
-        <Logo size={100} />
+        <Logo size={100}/>
         <div className="h-6" />
         <Animation sizePercentage={30} />
         <p className="text-lg mt-0 text-center font-light whitespace-nowrap overflow-hidden">
@@ -31,14 +29,18 @@ export default function AuthCard({ isRegistering, setIsRegistering }) {
 
       {/* Jobb oldali űrlap */}
       <div className="w-full p-10 relative">
-        <AnimatePresence mode="wait">{isRegistering ? <RegisterForm /> : <LoginForm />}</AnimatePresence>
+        <AnimatePresence mode="wait">
+          {isRegistering ? <RegisterForm /> : <LoginForm />}
+        </AnimatePresence>
         <span
           className="text-secondary cursor-pointer hover:underline mt-4 block text-center"
           onClick={() => setIsRegistering(!isRegistering)}
         >
-          {isRegistering ? "Már van fiókod? Jelentkezz be itt!" : "Nincs még fiókod? Regisztrálj itt!"}
+          {isRegistering
+            ? "Már van fiókod? Jelentkezz be itt!"
+            : "Nincs még fiókod? Regisztrálj itt!"}
         </span>
       </div>
     </motion.div>
-  )
+  );
 }

SerpentRace_Frontend/src/pages/Auth/EmailVerification.jsx

@@ -1,94 +1,58 @@
 // src/pages/Auth/EmailVerification.jsx
 // Rublikák a kód beírásához, email ellenőrzéshez
 
-import { useState, useRef, useEffect } from "react"
-import Background from "../../assets/backgrounds/Background"
-import { motion } from "framer-motion"
-import Button from "../../components/Buttons/Button"
-import { useLocation } from "react-router-dom"
+import { useState, useRef } from "react";
+import Background from "../../assets/backgrounds/Background";
+import { motion } from "framer-motion";
+import Button from "../../components/Buttons/Button";
+
 
 export default function EmailVerification() {
-  const [code, setCode] = useState(Array(6).fill(""))
-  const inputRefs = useRef([])
-  const location = useLocation()
-  const [showSuccess, setShowSuccess] = useState(false)
-  const [error, setError] = useState("")
-
-  useEffect(() => {
-    if (location.state && location.state.success) {
-      setShowSuccess(true)
-      setTimeout(() => setShowSuccess(false), 1500)
-    }
-  }, [location.state])
+  const [code, setCode] = useState(Array(6).fill(""));
+  const inputRefs = useRef([]);
 
   const handleChange = (e, index) => {
-    const { value } = e.target
+    const { value } = e.target;
     if (/^\d*$/.test(value) && value.length <= 1) {
-      const newCode = [...code]
-      newCode[index] = value
-      setCode(newCode)
+      const newCode = [...code];
+      newCode[index] = value;
+      setCode(newCode);
       if (value && index < 5) {
-        inputRefs.current[index + 1].focus()
+        inputRefs.current[index + 1].focus();
       }
     }
-  }
+  };
 
   const handleKeyDown = (e, index) => {
     if (e.key === "Backspace" && !code[index] && index > 0) {
-      inputRefs.current[index - 1].focus()
+      inputRefs.current[index - 1].focus();
     } else if (e.key === "ArrowLeft" && index > 0) {
-      inputRefs.current[index - 1].focus()
+      inputRefs.current[index - 1].focus();
     } else if (e.key === "ArrowRight" && index < 5) {
-      inputRefs.current[index + 1].focus()
+      inputRefs.current[index + 1].focus();
     } else if (/^\d$/.test(e.key) && code[index]) {
-      e.preventDefault()
-      const newCode = [...code]
-      newCode[index] = e.key
-      setCode(newCode)
+      e.preventDefault();
+      const newCode = [...code];
+      newCode[index] = e.key;
+      setCode(newCode);
       
       if (index < 5) {
         setTimeout(() => {
-          inputRefs.current[index + 1].focus()
-        }, 0)
+          inputRefs.current[index + 1].focus();
+        }, 0);
       }
     }
-  }
+  };
 
-  const handleSubmit = async (e) => {
-    e.preventDefault()
-    setError("")
-    const token = code.join("")
-    if (token.length !== 6) {
-      setError("A kód 6 számjegyből áll.")
-      return
-    }
-    try {
-      const res = await fetch(`/verify-email/${token}`)
-      const data = await res.json()
-      if (data.success) {
-        setShowSuccess(true)
-        setTimeout(() => setShowSuccess(false), 2000)
-      } else {
-        setError(data.message || "Sikertelen ellenőrzés.")
-      }
-    } catch (err) {
-      setError("Hiba történt az ellenőrzés során.")
-    }
-  }
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    console.log("Kód:", code.join(""));
+    // Backend API
+  };
 
   return (
     <div className="relative flex items-center justify-center min-h-screen bg-gray-100 p-0 font-poppins">
       <Background />
-      {showSuccess && (
-        <div className="fixed top-6 left-1/2 -translate-x-1/2 bg-green-500 text-white px-6 py-2 rounded shadow-lg z-50 text-center font-semibold transition-opacity duration-300">
-          Sikeres email ellenőrzés!
-        </div>
-      )}
-      {error && (
-        <div className="fixed top-20 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>
-      )}
       <motion.div
         initial={{ height: "auto" }}
         animate={{ height: "300px" }}
@@ -109,9 +73,7 @@ export default function EmailVerification() {
                   onChange={(e) => handleChange(e, index)}
                   onKeyDown={(e) => handleKeyDown(e, index)}
                   ref={(el) => (inputRefs.current[index] = el)}
-                  className={`w-12 h-12 px-2 py-3 border rounded-lg focus:ring-4 focus:ring-indigo-400 text-gray-700 placeholder-gray-400 bg-gray-50 text-center text-2xl tracking-widest ${
-                    !digit ? "placeholder-opacity-100" : "placeholder-opacity-0"
-                  }`}
+                  className={`w-12 h-12 px-2 py-3 border rounded-lg focus:ring-4 focus:ring-indigo-400 text-gray-700 placeholder-gray-400 bg-gray-50 text-center text-2xl tracking-widest ${!digit ? 'placeholder-opacity-100' : 'placeholder-opacity-0'}`}
                   // nem tudom, hogy hogyan jobb
                   // placeholder="_"
                   maxLength="1"
@@ -123,5 +85,5 @@ export default function EmailVerification() {
         </div>
       </motion.div>
     </div>
-  )
+  );
 }

SerpentRace_Frontend/src/pages/Auth/LoginForm.jsx

@@ -1,52 +1,42 @@
 // src/pages/Auth/LoginForm.jsx
 // Bejelentkezési űrlap
 
-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 { login } from "../../api/userApi"
+import InputBox from "../../components/Inputs/InputBox";
+import Button from "../../components/Buttons/Button";
+import { motion } from "framer-motion";
+import { useState } from "react";
+import { login } from "../../api/userApi";
 
 export default function LoginForm() {
-  const [email, setEmail] = useState("")
-  const [password, setPassword] = useState("")
-  const [error, setError] = useState("")
-  const location = useLocation()
-  const [showSuccess, setShowSuccess] = useState(false)
-
-  useEffect(() => {
-    if (location.state && location.state.success) {
-      setShowSuccess(true)
-      setTimeout(() => setShowSuccess(false), 4000)
-    }
-  }, [location.state])
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
 
   function validateEmail(email) {
-    return /\S+@\S+\.\S+/.test(email)
+    return /\S+@\S+\.\S+/.test(email);
   }
 
   const handleSubmit = (e) => {
-    e.preventDefault()
-    setError("")
+    e.preventDefault();
+    setError("");
     if (!email || !password) {
-      setError("Minden mező kitöltése kötelező.")
-      return
+      setError("Minden mező kitöltése kötelező.");
+      return;
     }
     if (!validateEmail(email)) {
-      setError("Hibás email formátum.")
-      return
+      setError("Hibás email formátum.");
+      return;
     }
     // Backend API
     login(email, password)
       .then((data) => {
-        console.log(data)
-        console.log("Bejelentkezés:", { email, password })
+        console.log(data);
+        console.log("Bejelentkezés:", { email, password });
       })
       .catch((error) => {
-        setError("Hibás bejelentkezési adatok.")
-      })
-  }
+        setError("Hibás bejelentkezési adatok.");
+      });
+  };
 
   return (
     <motion.div
@@ -57,27 +47,24 @@ export default function LoginForm() {
       transition={{ duration: 0.25 }}
     >
       <h2 className="text-4xl font-extrabold text-center mb-6 text-gray-800 tracking-wide">Bejelentkezés</h2>
-      {showSuccess && (
-        <div className="fixed top-6 left-1/2 -translate-x-1/2 bg-green-500 text-white px-6 py-2 rounded shadow-lg z-50 text-center font-semibold transition-opacity duration-300">
-          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>
       )}
-      {error && <div className="mb-4 text-red-600 text-center font-semibold">{error}</div>}
       <form onSubmit={handleSubmit} className="space-y-6">
         <InputBox
           type="email"
           placeholder="Email cím"
           value={email}
-          onChange={(e) => setEmail(e.target.value)}
+          onChange={e => setEmail(e.target.value)}
         />
         <InputBox
           type="password"
           placeholder="Jelszó"
           value={password}
-          onChange={(e) => setPassword(e.target.value)}
+          onChange={e => setPassword(e.target.value)}
         />
         <Button text="Bejelentkezés" type="submit" />
       </form>
     </motion.div>
-  )
+  );
 }

SerpentRace_Frontend/src/pages/Auth/RegisterForm.jsx

@@ -1,79 +1,51 @@
 // src/pages/Auth/RegisterForm.jsx
 // Regisztrációs űrlap
 
-import InputBox from "../../components/Inputs/InputBox"
-import Button from "../../components/Buttons/Button"
-import { motion } from "framer-motion"
-import { useState } from "react"
-import { register } from "../../api/userApi"
-import { useNavigate } from "react-router-dom"
+import InputBox from "../../components/Inputs/InputBox";
+import Button from "../../components/Buttons/Button";
+import { motion } from "framer-motion";
+import { useState } from "react";
+import { register } from "../../api/userApi";
 
 export default function RegisterForm() {
-  const [lastname, setLastname] = useState("")
-  const [firstname, setFirstname] = useState("")
-  const [username, setUsername] = useState("")
-  const [email, setEmail] = useState("")
-  const [password, setPassword] = useState("")
-  const [confirmPassword, setConfirmPassword] = useState("")
-  const [phone, setPhone] = useState("")
-  const [error, setError] = useState("")
-  const [showErrorPopup, setShowErrorPopup] = useState(false)
-  const navigate = useNavigate()
+  const [lastname, setLastname] = useState("");
+  const [firstname, setFirstname] = useState("");
+  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [phone, setPhone] = useState("");
+  const [error, setError] = useState("");
 
   function validateEmail(email) {
-    return /\S+@\S+\.\S+/.test(email)
+    return /\S+@\S+\.\S+/.test(email);
   }
 
   const handleSubmit = async (e) => {
-    e.preventDefault()
-    setError("")
-    setShowErrorPopup(false)
+    e.preventDefault();
+    setError("");
 
     if (!lastname || !firstname || !username || !email || !password || !confirmPassword || !phone) {
-      setError("Minden mező kitöltése kötelező.")
-      return
+      setError("Minden mező kitöltése kötelező.");
+      return;
     }
     if (!validateEmail(email)) {
-      setError("Hibás email formátum.")
-      return
+      setError("Hibás email formátum.");
+      return;
     }
     if (password.length < 6) {
-      setError("A jelszónak legalább 6 karakter hosszúnak kell lennie.")
-      return
+      setError("A jelszónak legalább 6 karakter hosszúnak kell lennie.");
+      return;
     }
     if (password !== confirmPassword) {
-      setError("A jelszavak nem egyeznek.")
-      return
+      setError("A jelszavak nem egyeznek.");
+      return;
     }
     // Backend API
-    try {
-      const response = await register(username, email, password, firstname, lastname, phone)
-      // 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
-        }
-        setError(msg)
-        setShowErrorPopup(true)
-        setTimeout(() => setShowErrorPopup(false), 2000)
-      }
-    } catch (err) {
-      let msg = "Ismeretlen hiba történt."
-      if (err.response && err.response.data && err.response.data.error) {
-        msg = err.response.data.error
-      } else if (err.message) {
-        msg = err.message
-      }
-      setError(msg)
-      setShowErrorPopup(true)
-      setTimeout(() => setShowErrorPopup(false), 2000)
-    }
-  }
+    const response = await register(username, email, password, firstname, lastname, phone);
+    console.log(response);
+    console.log("Regisztráció:", { username, email, password, firstname, lastname, phone });
+  };
 
   return (
     <motion.div
@@ -84,56 +56,54 @@ export default function RegisterForm() {
       transition={{ duration: 0.25 }}
     >
       <h2 className="text-4xl font-extrabold text-center mb-6 text-gray-800 tracking-wide">Regisztráció</h2>
-      {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>
+      {error && (
+        <div className="mb-4 text-red-600 text-center font-semibold">{error}</div>
       )}
       <form onSubmit={handleSubmit} className="space-y-6">
         <InputBox
           type="text"
           placeholder="Vezetéknév"
           value={lastname}
-          onChange={(e) => setLastname(e.target.value)}
+          onChange={e => setLastname(e.target.value)}
         />
         <InputBox
           type="text"
           placeholder="Keresztnév"
           value={firstname}
-          onChange={(e) => setFirstname(e.target.value)}
+          onChange={e => setFirstname(e.target.value)}
         />
         <InputBox
           type="text"
           placeholder="Felhasználónév"
           value={username}
-          onChange={(e) => setUsername(e.target.value)}
+          onChange={e => setUsername(e.target.value)}
         />
         <InputBox
           type="email"
           placeholder="Email cím"
           value={email}
-          onChange={(e) => setEmail(e.target.value)}
+          onChange={e => setEmail(e.target.value)}
         />
         <InputBox
           type="phone"
           placeholder="Telefonszám"
           value={phone}
-          onChange={(e) => setPhone(e.target.value)}
+          onChange={e => setPhone(e.target.value)}
         />
         <InputBox
           type="password"
           placeholder="Jelszó"
           value={password}
-          onChange={(e) => setPassword(e.target.value)}
+          onChange={e => setPassword(e.target.value)}
         />
         <InputBox
           type="password"
           placeholder="Jelszó megerősítése"
           value={confirmPassword}
-          onChange={(e) => setConfirmPassword(e.target.value)}
+          onChange={e => setConfirmPassword(e.target.value)}
         />
         <Button text="Regisztráció" type="submit" />
       </form>
     </motion.div>
-  )
+  );
 }

SerpentRace_Frontend/src/pages/Home/Home.jsx

@@ -25,7 +25,7 @@ export default function Home() {
       <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-[640px]">
+      <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>