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