hibak.txt feladatai #59

Merged
Donat merged 3 commits from zsolahibatxt into main 2025-10-22 19:57:17 +02:00
8 changed files with 293 additions and 139 deletions
Showing only changes of commit 825e9d1a08 - Show all commits
+27 -33
View File
@@ -16,6 +16,9 @@ import ScrollToTop from "./components/ScrollToTop"
import GameScreen from "./pages/Game/GameScreen" import GameScreen from "./pages/Game/GameScreen"
import Reports from "./pages/Report/Reports" import Reports from "./pages/Report/Reports"
import Lobby from "./pages/Lobby/Lobby" import Lobby from "./pages/Lobby/Lobby"
import { ToastConfig } from "./components/Toastify/toastifyServices" // ✅ fontos: named import, nem default!
function App() { function App() {
const [isMobile, setIsMobile] = useState(false) const [isMobile, setIsMobile] = useState(false)
@@ -31,41 +34,32 @@ function App() {
return () => window.removeEventListener("resize", handleResize) 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 ( return (
<Router> <>
<Routes> <Router>
<Route path="/about" element={<About />} /> <Routes>
<Route path="/lobby" element={<Lobby />} /> <Route path="/about" element={<About />} />
<Route path="/register" element={<AuthRegister />} /> <Route path="/lobby" element={<Lobby />} />
<Route path="/login" element={<AuthLogin />} /> <Route path="/register" element={<AuthRegister />} />
<Route path="/verify-email" element={<EmailVerification />} /> <Route path="/login" element={<AuthLogin />} />
<Route path="/forgot-password" element={<ForgotPassword />} /> <Route path="/verify-email" element={<EmailVerification />} />
<Route path="/reset-password" element={<ResetPassword />} /> <Route path="/forgot-password" element={<ForgotPassword />} />
<Route path="/test" element={<Test />} /> <Route path="/reset-password" element={<ResetPassword />} />
<Route path="/" element={<Landingpage />} /> <Route path="/test" element={<Test />} />
<Route path="/home" element={<Home />} /> <Route path="/" element={<Landingpage />} />
<Route path="/decks" element={<DeckManagerPage />} /> <Route path="/home" element={<Home />} />
<Route path="/deck-creator" element={<DeckCreator />} /> <Route path="/decks" element={<DeckManagerPage />} />
<Route path="/deck-creator/:deckId" element={<DeckCreator />} /> <Route path="/deck-creator" element={<DeckCreator />} />
<Route path="/game" element={<GameScreen />} /> <Route path="/deck-creator/:deckId" element={<DeckCreator />} />
<Route path="/companies" element={<CompanyHub />} /> <Route path="/game" element={<GameScreen />} />
<Route path="/report" element={<Reports />} /> <Route path="/companies" element={<CompanyHub />} />
<Route path="/report" element={<Reports />} />
</Routes>
</Router>
{/* Add more routes as needed */} {/* ✅ Toastify Container */}
</Routes> <ToastConfig />
</Router> </>
) )
} }
@@ -7,6 +7,8 @@ import TaskCardEditor from "./TaskCardEditor.jsx"
import JokerCardEditor from "./JokerCardEditor.jsx" import JokerCardEditor from "./JokerCardEditor.jsx"
import LuckCardEditor from "./LuckCardEditor.jsx" import LuckCardEditor from "./LuckCardEditor.jsx"
import CardPreview from "./CardPreview.jsx" import CardPreview from "./CardPreview.jsx"
import { notifySuccess, notifyError,notifyWarning } from "../../components/Toastify/toastifyServices"
export default function CardEditor({ card, isCreating, cardType, onSave, onCancel }) { export default function CardEditor({ card, isCreating, cardType, onSave, onCancel }) {
const [cardData, setCardData] = useState(null) const [cardData, setCardData] = useState(null)
@@ -65,33 +67,24 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
} }
}, [card, isCreating, cardType]) }, [card, isCreating, cardType])
const handleSave = () => {
if (!cardData) return
// Validáció
if (!validateCard(cardData)) return
onSave(cardData)
}
const validateCard = (data) => { const validateCard = (data) => {
if (data.type === 'task') { if (data.type === 'task') {
if (!data.question && !data.statement) { 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 return false
} }
if (data.subType === 'quiz' && data.options.some(opt => !opt.trim())) { 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 return false
} }
} else if (data.type === 'joker') { } else if (data.type === 'joker') {
if (!data.text || !data.text.trim()) { 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 return false
} }
} else if (data.type === 'luck') { } else if (data.type === 'luck') {
if (!data.text || !data.text.trim()) { 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 return false
} }
} }
@@ -103,6 +96,19 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
setCardData(prev => prev ? { ...prev, ...updates } : null) 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 // Ha nincs kiválasztott kártya vagy új kártya létrehozás
if (!cardData) { if (!cardData) {
return ( return (
@@ -134,7 +140,7 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
</div> </div>
<div> <div>
<h2 className="text-xl font-bold text-[color:var(--color-text)]"> <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 === 'task' && 'Feladat kártya'}
{cardData.type === 'joker' && 'Joker kártya'} {cardData.type === 'joker' && 'Joker kártya'}
{cardData.type === 'luck' && 'Szerencse kártya'} {cardData.type === 'luck' && 'Szerencse kártya'}
@@ -157,8 +163,8 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
onClick={() => setShowPreview(!showPreview)} onClick={() => setShowPreview(!showPreview)}
className={` className={`
flex items-center gap-2 px-4 py-2 rounded-xl font-medium transition-all duration-200 flex items-center gap-2 px-4 py-2 rounded-xl font-medium transition-all duration-200
${showPreview ${showPreview
? 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)]' ? 'bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)]'
: 'bg-[color:var(--color-background)] text-[color:var(--color-text)] hover:bg-[color:var(--color-surface-selected)]' : 'bg-[color:var(--color-background)] text-[color:var(--color-text)] hover:bg-[color:var(--color-surface-selected)]'
} }
`} `}
@@ -168,12 +174,15 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
</button> </button>
<button <button
onClick={onCancel} onClick={() => {
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" notifyWarning('Kártya készítés megszakítva')
> onCancel()
<FaTimes /> }}
Mégse 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"
</button> >
<FaTimes />
Mégse
</button>
<button <button
onClick={handleSave} onClick={handleSave}
@@ -189,12 +198,10 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
{/* Content */} {/* Content */}
<div className="flex-1 overflow-hidden"> <div className="flex-1 overflow-hidden">
{showPreview ? ( {showPreview ? (
/* Preview Mode */
<div className="h-full bg-[color:var(--color-background)] flex items-center justify-center p-6"> <div className="h-full bg-[color:var(--color-background)] flex items-center justify-center p-6">
<CardPreview card={cardData} /> <CardPreview card={cardData} />
</div> </div>
) : ( ) : (
/* Edit Mode */
<div className="h-full overflow-y-auto p-6"> <div className="h-full overflow-y-auto p-6">
{cardData.type === 'task' && ( {cardData.type === 'task' && (
<TaskCardEditor <TaskCardEditor
@@ -221,4 +228,4 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
</div> </div>
</div> </div>
) )
} }
@@ -63,7 +63,7 @@ const LandingPage = ({ onNavigateToPlay, onNavigateToAuth }) => {
{/* If not authenticated show Login/Register; if authenticated show Home button */} {/* If not authenticated show Login/Register; if authenticated show Home button */}
{!auth ? ( {!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" /> <ButtonGreen text="Regisztráció" onClick={onNavigateToAuth} width="w-60" />
</> </>
) : ( ) : (
@@ -37,29 +37,29 @@ const Navbar = () => {
{isLoggedIn ? ( {isLoggedIn ? (
<> <>
<Link to="/home" className={navLinkClass}> <Link to="/home" className={navLinkClass}>
Home Főoldal
</Link> </Link>
<Link to="/decks" className={navLinkClass}> <Link to="/decks" className={navLinkClass}>
Decks Paklik
</Link> </Link>
<Link to="/report" className={navLinkClass}> <Link to="/report" className={navLinkClass}>
Stats Statisztika
</Link> </Link>
</> </>
) : ( ) : (
<Link to="/" className={navLinkClass}> <Link to="/" className={navLinkClass}>
Home Főoldal
</Link> </Link>
)} )}
<Link to="/about" className={navLinkClass}> <Link to="/about" className={navLinkClass}>
About Rólunk
</Link> </Link>
<Link to="/companies" className={navLinkClass}> <Link to="/companies" className={navLinkClass}>
Contact Kapcsolat
</Link> </Link>
{!isLoggedIn && ( {!isLoggedIn && (
<Link to="/home" className={navLinkClassPlay}> <Link to="/home" className={navLinkClassPlay}>
Play Játék
</Link> </Link>
)} )}
{isLoggedIn && ( {isLoggedIn && (
@@ -120,21 +120,21 @@ const Navbar = () => {
<div className="md:hidden bg-emerald-600 px-2 pt-2 pb-3 space-y-1"> <div className="md:hidden bg-emerald-600 px-2 pt-2 pb-3 space-y-1">
{isLoggedIn ? ( {isLoggedIn ? (
<Link to="/home" className={navLinkClass}> <Link to="/home" className={navLinkClass}>
Home Főoldal
</Link> </Link>
) : ( ) : (
<Link to="/" className={navLinkClass}> <Link to="/" className={navLinkClass}>
Home Főoldal
</Link> </Link>
)} )}
<Link to="/leaderboard" className={navLinkClass}> <Link to="/leaderboard" className={navLinkClass}>
Leaderboard Ranglista
</Link> </Link>
<Link to="/about" className={navLinkClass}> <Link to="/about" className={navLinkClass}>
About Rólunk
</Link> </Link>
<Link to="/companies" className={navLinkClass}> <Link to="/companies" className={navLinkClass}>
Contact Kapcsolat
</Link> </Link>
{!isLoggedIn && ( {!isLoggedIn && (
<div className="px-2"> <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 // src/pages/Auth/LoginForm.jsx
// Bejelentkezési űrlap
import InputBox from "../../components/Inputs/InputBox" import InputBox from "../../components/Inputs/InputBox"
import Button from "../../components/Buttons/Button" import Button from "../../components/Buttons/Button"
import { motion } from "framer-motion" import { motion } from "framer-motion"
import { useState, useEffect } from "react" import { useState, useEffect } from "react"
import { useLocation, useNavigate } from "react-router-dom" import { useLocation, useNavigate } from "react-router-dom"
import { login } from "../../api/userApi" import { login } from "../../api/userApi"
import { FaArrowLeft } from "react-icons/fa"
export default function LoginForm() { export default function LoginForm() {
const [email, setEmail] = useState("") const [email, setEmail] = useState("")
@@ -32,23 +31,23 @@ export default function LoginForm() {
e.preventDefault() e.preventDefault()
setError("") setError("")
setShowErrorPopup(false) setShowErrorPopup(false)
if (!email || !password) { if (!email || !password) {
setError("Minden mező kitöltése kötelező.") setError("Minden mező kitöltése kötelező.")
setShowErrorPopup(true) setShowErrorPopup(true)
setTimeout(() => setShowErrorPopup(false), 2000) setTimeout(() => setShowErrorPopup(false), 2000)
return return
} }
if (!validateEmail(email)) { if (!validateEmail(email)) {
setError("Hibás email formátum.") setError("Hibás email formátum.")
setShowErrorPopup(true) setShowErrorPopup(true)
setTimeout(() => setShowErrorPopup(false), 2000) setTimeout(() => setShowErrorPopup(false), 2000)
return return
} }
// Backend API
login(email, password) login(email, password)
.then((response) => { .then((response) => {
console.log(response)
// Csak a response.status-t ellenőrizd!
if (response && response.status === 200) { if (response && response.status === 200) {
if (response.data && response.data.user) { if (response.data && response.data.user) {
localStorage.setItem("username", response.data.user.username) localStorage.setItem("username", response.data.user.username)
@@ -61,7 +60,7 @@ export default function LoginForm() {
setTimeout(() => setShowErrorPopup(false), 2000) setTimeout(() => setShowErrorPopup(false), 2000)
} }
}) })
.catch((error) => { .catch(() => {
setError("Hibás bejelentkezési adatok.") setError("Hibás bejelentkezési adatok.")
setShowErrorPopup(true) setShowErrorPopup(true)
setTimeout(() => setShowErrorPopup(false), 2000) setTimeout(() => setShowErrorPopup(false), 2000)
@@ -75,18 +74,35 @@ export default function LoginForm() {
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
transition={{ duration: 0.25 }} 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 && ( {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"> <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. Sikeres regisztráció! Az email ellenőrzése után be tudsz lépni.
</div> </div>
)} )}
{showErrorPopup && error && ( {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"> <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} {error}
</div> </div>
)} )}
<form onSubmit={handleSubmit} className="space-y-6"> <form onSubmit={handleSubmit} className="space-y-6">
<InputBox <InputBox
type="email" type="email"
@@ -1,12 +1,12 @@
// src/pages/Auth/RegisterForm.jsx // src/pages/Auth/RegisterForm.jsx
// Regisztrációs űrlap
import InputBox from "../../components/Inputs/InputBox" import InputBox from "../../components/Inputs/InputBox"
import Button from "../../components/Buttons/Button" import Button from "../../components/Buttons/Button"
import { motion } from "framer-motion" import { motion } from "framer-motion"
import { useState } from "react" import { useState } from "react"
import { register } from "../../api/userApi" import { register } from "../../api/userApi"
import { useNavigate, useLocation } from "react-router-dom" import { useNavigate, useLocation } from "react-router-dom"
import { ToastConfig } from "../../components/Toastify/toastifyServices"
import { FaArrowLeft } from "react-icons/fa"
export default function RegisterForm() { export default function RegisterForm() {
const [lastname, setLastname] = useState("") const [lastname, setLastname] = useState("")
@@ -46,36 +46,26 @@ export default function RegisterForm() {
setError("A jelszavak nem egyeznek.") setError("A jelszavak nem egyeznek.")
return return
} }
// Backend API
try { try {
const response = await register(username, email, password, firstname, lastname, phone) const response = await register(username, email, password, firstname, lastname, phone)
// Check for 201 Created status
if (response && response.status === 201) { if (response && response.status === 201) {
// Ha már a /login útvonalon van a user, a sima navigate nem biztos, hogy újraindítja a komponenst. ToastConfig("✅ Sikeres regisztráció!")
// Ilyenkor előbb beállítjuk a state-et, majd kényszerítünk egy teljes oldalletöltést.
if (location.pathname === "/login") { if (location.pathname === "/login") {
navigate("/login", { state: { success: true } }) navigate("/login", { state: { success: true } })
// teljes újratöltés, hogy a login oldal újra feldolgozza a state-et
window.location.reload() window.location.reload()
} else { } else {
navigate("/login", { state: { success: true } }) navigate("/login", { state: { success: true } })
} }
} else { } else {
let msg = "Sikertelen regisztráció." let msg = "Sikertelen regisztráció."
if (response && response.data && response.data.error) { if (response?.data?.error) msg = response.data.error
msg = response.data.error
}
setError(msg) setError(msg)
setShowErrorPopup(true) setShowErrorPopup(true)
setTimeout(() => setShowErrorPopup(false), 2000) setTimeout(() => setShowErrorPopup(false), 2000)
} }
} catch (err) { } catch (err) {
let msg = "Ismeretlen hiba történt." let msg = err?.response?.data?.error || err.message || "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) setError(msg)
setShowErrorPopup(true) setShowErrorPopup(true)
setTimeout(() => setShowErrorPopup(false), 2000) setTimeout(() => setShowErrorPopup(false), 2000)
@@ -89,56 +79,37 @@ export default function RegisterForm() {
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: 0 }} exit={{ opacity: 0 }}
transition={{ duration: 0.25 }} 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 && ( {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"> <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} {error}
</div> </div>
)} )}
<form onSubmit={handleSubmit} className="space-y-6"> <form onSubmit={handleSubmit} className="space-y-6">
<InputBox <InputBox type="text" placeholder="Vezetéknév" value={lastname} onChange={(e) => setLastname(e.target.value)} />
type="text" <InputBox type="text" placeholder="Keresztnév" value={firstname} onChange={(e) => setFirstname(e.target.value)} />
placeholder="Vezetéknév" <InputBox type="text" placeholder="Felhasználónév" value={username} onChange={(e) => setUsername(e.target.value)} />
value={lastname} <InputBox type="email" placeholder="Email cím" value={email} onChange={(e) => setEmail(e.target.value)} />
onChange={(e) => setLastname(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 <InputBox type="password" placeholder="Jelszó megerősítése" value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} />
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" /> <Button text="Regisztráció" type="submit" />
</form> </form>
</motion.div> </motion.div>
@@ -8,6 +8,7 @@ import DeckHeader from "../../components/DeckCreator/DeckHeader.jsx"
import CardsList from "../../components/DeckCreator/CardsList.jsx" import CardsList from "../../components/DeckCreator/CardsList.jsx"
import CardEditor from "../../components/DeckCreator/CardEditor.jsx" import CardEditor from "../../components/DeckCreator/CardEditor.jsx"
import { createDeck } from '../../api/deckApi' import { createDeck } from '../../api/deckApi'
import { notifySuccess, notifyError } from "../../components/Toastify/toastifyServices"
export default function DeckCreator() { export default function DeckCreator() {
const { deckId } = useParams() // URL-ből deck ID (új deck esetén undefined) 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) const saved = await createDeck(payload)
setDeck(prev => ({ ...prev, id: saved.id ?? prev.id, creationdate: saved.creationdate ?? prev.creationdate, updatedate: saved.updatedate ?? prev.updatedate })) setDeck(prev => ({ ...prev, id: saved.id ?? prev.id, creationdate: saved.creationdate ?? prev.creationdate, updatedate: saved.updatedate ?? prev.updatedate }))
console.log('Deck saved (backend):', saved) console.log('Deck saved (backend):', saved)
alert(' Deck sikeresen mentve!') notifySuccess(' Deck sikeresen mentve!')
} catch (error) { } catch (error) {
console.error('Mentési hiba:', 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)))
} }
} }