backend to api

.env

@@ -1,3 +1,15 @@
-POSTGRES_USER=kinou
+# POSTGRES_USER=kinou
+# POSTGRES_PASSWORD=pass
+# POSTGRES_DB=postgreDB
+# POSTGRES_ROOT_PASSWORD=pass
+# POSTGRES_HOST=localhost
+# POSTGRES_HOST_AUTH_METHOD=trust
+
+POSTGRES_HOST=127.0.0.1
+POSTGRES_PORT=5432
+POSTGRES_USER=postgres
 POSTGRES_PASSWORD=pass
-POSTGRES_DB=postgreDB
+POSTGRES_DATABASE=postgres
+PORT=3000
+MODE=DEV
+RUN_MIGRATIONS=true

.gitignore

@@ -2,8 +2,11 @@
 backend/node_modules/
 backend/dist/
 
+api/node_modules/
+api/dist/
+
 pong/node_modules/
 pong/dist/
 
 */node_modules/
-*/dist/
+*/dist/ 

api/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "pong",
+  "name": "api",
   "version": "0.0.1",
   "description": "",
   "author": "",
@@ -20,18 +20,22 @@
     "test:e2e": "jest --config ./test/jest-e2e.json"
   },
   "dependencies": {
-    "@nestjs/axios": "^2.0.0",
     "@nestjs/common": "^9.0.0",
     "@nestjs/core": "^9.0.0",
+    "@nestjs/jwt": "^10.0.3",
+    "@nestjs/passport": "^9.0.3",
     "@nestjs/platform-express": "^9.0.0",
     "@nestjs/typeorm": "^9.0.1",
-    "axios": "^1.3.5",
+    "axios": "^1.4.0",
-    "dotenv": "^16.0.3",
+    "express-session": "^1.17.3",
+    "passport": "^0.6.0",
+    "passport-jwt": "^4.0.1",
+    "passport-local": "^1.0.0",
     "pg": "^8.10.0",
     "reflect-metadata": "^0.1.13",
-    "rxjs": "^7.2.0",
+    "rxjs": "^7.8.1",
     "typeorm": "^0.3.15",
-    "webpack": "^5.79.0"
+    "webpack": "^5.82.0"
   },
   "devDependencies": {
     "@nestjs/cli": "^9.0.0",
@@ -47,13 +51,12 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "jest": "29.5.0",
-    "nodemon": "^2.0.22",
     "prettier": "^2.3.2",
     "source-map-support": "^0.5.20",
     "supertest": "^6.1.3",
     "ts-jest": "29.0.5",
     "ts-loader": "^9.2.3",
-    "ts-node": "^10.9.1",
+    "ts-node": "^10.0.0",
     "tsconfig-paths": "4.2.0",
     "typescript": "^4.7.4"
   },

api/src/app.controller.ts

@@ -0,0 +1,42 @@
+import { Controller, Request, Req, Get, Post, UseGuards } from '@nestjs/common';
+
+import { JwtAuthGuard } from './auth/jwt-auth.guard';
+import { AuthGuard } from '@nestjs/passport';
+import { AuthService } from './auth/auth.service';
+
+// import { Login42 } from './auth/login42'
+import { loginClass } from './auth/login42'
+
+
+@Controller('/api')
+export class AppController {
+  constructor(private authService: AuthService, 
+			  private loginClass: loginClass ) {}
+
+//   @Post('auth/login')
+//   async login() {
+// 	  const user = Login42();
+// 	return this.authService.login(user);
+//   }
+
+  @Get('auth/login')
+	  async login2(@Req() request: Request) {
+		const url = request.url;
+		console.log("login function");
+		console.log(`url = ${url}`);
+		// const user = this.loginClass.Login42(url);
+		const user = this.loginClass.Login42(url);
+	  return this.authService.login(user);
+	}
+
+  @UseGuards(JwtAuthGuard)
+  @Get('profile')
+  getProfile(@Request() req) {
+    return req.user;
+  }
+
+  @Get(`conversation/:id`)
+  getConv(){
+	
+  }
+}

api/src/app.module.ts

@@ -0,0 +1,26 @@
+import { Module } from '@nestjs/common';
+import { AppController } from './app.controller';
+import { AppService } from './app.service';
+import { AuthModule } from './auth/auth.module';
+
+import { loginClass } from './auth/login42';
+// import { UsersService } from './users/users.service'; // in add
+
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { getTypeOrmConfig } from './config/config.service';
+import { User } from './model/item.entity';
+// import { UsersService } from './users/users.service';
+import { UsersModule } from './users/users.module';
+
+@Module({
+  imports:
+  [
+	AuthModule,
+	UsersModule,
+],
+controllers: [AppController],
+providers: [AppService, loginClass],
+
+//   providers: [AppService, UsersService],//in add
+})
+export class AppModule {}

api/src/app.service.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@nestjs/common';
+
+@Injectable()
+export class AppService {
+  getHello(): string {
+    return 'Hello World!';
+  }
+}

