Merge pull request 'example frontend-backend communication' (#37) from backend_complete into main

Reviewed-on: #37

SerpentRace_Frontend/src/pages/Auth/LoginForm.jsx

@@ -5,6 +5,7 @@ import InputBox from "../../components/Inputs/InputBox";
 import Button from "../../components/Buttons/Button";
 import { motion } from "framer-motion";
 import { useState } from "react";
+import { login } from "../../api/userApi";
 
 export default function LoginForm() {
   const [email, setEmail] = useState("");
@@ -27,7 +28,14 @@ export default function LoginForm() {
       return;
     }
     // Backend API
-    console.log("Bejelentkezés:", { email, password });
+    login(email, password)
+      .then((data) => {
+        console.log(data);
+        console.log("Bejelentkezés:", { email, password });
+      })
+      .catch((error) => {
+        setError("Hibás bejelentkezési adatok.");
+      });
   };
 
   return (

SerpentRace_Frontend/src/pages/Auth/RegisterForm.jsx

@@ -5,24 +5,27 @@ 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";
 
 export default function RegisterForm() {
-  const [fullName, setFullName] = 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("");
 
   function validateEmail(email) {
     return /\S+@\S+\.\S+/.test(email);
   }
 
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
     setError("");
 
-    if (!fullName || !username || !email || !password || !confirmPassword) {
+    if (!lastname || !firstname || !username || !email || !password || !confirmPassword || !phone) {
       setError("Minden mező kitöltése kötelező.");
       return;
     }
@@ -39,7 +42,9 @@ export default function RegisterForm() {
       return;
     }
     // Backend API
-    console.log("Regisztráció:", { fullName, username, email, password });
+    const response = await register(username, email, password, firstname, lastname, phone);
+    console.log(response);
+    console.log("Regisztráció:", { username, email, password, firstname, lastname, phone });
   };
 
   return (
@@ -57,9 +62,15 @@ export default function RegisterForm() {
       <form onSubmit={handleSubmit} className="space-y-6">
         <InputBox
           type="text"
-          placeholder="Teljes név"
-          value={fullName}
-          onChange={e => setFullName(e.target.value)}
+          placeholder="Vezetéknév"
+          value={lastname}
+          onChange={e => setLastname(e.target.value)}
+        />
+        <InputBox
+          type="text"
+          placeholder="Keresztnév"
+          value={firstname}
+          onChange={e => setFirstname(e.target.value)}
         />
         <InputBox
           type="text"
@@ -73,6 +84,12 @@ export default function RegisterForm() {
           value={email}
           onChange={e => setEmail(e.target.value)}
         />
+        <InputBox
+          type="phone"
+          placeholder="Telefonszám"
+          value={phone}
+          onChange={e => setPhone(e.target.value)}
+        />
         <InputBox
           type="password"
           placeholder="Jelszó"