Registration redirect frontend fix

SerpentRace_Frontend/src/pages/Auth/RegisterForm.jsx

@@ -1,51 +1,79 @@
 // 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";
-import { register } from "../../api/userApi";
+import InputBox from "../../components/Inputs/InputBox"
+import Button from "../../components/Buttons/Button"
+import { motion } from "framer-motion"
+import { useState } from "react"
+import { register } from "../../api/userApi"
+import { useNavigate } from "react-router-dom"
 
 export default function RegisterForm() {
-  const [lastname, setLastname] = useState("");
-  const [firstname, setFirstname] = useState("");
-  const [username, setUsername] = useState("");
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
-  const [phone, setPhone] = useState("");
-  const [error, setError] = useState("");
+  const [lastname, setLastname] = useState("")
+  const [firstname, setFirstname] = useState("")
+  const [username, setUsername] = useState("")
+  const [email, setEmail] = useState("")
+  const [password, setPassword] = useState("")
+  const [confirmPassword, setConfirmPassword] = useState("")
+  const [phone, setPhone] = useState("")
+  const [error, setError] = useState("")
+  const [showErrorPopup, setShowErrorPopup] = useState(false)
+  const navigate = useNavigate()
 
   function validateEmail(email) {
-    return /\S+@\S+\.\S+/.test(email);
+    return /\S+@\S+\.\S+/.test(email)
   }
 
   const handleSubmit = async (e) => {
-    e.preventDefault();
-    setError("");
+    e.preventDefault()
+    setError("")
+    setShowErrorPopup(false)
 
     if (!lastname || !firstname || !username || !email || !password || !confirmPassword || !phone) {
-      setError("Minden mező kitöltése kötelező.");
-      return;
+      setError("Minden mező kitöltése kötelező.")
+      return
     }
     if (!validateEmail(email)) {
-      setError("Hibás email formátum.");
-      return;
+      setError("Hibás email formátum.")
+      return
     }
     if (password.length < 6) {
-      setError("A jelszónak legalább 6 karakter hosszúnak kell lennie.");
-      return;
+      setError("A jelszónak legalább 6 karakter hosszúnak kell lennie.")
+      return
     }
     if (password !== confirmPassword) {
-      setError("A jelszavak nem egyeznek.");
-      return;
+      setError("A jelszavak nem egyeznek.")
+      return
     }
     // Backend API
-    const response = await register(username, email, password, firstname, lastname, phone);
-    console.log(response);
-    console.log("Regisztráció:", { username, email, password, firstname, lastname, phone });
-  };
+    try {
+      const response = await register(username, email, password, firstname, lastname, phone)
+      // Check for 201 Created status
+      if (response && response.status === 201) {
+        navigate("/login", { state: { success: true } })
+        console.log(response)
+        console.log("Regisztráció:", { username, email, password, firstname, lastname, phone })
+      } else {
+        let msg = "Sikertelen regisztráció."
+        if (response && response.error) {
+          msg = response.error
+        }
+        setError(msg)
+        setShowErrorPopup(true)
+        setTimeout(() => setShowErrorPopup(false), 2000)
+      }
+    } catch (err) {
+      let msg = "Ismeretlen hiba történt."
+      if (err.response && err.response.data && err.response.data.error) {
+        msg = err.response.data.error
+      } else if (err.message) {
+        msg = err.message
+      }
+      setError(msg)
+      setShowErrorPopup(true)
+      setTimeout(() => setShowErrorPopup(false), 2000)
+    }
+  }
 
   return (
     <motion.div
@@ -56,54 +84,56 @@ 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>
-      {error && (
-        <div className="mb-4 text-red-600 text-center font-semibold">{error}</div>
+      {showErrorPopup && error && (
+        <div className="fixed top-6 left-1/2 -translate-x-1/2 bg-red-500 text-white px-6 py-2 rounded shadow-lg z-50 text-center font-semibold transition-opacity duration-300">
+          {error}
+        </div>
       )}
       <form onSubmit={handleSubmit} className="space-y-6">
         <InputBox
           type="text"
           placeholder="Vezetéknév"
           value={lastname}
-          onChange={e => setLastname(e.target.value)}
+          onChange={(e) => setLastname(e.target.value)}
         />
         <InputBox
           type="text"
           placeholder="Keresztnév"
           value={firstname}
-          onChange={e => setFirstname(e.target.value)}
+          onChange={(e) => setFirstname(e.target.value)}
         />
         <InputBox
           type="text"
           placeholder="Felhasználónév"
           value={username}
-          onChange={e => setUsername(e.target.value)}
+          onChange={(e) => setUsername(e.target.value)}
         />
         <InputBox
           type="email"
           placeholder="Email cím"
           value={email}
-          onChange={e => setEmail(e.target.value)}
+          onChange={(e) => setEmail(e.target.value)}
         />
         <InputBox
           type="phone"
           placeholder="Telefonszám"
           value={phone}
-          onChange={e => setPhone(e.target.value)}
+          onChange={(e) => setPhone(e.target.value)}
         />
         <InputBox
           type="password"
           placeholder="Jelszó"
           value={password}
-          onChange={e => setPassword(e.target.value)}
+          onChange={(e) => setPassword(e.target.value)}
         />
         <InputBox
           type="password"
           placeholder="Jelszó megerősítése"
           value={confirmPassword}
-          onChange={e => setConfirmPassword(e.target.value)}
+          onChange={(e) => setConfirmPassword(e.target.value)}
         />
         <Button text="Regisztráció" type="submit" />
       </form>
     </motion.div>
-  );
+  )
 }