api/src/auth/auth.module.ts

@@ -0,0 +1,39 @@
+// import { Module } from '@nestjs/common';
+// import { AuthService } from './auth.service';
+// import { UsersModule } from '../users/users.module';
+// import { PassportModule } from '@nestjs/passport';
+// import { LocalStrategy } from './local.strategy';
+
+// @Module({
+//   imports: [UsersModule, PassportModule],
+//   providers: [AuthService, LocalStrategy],
+// })
+// export class AuthModule {}
+
+
+import { Module } from '@nestjs/common';
+
+import { AuthService } from './auth.service';
+import { UsersModule } from '../users/users.module';
+import { PassportModule } from '@nestjs/passport';
+import { LocalStrategy } from './local.strategy';
+
+import { JwtModule } from '@nestjs/jwt';
+import { jwtConstants } from './constants';
+import { JwtStrategy } from './jwt.strategy';
+
+@Module({
+  imports: [
+    UsersModule,
+    PassportModule,
+    JwtModule.register({
+      secret: jwtConstants.secret,
+      signOptions: { expiresIn: '60000s' },
+    }),
+  ],
+  providers: [AuthService, LocalStrategy, JwtStrategy],
+  exports: [AuthService],
+})
+export class AuthModule {}
+
+

api/src/auth/auth.service.spec.ts

@@ -0,0 +1,18 @@
+import { Test, TestingModule } from '@nestjs/testing';
+import { AuthService } from './auth.service';
+
+describe('AuthService', () => {
+  let service: AuthService;
+
+  beforeEach(async () => {
+    const module: TestingModule = await Test.createTestingModule({
+      providers: [AuthService],
+    }).compile();
+
+    service = module.get<AuthService>(AuthService);
+  });
+
+  it('should be defined', () => {
+    expect(service).toBeDefined();
+  });
+});

api/src/auth/auth.service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@nestjs/common';
+import { UsersService } from '../users/users.service';
+import { JwtService } from '@nestjs/jwt';
+
+@Injectable()
+export class AuthService {
+
+  constructor(
+	private usersService: UsersService,
+	private jwtService: JwtService
+  ) {}
+
+  async validateUser(username: string, pass: string): Promise<any> {
+    const user = await this.usersService.findOne(username);
+    if (user && user.password === pass) {
+      const { password, ...result } = user;
+      return result;
+    }
+    return null;
+  }
+
+  async login(user: any) {
+    const payload = { username: user.username, sub: user.userId };
+    return {
+      access_token: this.jwtService.sign(payload),
+    };
+  }
+}

api/src/auth/constants.ts

@@ -0,0 +1,3 @@
+export const jwtConstants = {
+	secret: 'DO NOT USE THIS VALUE. INSTEAD, CREATE A COMPLEX SECRET AND KEEP IT SAFE OUTSIDE OF THE SOURCE CODE.',
+  };

api/src/auth/jwt-auth.guard.ts

@@ -0,0 +1,5 @@
+import { Injectable } from '@nestjs/common';
+import { AuthGuard } from '@nestjs/passport';
+
+@Injectable()
+export class JwtAuthGuard extends AuthGuard('jwt') {}

api/src/auth/jwt.strategy.ts

@@ -0,0 +1,19 @@
+import { ExtractJwt, Strategy } from 'passport-jwt';
+import { PassportStrategy } from '@nestjs/passport';
+import { Injectable } from '@nestjs/common';
+import { jwtConstants } from './constants';
+
+@Injectable()
+export class JwtStrategy extends PassportStrategy(Strategy) {
+  constructor() {
+    super({
+      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
+      ignoreExpiration: false,
+      secretOrKey: jwtConstants.secret,
+    });
+  }
+
+  async validate(payload: any) {
+    return { userId: payload.sub, username: payload.username };
+  }
+}

api/src/auth/local.strategy.ts

@@ -0,0 +1,19 @@
+import { Strategy } from 'passport-local';
+import { PassportStrategy } from '@nestjs/passport';
+import { Injectable, UnauthorizedException } from '@nestjs/common';
+import { AuthService } from './auth.service';
+
+@Injectable()
+export class LocalStrategy extends PassportStrategy(Strategy) {
+  constructor(private authService: AuthService) {
+    super();
+  }
+
+  async validate(username: string, password: string): Promise<any> {
+    const user = await this.authService.validateUser(username, password);
+    if (!user) {
+      throw new UnauthorizedException();
+    }
+    return user;
+  }
+}

api/src/auth/login42.ts

