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
2025-10-22 21:31:16 +02:00
parent ec001fb39f 9673d564a0
commit 0ca0e95540
8 changed files with 492 additions and 151 deletions
@@ -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)
@@ -44,6 +47,7 @@ function App() {
  // }

  return (
+    <>
      <Router>
        <Routes>
          <Route path="/about" element={<About />} />
@@ -62,10 +66,12 @@ function App() {
          <Route path="/game" element={<GameScreen />} />
          <Route path="/companies" element={<CompanyHub />} />
          <Route path="/report" element={<Reports />} />
-
-        {/* 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 === 'QUESTION') {
      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,10 +140,17 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
            </div>
            <div>
              <h2 className="text-xl font-bold text-[color:var(--color-text)]">
+<<<<<<< HEAD
                {isCreating ? 'Új' : 'Szerkesztés'} {' '}
                {cardData.type === 'QUESTION' && 'Feladat kártya'}
                {cardData.type === 'JOKER' && 'Joker kártya'}
                {cardData.type === 'LUCK' && 'Szerencse kártya'}
+=======
+                {isCreating ? 'Új' : 'Szerkesztés'} {' '}
+                {cardData.type === 'QUESTION' && 'Feladat kártya'}
+                {cardData.type === 'JOKER' && 'Joker kártya'}
+                {cardData.type === 'LUCK' && 'Szerencse kártya'}
+>>>>>>> main
              </h2>
              <div className="text-[color:var(--color-text-muted)] text-sm">
                {cardData.type === 'QUESTION' && cardData.subType && (
@@ -168,7 +181,10 @@ export default function CardEditor({ card, isCreating, cardType, onSave, onCance
            </button>
            
            <button
-              onClick={onCancel}
+  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 />
@@ -189,12 +205,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 === 'QUESTION' && (
              <TaskCardEditor 
@@ -1,8 +1,18 @@
 // src/components/DeckCreator/CardsList.jsx
 // Bal oldali kártyák listája és új kártya létrehozás

-import React from "react"
-import { FaPlus, FaEdit, FaTrash, FaQuestionCircle, FaCheck, FaTimes, FaDice, FaTheaterMasks } from "react-icons/fa"
+import React, { useState } from "react"
+import {
+  FaPlus,
+  FaEdit,
+  FaTrash,
+  FaQuestionCircle,
+  FaCheck,
+  FaTimes,
+  FaDice,
+  FaTheaterMasks
+} from "react-icons/fa"
+import { notifySuccess, notifyError } from "../../components/Toastify/toastifyServices"

 const cardTypeIcons = {
  QUESTION: { icon: FaQuestionCircle, color: "var(--color-question)" },
@@ -17,18 +27,28 @@ const cardSubTypeLabels = {
  text: "Szöveges válasz"
 }

+<<<<<<< HEAD
 export default function CardsList({ 
  cards, 
  selectedCard,
  deckType, 
  onSelectCard, 
  onCreateCard, 
+=======
+export default function CardsList({
+  cards,
+  selectedCard,
+  onSelectCard,
+  onCreateCard,
+>>>>>>> main
  onDeleteCard,
  isCreatingCard,
  newCardType
 }) {
+  const [confirmingDelete, setConfirmingDelete] = useState(null)

  const getCardPreview = (card) => {
+<<<<<<< HEAD
    if (card.type === 'QUESTION') {
      return card.question || card.statement || 'Új feladat kártya'
    }
@@ -37,34 +57,69 @@ export default function CardsList({
    }
    if (card.type === 'LUCK') {
      return card.text || 'Új szerencse kártya'
+=======
+    if (card.type === 'QUESTION') {
+      return card.question || card.statement || 'Új feladat kártya'
    }
-    return 'Ismeretlen kártya'
+    if (card.type === 'JOKER') {
+      return card.text || 'Új joker kártya'
+    }
+    if (card.type === 'LUCK') {
+      return card.text || 'Új szerencse kártya'
+>>>>>>> main
+    }
+    return "Ismeretlen kártya"
  }

  const getCardTypeLabel = (card) => {
+<<<<<<< HEAD
    if (card.type === 'QUESTION') {
+=======
+    if (card.type === "task") {
+>>>>>>> main
      if (card.subType) {
-        return cardSubTypeLabels[card.subType] || 'Feladat'
+        return cardSubTypeLabels[card.subType] || "Feladat"
      }
-      return 'Feladat'
+      return "Feladat"
    }
+<<<<<<< HEAD
    if (card.type === 'JOKER') {
      return 'Joker'
    }
    if (card.type === 'LUCK') {
      return 'Szerencse'
+=======
+    if (card.type === "joker") {
+      return "Joker"
    }
-    return 'Ismeretlen'
+    if (card.type === "luck") {
+      return "Szerencse"
+>>>>>>> main
+    }
+    return "Ismeretlen"
+  }
+
+  const handleConfirmDelete = () => {
+    if (confirmingDelete) {
+      onDeleteCard(confirmingDelete)
+      notifySuccess("Kártya sikeresen törölve a pakliból!")
+      setConfirmingDelete(null)
+    }
+  }
+
+  const handleCancelDelete = () => {
+    setConfirmingDelete(null)
  }

  return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full relative">
      {/* Header */}
      <div className="p-4 border-b border-[color:var(--color-surface-selected)]">
        <h2 className="text-lg font-bold text-[color:var(--color-text)] mb-4 flex items-center gap-2">
          🃏 Kártyák
        </h2>

+<<<<<<< HEAD
        {/* New Card Button */}
        <button 
          onClick={() => onCreateCard(deckType)}
@@ -77,6 +132,42 @@ export default function CardsList({
            {deckType === 'LUCK' && '🎲 Új szerencse kártya'}
          </span>
        </button>
+=======
+        {/* New Card Dropdown */}
+        <div className="relative group">
+          <button className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl bg-[color:var(--color-success)] hover:bg-[color:var(--color-success)]/80 text-[color:var(--color-text-inverse)] font-semibold transition-all duration-200 hover:scale-105 shadow-lg">
+            <FaPlus />
+            Új kártya
+          </button>
+
+          {/* Dropdown Menu */}
+          <div className="absolute top-full left-0 right-0 mt-2 bg-[color:var(--color-card)] rounded-xl shadow-lg border border-[color:var(--color-surface-selected)] opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-10">
+            <button
+              onClick={() => onCreateCard("task")}
+              className="w-full flex items-center gap-3 px-4 py-3 hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-colors duration-200 rounded-t-xl"
+            >
+              <FaQuestionCircle className="text-[color:var(--color-question)]" />
+              📋 Feladat kártya
+            </button>
+
+            <button
+              onClick={() => onCreateCard("joker")}
+              className="w-full flex items-center gap-3 px-4 py-3 hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-colors duration-200"
+            >
+              <FaTheaterMasks className="text-[color:var(--color-fun)]" />
+              🃏 Joker kártya
+            </button>
+
+            <button
+              onClick={() => onCreateCard("luck")}
+              className="w-full flex items-center gap-3 px-4 py-3 hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-colors duration-200 rounded-b-xl"
+            >
+              <FaDice className="text-[color:var(--color-luck)]" />
+              🎲 Szerencse kártya
+            </button>
+          </div>
+        </div>
+>>>>>>> main
      </div>

      {/* Cards List */}
@@ -94,7 +185,7 @@ export default function CardsList({
              )}
              <div>
                <div className="text-[color:var(--color-text)] font-medium">
-                  Új {newCardType === 'task' ? 'feladat' : newCardType === 'joker' ? 'joker' : 'szerencse'} kártya
+                  Új {newCardType === "task" ? "feladat" : newCardType === "joker" ? "joker" : "szerencse"} kártya
                </div>
                <div className="text-[color:var(--color-text-muted)] text-sm">
                  Szerkesztés folyamatban...
@@ -115,16 +206,20 @@ export default function CardsList({
              onClick={() => onSelectCard(card)}
              className={`
                p-4 rounded-xl border cursor-pointer transition-all duration-200 hover:scale-105 group
-                ${isSelected 
-                  ? 'bg-[color:var(--color-success)]/10 border-[color:var(--color-success)] shadow-lg' 
-                  : 'bg-[color:var(--color-background)]/50 border-[color:var(--color-surface-selected)] hover:bg-[color:var(--color-background)]/80'
+                ${
+                  isSelected
+                    ? "bg-[color:var(--color-success)]/10 border-[color:var(--color-success)] shadow-lg"
+                    : "bg-[color:var(--color-background)]/50 border-[color:var(--color-surface-selected)] hover:bg-[color:var(--color-background)]/80"
                }
              `}
            >
              {/* Card Header */}
              <div className="flex items-start justify-between gap-2 mb-3">
                <div className="flex items-center gap-3 flex-1 min-w-0">
-                  <div className="flex items-center justify-center w-10 h-10 rounded-full border-2" style={{ borderColor: cardIcon.color }}>
+                  <div
+                    className="flex items-center justify-center w-10 h-10 rounded-full border-2"
+                    style={{ borderColor: cardIcon.color }}
+                  >
                    {React.createElement(cardIcon.icon, {
                      style: { color: cardIcon.color },
                      className: "text-lg"
@@ -148,7 +243,7 @@ export default function CardsList({
                  <button
                    onClick={(e) => {
                      e.stopPropagation()
-                      onDeleteCard(card.id)
+                      setConfirmingDelete(card.id)
                    }}
                    className="p-1.5 rounded-lg bg-[color:var(--color-error)]/10 hover:bg-[color:var(--color-error)]/20 text-[color:var(--color-error)] transition-colors duration-200"
                  >
@@ -162,10 +257,10 @@ export default function CardsList({
                <div
                  className="text-[color:var(--color-text)] text-sm leading-relaxed"
                  style={{
-                    display: '-webkit-box',
+                    display: "-webkit-box",
                    WebkitLineClamp: 2,
-                    WebkitBoxOrient: 'vertical',
-                    overflow: 'hidden'
+                    WebkitBoxOrient: "vertical",
+                    overflow: "hidden"
                  }}
                >
                  {getCardPreview(card)}
@@ -188,6 +283,34 @@ export default function CardsList({
        )}
      </div>

+      {/* Confirm Delete Popup */}
+      {confirmingDelete && (
+        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
+          <div className="bg-white rounded-xl shadow-xl p-6 w-80 text-center animate-fadeIn">
+            <h3 className="text-lg font-semibold mb-4 text-gray-800">
+              Biztosan törölni szeretnéd?
+            </h3>
+            <p className="text-sm text-gray-600 mb-6">
+              Ez a művelet nem visszavonható.
+            </p>
+            <div className="flex justify-center gap-4">
+              <button
+                onClick={handleConfirmDelete}
+                className="bg-[color:var(--color-error)] text-white px-4 py-2 rounded-lg hover:bg-red-600 transition"
+              >
+                Igen
+              </button>
+              <button
+                onClick={handleCancelDelete}
+                className="bg-gray-200 px-4 py-2 rounded-lg hover:bg-gray-300 transition"
+              >
+                Mégse
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
      {/* Footer Stats */}
      <div className="p-4 border-t border-[color:var(--color-surface-selected)] bg-[color:var(--color-background)]/30">
        <div className="text-center">
@@ -197,9 +320,15 @@ export default function CardsList({

          {cards.length > 0 && (
            <div className="flex justify-center gap-4 mt-2 text-xs text-[color:var(--color-text-muted)]">
+<<<<<<< HEAD
              <span>📋 {cards.filter(c => c.type === 'QUESTION').length}</span>
              <span>🃏 {cards.filter(c => c.type === 'JOKER').length}</span>
              <span>🎲 {cards.filter(c => c.type === 'LUCK').length}</span>
+=======
+              <span>📋 {cards.filter(c => c.type === 'QUESTION').length}</span>
+              <span>🃏 {cards.filter(c => c.type === 'JOKER').length}</span>
+              <span>🎲 {cards.filter(c => c.type === 'LUCK').length}</span>
+>>>>>>> main
            </div>
          )}
        </div>
@@ -63,7 +63,7 @@ const LandingPage = ({ onNavigateToPlay, onNavigateToAuth, onNavigateToGame }) =
            {/* 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" />
                <ButtonGreen text="Játék" onClick={onNavigateToGame} width="w-60" /> 
              </>
@@ -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)
@@ -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,17 +72,28 @@ 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.")) {
+    // Egyszerű visszalépés — ha akarsz, később adhatunk hozzá saját modalt
    navigate("/decks")
  }
-  }

  const handleCreateCard = (cardType) => {
    setNewCardType(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,8 +150,8 @@ 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)
@@ -120,7 +161,6 @@ export default function DeckCreator() {
      setSelectedCard(null)
    }
  }
-  }

  return (
    <div className="w-full min-h-screen bg-[color:var(--color-background)] flex flex-col">