example frontend-backend communication

SerpentRace_Backend/src/Api/index.ts

@@ -45,7 +45,7 @@ app.use(loggingService.requestLoggingMiddleware());
 
 app.use((req, res, next) => {
     const origin = req.headers.origin;
-    const allowedOrigins = ['http://localhost:3000', 'http://localhost:3001', 'http://localhost:8080'];
+    const allowedOrigins = ['http://localhost:3000', 'http://localhost:3001', 'http://localhost:8080', process.env.FRONTEND_URL];
     
     if (!origin || allowedOrigins.includes(origin)) {
         res.setHeader('Access-Control-Allow-Origin', origin || '*');

SerpentRace_Backend/src/Api/routers/userRouter.ts

@@ -29,7 +29,7 @@ userRouter.post('/login',
 		const result = await container.loginCommandHandler.execute({ username, password }, res);
 		
 		if (result) {
-			logAuth('User login successful', result.user.id, { username: result.user.username }, req, res);
+			logAuth('User login successful', undefined, { username: result.user.username }, req, res);
 			res.json(result);
 		} else {
 			throw new Error(`Login failed: ${result}`);
@@ -80,7 +80,6 @@ userRouter.post('/create',
 		const result = await container.createUserCommandHandler.execute(req.body);
 		
 		logRequest('User created successfully', req, res, { 
-			userId: result.id, 
 			username: result.username 
 		});
 		

SerpentRace_Backend/src/Application/DTOs/Mappers/UserMapper.ts

@@ -5,9 +5,7 @@ import { BaseMapper } from './BaseMapper';
 export class UserMapper {
   static toShortDto(user: UserAggregate): ShortUserDto {
     return {
-      id: user.id,
       username: user.username,
-      state: user.state,
       authLevel: (user.state === UserState.ADMIN ? 1 : 0) as 0 | 1,
     };
   }

SerpentRace_Backend/src/Application/DTOs/UserDto.ts

@@ -10,9 +10,7 @@ export interface UpdateUserDto {
 }
 
 export interface ShortUserDto {
-  id: string;
   username: string;
-  state: number;
   authLevel: 0 | 1;
 }
 

SerpentRace_Backend/src/Application/User/commands/LoginCommandHandler.ts

@@ -11,8 +11,8 @@ import { Response } from 'express';
 
 export interface LoginResponse {
   user: ShortUserDto;
-  token: string;
+  token?: string;
-  refreshToken: string;
+  refreshToken?: string;
   requiresOrgReauth?: boolean;
   orgLoginUrl?: string;
   organizationName?: string;
@@ -114,10 +114,12 @@ export class LoginCommandHandler {
         const responseObj = res || mockRes;
         
         // Check if client prefers Bearer token authentication
-        const prefersBearerAuth = res && (
+        const isWebClient = res?.req?.headers['origin'] || res?.req?.headers['referer'];
+        const explicitBearerRequest = res?.req?.headers['x-auth-method'] === 'bearer';
+
+        const prefersBearerAuth = res && !isWebClient && (
           res.req?.headers['authorization'] !== undefined ||
-          res.req?.headers['x-auth-method'] === 'bearer' ||
+          explicitBearerRequest
-          res.req?.headers['accept']?.includes('application/json')
         );
         
         let tokenPair: any;
@@ -168,12 +170,19 @@ export class LoginCommandHandler {
           organizationName,
           totalLoginTime: Date.now() - startTime
         });
-        
+        let response: LoginResponse;
-        const response: LoginResponse = {
+        if (prefersBearerAuth){
+          response = {
             user: UserMapper.toShortDto(user),
             token: tokenPair.accessToken,
             refreshToken: tokenPair.refreshToken
           };
+        }
+        else {
+          response = {
+            user: UserMapper.toShortDto(user)
+          };
+        }
 
         if (requiresOrgReauth) {
           response.requiresOrgReauth = true;

SerpentRace_Docker/.env.dev

@@ -7,6 +7,7 @@
 NODE_ENV=development
 PORT=3000
 APP_BASE_URL=http://localhost:3000
+FRONTEND_URL=http://localhost:5173
 
 # DATABASE CONFIGURATION (PostgreSQL)
 DB_HOST=postgres

SerpentRace_Docker/docker-compose.watch.yml

@@ -13,6 +13,7 @@ services:
     environment:
       - NODE_ENV=development
       - PORT=3000
+      - FRONTEND_URL=http://localhost:5173
       - DB_HOST=postgres
       - DB_PORT=5432
       - DB_NAME=serpentrace

SerpentRace_Frontend/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@tailwindcss/vite": "^4.1.7",
+        "axios": "^1.12.2",
         "framer-motion": "^12.19.1",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
@@ -1678,6 +1679,23 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "license": "MIT"
+    },
+    "node_modules/axios": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.2.tgz",
+      "integrity": "sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.4",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1728,6 +1746,19 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/call-bind-apply-helpers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
+      "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -1805,6 +1836,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -1865,6 +1908,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
@@ -1874,6 +1926,20 @@
         "node": ">=8"
       }
     },
+    "node_modules/dunder-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
+      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "gopd": "^1.2.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.155",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.155.tgz",
@@ -1894,6 +1960,51 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/es-define-property": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
+      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-errors": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
+      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-object-atoms": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
+      "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/es-set-tostringtag": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
+      "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "get-intrinsic": "^1.2.6",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.25.4",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.4.tgz",
@@ -2216,6 +2327,42 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.11",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
+      "integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.4.tgz",
+      "integrity": "sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "es-set-tostringtag": "^2.1.0",
+        "hasown": "^2.0.2",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/framer-motion": {
       "version": "12.19.1",
       "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.19.1.tgz",
@@ -2257,6 +2404,15 @@
         "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
       }
     },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -2267,6 +2423,43 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/get-intrinsic": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
+      "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
+      "license": "MIT",
+      "dependencies": {
+        "call-bind-apply-helpers": "^1.0.2",
+        "es-define-property": "^1.0.1",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.1.1",
+        "function-bind": "^1.1.2",
+        "get-proto": "^1.0.1",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "hasown": "^2.0.2",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/get-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
+      "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
+      "license": "MIT",
+      "dependencies": {
+        "dunder-proto": "^1.0.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/glob-parent": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
@@ -2293,6 +2486,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/gopd": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
+      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -2309,6 +2514,45 @@
         "node": ">=8"
       }
     },
+    "node_modules/has-symbols": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
+      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
+      "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
+      "license": "MIT",
+      "dependencies": {
+        "has-symbols": "^1.0.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -2745,6 +2989,36 @@
         "@jridgewell/sourcemap-codec": "^1.5.0"
       }
     },
+    "node_modules/math-intrinsics": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
+      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -2986,6 +3260,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",

SerpentRace_Frontend/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.7",
+    "axios": "^1.12.2",
     "framer-motion": "^12.19.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

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 Walke from "../../assets/pictures/walke.JPG"
-import Busi from "../../assets/pictures/busi.jpg"
+import Busi from "../../assets/pictures/busi.JPG"
-import Gege from "../../assets/pictures/gege.jpg"
+import Gege from "../../assets/pictures/gege.JPG"
-import Zsola from "../../assets/pictures/zsola.jpg"
+import Zsola from "../../assets/pictures/zsola.JPG"
-import Donat from "../../assets/pictures/donat.jpg"
+import Donat from "../../assets/pictures/donat.JPG"
-import Turo from "../../assets/pictures/turo.jpg"
+import Turo from "../../assets/pictures/turo.JPG"
-import Piskor from "../../assets/pictures/piskor.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
+    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"
+          placeholder="Vezetéknév"
-          value={fullName}
+          value={lastname}
-          onChange={e => setFullName(e.target.value)}
+          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ó"