@@ -0,0 +1,115 @@
+// import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import { UsersService } from '../users/users.service';
+import { Injectable } from '@nestjs/common';
+
+import { Repository } from 'typeorm';
+
+import { User } from '../model/item.entity';
+
+@Injectable()
+export class loginClass {
+	// const userService = new UsersService();
+	constructor(private readonly usersService: UsersService) {};
+
+	async Login42(url: string)
+	{
+		// const [token, setToken] = useState(null);
+		// const [userId, setUserId] = useState(null);
+		// const [userName, setUserName] = useState(null);
+		// const usersService = UsersService;
+		// constructor(private readonly usersService: UsersService) {}
+
+		let token = null;
+		let userId = null;
+		let userName = null;
+
+		// const usersService = UsersService;
+		// const private , usersService: UsersService
+
+		// const url = new URL(urlString);
+		console.log("you said yes to connect with 42");
+		const params = new URLSearchParams(url.split('?')[1]);
+		// const params = new URLSearchParams(url);
+		console.log(`params is= ${params}`);
+		const code = params.get('code');
+		console.log(`code is= ${code}`);
+
+		const data = {
+			grant_type: 'authorization_code',
+			client_id: 'u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41',
+			client_secret: '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',
+			code: code,
+			redirect_uri: 'http://localhost:80/api/auth/login',
+		  };
+
+		axios.post('https://api.intra.42.fr/oauth/token', data)
+		.then(response => {
+	    	// handle success response
+	// console.log(response);
+			token = response.data.access_token;
+			// setToken(token);
+	// console.log(`token= ${token}`);
+			  axios.get('https://api.intra.42.fr/oauth/token/info', {
+				headers: {
+				  Authorization: `Bearer ${token}`
+				}
+			  })
+			  .then(response => {
+		// console.log(response)
+				userId = response.data.resource_owner_id;
+				// setUserId(userId);
+		// console.log(userId);
+				// axios.get(`https://api.intra.42.fr/v2/users/${userId}`)
+				// axios.get(`https://api.intra.42.fr/v2/me`)
+				axios.get('https://api.intra.42.fr/v2/me', {
+					headers: {
+					  Authorization: `Bearer ${token}`
+					}
+				  })
+	  			.then(response => {
+	  	//   console.log(response);
+				//   const login = response.data.login;
+				//   console.log(`login= ${login}`);
+				//   setUserName(response.data.login);
+				  userName = response.data.login
+
+		//   console.log(`username= ${userName}`);
+	  			  // Gérer les données de réponse ici
+	  			})
+	  			.catch(error => {
+	  			  console.error(error);
+	  			  // Gérer les erreurs ici
+	  			});
+			  })
+			  .catch(error => {
+				console.error(error);
+			  });
+
+	  	})
+		.catch(error => {
+			// handle error response
+			console.error(error);
+		});
+
+
+		// async findOne(username: string): Promise<User> {
+		let user = await this.usersService.findOne(userName);
+		if (!user) {
+			//   throw new NotFoundException(`User with username '${userName}' not found`);
+			// user = { nickname: userName};
+			const user = {
+				name: null,
+				description: null,
+				id: null,
+				password: null,
+				nickname: userName,
+				win: 0, 
+				loose: 0,
+				rank: 0,
+			  };
+			await this.usersService.create(user);
+		}
+		return user;
+	}
+}

api/src/config/config.service.ts

@@ -6,7 +6,7 @@
 /*   By: apommier <apommier@student.42.fr>          +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2023/04/09 14:53:49 by apommier          #+#    #+#             */
-/*   Updated: 2023/04/09 14:55:40 by apommier         ###   ########.fr       */
+/*   Updated: 2023/05/05 23:11:44 by apommier         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -18,7 +18,9 @@ import { TypeOrmModuleOptions } from '@nestjs/typeorm';
 	username: 'postgres',
 	password: 'pass',
 	database: 'postgres',
-	entities: ['**/*.entity{.ts,.js}'],
+	entities: ["dist/**/*.entity.js"],
+	// entities: [join(__dirname, '**', '*.entity.{ts,js}')]
+	// entities: ['**/*.entity{.ts,.js}'], //basic
 	migrationsTableName: 'migration',
 	migrations: ['src/migration/*.ts'],
 	ssl: process.env.MODE !== 'DEV',

api/src/main.ts

@@ -1,5 +1,13 @@
 import { NestFactory } from '@nestjs/core';
 import { AppModule } from './app.module';
+import * as session from 'express-session';
+
+// async function bootstrap() {
+//   const app = await NestFactory.create(AppModule);
+//   await app.listen(3000);
+// }
+// bootstrap();
+
 
 async function bootstrap() {
 	const app = await NestFactory.create(AppModule, {
@@ -8,10 +16,17 @@ async function bootstrap() {
 		  methods: '*',
 		//   preflightContinue: false,
 		//   optionsSuccessStatus: 204,
-		//   credentials: true,
+		  credentials: true,
 		  allowedHeaders: '*',
 		},
 	  });
+	app.use(
+		session({
+		  secret: 'your_secret_key',
+		  resave: false,
+		  saveUninitialized: false,
+		}),
+	  );
   await app.listen(3000);
 }
-bootstrap();
+bootstrap();

api/src/model/base.entity.ts

