SerpentRace_Frontend/src/App.jsx

@@ -6,6 +6,7 @@ import EmailVerification from "./pages/Auth/EmailVerification"
 import Test from "./pages/Testing/Test"
 import ForgotPassword from "./pages/Auth/ForgotPassword"
 import ResetPassword from "./pages/Auth/ResetPassword"
+import ResetPasswordRedirect from "./pages/Auth/ResetPasswordRedirect"
 import Landingpage from "./pages/Landing/Landingpage"
 import Home from "./pages/Landing/Home"
 import DeckManagerPage from "./pages/Decks/DeckManagerPage"
@@ -16,6 +17,7 @@ import ScrollToTop from "./components/ScrollToTop"
 import GameScreen from "./pages/Game/GameScreen"
 import Reports from "./pages/Report/Reports"
 import Lobby from "./pages/Lobby/Lobby"
+import ProfileCard from "./components/Userdetails/Userdetails"
 import { ToastConfig } from "./components/Toastify/toastifyServices" // ✅ fontos: named import, nem default!
 import VerifyEmailPage from "./pages/Auth/VerifyEmailPage"
 
@@ -51,6 +53,7 @@ function App() {
     <>
       <Router>
         <Routes>
+          <Route path="/api/auth/reset-password" element={<ResetPasswordRedirect />} />
           <Route path="/verify-email" element={<VerifyEmailPage />} />
           <Route path="/about" element={<About />} />
           <Route path="/lobby" element={<Lobby />} />
@@ -59,6 +62,7 @@ function App() {
           <Route path="/verify-email" element={<EmailVerification />} />
           <Route path="/forgot-password" element={<ForgotPassword />} />
           <Route path="/reset-password" element={<ResetPassword />} />
+          <Route path="/profile" element={<ProfileCard />} />
           <Route path="/test" element={<Test />} />
           <Route path="/" element={<Landingpage />} />
           <Route path="/home" element={<Home />} />

SerpentRace_Frontend/src/api/userApi.js

@@ -57,4 +57,53 @@ export const verifyEmail = async (token) => {
   }
 };
 
+// Get current user profile
+export const getUserProfile = async () => {
+  try {
+    const response = await apiClient.get("/users/profile");
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+// Update current user profile
+export const updateUserProfile = async (data) => {
+  try {
+    const response = await apiClient.patch("/users/profile", data);
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+// Delete current user profile
+export const deleteUserProfile = async () => {
+  try {
+    const response = await apiClient.delete("/users/profile");
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+// Request password reset
+export const forgotPassword = async (email) => {
+  try {
+    const response = await apiClient.post("/users/forgot-password", { email });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+};
+
+// Reset password with token
+export const resetPassword = async (token, newPassword) => {
+  try {
+    const response = await apiClient.post("/users/reset-password", { token, newPassword });
+    return response.data;
+  } catch (error) {
+    throw error;
+  }
+};
 

SerpentRace_Frontend/src/components/Navbar/Navbar.jsx

@@ -43,6 +43,7 @@ const Navbar = () => {
               <>
                 <Link to="/decks" className={navLinkClass}>Paklik</Link>
                 <Link to="/report" className={navLinkClass}>Statisztikák</Link>
+                <Link to="/profile" className={navLinkClass}>Profil</Link>
               </>
             )}
 
@@ -128,6 +129,7 @@ const Navbar = () => {
             <>
               <Link to="/decks" onClick={() => setMenuOpen(false)} className={navLinkClass}>Paklik</Link>
               <Link to="/report" onClick={() => setMenuOpen(false)} className={navLinkClass}>Statisztikák</Link>
+              <Link to="/profile" onClick={() => setMenuOpen(false)} className={navLinkClass}>Profil</Link>
             </>
           )}
           <Link to="/home" onClick={() => setMenuOpen(false)} className={navLinkClassPlay}>Játék</Link>

SerpentRace_Frontend/src/components/Userdetails/Userdetails.jsx

@@ -1,54 +1,210 @@
-import React, { useState } from "react"
+import React, { useState, useEffect } from "react"
+import { useNavigate } from "react-router-dom"
 import {
   FaCommentDots,
   FaUserFriends,
   FaBriefcase,
-  FaFacebookF,
+  FaMedal,
-  FaTwitter,
+  FaEdit,
-  FaDribbble,
+  FaSave,
-  FaSun,
+  FaTimes,
-  FaMoon,
+  FaTrash,
-  FaMedal
+  FaEye,
+  FaEyeSlash
 } from "react-icons/fa"
+import Navbar from "../Navbar/Navbar"
+import Footer from "../Footer/Footer"
+import Background from "../../assets/backgrounds/Background"
+import { getUserProfile, updateUserProfile, deleteUserProfile } from "../../api/userApi"
+import { notifySuccess, notifyError, notifyWarning } from "../Toastify/toastifyServices"
 
 const ProfileCard = () => {
-  const [darkMode, setDarkMode] = useState(false)
+  const navigate = useNavigate()
-  const activityLevel = 87
+  
-  const isPremium = true
+  // State
+  const [user, setUser] = useState(null)
+  const [isLoading, setIsLoading] = useState(true)
+  const [isEditing, setIsEditing] = useState(false)
+  const [showPassword, setShowPassword] = useState(false)
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
+  
+  // Edit form state
+  const [editForm, setEditForm] = useState({
+    username: "",
+    email: "",
+    fname: "",
+    lname: "",
+    phone: "",
+    password: ""
+  })
+
+  // Load user profile on mount
+  useEffect(() => {
+    loadUserProfile()
+  }, [])
+
+  const loadUserProfile = async () => {
+    setIsLoading(true)
+    try {
+      const data = await getUserProfile()
+      setUser(data)
+      setEditForm({
+        username: data.username || "",
+        email: data.email || "",
+        fname: data.fname || "",
+        lname: data.lname || "",
+        phone: data.phone || "",
+        password: ""
+      })
+    } catch (error) {
+      console.error('Failed to load user profile:', error)
+      notifyError('Hiba történt a profil betöltése során')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  const handleEditToggle = () => {
+    if (isEditing) {
+      setEditForm({
+        username: user.username || "",
+        email: user.email || "",
+        fname: user.fname || "",
+        lname: user.lname || "",
+        phone: user.phone || "",
+        password: ""
+      })
+    }
+    setIsEditing(!isEditing)
+  }
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target
+    setEditForm(prev => ({ ...prev, [name]: value }))
+  }
+
+  const handleSaveProfile = async () => {
+    try {
+      const updates = {}
+      if (editForm.username !== user.username) updates.username = editForm.username
+      if (editForm.email !== user.email) updates.email = editForm.email
+      if (editForm.fname !== user.fname) updates.fname = editForm.fname
+      if (editForm.lname !== user.lname) updates.lname = editForm.lname
+      if (editForm.phone !== user.phone) updates.phone = editForm.phone
+      if (editForm.password && editForm.password.trim() !== "") updates.password = editForm.password
+
+      if (Object.keys(updates).length === 0) {
+        notifyWarning('Nincs változtatás')
+        return
+      }
+
+      const updatedUser = await updateUserProfile(updates)
+      setUser(updatedUser)
+      setIsEditing(false)
+      setEditForm(prev => ({ ...prev, password: "" }))
+      notifySuccess('Profil sikeresen frissítve!')
+    } catch (error) {
+      console.error('Failed to update profile:', error)
+      const errorMessage = error?.response?.data?.error || error.message || 'Ismeretlen hiba'
+      notifyError('Hiba történt a mentés során: ' + errorMessage)
+    }
+  }
+
+  const handleDeleteProfile = () => {
+    setShowDeleteModal(true)
+  }
+
+  const handleConfirmDelete = async () => {
+    try {
+      await deleteUserProfile()
+      notifySuccess("Profil sikeresen törölve!")
+      localStorage.removeItem("authLevel")
+      localStorage.removeItem("username")
+      navigate("/")
+    } catch (err) {
+      console.error("Profil törlési hiba:", err)
+      notifyError(err.response?.data?.message || "Hiba a profil törlésekor!")
+    } finally {
+      setShowDeleteModal(false)
+    }
+  }
+
+  const handleCancelDelete = () => {
+    setShowDeleteModal(false)
+  }
+
+  if (isLoading) {
+    return (
+      <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
+        <div className="fixed inset-0 -z-10 pointer-events-none">
+          <Background />
+        </div>
+        <div className="fixed top-0 left-0 right-0 z-30">
+          <Navbar />
+        </div>
+        <main className="flex-1 min-h-[calc(100vh-64px)] flex mt-[64px] items-center justify-center">
+          <div className="text-center">
+            <div className="text-6xl mb-4">⏳</div>
+            <p className="text-xl text-[color:var(--color-text)]">Betöltés...</p>
+          </div>
+        </main>
+      </div>
+    )
+  }
+
+  if (!user) {
+    return (
+      <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
+        <div className="fixed inset-0 -z-10 pointer-events-none">
+          <Background />
+        </div>
+        <div className="fixed top-0 left-0 right-0 z-30">
+          <Navbar />
+        </div>
+        <main className="flex-1 min-h-[calc(100vh-64px)] flex mt-[64px] items-center justify-center">
+          <div className="text-center">
+            <div className="text-6xl mb-4">😢</div>
+            <p className="text-xl text-[color:var(--color-text)]">Nem sikerült betölteni a profilt</p>
+          </div>
+        </main>
+      </div>
+    )
+  }
+
+  const isPremium = user.state === 2
+  const activityLevel = user.activity_level || 65
   
   let activityColor = ""
   let activityEmoji = ""
   let blocksToColor = 1
-  let celebrationEmoji = ""
 
   if (activityLevel <= 24) {
-    activityColor = "red-600"
+    activityColor = "error"
     activityEmoji = "😞"
     blocksToColor = 1
   } else if (activityLevel <= 49) {
-    activityColor = "orange-500"
+    activityColor = "warning"
     activityEmoji = "😐"
     blocksToColor = 2
   } else if (activityLevel <= 74) {
-    activityColor = "yellow-400"
+    activityColor = "secondary"
     activityEmoji = "🙂"
     blocksToColor = 3
   } else {
-    activityColor = "emerald-500"
+    activityColor = "success"
     activityEmoji = "😄"
     blocksToColor = 4
-    celebrationEmoji = "🎉"
   }
 
   const colorMap = {
-    "red-600": "#dc2626",
+    success: "#5fa985",
-    "orange-500": "#f97316",
+    warning: "#e6c04f",
-    "yellow-400": "#facc15",
+    error: "#e15b64",
-    "emerald-500": "#10b981"
+    secondary: "#8d8e83"
   }
 
   const getBlockStyle = (index) => ({
-    backgroundColor: index < blocksToColor ? colorMap[activityColor] : (darkMode ? "#4b5563" : "#d1d5db")
+    backgroundColor: index < blocksToColor ? colorMap[activityColor] : "#314045"
   })
 
   const stats = [
@@ -61,101 +217,333 @@ const ProfileCard = () => {
   const badges = ["🏆", "🔥", "🎯", "🧠", "💎", "🚀"]
 
   return (
-    <div className={`${darkMode ? "bg-gray-900" : "bg-gray-100"} min-h-screen flex flex-col justify-center items-center px-4 py-12 transition-colors duration-500`}>
+    <div className="w-full min-h-screen flex flex-col relative overflow-x-hidden">
-      <div className={`relative max-w-sm w-full rounded-xl shadow-lg overflow-hidden border 
+      <div className="fixed inset-0 -z-10 pointer-events-none">
-          ${darkMode ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"}`}>
+        <Background />
+      </div>
+      <div className="fixed top-0 left-0 right-0 z-30">
+        <Navbar />
+      </div>
+      <main className="flex-1 min-h-[calc(100vh-64px)] flex mt-[64px] flex-col items-center justify-center py-8 px-4">
+        <div className="relative max-w-5xl w-full animate-fadeInUp">
           
-        <button
+          {/* Hero Section - Cover Photo */}
-          onClick={() => setDarkMode(!darkMode)}
+          <div className="relative rounded-t-2xl overflow-hidden bg-gradient-to-r from-[color:var(--color-mint)] via-[color:var(--color-success)] to-[color:var(--color-mint)] h-32 shadow-lg">
-          className={`absolute top-4 right-4 p-2 rounded-full focus:outline-none 
+            <div className="absolute inset-0 opacity-10">
-            ${darkMode ? "bg-yellow-400 text-gray-900 hover:bg-yellow-300" : "bg-gray-800 text-yellow-400 hover:bg-gray-700"}`}
+              <div className="absolute inset-0" style={{
-          aria-label="Toggle dark mode"
+                backgroundImage: 'radial-gradient(circle, white 1px, transparent 1px)',
+                backgroundSize: '20px 20px'
+              }}></div>
+            </div>
+          </div>
+
+          {/* Main Profile Card */}
+          <div className="relative bg-[color:var(--color-card)] rounded-b-2xl shadow-2xl border-2 border-[color:var(--color-surface-selected)] -mt-16">
+            
+            {/* Avatar & Name Section */}
+            <div className="flex flex-col sm:flex-row items-center sm:items-end gap-6 px-8 pb-6">
+              {/* Avatar */}
+              <div className="relative -mt-12 flex-shrink-0">
+                <div className="w-32 h-32 rounded-2xl bg-gradient-to-br from-[color:var(--color-mint)] to-[color:var(--color-success)] flex items-center justify-center shadow-2xl ring-4 ring-[color:var(--color-card)] transform hover:scale-105 transition-transform">
+                  <span className="text-white text-4xl font-bold">
+                    {user.lname?.[0]?.toUpperCase() || ''}.{user.fname?.[0]?.toUpperCase() || ''}
+                  </span>
+                </div>
+              </div>
+
+              {/* Name & Status */}
+              <div className="flex-1 text-center sm:text-left">
+                <div className="flex flex-col sm:flex-row sm:items-center gap-3 mb-2">
+                  <h1 className="text-3xl font-bold text-[color:var(--color-text)]">
+                    {user.username}
+                  </h1>
+                  <div
+                    className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-bold shadow-md ${
+                      isPremium
+                        ? "bg-gradient-to-r from-[color:var(--color-mint)] to-[color:var(--color-success)] text-white"
+                        : "bg-[color:var(--color-surface)] text-[color:var(--color-text-muted)] border border-[color:var(--color-surface-selected)]"
+                    }`}
                   >
-          {darkMode ? <FaSun size={24} /> : <FaMoon size={24} />}
+                    {isPremium ? "👑 Premium" : user.state === 1 ? "✓ Verified" : "Free"}
+                  </div>
+                </div>
+                <p className="text-lg text-[color:var(--color-text)] font-medium">
+                  {user.fname} {user.lname}
+                </p>
+              </div>
+
+              {/* Action Buttons */}
+              {!isEditing && (
+                <div className="flex gap-2 flex-shrink-0">
+                  <button
+                    onClick={handleEditToggle}
+                    className="px-4 py-2 rounded-lg bg-[color:var(--color-mint)] text-white font-semibold hover:opacity-90 transition-all flex items-center gap-2 shadow-md"
+                  >
+                    <FaEdit /> Szerkesztés
                   </button>
+                  <button
+                    onClick={handleDeleteProfile}
+                    className="p-2 rounded-lg bg-[color:var(--color-error)] text-white hover:opacity-90 transition-all shadow-md"
+                    title="Profil törlése"
+                  >
+                    <FaTrash />
+                  </button>
+                </div>
+              )}
+            </div>
 
-        <div className="p-6 text-center space-y-6">
+            {/* Content Grid */}
-          <img
+            <div className="px-8 pb-8 space-y-6">
-            src="https://i.pravatar.cc/150?img=12"
-            alt="Avatar"
-            className={`w-24 h-24 mx-auto rounded-full border-4 mb-4 ${darkMode ? "border-blue-700" : "border-blue-200"}`}
-          />
               
-          <div className="space-y-2">
+              {!isEditing ? (
-            <h2 className={`text-xl font-semibold ${darkMode ? "text-gray-100" : "text-gray-800"}`}>
+                <>
-              BÉKAAAAA
+                  {/* Contact Info & Activity Row */}
-            </h2>
+                  <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                    
+                    {/* Contact Information */}
+                    <div className="lg:col-span-2 space-y-4">
+                      <h3 className="text-lg font-bold text-[color:var(--color-text)] border-b-2 border-[color:var(--color-mint)] pb-2">
+                        📋 Kapcsolati adatok
+                      </h3>
+                      
+                      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                        <div className="flex items-center gap-3 p-3 rounded-lg bg-[color:var(--color-surface)] border border-[color:var(--color-surface-selected)]">
+                          <span className="text-2xl">📧</span>
                           <div>
-              <div className={`inline-block px-3 py-1 rounded-full text-xs font-semibold 
+                            <p className="text-xs text-[color:var(--color-text-muted)] font-medium">Email</p>
-                ${darkMode
+                            <p className="text-sm text-[color:var(--color-text)] font-semibold">{user.email}</p>
-                  ? (isPremium ? "bg-green-600 text-white" : "bg-gray-600 text-gray-200")
-                  : (isPremium ? "bg-green-200 text-green-800" : "bg-blue-200 text-blue-800")}`}>
-                {isPremium ? "Premium Account" : "Free Account"}
                           </div>
                         </div>
-            <p className={`text-sm ${darkMode ? "text-gray-400" : "text-gray-500"}`}>
-              Active | Male | 23.05.1992
-            </p>
-          </div>
                         
-          <div className="flex justify-center items-center space-x-2">
+                        <div className="flex items-center gap-3 p-3 rounded-lg bg-[color:var(--color-surface)] border border-[color:var(--color-surface-selected)]">
-            <p className={`text-sm font-medium flex items-center space-x-1`} style={{ color: colorMap[activityColor] }}>
+                          <span className="text-2xl">📱</span>
-              <span>Activity Level: {activityLevel}%</span>
+                          <div>
-              <span className="text-xl">{activityEmoji}</span>
+                            <p className="text-xs text-[color:var(--color-text-muted)] font-medium">Telefon</p>
-              {celebrationEmoji && <span className="text-xl ml-1">{celebrationEmoji}</span>}
+                            <p className="text-sm text-[color:var(--color-text)] font-semibold">{user.phone || "Nincs megadva"}</p>
-            </p>
+                          </div>
+                        </div>
+                      </div>
                     </div>
 
-          <div className="flex justify-center space-x-1 mb-4">
+                    {/* Activity Level */}
-            {[0, 1, 2, 3].map(i => (
+                    <div className="space-y-4">
+                      <h3 className="text-lg font-bold text-[color:var(--color-text)] border-b-2 border-[color:var(--color-mint)] pb-2">
+                        ⚡ Aktivitás
+                      </h3>
+                      <div className="p-4 rounded-lg bg-gradient-to-br from-[color:var(--color-surface)] to-[color:var(--color-surface-selected)] border border-[color:var(--color-surface-selected)]">
+                        <div className="flex justify-between items-center mb-3">
+                          <span className="text-sm font-medium text-[color:var(--color-text)]">Szint</span>
+                          <span
+                            className="text-sm font-bold px-3 py-1 rounded-full text-white"
+                            style={{ backgroundColor: colorMap[activityColor] }}
+                          >
+                            {activityLevel}% {activityEmoji}
+                          </span>
+                        </div>
+                        <div className="flex gap-1.5">
+                          {[0, 1, 2, 3].map((i) => (
                             <div
                               key={i}
-                className="w-8 h-1 rounded-full"
+                              className="flex-1 h-2.5 rounded-full transition-all duration-500"
                               style={getBlockStyle(i)}
                             />
                           ))}
                         </div>
-
+                      </div>
-          {/* Badge szekció */}
-          <div className={`rounded-lg p-4 ${darkMode ? "bg-blue-900" : "bg-blue-200"}`}>
-            <h3 className={`text-sm font-bold mb-2 ${darkMode ? "text-white" : "text-blue-800"}`}>Badge-ek</h3>
-            <div className="flex justify-center flex-wrap gap-2">
-              {badges.map((badge, i) => (
-                <span key={i} className="text-xl">
-                  {badge}
-                </span>
-              ))}
                     </div>
                   </div>
 
-          {/* Statisztikák */}
+                  {/* Stats Grid */}
-          <div className={`flex flex-wrap justify-around items-center rounded-lg py-6 mt-4 text-white ${darkMode ? "bg-blue-700" : "bg-blue-500"}`}>
+                  <div>
+                    <h3 className="text-lg font-bold text-[color:var(--color-text)] border-b-2 border-[color:var(--color-mint)] pb-2 mb-4">
+                      📊 Statisztikák
+                    </h3>
+                    <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
                       {stats.map((s, i) => (
-              <div key={i} className="text-center px-2 w-1/2 sm:w-1/4 mb-4">
+                        <div
-                <div className="mb-1 flex justify-center">{s.icon}</div>
+                          key={i}
-                <p className="text-sm font-semibold">{s.value}</p>
+                          className="relative group overflow-hidden p-4 rounded-xl bg-gradient-to-br from-[color:var(--color-mint)] to-[color:var(--color-success)] text-white shadow-lg hover:shadow-xl transition-all"
-                <p className="text-xs">{s.label}</p>
+                        >
+                          <div className="relative z-10">
+                            <div className="text-3xl mb-2 opacity-80">{s.icon}</div>
+                            <p className="text-2xl font-bold mb-1">{s.value}</p>
+                            <p className="text-xs opacity-90">{s.label}</p>
+                          </div>
+                          <div className="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-opacity"></div>
                         </div>
                       ))}
                     </div>
+                  </div>
 
-          <p className={`text-xs mb-4 ${darkMode ? "text-gray-400" : "text-gray-500"}`}>
+                  {/* Badges */}
-            Gyere és játsz velünk!
+                  <div>
+                    <h3 className="text-lg font-bold text-[color:var(--color-text)] border-b-2 border-[color:var(--color-mint)] pb-2 mb-4">
+                      🏆 Badge-ek
+                    </h3>
+                    <div className="flex flex-wrap gap-3 p-4 rounded-lg bg-[color:var(--color-surface)] border border-[color:var(--color-surface-selected)]">
+                      {badges.map((badge, i) => (
+                        <div
+                          key={i}
+                          className="w-14 h-14 flex items-center justify-center bg-gradient-to-br from-[color:var(--color-mint)]/20 to-[color:var(--color-success)]/20 rounded-lg hover:scale-110 transition-transform cursor-pointer border border-[color:var(--color-mint)]/30"
+                        >
+                          <span className="text-2xl">{badge}</span>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                </>
+              ) : (
+                <>
+                  {/* Edit Mode */}
+                  <div className="max-w-2xl mx-auto space-y-6">
+                    <h3 className="text-xl font-bold text-[color:var(--color-text)] text-center mb-6">
+                      ✏️ Profil szerkesztése
+                    </h3>
+
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                      <div className="sm:col-span-2">
+                        <label className="block text-sm font-bold text-[color:var(--color-text)] mb-2">
+                          Felhasználónév
+                        </label>
+                        <input
+                          type="text"
+                          name="username"
+                          value={editForm.username}
+                          onChange={handleInputChange}
+                          className="w-full px-4 py-2.5 rounded-lg bg-[color:var(--color-surface)] border-2 border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-mint)] focus:border-[color:var(--color-mint)] outline-none transition-all"
+                        />
+                      </div>
+
+                      <div>
+                        <label className="block text-sm font-bold text-[color:var(--color-text)] mb-2">
+                          Keresztnév
+                        </label>
+                        <input
+                          type="text"
+                          name="fname"
+                          value={editForm.fname}
+                          onChange={handleInputChange}
+                          className="w-full px-4 py-2.5 rounded-lg bg-[color:var(--color-surface)] border-2 border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-mint)] focus:border-[color:var(--color-mint)] outline-none transition-all"
+                        />
+                      </div>
+
+                      <div>
+                        <label className="block text-sm font-bold text-[color:var(--color-text)] mb-2">
+                          Vezetéknév
+                        </label>
+                        <input
+                          type="text"
+                          name="lname"
+                          value={editForm.lname}
+                          onChange={handleInputChange}
+                          className="w-full px-4 py-2.5 rounded-lg bg-[color:var(--color-surface)] border-2 border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-mint)] focus:border-[color:var(--color-mint)] outline-none transition-all"
+                        />
+                      </div>
+
+                      <div className="sm:col-span-2">
+                        <label className="block text-sm font-bold text-[color:var(--color-text)] mb-2">
+                          Email
+                        </label>
+                        <input
+                          type="email"
+                          name="email"
+                          value={editForm.email}
+                          disabled
+                          className="w-full px-4 py-2.5 rounded-lg bg-[color:var(--color-surface)] border-2 border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] outline-none opacity-50 cursor-not-allowed"
+                        />
+                      </div>
+
+                      <div className="sm:col-span-2">
+                        <label className="block text-sm font-bold text-[color:var(--color-text)] mb-2">
+                          Telefonszám
+                        </label>
+                        <input
+                          type="tel"
+                          name="phone"
+                          value={editForm.phone}
+                          onChange={handleInputChange}
+                          className="w-full px-4 py-2.5 rounded-lg bg-[color:var(--color-surface)] border-2 border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-mint)] focus:border-[color:var(--color-mint)] outline-none transition-all"
+                        />
+                      </div>
+
+                      <div className="sm:col-span-2">
+                        <label className="block text-sm font-bold text-[color:var(--color-text)] mb-2">
+                          Új jelszó (opcionális)
+                        </label>
+                        <div className="relative">
+                          <input
+                            type={showPassword ? "text" : "password"}
+                            name="password"
+                            value={editForm.password}
+                            onChange={handleInputChange}
+                            placeholder="Hagyd üresen ha nem változtatod"
+                            className="w-full px-4 py-2.5 rounded-lg bg-[color:var(--color-surface)] border-2 border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-mint)] focus:border-[color:var(--color-mint)] outline-none pr-12 transition-all"
+                          />
+                          <button
+                            type="button"
+                            onClick={() => setShowPassword(!showPassword)}
+                            className="absolute right-3 top-1/2 -translate-y-1/2 text-[color:var(--color-text-muted)] hover:text-[color:var(--color-mint)] transition-colors"
+                          >
+                            {showPassword ? <FaEyeSlash size={18} /> : <FaEye size={18} />}
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* Save/Cancel buttons */}
+                    <div className="flex gap-3 pt-4">
+                      <button
+                        onClick={handleSaveProfile}
+                        className="flex-1 px-6 py-3 rounded-lg bg-gradient-to-r from-[color:var(--color-success)] to-[color:var(--color-mint)] text-white font-bold hover:shadow-lg transition-all flex items-center justify-center gap-2"
+                      >
+                        <FaSave /> Mentés
+                      </button>
+                      <button
+                        onClick={handleEditToggle}
+                        className="flex-1 px-6 py-3 rounded-lg bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] font-bold hover:bg-[color:var(--color-surface)] transition-all flex items-center justify-center gap-2"
+                      >
+                        <FaTimes /> Mégse
+                      </button>
+                    </div>
+                  </div>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </main>
+
+      {/* Delete Confirmation Modal */}
+      {showDeleteModal && (
+        <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 a profilodat?
+            </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:opacity-80 transition"
+              >
+                Igen, törlöm
+              </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>
+      )}
 
-          <div className={`flex justify-center gap-6 text-2xl ${darkMode ? "text-blue-400" : "text-blue-600"}`}>
+      <Footer />
-            <FaFacebookF className="cursor-pointer hover:text-blue-600" />
-            <FaTwitter className="cursor-pointer hover:text-sky-400 hover:text-sky-500" />
-            <FaDribbble className="cursor-pointer hover:text-pink-400" />
-          </div>
-        </div>
-      </div>
     </div>
   )
 }
 
 export default ProfileCard
-
-
-import UserProfile from "../../components/Userdetails/Userdetails.jsx"
-

SerpentRace_Frontend/src/pages/Auth/LoginForm.jsx

@@ -4,7 +4,7 @@ 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 { login, forgotPassword } from "../../api/userApi"
 import { FaArrowLeft } from "react-icons/fa"
 
 export default function LoginForm() {
@@ -15,11 +15,21 @@ export default function LoginForm() {
   const navigate = useNavigate()
   const [showSuccess, setShowSuccess] = useState(false)
   const [showErrorPopup, setShowErrorPopup] = useState(false)
+  const [showForgotPasswordModal, setShowForgotPasswordModal] = useState(false)
+  const [forgotEmail, setForgotEmail] = useState("")
+  const [forgotPasswordMessage, setForgotPasswordMessage] = useState("")
+  const [successMessage, setSuccessMessage] = useState("")
+  const [isSendingEmail, setIsSendingEmail] = useState(false)
 
   useEffect(() => {
     if (location.state && location.state.success) {
+      const message = location.state.message || "Sikeres regisztráció! Az email ellenőrzése után be tudsz lépni."
+      setSuccessMessage(message)
       setShowSuccess(true)
-      setTimeout(() => setShowSuccess(false), 4000)
+      setTimeout(() => {
+        setShowSuccess(false)
+        setSuccessMessage("")
+      }, 4000)
     }
   }, [location.state])
 
@@ -67,6 +77,32 @@ export default function LoginForm() {
       })
   }
 
+  const handleForgotPassword = async (e) => {
+    e.preventDefault()
+    setForgotPasswordMessage("")
+    
+    if (!forgotEmail || !validateEmail(forgotEmail)) {
+      setForgotPasswordMessage("Kérlek adj meg egy érvényes email címet!")
+      return
+    }
+
+    setIsSendingEmail(true)
+    
+    try {
+      await forgotPassword(forgotEmail)
+      setForgotPasswordMessage("Jelszó visszaállító email elküldve! Ellenőrizd a postaládád.")
+      setTimeout(() => {
+        setShowForgotPasswordModal(false)
+        setForgotEmail("")
+        setForgotPasswordMessage("")
+        setIsSendingEmail(false)
+      }, 3000)
+    } catch (error) {
+      setForgotPasswordMessage("Hiba történt. Próbáld újra később!")
+      setIsSendingEmail(false)
+    }
+  }
+
   return (
     <motion.div
       key="login"
@@ -93,7 +129,7 @@ export default function LoginForm() {
 
       {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.
+          {successMessage || "Sikeres művelet!"}
         </div>
       )}
 
@@ -103,7 +139,7 @@ export default function LoginForm() {
         </div>
       )}
 
-      <form onSubmit={handleSubmit} className="space-y-6">
+      <form onSubmit={handleSubmit} className="space-y-4 w-full">
         <InputBox
           type="email"
           placeholder="Email cím"
@@ -116,8 +152,72 @@ export default function LoginForm() {
           value={password}
           onChange={(e) => setPassword(e.target.value)}
         />
+        
+        {/* Elfelejtett jelszó link */}
+        <div className="text-right -mt-2">
+          <span
+            onClick={() => setShowForgotPasswordModal(true)}
+            className="text-sm text-green-600 hover:text-green-700 hover:underline cursor-pointer font-medium"
+          >
+            Elfelejtetted a jelszavad?
+          </span>
+        </div>
+
         <Button text="Bejelentkezés" type="submit" />
       </form>
+
+      {/* Forgot Password Modal */}
+      {showForgotPasswordModal && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50" onClick={() => setShowForgotPasswordModal(false)}>
+          <div className="bg-white rounded-xl shadow-2xl p-8 w-96 max-w-full" onClick={(e) => e.stopPropagation()}>
+            <h3 className="text-2xl font-bold text-gray-800 mb-4">Jelszó visszaállítás</h3>
+            <p className="text-gray-600 mb-6 text-sm">
+              Add meg az email címed és küldünk egy jelszó visszaállító linket.
+            </p>
+            
+            <form onSubmit={handleForgotPassword} className="space-y-4">
+              <InputBox
+                type="email"
+                placeholder="Email cím"
+                value={forgotEmail}
+                onChange={(e) => setForgotEmail(e.target.value)}
+              />
+              
+              {forgotPasswordMessage && (
+                <div className={`text-sm p-3 rounded ${forgotPasswordMessage.includes("elküldve") ? "bg-green-100 text-green-700" : "bg-red-100 text-red-700"}`}>
+                  {forgotPasswordMessage}
+                </div>
+              )}
+
+              <div className="flex gap-3">
+                <button
+                  type="submit"
+                  disabled={isSendingEmail}
+                  className={`flex-1 px-4 py-2 rounded-lg font-semibold transition-colors ${
+                    isSendingEmail
+                      ? 'bg-gray-400 text-gray-200 cursor-not-allowed'
+                      : 'bg-[color:var(--color-mint)] text-white hover:opacity-90'
+                  }`}
+                >
+                  {isSendingEmail ? 'Küldés...' : 'Küldés'}
+                </button>
+                <button
+                  type="button"
+                  onClick={() => {
+                    setShowForgotPasswordModal(false)
+                    setForgotEmail("")
+                    setForgotPasswordMessage("")
+                    setIsSendingEmail(false)
+                  }}
+                  className="flex-1 px-4 py-2 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors font-semibold"
+                >
+                  Mégse
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
     </motion.div>
   )
 }

SerpentRace_Frontend/src/pages/Auth/ResetPassword.jsx

@@ -1,26 +1,63 @@
 // src/pages/Auth/ResetPassword.jsx
 // Új jelszó megadása
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { useSearchParams, useNavigate } from "react-router-dom";
 import Background from "../../assets/backgrounds/Background";
 import { motion } from "framer-motion";
 import Button from "../../components/Buttons/Button";
 import InputBox from "../../components/Inputs/InputBox";
+import { resetPassword } from "../../api/userApi";
+import { FaArrowLeft } from "react-icons/fa";
 
 export default function ResetPassword() {
   const [password, setPassword] = useState("");
   const [confirmPassword, setConfirmPassword] = useState("");
   const [error, setError] = useState("");
+  const [success, setSuccess] = useState(false);
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const token = searchParams.get("token");
 
-  const handleSubmit = (e) => {
+  useEffect(() => {
+    if (!token) {
+      setError("Érvénytelen vagy hiányzó token!");
+    }
+  }, [token]);
+
+  const handleSubmit = async (e) => {
     e.preventDefault();
-    if (password !== confirmPassword) {
+    setError("");
-      setError("A jelszavak nem egyeznek.");
+
+    if (!password || !confirmPassword) {
+      setError("Minden mező kitöltése kötelező!");
       return;
     }
-    setError("");
+
-    // Backend API
+    if (password.length < 6) {
-    console.log("Új jelszó:", password);
+      setError("A jelszónak legalább 6 karakter hosszúnak kell lennie!");
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError("A jelszavak nem egyeznek!");
+      return;
+    }
+
+    if (!token) {
+      setError("Érvénytelen token!");
+      return;
+    }
+
+    try {
+      await resetPassword(token, password);
+      setSuccess(true);
+      setTimeout(() => {
+        navigate("/login", { state: { success: true, message: "Jelszó sikeresen megváltoztatva! Jelentkezz be az új jelszóval." } });
+      }, 2000);
+    } catch (err) {
+      setError(err.response?.data?.message || "Hiba történt a jelszó visszaállítása során!");
+    }
   };
 
   return (
@@ -28,18 +65,41 @@ export default function ResetPassword() {
       <Background />
       <motion.div
         initial={{ height: "auto" }}
-        animate={{ height: "350px" }}
+        animate={{ height: "auto" }}
         transition={{ duration: 0.5, ease: "easeInOut" }}
         className="absolute flex max-w-2xl w-full bg-white rounded-2xl shadow-lg overflow-hidden items-center justify-center"
       >
         <div className="w-full p-10 relative">
-          <h2 className="text-4xl font-extrabold text-center mb-6 text-gray-800 tracking-wide">
+          {/* Vissza gomb */}
+          <div
+            className="absolute -top-(-2) -left-(-1) flex items-center group cursor-pointer select-none"
+            onClick={() => navigate("/login")}
+          >
+            <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 bejelentkezéshez
+            </span>
+          </div>
+
+          <h2 className="text-4xl font-extrabold text-center mb-6 text-gray-800 tracking-wide mt-6">
             Új jelszó megadása
           </h2>
-          <form onSubmit={handleSubmit}>
+
+          {success ? (
+            <div className="text-center">
+              <div className="text-green-500 text-6xl mb-4">✓</div>
+              <p className="text-xl text-green-600 font-semibold">
+                Jelszó sikeresen megváltoztatva!
+              </p>
+              <p className="text-gray-600 mt-2">
+                Átirányítás a bejelentkezéshez...
+              </p>
+            </div>
+          ) : (
+            <form onSubmit={handleSubmit} className="space-y-4">
               <InputBox
                 type="password"
-              placeholder="Új jelszó"
+                placeholder="Új jelszó (min. 6 karakter)"
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
               />
@@ -50,10 +110,13 @@ export default function ResetPassword() {
                 onChange={(e) => setConfirmPassword(e.target.value)}
               />
               {error && (
-              <div className="text-red-500 text-sm mb-2">{error}</div>
+                <div className="bg-red-100 text-red-700 p-3 rounded text-sm">
+                  {error}
+                </div>
               )}
               <Button text="Jelszó beállítása" type="submit" />
             </form>
+          )}
         </div>
       </motion.div>
     </div>

SerpentRace_Frontend/src/pages/Auth/ResetPasswordRedirect.jsx

@@ -0,0 +1,30 @@
+// src/pages/Auth/ResetPasswordRedirect.jsx
+// Redirect component for /api/auth/reset-password links from emails
+
+import { useEffect } from "react";
+import { useSearchParams, useNavigate } from "react-router-dom";
+
+export default function ResetPasswordRedirect() {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const token = searchParams.get("token");
+    if (token) {
+      // Redirect to the actual reset password page
+      navigate(`/reset-password?token=${token}`, { replace: true });
+    } else {
+      // No token, redirect to login
+      navigate("/login", { replace: true });
+    }
+  }, [searchParams, navigate]);
+
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      <div className="text-center">
+        <div className="text-6xl mb-4">⏳</div>
+        <p className="text-xl">Átirányítás...</p>
+      </div>
+    </div>
+  );
+}