Merge: Konfliktusok feloldása és toastify integráció

- Megtartva az új kártya típusok (QUESTION, LUCK, JOKER)
- Hozzáadva toastify notifikációk
- Egyszerűsített új kártya létrehozás

SerpentRace_Frontend/src/pages/Auth/LoginForm.jsx

@@ -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"

SerpentRace_Frontend/src/pages/Auth/RegisterForm.jsx

@@ -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>

SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx

@@ -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)
@@ -31,9 +32,12 @@ export default function DeckCreator() {
   // Betöltés API-ból
   useEffect(() => {
     if (deckId) {
+<<<<<<< HEAD
       // TODO: Betöltés API-ból
+=======
+      loadDeck(deckId)
+>>>>>>> main
     } else {
-      // Új deck
       setDeck({
         id: null,
         name: "Új Pakli",
@@ -60,6 +64,7 @@ export default function DeckCreator() {
       }
 
       const saved = await createDeck(payload)
+<<<<<<< HEAD
       setDeck(prev => ({ 
         ...prev, 
         id: saved.id ?? prev.id, 
@@ -67,16 +72,27 @@ export default function DeckCreator() {
         updatedate: saved.updatedate ?? prev.updatedate 
       }))
       alert('✅ Deck sikeresen mentve!')
+=======
+      setDeck(prev => ({
+        ...prev,
+        id: saved.id ?? prev.id,
+        creationdate: saved.creationdate ?? prev.creationdate,
+        updatedate: saved.updatedate ?? prev.updatedate
+      }))
+
+      console.log('Deck saved (backend):', saved)
+      notifySuccess('Deck sikeresen mentve!')
+>>>>>>> main
     } 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)))
     }
   }
 
+  // 🔧 Itt korábban volt confirm(), de most eltávolítottuk
   const handleBack = () => {
-    if (confirm("Biztosan visszamész? A nem mentett változtatások elvesznek.")) {
-      navigate("/decks")
-    }
+    // Egyszerű visszalépés — ha akarsz, később adhatunk hozzá saját modalt
+    navigate("/decks")
   }
 
   const handleCreateCard = (cardType) => {
@@ -92,9 +108,34 @@ export default function DeckCreator() {
   }
 
   const handleSaveCard = (cardData) => {
+<<<<<<< HEAD
     const updatedCard = {
       ...cardData,
       id: isCreatingCard ? Date.now() : cardData.id
+=======
+    if (isCreatingCard) {
+      // Új kártya hozzáadása
+      const newCard = {
+        ...cardData,
+        id: Date.now(), // Temporary ID
+      }
+      setDeck(prev => ({
+        ...prev,
+        cards: [...prev.cards, newCard]
+      }))
+      setIsCreatingCard(false)
+      setNewCardType(null)
+      setSelectedCard(newCard)
+    } else {
+      // Meglévő kártya frissítése
+      setDeck(prev => ({
+        ...prev,
+        cards: prev.cards.map(card =>
+          card.id === cardData.id ? cardData : card
+        )
+      }))
+      setSelectedCard(cardData)
+>>>>>>> main
     }
     
     setDeck(prev => ({
@@ -109,26 +150,25 @@ export default function DeckCreator() {
     setNewCardType(null)
   }
 
+  // 🔧 Itt is confirm() volt — most a CardsList popupja kezeli a megerősítést
   const handleDeleteCard = (cardId) => {
-    if (confirm("Biztosan törlöd ezt a kártyát?")) {
-      setDeck(prev => ({
-        ...prev,
-        cards: prev.cards.filter(card => card.id !== cardId)
-      }))
-      
-      if (selectedCard?.id === cardId) {
-        setSelectedCard(null)
-      }
+    setDeck(prev => ({
+      ...prev,
+      cards: prev.cards.filter(card => card.id !== cardId)
+    }))
+
+    if (selectedCard?.id === cardId) {
+      setSelectedCard(null)
     }
   }
 
   return (
     <div className="w-full min-h-screen bg-[color:var(--color-background)] flex flex-col">
       <Navbar />
-      
+
       <main className="flex-1 flex flex-col">
         {/* Deck Header */}
-        <DeckHeader 
+        <DeckHeader
           deck={deck}
           onUpdate={handleDeckUpdate}
           onSave={handleSaveDeck}
@@ -169,4 +209,4 @@ export default function DeckCreator() {
       </main>
     </div>
   )
-}
+}