Merge pull request #13 from DISIC/dev

Dev
DISIC · Mar 25, 2024 · 0b411ac · 0b411ac
2 parents 9c5fe7a + a306054
commit 0b411ac
Show file tree

Hide file tree

Showing 8 changed files with 268 additions and 75 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,11 +23,14 @@
     "@mui/icons-material": "^5.14.11",
     "@mui/material": "^5.14.11",
     "@reduxjs/toolkit": "^1.9.5",
+    "@types/jsonwebtoken": "^9.0.6",
+    "@types/jwt-decode": "^3.1.0",
     "@types/react-datepicker": "^4.11.2",
     "@types/react-mic": "^12.4.3",
     "axios": "^1.4.0",
     "dotenv": "^16.0.3",
     "env-cmd": "^10.1.0",
+    "jsonwebtoken": "^9.0.2",
     "jwt-decode": "^3.1.2",
     "react": "^18.2.0",
     "react-datepicker": "^4.14.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -26,6 +26,7 @@ import LogoutCallback from './pages/login/LogoutCallback';
 import Error from './pages/Error/Error';
 import MuiDsfrThemeProvider from '@codegouvfr/react-dsfr/mui';
 import PlanDuSite from './pages/PlanDuSite/PlanDuSite';
+import jwtDecode from 'jwt-decode';
 
 type errorObj = {
   message: string;
@@ -35,6 +36,10 @@ type errorObj = {
   };
 };
 
+interface JwtPayload {
+  exp: number;
+}
+
 function App() {
   const [roomName, setRoomName] = useState('');
   const [jwt, setJwt] = useState('');
@@ -88,21 +93,49 @@ function App() {
       });
   };
 
