Rebased and fixed comments for PR#25

prasadtalasila · Apr 13, 2023 · 3c022d3 · 3c022d3
1 parent 4293b8f
commit 3c022d3
Show file tree

Hide file tree

Showing 51 changed files with 925 additions and 4,709 deletions.
diff --git a/client/__mocks__/styleMock.js b/client/__mocks__/styleMock.js
@@ -0,0 +1 @@
+module.exports = {};
diff --git a/client/config/.gitignore b/client/config/.gitignore
@@ -0,0 +1 @@
+secret_env.js
diff --git a/client/config/dev.js b/client/config/dev.js
@@ -3,4 +3,11 @@ window.env = {
   REACT_APP_URL_LIB: 'https://ingenioer.au.dk/',
   REACT_APP_URL_DT: 'https://jupyterlite.github.io/demo/repl/index.html',
   REACT_APP_URL_WORKBENCH: 'https://ece.au.dk/',
-};
+
+  REACT_APP_INIT_URL: 'http://localhost:4000/',
+  REACT_APP_REDIRECT_URL: 'http://localhost:4000/dashboard/',
+  REACT_APP_REQUESTED_SCOPES: 'read_user+profile+read_api+email+read_repository',
+
+  REACT_APP_GITLAB_OAUTH_TOKEN: 'https://gitlab.com/oauth/token',
+  REACT_APP_GITLAB_API_GRAPHQL: 'https://gitlab.com/api/graphql',
+};
diff --git a/client/config/prod.js b/client/config/prod.js
@@ -3,4 +3,11 @@ window.env = {
   REACT_APP_URL_LIB: 'https://ingenioer.au.dk/',
   REACT_APP_URL_DT: 'https://au.dk/',
   REACT_APP_URL_WORKBENCH: 'https://ece.au.dk/',
-};
+
+  REACT_APP_INIT_URL: 'http://localhost:4000/',
+  REACT_APP_REDIRECT_URL: 'http://localhost:4000/dashboard/',
+  REACT_APP_REQUESTED_SCOPES: 'read_user+profile+read_api+email+read_repository',
+
+  REACT_APP_GITLAB_OAUTH_TOKEN: 'https://gitlab.com/oauth/token',
+  REACT_APP_GITLAB_API_GRAPHQL: 'https://gitlab.com/api/graphql',
+};
diff --git a/client/env.d.ts b/client/env.d.ts
@@ -7,10 +7,19 @@ declare global {
       REACT_APP_URL_LIB: string;
       REACT_APP_URL_DT: string;
       REACT_APP_URL_WORKBENCH: string;
+
+      REACT_APP_CLIENT_ID: string;
+      REACT_APP_CLIENT_SECRET: string;
+      REACT_APP_INIT_URL: string;
+      REACT_APP_REDIRECT_URL: string;
+      REACT_APP_REQUESTED_SCOPES: string;
+
+      REACT_APP_GITLAB_OAUTH_TOKEN: string;
+      REACT_APP_GITLAB_API_GRAPHQL: string;
     }
   }
 
   interface Window {
     env: NodeJS.ProcessEnv;
   }
-}
+}
diff --git a/client/jest.config.json b/client/jest.config.json
@@ -29,5 +29,8 @@
   "setupFilesAfterEnv": [
     "<rootDir>/test/unitTests/config/test.env.js",
     "<rootDir>/test/unitTests/config/importJestDom.ts"
-  ]
+  ],
+  "moduleNameMapper": {
+    "\\.css$": "<rootDir>/__mocks__/styleMock.js"
+  }
 }
diff --git a/client/package.json b/client/package.json
@@ -32,11 +32,14 @@
     "singleQuote": true
   },
   "dependencies": {
+    "@apollo/client": "^3.7.10",
     "@emotion/react": "^11.10.0",
     "@emotion/styled": "^11.10.0",
     "@fontsource/roboto": "^4.5.8",
     "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.10.0",
+    "axios": "^1.3.4",
+    "graphql": "^16.6.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/client/public/.gitignore b/client/public/.gitignore
@@ -0,0 +1 @@
+secret_env.js
diff --git a/client/public/env.js b/client/public/env.js
@@ -1,6 +1,13 @@
 window.env = {
-  REACT_APP_ENVIRONMENT: 'test',
-  REACT_APP_URL_LIB: 'https://example.com/LIB',
-  REACT_APP_URL_DT: 'https://example.com/DT',
-  REACT_APP_URL_WORKBENCH: 'https://example.com/WORKBENCH',
-};
+  REACT_APP_ENVIRONMENT: 'development',
+  REACT_APP_URL_LIB: 'https://ingenioer.au.dk/',
+  REACT_APP_URL_DT: 'https://jupyterlite.github.io/demo/repl/index.html',
+  REACT_APP_URL_WORKBENCH: 'https://ece.au.dk/',
+
+  REACT_APP_INIT_URL: 'http://localhost:4000/',
+  REACT_APP_REDIRECT_URL: 'http://localhost:4000/dashboard/',
+  REACT_APP_REQUESTED_SCOPES: 'read_user+profile+read_api+email+read_repository',
+
+  REACT_APP_GITLAB_OAUTH_TOKEN: 'https://gitlab.com/oauth/token',
+  REACT_APP_GITLAB_API_GRAPHQL: 'https://gitlab.com/api/graphql',
+};
diff --git a/client/public/index.html b/client/public/index.html
@@ -15,6 +15,7 @@
   </head>
   <body>
     <script src="/env.js" type="text/javascript"></script>
