Merge pull request 'redirect fix' (#48) from authlocalstorage into main

Reviewed-on: #48

SerpentRace_Frontend/src/api/deckApi.js

@@ -10,16 +10,6 @@ export const createDeck = async (deck) => {
   }
 }
 
-// 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/components/Landingpage/DeckManager.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react"
+import React, { useState } from "react"
 import { useNavigate } from "react-router-dom"
 import {
   FaPlus,
@@ -20,7 +20,19 @@ const deckTypes = [
   { label: "Fun", color: "var(--color-fun)" },
 ]
 
-// initial state will be fetched from backend
+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" },
+]
 
 const origins = ["Mind", "Vállalati", "Saját"]
 
@@ -70,39 +82,9 @@ 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)
 
-  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) => {
+  // Filter logic (mock)
+  let filteredDecks = mockDecks.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())
@@ -273,14 +255,8 @@ 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 (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) => {
+          {/* Existing Decks (Mockup) */}
+          {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/Navbar/Navbar.jsx

@@ -1,41 +1,75 @@
 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}>
+          <div className="hidden md:flex space-x-8 items-center">
+            <Link to="/home" className={navLinkClass}>
               Home
-            </a>
-            <a href="/report" className={navLinkClass}>
+            </Link>
+            <Link to="/decks" className={navLinkClass}>
+              Decks
+            </Link>
+            <Link to="/report" className={navLinkClass}>
               Stats
-            </a>
-            <a href="/about" className={navLinkClass}>
+            </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 +103,42 @@ 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}>
+          <Link to="/home" className={navLinkClass}>
             Home
-          </a>
-          <a href="#" className={navLinkClass}>
+          </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/components/PopUp/DeckInfoPopUp.jsx

@@ -14,10 +14,6 @@ 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
@@ -37,25 +33,13 @@ export default function DeckInfoPopUp({ deck, onClose }) {
 
   const currentDeckType = deckTypes[deck.type] || { label: deck.type, color: "var(--color-success)" }
 
-  // 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 })
-
+  // Mock data - ezeket majd a backend adatokra cseréljük
   const mockData = {
-    ...deck,
-    creator,
-    privacy,
-    questionsCount,
-    answersCount
+    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
   }
 
   const formatDate = (dateString) => {

SerpentRace_Frontend/src/pages/Home/Home.jsx

@@ -1,46 +0,0 @@
-// src/pages/Home/Home.jsx
-// Régi PlayMenu-s oldal, "Home" néven
-
-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}`)
-  }
-  const handleCreateGame = () => {
-    alert("Új játék létrehozása")
-  }
-  const user = { name: localStorage.getItem("username") }
-
-  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,20 @@
 // 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 { 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()
+  const user = localStorage.getItem("username")
+
+  // Logoljuk ki a user-t minden renderkor
+  console.log("Home user:", user)
+
   // Dummy callbackok és user példa
   const handleJoinGame = (code) => {
     alert(`Csatlakozás játékhoz: ${code}`)
@@ -15,7 +22,14 @@ export default function Home() {
   const handleCreateGame = () => {
     alert("Új játék létrehozása")
   }
-  const user = { name: "Teszt Elek" }
+  const userObj = { name: user }
+
+  // Ha nincs bejelentkezett felhasználó a localStorage-ben, átirányítjuk a /login oldalra
+  useEffect(() => {
+    if (!user) {
+      navigate("/login")
+    }
+  }, [navigate, user])
 
   return (
     <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
@@ -26,7 +40,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 />