-  useEffect(() => {
-    if (localStorage.getItem('auth') == 'true') {
-      setAuthenticated(true);
-    }
-    if (localStorage.getItem('auth') == 'false') {
+  // const { exp } = jwtDecode(
+  //   'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyLCJleHAiOjQwMDAwMDAwMDB9.MtC2hJ9IZD0vpaW1algbUCDvd6HLXtJ6ayv_jqZfQY'
+  // ) as JwtPayload;
+  // console.log(exp);
+
+  const verifyAccessToken = () => {
+    console.log('tatatattaat');
+    if (
+      localStorage.getItem('auth') &&
+      localStorage.getItem('auth') !== 'false'
+    ) {
+      const { exp } = jwtDecode(
+        localStorage.getItem('auth') as string
+      ) as JwtPayload;
+      if (Date.now() <= exp * 1000) {
+        setAuthenticated(true);
+      } else {
+        api
+          .get('authentication/refreshToken')
+          .then(res => {
+            return localStorage.setItem('auth', res.data.accessToken);
+          })
+          .catch(err => {
+            localStorage.setItem('auth', 'false');
+            return setAuthenticated(false);
+          });
+      }
+    } else {
       setAuthenticated(false);
     }
+  };
+
+  useEffect(() => {
+    verifyAccessToken();
+    setInterval(verifyAccessToken, 1000 * 3600);
   }, []);
 
   useEffect(() => {
     api
       .get('/stats/homePage')
       .then(res => {
         if (!res.data.authenticated) {
-          setAuthenticated(false);
+          // setAuthenticated(false);
         }
         setConferenceNumber(res.data.conf);
         setparticipantsNumber(res.data.part);

diff --git a/src/axios/axios.ts b/src/axios/axios.ts
@@ -1,8 +1,11 @@
-import axios from "axios";
-
+import axios from 'axios';
 
 const api = axios.create({
-    baseURL: import.meta.env.VITE_BASE_URL
-})
+  baseURL: import.meta.env.VITE_BASE_URL,
+});
+
+api.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem(
+  'auth'
+)}`;
 
-export default api;
+export default api;
diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -35,40 +35,6 @@ function HeaderComponent({
         window.location.href = res.url;
       }
     });
-    // api
-    //   .get('/authentication/logout')
-    //   .then(res => {
-    //     if (res.data.error) {
-    //       localStorage.setItem('auth', 'false');
-    //       setAuthenticated(false);
-    //       navigate('/');
-    //     } else {
-    //       open(res.data, '_self');
-    //     }
-    //   })
-    //   .catch(error => {
-    //     if (error.response) {
-    //       setMsg(
-    //         <Badge noIcon severity="error">
-    //           une erreur est survenue lors de la déconnexion
-    //         </Badge>
-    //       );
-    //     } else {
-    //       if (error.request) {
-    //         setError({
-    //           message: 'une erreur est survenue lors de la déconnexion',
-    //           error: { status: '', stack: '' },
-    //         });
-    //         navigate('/error');
-    //       } else {
-    //         setError({
-    //           message: 'une erreur est survenue lors de la déconnexion',
-    //           error: { status: '', stack: '' },
-    //         });
-    //         navigate('/error');
-    //       }
-    //     }
-    //   });
   };
   return (
     <div className={styles.parent}>

diff --git a/src/pages/home/AuthModal.tsx b/src/pages/home/AuthModal.tsx
@@ -56,7 +56,8 @@ export default function AuthModal(props: AuthModalProps) {
 
   const navigate = useNavigate();
 
-  function handle() {
+  function handle(e: any) {
+    e.preventDefault();
     if (!props.roomName) {
       const room = generateRoomName();
       props.setRoomName(room);
@@ -118,9 +119,14 @@ export default function AuthModal(props: AuthModalProps) {
   }, []);
 
   const agentConnect = (room: string) => {
-    fetch(`${import.meta.env.VITE_BASE_URL}/authentication/login_authorize?room=${room}`, {
-      redirect: 'manual',
-    }).then(res => {
+    fetch(
+      `${
+        import.meta.env.VITE_BASE_URL
+      }/authentication/login_authorize?room=${room}`,
+      {
+        redirect: 'manual',
+      }
+    ).then(res => {
       if (res.type === 'opaqueredirect') {
         window.location.href = res.url;
       } else {
@@ -222,7 +228,12 @@ export default function AuthModal(props: AuthModalProps) {
         ) : null}
       </modal.Component>
       <div className={styles.buttons}>
-        <Button onClick={handle} className={styles.button}>
+        <Button
+          onClick={handle}
+          className={styles.button}
+          disabled={!roomNameConstraintOk(props.roomName)}
+          type="submit"
+        >
           Rejoindre ou créer
         </Button>
         <br />

diff --git a/src/pages/home/HomeForm.tsx b/src/pages/home/HomeForm.tsx
@@ -190,7 +190,8 @@ function HomeForm(props: AuthModalProps) {
           />
           <Button
             className={styles.plusButton}
-            onClick={() => {
+            onClick={e => {
+              e.preventDefault();
               verifyAndSetVAlue(generateRoomName());
             }}
           >
@@ -271,4 +272,4 @@ function generateRoomName() {
     Math.floor(Math.random() * 10) +
     Math.floor(Math.random() * 10)
   );
-}
+}
diff --git a/src/pages/login/LoginCallback.tsx b/src/pages/login/LoginCallback.tsx
@@ -26,14 +26,14 @@ export default function LoginCallback({
     }
     api
       .get(
-        `/authentication/login_callback?code=${urlParams.get('code')}&state=${urlParams.get(
-          'state'
-        )}`
+        `/authentication/login_callback?code=${urlParams.get(
+          'code'
+        )}&state=${urlParams.get('state')}`
       )
       .then(res => {
         if (res.data.roomName && res.data.jwt) {
           navigate(`/${res.data.roomName}?jwt=${res.data.jwt}`);
-          localStorage.setItem('auth', 'true');
+          localStorage.setItem('auth', res.data.accessToken);
           setAuthenticated(true);
         } else {
           navigate(`/`);