+    <script src="/secret_env.js" type="text/javascript"></script>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
   </body>

diff --git a/client/src/components/PrivateRoute.tsx b/client/src/components/PrivateRoute.tsx
@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { Navigate } from 'react-router-dom';
+import { checkAccessTokenValidity } from '../util/authentication';
+
+
+interface PrivateRouteProps {
+    children: React.ReactNode;
+    waitForAuthCheck?: boolean;
+    delayAuthCheck?: number;
+  }
+
+  const PrivateRoute: React.FC<PrivateRouteProps> = ({
+    children,
+    waitForAuthCheck = false,
+    delayAuthCheck,
+  }) => {
+    const [isAuthenticated, setIsAuthenticated] = React.useState<boolean | null>(null);
+
+    React.useEffect(() => {
+      const checkAuthentication = async () => {
+        if (!waitForAuthCheck) {
+          const accessToken = localStorage.getItem('accessToken');
+          const authStatus = await checkAccessTokenValidity(accessToken);
+          setIsAuthenticated(authStatus);
+        }
+      };
+      checkAuthentication();
+    }, [waitForAuthCheck]);
+
+    React.useEffect(() => {
+      if (waitForAuthCheck && delayAuthCheck) {
+        const interval = setInterval(async () => {
+          const accessToken = localStorage.getItem('accessToken');
+          if (accessToken) {
+            const authStatus = await checkAccessTokenValidity(accessToken);
+            setIsAuthenticated(authStatus);
+          }
+        }, 1000);
+
+        const timeout = setTimeout(() => {
+          clearInterval(interval);
+          if (isAuthenticated === null) {
+            setIsAuthenticated(false);
+          }
+        }, delayAuthCheck * 1000);
+
+        return () => {
+          clearTimeout(timeout);
+          clearInterval(interval);
+        };
+      }
+      return undefined; // Add this line to fix the ESLint error
+    }, [waitForAuthCheck, delayAuthCheck, isAuthenticated]);
+
+    if (waitForAuthCheck && isAuthenticated === null) {
+      return <>{children}</>;
+    }
+
+    if (isAuthenticated === null) {
+      return <div>Loading...</div>;
+    }
+
+    if (isAuthenticated) {
+      return <>{children}</>;
+    }
+
+    return <Navigate to="/" replace />;
+  };
+
+  export default PrivateRoute;
diff --git a/client/src/css/style.css b/client/src/css/style.css
@@ -0,0 +1,17 @@
+.gitlabButton {
+    display: inline-block;
+    padding: 10px 20px;
+    background-color: #fc6d27;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+    text-decoration: none;
+  }
+
+  .gitlabLogo {
+    height: 20px;
+    margin-right: 10px;
+  }
diff --git a/client/src/index.tsx b/client/src/index.tsx
@@ -12,38 +12,68 @@ import DTHistory from './route/history/History';
 import SignIn from './route/auth/Signin';
 import Account from './route/auth/Account';
 
+import PrivateRoute from '../src/components/PrivateRoute';
+
 const router = createBrowserRouter([
   {
     path: '/',
     element: <SignIn />,
   },
   {
     path: 'dashboard',
-    element: <Dashboard />,
+    element: (
+      <PrivateRoute waitForAuthCheck={true} delayAuthCheck={10}>
+        <Dashboard />
+      </PrivateRoute>
+    ),
   },
   {
     path: 'library',
-    element: <Library />,
+    element: (
+      <PrivateRoute>
+        <Library />
+      </PrivateRoute>
+    ),
   },
   {
     path: 'digitaltwins',
-    element: <DigitalTwins />,
+    element: (
+      <PrivateRoute>
+        <DigitalTwins />
+      </PrivateRoute>
+    ),
   },
   {
     path: 'sanalysis',
-    element: <ScenarioAnalysis />,
+    element: (
+      <PrivateRoute>
+        <ScenarioAnalysis />
+      </PrivateRoute>
+    ),
   },
   {
     path: 'history',
-    element: <DTHistory />,
+    element: (
+      <PrivateRoute>
+        <DTHistory />
+      </PrivateRoute>
+    ),
   },
   {
     path: 'account',
-    element: <Account />,
+    element: (
+      <PrivateRoute>
+        <Account />
+      </PrivateRoute>
+    ),
   },
   {
     path: 'workbench',
-    element: <WorkBench />,
+    element: (
+      <PrivateRoute>
+        <WorkBench />
+      </PrivateRoute>
+    ),
   },
 ]);
 
@@ -56,4 +86,4 @@ root.render(
       <RouterProvider router={router} />
     </AppProvider>
   </React.StrictMode>
-);
+);
diff --git a/client/src/page/MenuToolbar.tsx b/client/src/page/MenuToolbar.tsx
@@ -10,6 +10,7 @@ import { deepPurple } from '@mui/material/colors';
 import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';
 import IconButton from '@mui/material/IconButton';
 import Box from '@mui/material/Box';
+import { logoutClearLocalStorage } from '../util/utility';
 
 interface AppBarProps extends MuiAppBarProps {
   open?: boolean;
@@ -101,8 +102,8 @@ function MenuToolbar({
             >
               Account
             </MenuItem>
-            <MenuItem component={Link} to="/" onClick={handleCloseUserMenu}>
-              Logout
+            <MenuItem component={Link} to="/" onClick={() => {handleCloseUserMenu(); logoutClearLocalStorage();}}>
+                Logout
             </MenuItem>
           </Menu>
         </Box>