Kinou/ft_transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

jsp

Browse Source
This commit is contained in:
kinou-p 2023-05-08 17:07:34 +02:00
parent f032e86a94
commit 38bc64aae8
14 changed files with 286 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
api/src/app.controller.ts
View File

@ -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;
}

154
frontend/package-lock.json generated
View File

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

5
frontend/package.json
View File

@ -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": {

2
frontend/public/index.html
View File

@ -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

11
frontend/src/AxiosInstance.js Normal file
View File

@ -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;

3
frontend/src/components/Header.js
View File

@ -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"
className="center pong">PONG</a>
<a className="center pong">PONG</a>
</div>
<a href="http://localhost/pong" className="box username">
<p className="userTxt">Play</p>

95
frontend/src/components/Home.js
View File

@ -1,22 +1,93 @@
import '../styles/old.css';
import { login } from '../script/login.js'
import { login2 } from '../script/login.js'
import '../styles/field.css';
// 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">
<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">
<div className="notClicked">
<button onClick={handleButtonClick} className="playButton" >LOGIN</button>
{/* <div id="loginForm" method="get" name="login2" action="http://localhost/api/profile" className ="loginForm"> */}
<div 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>
);
}

22
frontend/src/components/SetAuthCookie.js Normal file
View File

@ -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;

2
frontend/src/index.js
View File

@ -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>
</>

23
frontend/src/script/axiosApi.js Normal file
View File

@ -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;

6
frontend/src/script/login.js
View File

@ -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();
}

34
frontend/src/script/tokenSuccess.js Normal file
View File

@ -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();

40
frontend/src/styles/old.css
View File

@ -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;
} */
.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%;
}
.login {
}
.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 {