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

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>