+
+ {/*
+ // 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();
+
+
+ //
+ //
+ //
+ // className="center pong">PONG
+
+ //
+ //
+ //
+ // {/*
*/}
+ //
);
}
diff --git a/frontend/src/components/SetAuthCookie.js b/frontend/src/components/SetAuthCookie.js
new file mode 100644
index 00000000..0adb2ffb
--- /dev/null
+++ b/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
My Component
;
+}
+
+export default MyComponent;
\ No newline at end of file
diff --git a/frontend/src/index.js b/frontend/src/index.js
index a490fa2d..eb421915 100644
--- a/frontend/src/index.js
+++ b/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(
}/>
}/>
}/>
+
}/>
diff --git a/frontend/src/script/axiosApi.js b/frontend/src/script/axiosApi.js
new file mode 100644
index 00000000..a6a89a01
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/frontend/src/script/login.js b/frontend/src/script/login.js
index b37206e3..ee25d501 100644
--- a/frontend/src/script/login.js
+++ b/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();
- }
\ No newline at end of file
diff --git a/frontend/src/script/tokenSuccess.js b/frontend/src/script/tokenSuccess.js
new file mode 100644
index 00000000..d1a136b4
--- /dev/null
+++ b/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 (
+//
+//
Success!
+//
Data: {data}
+//
+// );
+}
+
+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();
\ No newline at end of file
diff --git a/frontend/src/styles/old.css b/frontend/src/styles/old.css
index 41525064..0b2651ee 100644
--- a/frontend/src/styles/old.css
+++ b/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 {