Donat/SerpentRace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Reviewed-on: #48
This commit was merged in pull request #48.
This commit is contained in:
Walke
2025-10-15 16:40:22 +00:00
parent 75f2b215a1 76fa204ae8
commit d1b4141e63
3 changed files with 100 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SerpentRace_Frontend/src/components/Navbar/Navbar.jsx
+82 -24
View File
@@ -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/pages/Home/Home.jsx
-46
View File
@@ -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
+18 -4
View File
@@ -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 />