@@ -66,8 +66,8 @@ export abstract class BaseEntity {
 	@Column({ nullable: true })
 	password: string;
 
-	@Column({ nullable: true })
+	// @Column({ nullable: true })
-	email: string;
+	// email: string;
 
 	// @Column({ nullable: true })
 	// password: string;

api/src/users/users.module.ts

@@ -0,0 +1,18 @@
+import { Module } from '@nestjs/common';
+import { UsersService} from './users.service';
+
+import { TypeOrmModule } from '@nestjs/typeorm';
+import { getTypeOrmConfig } from '../config/config.service';
+import { User } from '../model/item.entity';
+
+@Module({
+  imports:
+  [
+	TypeOrmModule.forRoot(getTypeOrmConfig()),
+	TypeOrmModule.forFeature([User]),
+	// TypeOrmModule.forFeature([UserRepository]),
+  ],
+  providers:[UsersService],
+  exports: [UsersService],
+})
+export class UsersModule {}

api/src/users/users.service.spec.ts

@@ -0,0 +1,18 @@
+import { Test, TestingModule } from '@nestjs/testing';
+import { UsersService } from './users.service';
+
+describe('UsersService', () => {
+  let service: UsersService;
+
+  beforeEach(async () => {
+    const module: TestingModule = await Test.createTestingModule({
+      providers: [UsersService],
+    }).compile();
+
+    service = module.get<UsersService>(UsersService);
+  });
+
+  it('should be defined', () => {
+    expect(service).toBeDefined();
+  });
+});

api/src/users/users.service.ts

@@ -0,0 +1,55 @@
+import { Injectable } from '@nestjs/common';
+import { InjectRepository } from '@nestjs/typeorm';
+import { Repository } from 'typeorm';
+
+import { User } from '../model/item.entity';
+
+
+@Injectable()
+export class UsersService {
+	constructor(
+		@InjectRepository(User) private userRepository: Repository<User>,
+		) {}
+		
+	getHello(): string {
+	  return 'Hello World!';
+	}
+	
+	async create(user: User): Promise<User> {
+	  return await this.userRepository.save(user);
+	}
+	
+	async findAll(): Promise<User[]> {
+		return await this.userRepository.find();
+	}
+	
+	async findOne(username: string): Promise<User> {
+		return await this.userRepository.findOneBy({nickname: username});
+	}
+}
+
+
+// }
+// type orm here
+
+// This should be a real class/interface representing a user entity
+// export type User = any;
+
+// @Injectable()
+// export class UsersService {
+//   private readonly users = [
+//     {
+//       userId: 1,
+//       username: 'john',
+//       password: 'changeme',
+//     },
+//     {
+//       userId: 2,
+//       username: 'maria',
+//       password: 'guess',
+//     },
+//   ];
+
+//   async findOne(username: string): Promise<User | undefined> {
+//     return this.users.find(user => user.username === username);
+//   }

api/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "declaration": true,
+    "removeComments": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "target": "es2017",
+    "sourceMap": true,
+    "outDir": "./dist",
+    "baseUrl": "./",
+    "incremental": true,
+    "skipLibCheck": true,
+    "strictNullChecks": false,
+    "noImplicitAny": false,
+    "strictBindCallApply": false,
+    "forceConsistentCasingInFileNames": false,
+    "noFallthroughCasesInSwitch": false
+  }
+}

backend/src/app.controller.ts

@@ -1,61 +0,0 @@
-import { Body, Controller, Get, Param, Post, Query, InternalServerErrorException } from '@nestjs/common';
-// import { AppService } from './app.service.js';
-import { UsersService } from './app.service';
-import { User } from './model/item.entity';
-// import { HttpService } from '@nestjs/common';
-// import { HttpService } from '@nestjs/axios'
-import axios from 'axios';
-import { AxiosResponse } from 'axios';
-
-
-@Controller()
-export class AppController2 {
-  constructor(private readonly usersService: UsersService) {}
-
-  @Get()
-  getHello(): string {
-    return this.usersService.getHello();
-  }
-}
-
-@Controller('api')
-export class AppController
-{
-  constructor(private readonly usersService: UsersService) {}
-
-  @Post('token')
-  async getToken(@Body('code') code: string): Promise<any>
-  {
-	const http = axios;
-	console.log(`here is the code= ${code}`);
-    const data = {
-      grant_type: 'authorization_code',
-      client_id: 'u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41',
-      client_secret: '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',
-      code: code,
-      redirect_uri: 'http://localhost:8080/login42',
-    };
-	try {
-		const response: AxiosResponse = await http.post('https://api.intra.42.fr/oauth/token', data);
-		// console.log(`response= ${response}`);
-		return response;
-	}
-	catch (error)
-	{
-		console.error(error);
-		throw new InternalServerErrorException('Failed to get access token');
-	}
-  }
-
-  @Post('login')
-  async create(@Body() user: User)
-  {
-    return this.usersService.create(user);
-  }
-
-  @Get('user/:id')
-  async getUser(@Param('id') id: number)
-  {
-    return this.usersService.findOne(id);
-  }
-}

