example frontend-backend communication

SerpentRace_Frontend/src/api/userApi.js

@@ -0,0 +1,67 @@
+import axios from 'axios';
+
+
+export const API_CONFIG = {
+  baseURL: import.meta.env.VITE_API_URL+'/api',
+  wsURL: 'http://localhost:3000',
+  timeout: 10000,
+  retryAttempts: 3
+};
+
+const apiClient = axios.create({
+  baseURL: API_CONFIG.baseURL,
+  timeout: API_CONFIG.timeout,
+  withCredentials: true, // Important for cookie-based auth
+  headers: {
+    'Content-Type': 'application/json'
+  }
+});
+
+
+// Add request interceptor for debugging
+apiClient.interceptors.request.use(
+  (config) => {
+    console.log('Request URL:', config.url);
+    console.log('Request headers:', config.headers);
+    console.log('Current cookies:', document.cookie);
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+// Add response interceptor for debugging cookies
+apiClient.interceptors.response.use(
+  (response) => {
+    console.log('Response status:', response.status);
+    console.log('Response headers:', response.headers);
+    console.log('Set-Cookie headers:', response.headers['set-cookie']);
+    console.log('Cookies after response:', document.cookie);
+    return response;
+  },
+  (error) => {
+    console.error('API Error:', error.response?.data || error.message);
+    return Promise.reject(error);
+  }
+);
+
+//login
+export const login = async (username, password) => {
+    try {
+        const response = await apiClient.post('/users/login', { username, password });
+        return response.data;
+    } catch (error) {
+        throw error;
+    }
+};
+
+//register
+export const register = async (username, email, password, fname, lname, phone) => {
+    try {
+        const response = await apiClient.post('/users/create', { username, email, password, fname, lname, phone });
+        return response.data;
+    } catch (error) {
+        throw error;
+    }
+};

SerpentRace_Frontend/src/pages/About/About.jsx

@@ -2,13 +2,13 @@ import React, { useEffect, useRef, useState } from "react"
 import Navbar from "../../components/Navbar/Navbar"
 import Footer from "../../components/Footer/Footer"
 import Background from "../../assets/backgrounds/Background.jsx"
-import Walke from "../../assets/pictures/walke.jpg"
-import Busi from "../../assets/pictures/busi.jpg"
-import Gege from "../../assets/pictures/gege.jpg"
-import Zsola from "../../assets/pictures/zsola.jpg"
-import Donat from "../../assets/pictures/donat.jpg"
-import Turo from "../../assets/pictures/turo.jpg"
-import Piskor from "../../assets/pictures/piskor.jpg"
+import Walke from "../../assets/pictures/walke.JPG"
+import Busi from "../../assets/pictures/busi.JPG"
+import Gege from "../../assets/pictures/gege.JPG"
+import Zsola from "../../assets/pictures/zsola.JPG"
+import Donat from "../../assets/pictures/donat.JPG"
+import Turo from "../../assets/pictures/turo.JPG"
+import Piskor from "../../assets/pictures/piskor.JPG"
 
 const About = () => {
   const [visible, setVisible] = useState(false)

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ó"