SerpentRace_Frontend/src/pages/Auth/ForgotPassword.jsx

@@ -0,0 +1,45 @@
+// src/pages/Auth/ForgotPassword.jsx
+// Itt kéri az emailt amire a jelszó visszaállítást kérjük
+
+import { useState } from "react";
+import Background from "../../assets/backgrounds/Background";
+import { motion } from "framer-motion";
+import Button from "../../components/Buttons/Button";
+import InputBox from "../../components/Inputs/InputBox";
+
+export default function ForgotPassword() {
+  const [email, setEmail] = useState("");
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Backend API
+    console.log("Elfelejtett jelszó email:", email);
+  };
+
+  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: "300px" }}
+        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">
+            Elfelejtett jelszó
+          </h2>
+          <form onSubmit={handleSubmit}>
+            <InputBox
+              type="email"
+              placeholder="Email cím"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+            <Button text="Jelszó visszaállítása" type="submit" />
+          </form>
+        </div>
+      </motion.div>
+    </div>
+  );
+}

SerpentRace_Frontend/src/pages/Auth/ResetPassword.jsx

@@ -0,0 +1,61 @@
+// src/pages/Auth/ResetPassword.jsx
+// Új jelszó megadása
+
+import { useState } from "react";
+import Background from "../../assets/backgrounds/Background";
+import { motion } from "framer-motion";
+import Button from "../../components/Buttons/Button";
+import InputBox from "../../components/Inputs/InputBox";
+
+export default function ResetPassword() {
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [error, setError] = useState("");
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (password !== confirmPassword) {
+      setError("A jelszavak nem egyeznek.");
+      return;
+    }
+    setError("");
+    // Backend API
+    console.log("Új jelszó:", password);
+  };
+
+  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: "350px" }}
+        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">
+            Ú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>
+        </div>
+      </motion.div>
+    </div>
+  );
+}