backend/src/app.module.ts

@@ -1,30 +0,0 @@
-// import { Module } from '@nestjs/common';
-// import { AppController } from './app.controller';
-// import { AppService } from './app.service';
-
-// @Module({
-//   imports: [],
-//   controllers: [AppController],
-//   providers: [AppService],
-// })
-// export class AppModule {}
-
-
-
-import { Module } from '@nestjs/common';
-import { AppController } from './app.controller';
-import { AppService, UsersService } from './app.service';
-import { User } from './model/item.entity';
-import { TypeOrmModule } from '@nestjs/typeorm';
-import { getTypeOrmConfig } from './config/config.service';
-
-@Module({
-  imports: [
-    TypeOrmModule.forRoot(getTypeOrmConfig()),
-	TypeOrmModule.forFeature([User]),
-	// TypeOrmModule.forFeature([UserRepository]),
-  ],
-  controllers: [AppController],
-  providers: [AppService, UsersService],
-})
-export class AppModule { }

backend/src/app.service.ts

@@ -1,46 +0,0 @@
-import { Injectable } from '@nestjs/common';
-import { InjectRepository } from '@nestjs/typeorm';
-import { Repository } from 'typeorm';
-import { User } from './model/item.entity';
-// import { User } from './entity/user.entity';
-
-
-@Injectable()
-export class AppService {
-  getHello(): string {
-    return 'Hello World!';
-  }
-}
-
-@Injectable()
-export class UsersService {
-	constructor(
-		@InjectRepository(User) private userRepository: Repository<User>,
-	  ) {}
-//   constructor(
-//     @InjectRepository(User)
-//     private usersRepository: Repository<User>,
-//   ) {}
-//   constructor(
-//     @InjectRepository(User)
-//     private usersRepository: Repository<User>,
-//   ) {}
-	// constructor(private usersRepository: Repository<User>) {}
-
-  getHello(): string {
-    return 'Hello World!';
-  }	
-
-  async create(user: User): Promise<User> {
-    return await this.userRepository.save(user);
-  }
-
-  async findAll(): Promise<User[]> {
-    return await this.userRepository.find();
-  }
-
-  async findOne(id: number): Promise<User> {
-    return await this.userRepository.findOneBy({id: id});
-  }
-
-}

backend/tsconfig.json

@@ -1,21 +0,0 @@
-{
-	"compilerOptions": {
-	  "module": "commonjs",
-	  "declaration": true,
-	  "removeComments": true,
-	  "emitDecoratorMetadata": true,
-	  "experimentalDecorators": true,
-	  "allowSyntheticDefaultImports": true,
-	  "target": "es2017",
-	  "sourceMap": true,
-	  "outDir": "./dist",
-	  "baseUrl": "./",
-	  "incremental": true,
-	  "skipLibCheck": true,
-	  "strictNullChecks": false,
-	  "noImplicitAny": false,
-	  "strictBindCallApply": false,
-	  "forceConsistentCasingInFileNames": false,
-	  "noFallthroughCasesInSwitch": false
-	}
-  }

chat/src/chat/chat.gateway.ts

@@ -4,8 +4,7 @@ import { v4 as uuidv4 } from 'uuid';
 
 @WebSocketGateway({ cors: true })
 export class ChatGateway implements OnGatewayInit, OnGatewayConnection, OnGatewayDisconnect {
-  
+
-	
 	private clients: Record<string, Socket> = {};
 
 	afterInit(server: Server)

conf/nginx.conf

@@ -20,6 +20,6 @@ server {
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header X-Forwarded-Proto $scheme;
 
-        proxy_pass http://backend:3000/api;
+        proxy_pass http://api:3000/api;
     }
 }

docker-compose.yml

@@ -7,7 +7,7 @@ services:
     container_name: nginx
     env_file: .env
     depends_on:
-      - backend
+      - api
     ports:
       - 80:80
     volumes:
@@ -31,12 +31,10 @@ services:
     entrypoint: ["sh", "-c" , "npm install && npm run start:dev"]
 
 
-  backend:
+  api:
-    # image: node:latest
+    image: node:latest
-    build:
+    container_name: api
-      context : ./
+    working_dir: /app
-      dockerfile: ./dockerfiles/Dockerfile.backEnd
-    container_name: backend
     ports:
       - 3000:3000
     env_file: .env
@@ -44,11 +42,28 @@ services:
       - postgresql
     networks:
       - pongNetwork
