hibak.txt feladatai

This commit is contained in:
2025-10-22 09:30:09 +02:00
parent ad5f13a8e1
commit 825e9d1a08
8 changed files with 293 additions and 139 deletions
+27 -33
View File
@@ -16,6 +16,9 @@ import ScrollToTop from "./components/ScrollToTop"
import GameScreen from "./pages/Game/GameScreen"
import Reports from "./pages/Report/Reports"
import Lobby from "./pages/Lobby/Lobby"
import { ToastConfig } from "./components/Toastify/toastifyServices" // ✅ fontos: named import, nem default!
function App() {
const [isMobile, setIsMobile] = useState(false)
@@ -31,41 +34,32 @@ function App() {
return () => window.removeEventListener("resize", handleResize)
}, [])
// if (isMobile) {
// return (
// <Router>
// <Routes>
// <Route path="/register" element={<AuthRegister />} />
// <Route path="/login" element={<AuthLogin />} />
// <Route path="/verify-email" element={<EmailVerification />} />
// </Routes>
// </Router>
// );
// }
return (
<Router>
<Routes>
<Route path="/about" element={<About />} />
<Route path="/lobby" element={<Lobby />} />
<Route path="/register" element={<AuthRegister />} />
<Route path="/login" element={<AuthLogin />} />
<Route path="/verify-email" element={<EmailVerification />} />
<Route path="/forgot-password" element={<ForgotPassword />} />
<Route path="/reset-password" element={<ResetPassword />} />
<Route path="/test" element={<Test />} />
<Route path="/" element={<Landingpage />} />
<Route path="/home" element={<Home />} />
<Route path="/decks" element={<DeckManagerPage />} />
<Route path="/deck-creator" element={<DeckCreator />} />
<Route path="/deck-creator/:deckId" element={<DeckCreator />} />
<Route path="/game" element={<GameScreen />} />
<Route path="/companies" element={<CompanyHub />} />
<Route path="/report" element={<Reports />} />
<>
<Router>
<Routes>
<Route path="/about" element={<About />} />
<Route path="/lobby" element={<Lobby />} />
<Route path="/register" element={<AuthRegister />} />
<Route path="/login" element={<AuthLogin />} />
<Route path="/verify-email" element={<EmailVerification />} />
<Route path="/forgot-password" element={<ForgotPassword />} />
<Route path="/reset-password" element={<ResetPassword />} />
<Route path="/test" element={<Test />} />
<Route path="/" element={<Landingpage />} />
<Route path="/home" element={<Home />} />
<Route path="/decks" element={<DeckManagerPage />} />
<Route path="/deck-creator" element={<DeckCreator />} />
<Route path="/deck-creator/:deckId" element={<DeckCreator />} />
<Route path="/game" element={<GameScreen />} />
<Route path="/companies" element={<CompanyHub />} />
<Route path="/report" element={<Reports />} />
</Routes>
</Router>
{/* Add more routes as needed */}
</Routes>
</Router>
{/* ✅ Toastify Container */}
<ToastConfig />
</>
)
}
@@ -7,6 +7,8 @@ import TaskCardEditor from "./TaskCardEditor.jsx"
import JokerCardEditor from "./JokerCardEditor.jsx"
import LuckCardEditor from "./LuckCardEditor.jsx"
import CardPreview from "./CardPreview.jsx"
import { notifySuccess, notifyError,notifyWarning } from "../../components/Toastify/toastifyServices"
export default function CardEditor({ card, isCreating, cardType, onSave, onCancel }) {
const [cardData, setCardData] = useState(null)
@@ -65,33 +67,24 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
}
}, [card, isCreating, cardType])
const handleSave = () => {
if (!cardData) return
// Validáció
if (!validateCard(cardData)) return
onSave(cardData)
}
const validateCard = (data) => {
if (data.type === 'task') {
if (!data.question && !data.statement) {
alert("Kérdés vagy állítás megadása kötelező!")
notifyError("Kérdés vagy állítás megadása kötelező!")
return false
}
if (data.subType === 'quiz' && data.options.some(opt => !opt.trim())) {
alert("Minden válaszlehetőséget ki kell tölteni!")
notifyError("Minden válaszlehetőséget ki kell tölteni!")
return false
}
} else if (data.type === 'joker') {
if (!data.text || !data.text.trim()) {
alert("Joker kártya szövege nem lehet üres!")
notifyError("Joker kártya szövege nem lehet üres!")
return false
}
} else if (data.type === 'luck') {
if (!data.text || !data.text.trim()) {
alert("Szerencse kártya szövege nem lehet üres!")
notifyError("Szerencse kártya szövege nem lehet üres!")
return false
}
}
@@ -103,6 +96,19 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
setCardData(prev => prev ? { ...prev, ...updates } : null)
}
const handleSave = () => {
if (!cardData) return
if (!validateCard(cardData)) return
try {
onSave(cardData)
notifySuccess('Kártya sikeresen mentve!')
} catch (error) {
notifyError('Hiba történt a kártya mentése során: ' + (error?.message || String(error)))
}
}
// Ha nincs kiválasztott kártya vagy új kártya létrehozás
if (!cardData) {
return (
@@ -134,7 +140,7 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
</div>
<div>
<h2 className="text-xl font-bold text-[color:var(--color-text)]">
{isCreating ? 'Új' : 'Szerkesztés'} {' '}
{isCreating ? 'Új' : 'Szerkesztés'}{' '}
{cardData.type === 'task' && 'Feladat kártya'}
{cardData.type === 'joker' && 'Joker kártya'}
{cardData.type === 'luck' && 'Szerencse kártya'}
@@ -168,12 +174,15 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
</button>
<button
onClick={onCancel}
className="flex items-center gap-2 px-4 py-2 rounded-xl bg-[color:var(--color-background)] hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-all duration-200"
>
<FaTimes />
Mégse
</button>
onClick={() => {
notifyWarning('Kártya készítés megszakítva')
onCancel()
}}
className="flex items-center gap-2 px-4 py-2 rounded-xl bg-[color:var(--color-background)] hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-all duration-200"
>
<FaTimes />
Mégse
</button>
<button
onClick={handleSave}
@@ -189,12 +198,10 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
{/* Content */}
<div className="flex-1 overflow-hidden">
{showPreview ? (
/* Preview Mode */
<div className="h-full bg-[color:var(--color-background)] flex items-center justify-center p-6">
<CardPreview card={cardData} />
</div>
) : (
/* Edit Mode */
<div className="h-full overflow-y-auto p-6">
{cardData.type === 'task' && (
<TaskCardEditor
@@ -63,7 +63,7 @@ const LandingPage = ({ onNavigateToPlay, onNavigateToAuth }) => {
{/* If not authenticated show Login/Register; if authenticated show Home button */}
{!auth ? (
<>
<ButtonGreen text="Bejelntekezés" onClick={onNavigateToPlay} width="w-60" />
<ButtonGreen text="Bejelentkezés" onClick={onNavigateToPlay} width="w-60" />
<ButtonGreen text="Regisztráció" onClick={onNavigateToAuth} width="w-60" />
</>
) : (
@@ -37,29 +37,29 @@ const Navbar = () => {
{isLoggedIn ? (
<>
<Link to="/home" className={navLinkClass}>
Home
Főoldal
</Link>
<Link to="/decks" className={navLinkClass}>
Decks
Paklik
</Link>
<Link to="/report" className={navLinkClass}>
Stats
Statisztika
</Link>
</>
) : (
<Link to="/" className={navLinkClass}>
Home
Főoldal
</Link>
)}
<Link to="/about" className={navLinkClass}>
About
Rólunk
</Link>
<Link to="/companies" className={navLinkClass}>
Contact
Kapcsolat
</Link>
{!isLoggedIn && (
<Link to="/home" className={navLinkClassPlay}>
Play
Játék
</Link>
)}
{isLoggedIn && (
@@ -120,21 +120,21 @@ const Navbar = () => {
<div className="md:hidden bg-emerald-600 px-2 pt-2 pb-3 space-y-1">
{isLoggedIn ? (
<Link to="/home" className={navLinkClass}>
Home
Főoldal
</Link>
) : (
<Link to="/" className={navLinkClass}>
Home
Főoldal
</Link>
)}
<Link to="/leaderboard" className={navLinkClass}>
Leaderboard
Ranglista
</Link>
<Link to="/about" className={navLinkClass}>
About
Rólunk
</Link>
<Link to="/companies" className={navLinkClass}>
Contact
Kapcsolat
</Link>
{!isLoggedIn && (
<div className="px-2">
@@ -0,0 +1,165 @@
import { toast, ToastContainer, Bounce } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
/**
* 🔧 Ezt csak egyszer kell betenni az App.jsx-be!
* <ToastConfig /> = az a komponens, ami kirendereli a toastokat
*/
export const ToastConfig = () => (
<ToastContainer
position="bottom-right"
autoClose={5000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick={false}
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover
theme="light"
transition={Bounce}
/>
);
/**
* 🦄 Alapértelmezett toast üzenet (semleges)
* notify("Üzenet szövege")
*/
export const notify = (message) => {
toast(message, {
position: "bottom-right",
autoClose: 5000,
hideProgressBar: false,
closeOnClick: false,
pauseOnHover: true,
draggable: true,
theme: "light",
transition: Bounce,
});
};
/**
* ✅ Sikeres művelethez
* notifySuccess("Sikeres mentés!")
*/
export const notifySuccess = (message) => {
toast.success(message, {
position: "bottom-right",
autoClose: 4000,
theme: "light",
transition: Bounce,
});
};
/**
* ❌ Hibás művelethez
* notifyError("Hiba történt a mentés során!")
*/
export const notifyError = (message) => {
toast.error(message, {
position: "bottom-right",
autoClose: 5000,
theme: "light",
transition: Bounce,
});
};
/**
* ️ Információs üzenethez
* notifyInfo("Friss adatok betöltve!")
*/
export const notifyInfo = (message) => {
toast.info(message, {
position: "bottom-right",
autoClose: 4000,
theme: "light",
transition: Bounce,
});
};
/**
* ⚠️ Figyelmeztetéshez
* notifyWarning("Figyelem! Nem mentett módosítások vannak!")
*/
export const notifyWarning = (message) => {
toast.warn(message, {
position: "bottom-right",
autoClose: 4000,
theme: "light",
transition: Bounce,
});
};
// import React, { useState } from "react";
// import { notifyWarning } from "../../components/Toastify/toastifyServices";
// function AuthLogin() {
// const [email, setEmail] = useState("");
// const [password, setPassword] = useState("");
// const handleLogin = async (e) => {
// e.preventDefault();
// // Példa jelszó ellenőrzés logikára:
// if (password !== "titkosjelszo123") {
// notifyWarning("⚠️ Hibás jelszó! Kérlek próbáld újra.");
// return;
// }
// // Ha jó a jelszó:
// notifySuccess("✅ Sikeres bejelentkezés!");
// };
// return (
// <form onSubmit={handleLogin} className="login-form">
// <input
// type="email"
// placeholder="Email cím"
// value={email}
// onChange={(e) => setEmail(e.target.value)}
// />
// <input
// type="password"
// placeholder="Jelszó"
// value={password}
// onChange={(e) => setPassword(e.target.value)}
// />
// <button type="submit">Bejelentkezés</button>
// </form>
// );
// }
// export default AuthLogin;
// meghivas
// import { toast } from "react-toastify";
// // 🔔 Alap toast
// export const notify = (msg) => toast(msg);
// // ✅ Sikeres üzenet
// export const notifySuccess = (msg) => toast.success(msg);
// // ⚠️ Figyelmeztetés
// export const notifyWarning = (msg) => toast.warning(msg);
// // ❌ Hiba
// export const notifyError = (msg) => toast.error(msg);
// // ️ Információ
// export const notifyInfo = (msg) => toast.info(msg);
// hasznalat
// import { notifyWarning } from "../../components/Toastify/toastifyServices";
// if (password !== "titkos") {
// notifyWarning("⚠️ Hibás jelszó!");
// }
@@ -1,12 +1,11 @@
// 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, useNavigate } from "react-router-dom"
import { login } from "../../api/userApi"
import { FaArrowLeft } from "react-icons/fa"
export default function LoginForm() {
const [email, setEmail] = useState("")
@@ -32,23 +31,23 @@ export default function LoginForm() {
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((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)
@@ -61,7 +60,7 @@ export default function LoginForm() {
setTimeout(() => setShowErrorPopup(false), 2000)
}
})
.catch((error) => {
.catch(() => {
setError("Hibás bejelentkezési adatok.")
setShowErrorPopup(true)
setTimeout(() => setShowErrorPopup(false), 2000)
@@ -75,18 +74,35 @@ export default function LoginForm() {
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.25 }}
className="relative flex flex-col items-center"
>
<h2 className="text-4xl font-extrabold text-center mb-6 text-gray-800 tracking-wide">Bejelentkezés</h2>
{/* 🔙 Vissza nyíl gomb — most pontosan a fehér box bal felső sarkában */}
<div
className="absolute -top-6 -left-6 flex items-center group cursor-pointer select-none"
onClick={() => navigate("/")}
>
<FaArrowLeft className="text-gray-700 text-xl transition-transform duration-300 group-hover:-translate-x-1" />
<span className="ml-2 text-gray-700 font-medium opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300">
Vissza a főoldalra
</span>
</div>
<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>
)}
{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"
@@ -1,12 +1,12 @@
// 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, useLocation } from "react-router-dom"
import { ToastConfig } from "../../components/Toastify/toastifyServices"
import { FaArrowLeft } from "react-icons/fa"
export default function RegisterForm() {
const [lastname, setLastname] = useState("")
@@ -46,36 +46,26 @@ export default function RegisterForm() {
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) {
// Ha már a /login útvonalon van a user, a sima navigate nem biztos, hogy újraindítja a komponenst.
// Ilyenkor előbb beállítjuk a state-et, majd kényszerítünk egy teljes oldalletöltést.
ToastConfig("✅ Sikeres regisztráció!")
if (location.pathname === "/login") {
navigate("/login", { state: { success: true } })
// teljes újratöltés, hogy a login oldal újra feldolgozza a state-et
window.location.reload()
} else {
navigate("/login", { state: { success: true } })
}
} else {
let msg = "Sikertelen regisztráció."
if (response && response.data && response.data.error) {
msg = response.data.error
}
if (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
}
let msg = err?.response?.data?.error || err.message || "Ismeretlen hiba történt."
setError(msg)
setShowErrorPopup(true)
setTimeout(() => setShowErrorPopup(false), 2000)
@@ -89,56 +79,37 @@ export default function RegisterForm() {
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.25 }}
className="relative flex flex-col items-center"
>
<h2 className="text-4xl font-extrabold text-center mb-6 text-gray-800 tracking-wide">Regisztráció</h2>
{/* 🔙 Vissza nyíl gomb ugyanott, mint a login oldalon */}
<div
className="absolute -top-2 -left-1 flex items-center group cursor-pointer select-none"
onClick={() => navigate("/")}
>
<FaArrowLeft className="text-gray-700 text-xl transition-transform duration-300 group-hover:-translate-x-1" />
<span className="ml-2 text-gray-700 font-medium opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300">
Vissza a főoldalra
</span>
</div>
<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>
)}
<form onSubmit={handleSubmit} className="space-y-6">
<InputBox
type="text"
placeholder="Vezetéknév"
value={lastname}
onChange={(e) => setLastname(e.target.value)}
/>
<InputBox
type="text"
placeholder="Keresztnév"
value={firstname}
onChange={(e) => setFirstname(e.target.value)}
/>
<InputBox
type="text"
placeholder="Felhasználónév"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<InputBox
type="email"
placeholder="Email cím"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<InputBox
type="phone"
placeholder="Telefonszám"
value={phone}
onChange={(e) => setPhone(e.target.value)}
/>
<InputBox
type="password"
placeholder="Jelszó"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<InputBox
type="password"
placeholder="Jelszó megerősítése"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
/>
<InputBox type="text" placeholder="Vezetéknév" value={lastname} onChange={(e) => setLastname(e.target.value)} />
<InputBox type="text" placeholder="Keresztnév" value={firstname} onChange={(e) => setFirstname(e.target.value)} />
<InputBox type="text" placeholder="Felhasználónév" value={username} onChange={(e) => setUsername(e.target.value)} />
<InputBox type="email" placeholder="Email cím" value={email} onChange={(e) => setEmail(e.target.value)} />
<InputBox type="phone" placeholder="Telefonszám" value={phone} onChange={(e) => setPhone(e.target.value)} />
<InputBox type="password" placeholder="Jelszó" value={password} onChange={(e) => setPassword(e.target.value)} />
<InputBox type="password" placeholder="Jelszó megerősítése" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} />
<Button text="Regisztráció" type="submit" />
</form>
</motion.div>
@@ -8,6 +8,7 @@ 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'
import { notifySuccess, notifyError } from "../../components/Toastify/toastifyServices"
export default function DeckCreator() {
const { deckId } = useParams() // URL-ből deck ID (új deck esetén undefined)
@@ -100,10 +101,10 @@ export default function DeckCreator() {
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!')
notifySuccess(' Deck sikeresen mentve!')
} catch (error) {
console.error('Mentési hiba:', error)
alert(' Hiba történt a mentés során: ' + (error?.response?.data?.error || error.message || String(error)))
notifyError(' Hiba történt a mentés során: ' + (error?.response?.data?.error || error.message || String(error)))
}
}