SerpentRace/SerpentRace_Frontend/src/pages/Auth/ResetPassword.jsx

// src/pages/Auth/ResetPassword.jsx
// Új jelszó megadása

import { useState, useEffect } from "react";
import { useSearchParams } 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";
import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate";

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 { goLogin } = HandleNavigate();
  const token = searchParams.get("token");

  useEffect(() => {
    if (!token) {
      setError("Érvénytelen vagy hiányzó token!");
    }
  }, [token]);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError("");

    if (!password || !confirmPassword) {
      setError("Minden mező kitöltése kötelező!");
      return;
    }

    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(() => {
        goLogin({ 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 (
    <div className="relative flex items-center justify-center min-h-screen bg-gray-100 p-0 font-poppins">
      <Background />
      <motion.div
        initial={{ height: "auto" }}
        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">
          {/* Vissza gomb */}
          <div
            className="absolute -top-(-2) -left-(-1) flex items-center group cursor-pointer select-none"
            onClick={() => goLogin()}
          >
            <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>

          {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>
  );
}