jsp

api/src/app.controller.ts

@@ -1,4 +1,4 @@
-import { Controller, Request, Req, Get, Post, UseGuards } from '@nestjs/common';
+import { Controller, Request, Req, Get, Post, UseGuards, Redirect } from '@nestjs/common';
 
 import { JwtAuthGuard } from './auth/jwt-auth.guard';
 import { AuthGuard } from '@nestjs/passport';
@@ -19,6 +19,7 @@ export class AppController {
 // 	return this.authService.login(user);
 //   }
 
+  @Redirect('http://localhost/token', 302)
   @Get('auth/login')
 	async login2(@Req() request: Request) {
 		const url = request.url;
@@ -26,12 +27,20 @@ export class AppController {
 		console.log(`url = ${url}`);
 		// const user = this.loginClass.Login42(url);
 		const user = this.loginClass.Login42(url);
-	  return this.authService.login(user);
+		console.log("login42 done");
+		console.log(`user= ${user}`);
+		const data2 = this.authService.login(user);
+		const data = (await data2).access_token;
+		console.log(`dataaaa = ${data}`);
+		console.log("before return");
+		// return { data };
+		return { url: `http://localhost/token?data=${encodeURIComponent(JSON.stringify(data))}` };
 	}
 
   @UseGuards(JwtAuthGuard)
   @Get('profile')
   getProfile(@Request() req) {
+	console.log("in profile get")
     return req.user;
   }
 

frontend/package-lock.json

@@ -12,11 +12,13 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "axios": "^1.3.5",
+        "query-string": "^8.1.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.10.0",
         "react-scripts": "5.0.1",
         "socket.io-client": "^4.6.1",
+        "typescript": "^4.9.5",
         "web-vitals": "^2.1.4"
       }
     },
@@ -3454,95 +3456,6 @@
         "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",
@@ -4801,6 +4714,14 @@
         }
       }
     },
+    "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",
@@ -6483,6 +6404,14 @@
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
       "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
     },
+    "node_modules/decode-uri-component": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz",
+      "integrity": "sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ==",
+      "engines": {
+        "node": ">=14.16"
+      }
+    },
     "node_modules/dedent": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
@@ -8074,6 +8003,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/filter-obj": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-5.1.0.tgz",
+      "integrity": "sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng==",
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/finalhandler": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
@@ -14292,6 +14232,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/query-string": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/query-string/-/query-string-8.1.0.tgz",
+      "integrity": "sha512-BFQeWxJOZxZGix7y+SByG3F36dA0AbTy9o6pSmKFcFz7DAj0re9Frkty3saBn3nHo3D0oZJ/+rx3r8H8r8Jbpw==",
+      "dependencies": {
+        "decode-uri-component": "^0.4.1",
+        "filter-obj": "^5.1.0",
+        "split-on-first": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/querystringify": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@@ -15260,14 +15216,6 @@
         "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",
@@ -15654,6 +15602,17 @@
         "wbuf": "^1.7.3"
       }
     },
+    "node_modules/split-on-first": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-3.0.0.tgz",
+      "integrity": "sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -16444,7 +16403,6 @@
       "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"

frontend/package.json

@@ -2,16 +2,21 @@
   "name": "my-app",
   "version": "0.1.0",
   "private": true,
+  "compilerOptions": {
+    "topLevelAwait": true
+  },
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.3.5",
+    "query-string": "^8.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",
     "socket.io-client": "^4.6.1",
+    "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

frontend/public/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

frontend/src/AxiosInstance.js

@@ -0,0 +1,11 @@
+import axios from 'axios';
+
+const api = axios.create({
+  baseURL: 'https://localhost/api',
+  withCredentials: true,
+  headers: {
+    Authorization: 'Bearer My token here',
+  },
+});
+
+export default api;

frontend/src/components/Header.js

@@ -17,8 +17,7 @@ function 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%3A80%2Fapi%2Fauth%2Flogin&response_type=code"
+        	     <a className="center pong">PONG</a>
-					className="center pong">PONG</a>
         	</div>
         	<a href="http://localhost/pong" className="box username"> 
         	    <p className="userTxt">Play</p> 

frontend/src/components/Home.js

@@ -1,22 +1,93 @@
 import '../styles/old.css';