-    # working_dir: /app
+    volumes:
-    # volumes:
+      - ./api:/app
-      # - ./backend:/app
+    entrypoint: ["sh", "-c" , "npm install && npm run start:dev"]
-    # entrypoint: ["sh", "-c" , "npm install && ls && ls dist && npm run build && npm run start"]
+
-    # entrypoint: ["/bin/sh", "-c" , "npm install && npm run start:dev "]
+  # backend:
+  #   # image: node:latest
+  #   build:
+  #     context : ./
+  #     dockerfile: ./dockerfiles/Dockerfile.backEnd
+  #   container_name: backend
+  #   ports:
+  #     - 3000:3000
+  #   env_file: .env
+  #   depends_on:
+  #     - postgresql
+  #   networks:
+  #     - pongNetwork
+  #   # working_dir: /app
+  #   # volumes:
+  #     # - ./backend:/app
+  #   # entrypoint: ["sh", "-c" , "npm install && ls && ls dist && npm run build && npm run start"]
+  #   # entrypoint: ["/bin/sh", "-c" , "npm install && npm run start:dev "]
 
 
   postgresql:

frontend/package-lock.json

@@ -2182,6 +2182,21 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
     "node_modules/@eslint/eslintrc/node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -2212,6 +2227,11 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/@eslint/js": {
       "version": "8.38.0",
       "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.38.0.tgz",
@@ -3434,6 +3454,95 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@testing-library/dom": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.2.0.tgz",
+      "integrity": "sha512-xTEnpUKiV/bMyEsE5bT4oYA0x0Z/colMtxzUY8bKyPXBNLn/e0V4ZjBZkEhms0xE4pv9QsPfSRu9AWS4y5wGvA==",
+      "peer": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^5.0.1",
+        "aria-query": "^5.0.0",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.5.0",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "peer": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "peer": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "peer": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "peer": true
+    },
+    "node_modules/@testing-library/dom/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "peer": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/dom/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "peer": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/@testing-library/jest-dom": {
       "version": "5.16.5",
       "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.5.tgz",
@@ -4662,13 +4771,13 @@
       }
     },
     "node_modules/ajv": {
-      "version": "6.12.6",
+      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^1.0.0",
-        "json-schema-traverse": "^0.4.1",
+        "require-from-string": "^2.0.2",
         "uri-js": "^4.2.2"
       },
       "funding": {
@@ -4692,34 +4801,6 @@
         }
       }
     },
-    "node_modules/ajv-formats/node_modules/ajv": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
-    "node_modules/ajv-formats/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
-    "node_modules/ajv-keywords": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
-      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
-      "peerDependencies": {
-        "ajv": "^6.9.1"
-      }
-    },
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@@ -5133,6 +5214,34 @@
         "webpack": ">=2"
       }
     },
+    "node_modules/babel-loader/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/babel-loader/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/babel-loader/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/babel-loader/node_modules/schema-utils": {
       "version": "2.7.1",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz",
@@ -6077,21 +6186,6 @@
         }
       }
     },
-    "node_modules/css-minimizer-webpack-plugin/node_modules/ajv": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/css-minimizer-webpack-plugin/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -6103,11 +6197,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/css-minimizer-webpack-plugin/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/css-minimizer-webpack-plugin/node_modules/schema-utils": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.1.tgz",
@@ -7457,21 +7546,6 @@
         "webpack": "^5.0.0"
       }
     },
-    "node_modules/eslint-webpack-plugin/node_modules/ajv": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/eslint-webpack-plugin/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -7504,11 +7578,6 @@
         "node": "^12.13.0 || ^14.15.0 || ^16.10.0 || >=17.0.0"
       }
     },
-    "node_modules/eslint-webpack-plugin/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/eslint-webpack-plugin/node_modules/schema-utils": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.1.tgz",
@@ -7541,6 +7610,21 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/eslint/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
     "node_modules/eslint/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -7635,6 +7719,11 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/eslint/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/eslint/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -8128,6 +8217,29 @@
         }
       }
     },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
     "node_modules/fork-ts-checker-webpack-plugin/node_modules/ansi-styles": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -8210,6 +8322,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/fork-ts-checker-webpack-plugin/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/fork-ts-checker-webpack-plugin/node_modules/schema-utils": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz",
@@ -11634,9 +11751,9 @@
       "integrity": "sha512-es94M3nTIfsEPisRafak+HDLfHXnKBhV3vU5eqPcS3flIWqcxJWgXHXiey3YrpaNsanY5ei1VoYEbOzijuq9BA=="
     },
     "node_modules/json-schema-traverse": {
-      "version": "0.4.1",
+      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
     },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
@@ -12033,21 +12150,6 @@
         "webpack": "^5.0.0"
       }
     },
-    "node_modules/mini-css-extract-plugin/node_modules/ajv": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/mini-css-extract-plugin/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -12059,11 +12161,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/mini-css-extract-plugin/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/mini-css-extract-plugin/node_modules/schema-utils": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.1.tgz",
@@ -15148,6 +15245,34 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/schema-utils/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/schema-utils/node_modules/ajv-keywords": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
+      "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
+      "peerDependencies": {
+        "ajv": "^6.9.1"
+      }
+    },
+    "node_modules/schema-utils/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+    },
     "node_modules/select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -16315,6 +16440,19 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "node_modules/typescript": {
