deckkezeles, es deckek eltarolasa

Reviewed-on: #47

SerpentRace_Backend/.env.dev

@@ -32,3 +32,10 @@ MINIO_USE_SSL=false
 MAX_SPECIAL_FIELDS_PERCENTAGE=67
 MAX_GENERATION_TIME_SECONDS=20
 GENERATION_ERROR_TOLERANCE=15
+
+# EMAIL SERVICE CONFIGURATION
+EMAIL_HOST=smtp.gmail.com
+EMAIL_PORT=587
+EMAIL_USER=your_email@domain.com
+EMAIL_PASS=your_email_password
+EMAIL_FROM=noreply@serpentrace.com

SerpentRace_Frontend/src/api/deckApi.js

@@ -0,0 +1,25 @@
+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
+  }
+}
+
+// Get paginated decks (authenticated)
+export const getDecksPage = async (from = 0, to = 49) => {
+  try {
+    const response = await apiClient.get(`/decks/page/${from}/${to}`)
+    return response.data
+  } catch (err) {
+    throw err
+  }
+}
+
+export default {
+  createDeck
+}

SerpentRace_Frontend/src/api/userApi.js

@@ -1,12 +1,11 @@
-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 ? import.meta.env.VITE_API_URL : '') + "/api",
+  wsURL: "http://localhost:3000",
   timeout: 10000,
-  retryAttempts: 3
-};
+  retryAttempts: 3,
+}
 
 export const apiClient = axios.create({
   baseURL: API_CONFIG.baseURL,
@@ -19,20 +18,40 @@ export const apiClient = axios.create({
 
 //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
+  } 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;
-    } catch (error) {
-        throw error;
-    }
-};
+  try {
+    const response = await apiClient.post("/users/create", { username, email, password, fname, lname, phone })
+    return response
+  } 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
+  }
+}
+
+// Get current user's game statistics
+export const getUserStats = async () => {
+  try {
+    const response = await apiClient.get("/users/me/stats")
+    return response.data
+  } catch (error) {
+    throw error
+  }
+}

SerpentRace_Frontend/src/components/Footer/Footer.jsx

