[#37] Login & Register Page UI

https://project.mdnd-it.cc/work_packages/37

SerpentRace_Frontend/src/components/Buttons/Button.jsx

@@ -1,3 +1,6 @@
+// src/components/Inputs/InputBox.jsx
+// Gomb komponens
+
 import { motion } from "framer-motion";
 
 export default function Button({ text, type, onClick }) {

SerpentRace_Frontend/src/components/Inputs/InputBox.jsx

@@ -1,10 +1,15 @@
-export default function InputBox({ type, placeholder }) {
+// src/components/Inputs/InputBox.jsx
+// InputBox komponens
+
+export default function InputBox({ type, placeholder, value, onChange }) {
     return (
       <div className="mb-6 relative">
         <input
           type={type}
           className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:border-background focus:outline-none text-gray-700 placeholder-gray-400 bg-gray-50"
           placeholder={placeholder}
+          value={value}
+          onChange={onChange}
         />
       </div>
     );

SerpentRace_Frontend/src/pages/Auth/AuthCard.jsx

@@ -1,3 +1,6 @@
+// src/pages/Auth/AuthLogin.jsx
+// Kártya amelyiken a bejelentkezés és regisztráció van
+
 import { motion, AnimatePresence } from "framer-motion";
 import Animation from "../../assets/SerpentRace_Animation/SerpentRace_Animation";
 import LoginForm from "./LoginForm";
@@ -20,7 +23,7 @@ export default function AuthCard({ isRegistering, setIsRegistering }) {
         <div className="h-6" />
         <Animation sizePercentage={30} />
         <p className="text-lg mt-0 text-center font-light whitespace-nowrap overflow-hidden">
-          Baszódj meg te kurva!
+          Lépj be és légy a legjobb!  
         </p>
       </div>
 

SerpentRace_Frontend/src/pages/Auth/AuthLogin.jsx

@@ -1,4 +1,4 @@
-// pages/Auth.js
+// src/pages/Auth/AuthLogin.jsx
 // Login url címre érkezés (registering = false)
 
 import { useState } from "react";

SerpentRace_Frontend/src/pages/Auth/AuthRegister.jsx

@@ -1,4 +1,4 @@
-// pages/Auth.js
+// src/pages/Auth/AuthRegister.jsx
 // Register url címre érkezés (registering = true)
 
 import { useState } from "react";
@@ -11,7 +11,6 @@ export default function AuthRegister() {
   return (
     <div className="relative flex items-center justify-center min-h-screen bg-gray-100 p-0 font-poppins">
       <Background />
-
       <AuthCard isRegistering={isRegistering} setIsRegistering={setIsRegistering} />
     </div>
   );

SerpentRace_Frontend/src/pages/Auth/LoginForm.jsx

@@ -1,9 +1,35 @@
-// components/LoginForm.js
+// src/pages/Auth/LoginForm.jsx
+// Bejelentkezési űrlap
+
 import InputBox from "../../components/Inputs/InputBox";
 import Button from "../../components/Buttons/Button";
 import { motion } from "framer-motion";
+import { useState } from "react";
 
 export default function LoginForm() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+
+  function validateEmail(email) {
+    return /\S+@\S+\.\S+/.test(email);
+  }
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setError("");
+    if (!email || !password) {
+      setError("Minden mező kitöltése kötelező.");
+      return;
+    }
+    if (!validateEmail(email)) {
+      setError("Hibás email formátum.");
+      return;
+    }
+    // Backend API
+    console.log("Bejelentkezés:", { email, password });
+  };
+
   return (
     <motion.div
       key="login"
@@ -13,9 +39,22 @@ export default function LoginForm() {
       transition={{ duration: 0.25 }}
     >
       <h2 className="text-4xl font-extrabold text-center mb-6 text-gray-800 tracking-wide">Bejelentkezés</h2>
-      <form>
-        <InputBox type="email" placeholder="Email cím" />
-        <InputBox type="password" placeholder="Jelszó" />
+      {error && (
+        <div className="mb-4 text-red-600 text-center font-semibold">{error}</div>
+      )}
+      <form onSubmit={handleSubmit}>
+        <InputBox
+          type="email"
+          placeholder="Email cím"
+          value={email}
+          onChange={e => setEmail(e.target.value)}
+        />
+        <InputBox
+          type="password"
+          placeholder="Jelszó"
+          value={password}
+          onChange={e => setPassword(e.target.value)}
+        />
         <Button text="Bejelentkezés" type="submit" />
       </form>
     </motion.div>

SerpentRace_Frontend/src/pages/Auth/RegisterForm.jsx

@@ -1,9 +1,47 @@
-// components/RegisterForm.js
+// src/pages/Auth/RegisterForm.jsx
+// Regisztrációs űrlap
+
 import InputBox from "../../components/Inputs/InputBox";
 import Button from "../../components/Buttons/Button";
 import { motion } from "framer-motion";
+import { useState } from "react";
 
 export default function RegisterForm() {
+  const [fullName, setFullName] = useState("");
+  const [username, setUsername] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [error, setError] = useState("");
+
+  function validateEmail(email) {
+    return /\S+@\S+\.\S+/.test(email);
+  }
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setError("");
+
+    if (!fullName || !username || !email || !password || !confirmPassword) {
+      setError("Minden mező kitöltése kötelező.");
+      return;
+    }
+    if (!validateEmail(email)) {
+      setError("Hibás email formátum.");
+      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;
+    }
+    // Backend API
+    console.log("Regisztráció:", { fullName, username, email, password });
+  };
+
   return (
     <motion.div
       key="register"
@@ -13,12 +51,40 @@ export default function RegisterForm() {
       transition={{ duration: 0.25 }}
     >
       <h2 className="text-4xl font-extrabold text-center mb-6 text-gray-800 tracking-wide">Regisztráció</h2>
-      <form>
-        <InputBox type="text" placeholder="Teljes név" />
-        <InputBox type="text" placeholder="Felhasználónév" />
-        <InputBox type="email" placeholder="Email cím" />
-        <InputBox type="password" placeholder="Jelszó" />
-        <InputBox type="password" placeholder="Jelszó megerősítése" />
+      {error && (
+        <div className="mb-4 text-red-600 text-center font-semibold">{error}</div>
+      )}
+      <form onSubmit={handleSubmit}>
+        <InputBox
+          type="text"
+          placeholder="Teljes név"
+          value={fullName}
+          onChange={e => setFullName(e.target.value)}
+        />
+        <InputBox
+          type="text"
+          placeholder="Felhasználónév"
+          value={username}
+          onChange={e => setUsername(e.target.value)}
+        />
+        <InputBox
+          type="email"
+          placeholder="Email cím"
+          value={email}
+          onChange={e => setEmail(e.target.value)}
+        />
+        <InputBox
+          type="password"
+          placeholder="Jelszó"
+          value={password}
+          onChange={e => setPassword(e.target.value)}
+        />
+        <InputBox
+          type="password"
+          placeholder="Jelszó megerősítése"
+          value={confirmPassword}
+          onChange={e => setConfirmPassword(e.target.value)}
+        />
         <Button text="Regisztráció" type="submit" />
       </form>
     </motion.div>