+      "version": "4.9.5",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
+      "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=4.2.0"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -16642,21 +16780,6 @@
         "webpack": "^4.0.0 || ^5.0.0"
       }
     },
-    "node_modules/webpack-dev-middleware/node_modules/ajv": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/webpack-dev-middleware/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -16668,11 +16791,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/webpack-dev-middleware/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/webpack-dev-middleware/node_modules/schema-utils": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.1.tgz",
@@ -16749,21 +16867,6 @@
         }
       }
     },
-    "node_modules/webpack-dev-server/node_modules/ajv": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/webpack-dev-server/node_modules/ajv-keywords": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
@@ -16775,11 +16878,6 @@
         "ajv": "^8.8.2"
       }
     },
-    "node_modules/webpack-dev-server/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/webpack-dev-server/node_modules/schema-utils": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.1.tgz",
@@ -17072,21 +17170,6 @@
         "node": ">=10.0.0"
       }
     },
-    "node_modules/workbox-build/node_modules/ajv": {
-      "version": "8.12.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
-      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
-      "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "json-schema-traverse": "^1.0.0",
-        "require-from-string": "^2.0.2",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
-      }
-    },
     "node_modules/workbox-build/node_modules/fs-extra": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -17101,11 +17184,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/workbox-build/node_modules/json-schema-traverse": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