-import { login } from '../script/login.js'
+import '../styles/field.css';
-import { login2 } from '../script/login.js'
+
+// import { useNavigate } from "react-router-dom";
+import { useLocation } from 'react-router-dom';
+import api from '../script/axiosApi';
+// import { login } from '../script/login.js'
+// import { login2 } from '../script/login.js'
+// import axios from 'axios';
  
 function Home()
 {
+	// const login = async () => {
+	const login2 = () => {
+		console.log('Hello from myFunction');
+		api.get('/profile').then((response) => {
+			console.log(`response= ${response}`)
+		});
+		// alert("Le bouton a été cliqué !");
+		// var formulaire = document.getElementById("loginForm");
+		// formulaire.submit();
+	  }
+
+	  const location = useLocation();
+
+	const handleButtonClick = () => {
+		let path = "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"; 
+		window.location.replace(path);
+	};
+
 	return (
-		<div className ="login">
+		<div className="notClicked">
-         	<form id="loginForm" method="post" name="login" action="http://localhost/api/login" className ="loginForm">
+			<button onClick={handleButtonClick} className="playButton" >LOGIN</button>
-         	    <p className="loginHere">Login Here</p>
+	 		{/* <div id="loginForm" method="get" name="login2" action="http://localhost/api/profile" className ="loginForm"> */}
-         	    <input type="text" name="nickname" placeholder="login"></input>
+			<div className ="loginForm">
-         	    <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>
+    	</div>
+	// 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">
+	// 	console.log('simple login button clicked');
+
+	// 	const url = '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';
+	// 	// const response = await fetch(url);
+	// 	// console.log(`${response}`);
+	// 	try
+	// 	{
+    // 		const response = await axios.post(url);
+    // 		const token = response.data.token; // extract token from response
+    // 		localStorage.setItem('token', token); // store token in localStorage
+    // 		console.log(`token = ${token}`);
+	// 	}
+	// 	catch (error)
+	// 	{
+	// 		console.error(error);
+	// 	}
+	// };
+
+	// const login = async() => {
+	// 	console.log('simple login button clicked');
+
+	// 	const url = 'http://localhost/api/login';
+	// 	const response = await fetch(url);
+	// 	const data = await response.json(); // extract token from response
+	// 	localStorage.setItem('token', data.token); // store token in localStorage
+	// 	console.log(`token= ${data.token}`)
+	// }
+	
+	// localStorage.setItem('token', '${response}');
+	// alert("Le bouton a été cliqué !");
+	// var formulaire = document.getElementById("loginForm");
+	// formulaire.submit();
+
+
+		// <div className="loginForm">
+		// 	<button className="submit loginHere" onClick={login}>LOGIN</button>
+		// </div>
+		// className="center pong">PONG</a>
+
+		// <div className ="login">
+        //  	<form id="loginForm" method="post" name="login" action="http://localhost/api/login" className ="loginForm">
+        //  	    <p className="loginHere">Login Here</p>
+        //  	    <input type="text" name="nickname" placeholder="login"></input>
+        //  	    <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/SetAuthCookie.js

@@ -0,0 +1,22 @@
+import React, { useEffect } from 'react';
+import axios from 'axios';
+
+function MyComponent() {
+  useEffect(() => {
+    const api = axios.create({
+      baseURL: 'https://api.example.com',
+      withCredentials: true, // this is required to send cookies
+      headers: {
+        'X-Custom-Header': 'foobar', // you can also set other default headers
+      },
+    });
+
+    api.get('/some-endpoint').then((response) => {
+      console.log(response.data);
+    });
+  }, []);
+
+  return <div>My Component</div>;
+}
+
+export default MyComponent;

frontend/src/index.js

@@ -10,6 +10,7 @@ import Head from './components/Head';
 import Field from './components/Field';
 import PlayButton from './components/PlayButton';
 import reportWebVitals from './reportWebVitals';
+import SuccessToken from './script/tokenSuccess'
 import { BrowserRouter, Route, Routes} from 'react-router-dom'
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
@@ -23,6 +24,7 @@ root.render(
 			<Route exact path="/pong" element={<PlayButton />}/>
 			<Route exact path="/pong/play" element={<Field />}/>
 			<Route exact path="/login42" element={<Login42 />}/>
+			<Route exact path="/token" element={<SuccessToken />}/>
     	</Routes>
   	</BrowserRouter>
   </>

frontend/src/script/axiosApi.js

@@ -0,0 +1,23 @@
+// console.log(`toktoken= ${token}`)
+import axios from 'axios';
+
+// const token = localStorage.getItem('token');
+
+
+async function getToken() {
+	// your code to retrieve the token from localStorage or any other source
+	const token = localStorage.getItem('token');
+	return token;
+}
+
+console.log(`getToken = ${getToken()}`)
+
+const api = axios.create({
+  baseURL: 'http://localhost/api',
+  headers: {
+	  Authorization: `Bearer ${await getToken()}`,
+	},
+  withCredentials: true,
+});
+
+export default api;

frontend/src/script/login.js

@@ -12,9 +12,3 @@ export const login = () => {
     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/tokenSuccess.js

@@ -0,0 +1,34 @@
+import { useLocation } from 'react-router-dom';
+import queryString from 'query-string';
+
+function SuccessToken() {
+  const location = useLocation();
+  const { data } = queryString.parse(location.search);
+//   localStorage data.token;
+  console.log(`prout token= ${data}`)
+  localStorage.setItem('token', `${data}`);
+  console.log(`prout token2= ${localStorage.getItem('token')}`)
+//   window.location.replace("http://localhost/pong");
+  
+//   return (
+//     <div>
+//       <h2>Success!</h2>
+//       <p>Data: {data}</p>
+//     </div>
+//   );
+}
+
+export default SuccessToken;
+
+
+// // Store a value in localStorage
+// localStorage.setItem('key', 'value');
+
+// // Retrieve a value from localStorage
+// const value = localStorage.getItem('key');
+
+// // Remove a value from localStorage
+// localStorage.removeItem('key');
+
+// // Clear all values from localStorage
+// localStorage.clear();

frontend/src/styles/old.css

@@ -77,19 +77,47 @@ input{
 	text-decoration: none;
 }
 
-label{
+/* .loginButton {
-}
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	text-decoration: none;
+	background-color: black;
+	color: white;
+	border-radius: ;
+	padding: 10px 20px;
+	margin-left: 40vw;
+	margin-top: 40vh;
+	width: 20vw;
+	height: 10vh;
+	font-size: 5vh;
+} */
 
-.login {
+.loginButton {
-}
+	background-color: rgb(0, 0, 0);
+	border-radius: 5vh;
+	color: white;
+	display: block;
+	margin: auto;
+	margin-top: 30vh;
+	padding: 2vh 5vw;
+	height: 10vh;
+	width: 20vw;
+	font-size: 300%;
+  }
 
-.loginForm {
+/* .loginButton {
+	border-radius: 100vh;
+	max-height: 10vh;
+	background-color: black;
+	font-family: 'Rubik Iso';
+	font-size: 5vh;
 	align-items: center;
 	height: 50vh;
 	display: flex;
 	flex-direction: column;
 	justify-content: space-around;
-}
+} */
 
 
 .menu {