userdetails,resetpass müködöképes lett

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("A jelszavak nem egyeznek.");
+    setError("");
+
+    if (!password || !confirmPassword) {
+      setError("Minden mező kitöltése kötelező!");
       return;
     }
-    setError("");
-    // Backend API
-    console.log("Új jelszó:", password);
+
+    if (password.length < 6) {
+      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,32 +65,58 @@ 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}>
-            <InputBox
-              type="password"
-              placeholder="Új jelszó"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-            />
-            <InputBox
-              type="password"
-              placeholder="Új jelszó megerősítése"
-              value={confirmPassword}
-              onChange={(e) => setConfirmPassword(e.target.value)}
-            />
-            {error && (
-              <div className="text-red-500 text-sm mb-2">{error}</div>
-            )}
-            <Button text="Jelszó beállítása" type="submit" />
-          </form>
+
+          {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ó (min. 6 karakter)"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+              />
+              <InputBox
+                type="password"
+                placeholder="Új jelszó megerősítése"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+              />
+              {error && (
+                <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>
+  );
+}