@@ -2,7 +2,6 @@ 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 = () => {
@@ -35,54 +34,59 @@ const Footer = () => {
   return (
     <footer
       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"
-      }`}
+      className="relative bg-zinc-900 text-white border-t-2 border-zinc-800 mt-auto py-8"
       style={{ transformOrigin: "bottom center" }}
     >
-      <style>
-        {`
-          .footer-animate {
-            transition: opacity 0.8s ease, transform 0.8s ease;
-          }
-        `}
-      </style>
-
       <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"
-          >
+        <div className="flex flex-col items-center">
+          <a href="/" className="hover:scale-105 hover:brightness-125">
             <Logo size={100} />
           </a>
           <span className="font-extrabold text-xl mt-2 tracking-wide">SerpentRace</span>
         </div>
 
         {/* Oldalak */}
-        <div className="flex flex-col gap-1 footer-animate">
+        <div className="flex flex-col gap-1">
           <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="/about" className="hover:underline hover:text-green-400 transition">
+          <a href="/" className="hover:underline hover:text-green-400">
+            Főoldal
+          </a>
+          <a href="/about" className="hover:underline hover:text-green-400">
             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">
+            Kapcsolat
+          </a>
         </div>
 
         {/* Közösség */}
-        <div className="flex flex-col gap-1 footer-animate">
+        <div className="flex flex-col gap-1">
           <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"
+          >
+            Discord
+          </a>
+          <a
+            href="https://github.com/"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hover:underline hover:text-green-400"
+          >
+            GitHub
+          </a>
         </div>
 
         {/* Elérhetőség */}
-        <div className="flex flex-col gap-1 footer-animate">
+        <div className="flex flex-col gap-1">
           <span className="text-lg font-semibold text-green-400 underline underline-offset-4 mb-2 drop-shadow-sm">
             Elérhetőség
           </span>
@@ -91,7 +95,7 @@ const Footer = () => {
         </div>
       </div>
 
-      <div className="text-center mt-8 text-sm opacity-70 footer-animate">
+      <div className="text-center mt-8 text-sm opacity-70">
         © {new Date().getFullYear()} SerpentRace. Minden jog fenntartva.
       </div>
 
@@ -99,7 +103,7 @@ const Footer = () => {
       {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"
+          className="fixed bottom-6 right-6 bg-green-500 hover:bg-green-600 text-white p-3 rounded-full shadow-lg hover:scale-110"
           aria-label="Ugrás az oldal tetejére"
         >
           <ArrowUpIcon />

SerpentRace_Frontend/src/components/Landingpage/DeckManager.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react"
+import React, { useState, useEffect } from "react"
 import { useNavigate } from "react-router-dom"
 import {
   FaPlus,
@@ -20,19 +20,7 @@ const deckTypes = [
   { label: "Fun", color: "var(--color-fun)" },
 ]
 
-const mockDecks = [
-  // Just for visual mockup
-  { id: 1, name: "Party Luck", type: "Luck", created: "2025-07-01", origin: "Vállalati" },
-  { id: 2, name: "Quiz Night", type: "Question", created: "2025-07-02", origin: "Saját" },
-  { id: 3, name: "Fun Times", type: "Fun", created: "2025-07-03", origin: "Vállalati" },
-  { id: 4, name: "Corporate Challenge", type: "Question", created: "2025-07-04", origin: "Vállalati" },
-  { id: 5, name: "Randomizer", type: "Luck", created: "2025-07-05", origin: "Saját" },
-  { id: 6, name: "Afterwork luck", type: "Luck", created: "2025-07-06", origin: "Saját" },
-  { id: 7, name: "Serpent Quiz", type: "Question", created: "2025-07-07", origin: "Vállalati" },
-  { id: 8, name: "Green Fortune", type: "Luck", created: "2025-07-08", origin: "Vállalati" },
-  { id: 9, name: "Team Builder", type: "Fun", created: "2025-07-09", origin: "Saját" },
-  { id: 10, name: "Knowledge Race", type: "Question", created: "2025-07-10", origin: "Saját" },
-]
+// initial state will be fetched from backend
 
 const origins = ["Mind", "Vállalati", "Saját"]
 
@@ -82,9 +70,39 @@ const DeckManager = () => {
   const [search, setSearch] = useState("")
   const [showSortHelp, setShowSortHelp] = useState(false)
   const [selectedDeck, setSelectedDeck] = useState(null)
+  const [decks, setDecks] = useState([])
+  const [loading, setLoading] = useState(false)
 
-  // Filter logic (mock)
-  let filteredDecks = mockDecks.filter((deck) => {
+  useEffect(() => {
+    let mounted = true
+    const load = async () => {
+      setLoading(true)
+      try {
+        const result = await import('../../api/deckApi').then(m => m.getDecksPage(0, 49))
+        if (!mounted) return
+        // map backend deck shape to UI shape
+        const mapped = result.decks.map(d => ({
+          id: d.id,
+          name: d.name,
+          type: d.type === 2 ? 'Question' : d.type === 1 ? 'Joker' : 'Luck',
+          created: d.creationdate ? new Date(d.creationdate).toLocaleDateString() : '',
+          origin: d.ctype === 2 ? 'Vállalati' : d.ctype === 0 ? 'Mind' : 'Saját',
+          raw: d
+        }))
+        setDecks(mapped)
+      } catch (err) {
+        console.error('Failed to load decks', err)
+      } finally {
+        setLoading(false)
+      }
+    }
+    load()
+    return () => { mounted = false }
+  }, [])
+
+  // Filter logic
+  const sourceDecks = decks
+  let filteredDecks = sourceDecks.filter((deck) => {
     const typeMatch = selectedType === "All" || deck.type === selectedType
     const originMatch = selectedOrigin === "Mind" || deck.origin === selectedOrigin
     const searchMatch = !search || deck.name.toLowerCase().includes(search.toLowerCase())
@@ -255,8 +273,14 @@ const DeckManager = () => {
             <FaPlus style={{ color: "var(--color-success)" }} className="text-5xl mb-2" />
             <span className="text-[color:var(--color-text)] font-semibold">Új pakli létrehozása</span>
           </div>
-          {/* Existing Decks (Mockup) */}
-          {filteredDecks.map((deck) => {
+          {/* Existing Decks (from backend) */}
+          {loading && (
+            <div className="col-span-full text-center text-[color:var(--color-text-muted)]">Betöltés...</div>
+          )}
+          {!loading && filteredDecks.length === 0 && (
+            <div className="col-span-full text-center text-[color:var(--color-text-muted)]">Nincsenek mentett paklik.</div>
+          )}
+          {!loading && filteredDecks.map((deck) => {
             const deckType = deckTypes.find((t) => t.label === deck.type)
             const borderColor = deckType ? deckType.color : "var(--color-success)"
             return (

SerpentRace_Frontend/src/components/Landingpage/LandingPage.jsx

@@ -55,7 +55,7 @@ const LandingPage = ({ onNavigateToPlay, onNavigateToAuth }) => {
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.7, delay: 1 }}
           >
-            <ButtonGreen text="Játék" onClick={onNavigateToPlay} width="w-60" />
+            <ButtonGreen text="Bejelntekezés" onClick={onNavigateToPlay} width="w-60" />
             <ButtonGreen text="Regisztráció" onClick={onNavigateToAuth} width="w-60" />
           </motion.div>
         </div>

SerpentRace_Frontend/src/components/PopUp/DeckInfoPopUp.jsx

@@ -14,6 +14,10 @@ import {
 export default function DeckInfoPopUp({ deck, onClose }) {
   if (!deck) return null
 
+  // Debug: Log the deck structure to see what we're working with
+  console.log('Deck in popup:', deck)
+  console.log('Cards:', deck.cards)
+
   // Scroll blokkolás amikor a popup nyitva van
   useEffect(() => {
     // Scroll letiltása
@@ -33,13 +37,25 @@ export default function DeckInfoPopUp({ deck, onClose }) {
 
   const currentDeckType = deckTypes[deck.type] || { label: deck.type, color: "var(--color-success)" }
 
-  // Mock data - ezeket majd a backend adatokra cseréljük
+  // Use real deck data with safe fallbacks
+  const creator = deck.creatorName || deck.creator || (deck.user && deck.user.name) || "Ismeretlen"
+  const privacy = deck.origin === "Vállalati" || deck.ctype === 1 || deck.privacy === 'public' ? "Publikus" : "Privát"
+
+  // Get data from raw if available
+  const rawData = deck.raw || deck
+  
+  // Use played number from raw data for answers count
+  const questionsCount = rawData.cardCount || 0
+  const answersCount = rawData.playedNumber || 0
+
+  console.log('Calculated counts:', { questionsCount, answersCount, rawData })
+
   const mockData = {
-    creator: "John Doe",
-    privacy: deck.origin === "Vállalati" ? "Publikus" : "Privát", 
-    questionsCount: Math.floor(Math.random() * 50) + 10,
-    answersCount: Math.floor(Math.random() * 200) + 50,
-    ...deck
+    ...deck,
+    creator,
+    privacy,
+    questionsCount,
+    answersCount
   }
 
   const formatDate = (dateString) => {

SerpentRace_Frontend/src/pages/Auth/AuthCard.jsx

@@ -1,46 +1,44 @@
 // 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 ? "600px" : "385px" }}
+      animate={{ height: isRegistering ? "750px" : "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">
-          Lépj be és légy a legjobb!  
+          Lépj be és légy a legjobb!
         </p>
       </div>
 
       {/* 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,58 +1,94 @@
 // src/pages/Auth/EmailVerification.jsx
 // Rublikák a kód beírásához, email ellenőrzéshez
 
-import { useState, useRef } from "react";
-import Background from "../../assets/backgrounds/Background";
-import { motion } from "framer-motion";
-import Button from "../../components/Buttons/Button";
-
+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"
 
 export default function EmailVerification() {
-  const [code, setCode] = useState(Array(6).fill(""));
-  const inputRefs = useRef([]);
+  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 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 = (e) => {
-    e.preventDefault();
-    console.log("Kód:", code.join(""));
-    // Backend API
-  };
+  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.")
+    }
+  }
 
   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" }}
@@ -73,7 +109,9 @@ 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"
@@ -85,5 +123,5 @@ export default function EmailVerification() {
         </div>
       </motion.div>
     </div>
-  );
-}
+  )
+}

SerpentRace_Frontend/src/pages/Auth/LoginForm.jsx

@@ -1,42 +1,72 @@
 // 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 } from "react";
-import { login } from "../../api/userApi";
+import InputBox from "../../components/Inputs/InputBox"
+import Button from "../../components/Buttons/Button"
+import { motion } from "framer-motion"
+import { useState, useEffect } from "react"
+import { useLocation, useNavigate } from "react-router-dom"
+import { login } from "../../api/userApi"
 
 export default function LoginForm() {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState("");
+  const [email, setEmail] = useState("")
+  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) {
+      setShowSuccess(true)
+      setTimeout(() => setShowSuccess(false), 4000)
+    }
+  }, [location.state])
 
   function validateEmail(email) {
-    return /\S+@\S+\.\S+/.test(email);
+    return /\S+@\S+\.\S+/.test(email)
   }
 
   const handleSubmit = (e) => {
-    e.preventDefault();
-    setError("");
+    e.preventDefault()
+    setError("")
+    setShowErrorPopup(false)
     if (!email || !password) {
-      setError("Minden mező kitöltése kötelező.");
-      return;
+      setError("Minden mező kitöltése kötelező.")
+      setShowErrorPopup(true)
+      setTimeout(() => setShowErrorPopup(false), 2000)
+      return
     }
     if (!validateEmail(email)) {
-      setError("Hibás email formátum.");
-      return;
+      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.");
-      });
-  };
+        setError("Hibás bejelentkezési adatok.")
+        setShowErrorPopup(true)
+        setTimeout(() => setShowErrorPopup(false), 2000)
+      })
+  }
 
   return (
     <motion.div
@@ -47,24 +77,31 @@ 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>
-      {error && (
-        <div className="mb-4 text-red-600 text-center font-semibold">{error}</div>
+      {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>
+      )}
+      {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"
           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,51 +1,77 @@
 // 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 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"
 
 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 [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()
 
   function validateEmail(email) {
-    return /\S+@\S+\.\S+/.test(email);
+    return /\S+@\S+\.\S+/.test(email)
   }
 
   const handleSubmit = async (e) => {
-    e.preventDefault();
-    setError("");
+    e.preventDefault()
+    setError("")
+    setShowErrorPopup(false)
 
     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
-    const response = await register(username, email, password, firstname, lastname, phone);
-    console.log(response);
-    console.log("Regisztráció:", { username, email, password, firstname, lastname, phone });
-  };
+    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 } })
+      } else {
+        let msg = "Sikertelen regisztráció."
+        if (response && response.data && response.data.error) {
+          msg = response.data.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)
+    }
+  }
 
   return (
     <motion.div
@@ -56,54 +82,56 @@ 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>
-      {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="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/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/Home/Home.jsx

@@ -1,13 +1,24 @@
 // src/pages/Home/Home.jsx
 // Régi PlayMenu-s oldal, "Home" néven
 
-import { useState } from "react"
+import { useState, useEffect } from "react"
+import { useNavigate } from "react-router-dom"
 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() {
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    const username = localStorage.getItem("username")
+    const authLevel = localStorage.getItem("authLevel")
+    if (!username || !authLevel) {
+      navigate("/login")
+    }
+  }, [navigate])
+
   // Dummy callbackok és user példa
   const handleJoinGame = (code) => {
     alert(`Csatlakozás játékhoz: ${code}`)
@@ -15,7 +26,7 @@ export default function Home() {
   const handleCreateGame = () => {
     alert("Új játék létrehozása")
   }
-  const user = { name: "Teszt Elek" }
+  const user = { name: localStorage.getItem("username") }
 
   return (
     <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">

SerpentRace_Frontend/src/pages/Landing/Landingpage.jsx

@@ -1,23 +1,23 @@
 // src/pages/Landing/Landingpage.jsx
 // Főoldal - Landing Page
 
-import { useState } from "react"
+
+import { useNavigate } from "react-router-dom"
 import Navbar from "../../components/Navbar/Navbar"
 import Footer from "../../components/Footer/Footer.jsx"
 import Background from "../../assets/backgrounds/Background.jsx"
 import LandingPage from "../../components/Landingpage/LandingPage.jsx"
 
 export default function LandingPageMain() {
-  // Navigációs callbackok
+  const navigate = useNavigate();
+
   const handleNavigateToPlay = () => {
-    // Itt lehet navigálni a játék oldalra
-    alert("Navigáció a játék oldalra")
-  }
+    navigate("/login"); 
+  };
 
   const handleNavigateToAuth = () => {
-    // Itt lehet navigálni a bejelentkezés oldalra
-    alert("Navigáció a bejelentkezés oldalra")
-  }
+    navigate("/register");
+  };
 
   return (
     <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
@@ -32,5 +32,5 @@ export default function LandingPageMain() {
       </main>
       <Footer />
     </div>
-  )
+  );
 }

SerpentRace_Frontend/src/pages/Report/Reports.jsx

@@ -3,6 +3,7 @@ import { useState } from "react"
 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"
 
 export default function Reports() {
   return (