-    },
     "node_modules/workbox-build/node_modules/source-map": {
       "version": "0.8.0-beta.0",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.8.0-beta.0.tgz",

frontend/src/components/Header.js

@@ -2,13 +2,22 @@ import '../styles/App.css';
 import '../styles/old.css';
 import logo from '../logo.svg';
 
+
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+// import setupLogin from '../script/login42';
+// import React, { useEffect } from 'react';
+
+
+
 function Header()
 {
 	return (
 		<div className="header">
         	<a href="http://localhost" className="box menu"> <p className="userTxt">Menu</p> </a>
         	<div className="box headerName">
-        	    <a href="https://api.intra.42.fr/oauth/authorize?client_id=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Flogin42&response_type=code"
+        	    {/* <a href="https://api.intra.42.fr/oauth/authorize?client_id=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Flogin42&response_type=code" */}
+        	    <a href="https://api.intra.42.fr/oauth/authorize?client_id=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41&redirect_uri=http%3A%2F%2Flocalhost%3A80%2Fapi%2Fauth%2Flogin&response_type=code"
 					className="center pong">PONG</a>
         	</div>
         	<a href="http://localhost/pong" className="box username"> 

frontend/src/components/Home.js

@@ -1,5 +1,6 @@
 import '../styles/old.css';
 import { login } from '../script/login.js'
+import { login2 } from '../script/login.js'
  
 function Home()
 {
@@ -11,6 +12,9 @@ function Home()
          	    <input type="text" name="password" placeholder="password"></input>
          	    <button className="submit" onClick={login}>LOGIN</button>
          	</form>
+			<form id="loginForm" method="get" name="login2" action="http://localhost/api/profile" className ="loginForm">
+				<button className="submit" onClick={login2}>test button</button>
+			</form>
 		 	{/* <button></button> */}
     	</div>
 	);

frontend/src/components/Login42.js

@@ -1,15 +1,18 @@
 // import GoogleLogin from 'react-google-login';
-import { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 // import setupLogin from '../script/login42';
 // import React, { useEffect } from 'react';
 
 function Login42()
 {
+	const [token, setToken] = useState(null);
+	const [userId, setUserId] = useState(null);
+	const [userName, setUserName] = useState(null);
+
 	useEffect(() => {
 		console.log("you said yes to connect with 42");
 		const url = new URL(window.location.href);
-		// console.log(`url is= ${url}`);
 		const code = url.searchParams.get('code');
 		console.log(`code is= ${code}`);
 
@@ -20,11 +23,48 @@ function Login42()
 			code: code,
 			redirect_uri: 'http://localhost:8080/login42',
 		  };
-		
+
 		axios.post('https://api.intra.42.fr/oauth/token', data)
 		.then(response => {
     		// handle success response
     		console.log(response);
+			const token = response.data.access_token;
+			setToken(token);
+			console.log(`token= ${token}`);
+			  axios.get('https://api.intra.42.fr/oauth/token/info', {
+				headers: {
+				  Authorization: `Bearer ${token}`
+				}
+			  })
+			  .then(response => {
+				console.log(response)
+				const userId = response.data.resource_owner_id;
+				setUserId(userId);
+				console.log(userId);
+				// axios.get(`https://api.intra.42.fr/v2/users/${userId}`)
+				// axios.get(`https://api.intra.42.fr/v2/me`)
+				axios.get('https://api.intra.42.fr/v2/me', {
+					headers: {
+					  Authorization: `Bearer ${token}`
+					}
+				  })
+  				.then(response => {
+  				  console.log(response);
+				  const login = response.data.login;
+				  console.log(`login= ${login}`);
+				  setUserName(response.data.login);
+				  console.log(`username= ${userName}`);
+  				  // Gérer les données de réponse ici
+  				})
+  				.catch(error => {
+  				  console.error(error);
+  				  // Gérer les erreurs ici
+  				});
+			  })
+			  .catch(error => {
+				console.error(error);
+			  });
+
   		})
 		.catch(error => {
 			// handle error response
@@ -34,8 +74,7 @@ function Login42()
 
 	return (
 		<div>
-			<p>"COUCOU LOGIN$@ jeje" </p>
+        	<p>Le token d'accès est : {userName}</p>
-			{/* <script src="../script/login42.js"></script> */}
 		</div>
 	);
 }

frontend/src/components/canvas.js

@@ -27,9 +27,9 @@ export function drawCanvas() {
 	const scale = window.devicePixelRatio; 
 	canvas.width = canvas.offsetWidth;
 	canvas.height = canvas.offsetHeight;
-	
+
 	//paddle var
-	const paddleWidth = canvas.width * 0.01;
+	let paddleWidth = canvas.width * 0.01;
 	let paddleHeight = canvas.height * 0.25;
 	let paddleY = canvas.height / 2 - (paddleHeight / 2);
 	let paddleX = canvas.width / 40;
@@ -61,7 +61,7 @@ export function drawCanvas() {
 	
 	let lastUpdateTime = performance.now();
 
-	let maxAngle = 50;
+	const maxAngle = 50;
 	let maxBounceAngle = (maxAngle * Math.PI) / 180;
 
 //========================================================================================================

frontend/src/script/login.js

@@ -10,4 +10,11 @@ export const login = () => {
     // alert("Le bouton a été cliqué !");
     var formulaire = document.getElementById("loginForm");
     formulaire.submit();
+  }
+
+  export const login2 = () => {
+	console.log('Hello from myFunction');
+    // alert("Le bouton a été cliqué !");
+    var formulaire = document.getElementById("loginForm");
+    formulaire.submit();
   }

frontend/src/script/login42.js

@@ -4,4 +4,88 @@
 // 	console.log('Hello from login42');
 // }
 
-// export default setupLogin;
+// export default setupLogin;
+
+function Login42()
+{
+	const [token, setToken] = useState(null);
+	const [userId, setUserId] = useState(null);
+	const [login, setLogin] = useState(null);
+
+	useEffect(() => {
+		console.log("you said yes to connect with 42");
+		const url = new URL(window.location.href);
+		const code = url.searchParams.get('code');
+		console.log(`code is= ${code}`);
+
+		const data = {
+			grant_type: 'authorization_code',
+			client_id: 'u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41',
+			client_secret: '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',
+			code: code,
+			redirect_uri: 'http://localhost:8080/login42',
+		  };
+
+		axios.post('https://api.intra.42.fr/oauth/token', data)
+		.then(response => {
+    		// handle success response
+    		console.log(response);
+			const token = response.data.access_token;
+			setToken(token);
+			console.log(`token= ${token}`);
+			  axios.get('https://api.intra.42.fr/oauth/token/info', {
+				headers: {
+				  Authorization: `Bearer ${token}`
+				}
+			  })
+			  .then(response => {
+				console.log(response)
+				const userId = response.data.resource_owner_id;
+				setUserId(userId);
+				console.log(userId);
+				// axios.get(`https://api.intra.42.fr/v2/users/${userId}`)
+				// axios.get(`https://api.intra.42.fr/v2/me`)
+				axios.get('https://api.intra.42.fr/v2/me', {
+					headers: {
+					  Authorization: `Bearer ${token}`
+					}
+				  })
+  				.then(response => {
+  				  console.log(response);
+				  const login = response.data.login;
+				  setLogin(login);
+  				  // Gérer les données de réponse ici
+  				})
+  				.catch(error => {
+  				  console.error(error);
+  				  // Gérer les erreurs ici
+  				});
+			  })
+			  .catch(error => {
+				console.error(error);
+			  });
+
+  		})
+		.catch(error => {
+			// handle error response
+			console.error(error);
+		});
+	  }, []);
+
+	return (
+		<div className="header">
+        	<a href="http://localhost" className="box menu"> <p className="userTxt">Menu</p> </a>
+        	<div className="box headerName">
+        	    <a href="https://api.intra.42.fr/oauth/authorize?client_id=u-s4t2ud-6d29dfa49ba7146577ffd8bf595ae8d9e5aaa3e0a9615df18777171ebf836a41&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Flogin42&response_type=code"
+					className="center pong">PONG</a>
+        	</div>
+        	<a href="http://localhost/pong" className="box username"> 
+        	    <p className="userTxt">{login}</p> 
+        	    {/* <img className="pp center" src="../../public/logo192.png" alt="profile picture"> */}
+				<img src={logo} className="pp center" alt="logo" />
+        	</a>
+    	</div>
+	);
+}
+
+export default Login42;