Merge pull request #600 from navi-infra/INFRA-3433

INFRA-3433 | Dhruv | fix login and redirect, add login loader

src/App.tsx

@@ -43,13 +43,13 @@ function App() {
             <p>Healthy</p>
           </Route>
           <Route path="/" exact>
-            {getAuthTeamRoute(isAuthenticated)}
+            {getAuthTeamRoute(isAuthenticated, userInfo.jti)}
           </Route>
           <Route path="/dashboard" exact>
-            {getAuthTeamRoute(isAuthenticated)}
+            {getAuthTeamRoute(isAuthenticated, userInfo.jti)}
           </Route>
           <Route path="/manifests" exact>
-            {getAuthTeamRoute(isAuthenticated)}
+            {getAuthTeamRoute(isAuthenticated, userInfo.jti)}
           </Route>
           <ProtectedRoute
             path="/manifests/create"
@@ -126,8 +126,8 @@ function App() {
 
 export default withCookies(App);
 
-export function getAuthTeamRoute(isAuthenticated) {
-  if (isAuthenticated) {
+export function getAuthTeamRoute(isAuthenticated: boolean, jsonWebTokenId: string) {
+  if (isAuthenticated && jsonWebTokenId) {
     return <Redirect to="/manifests" />;
   }
   return <Dashboard />;

src/components/Dashboard.tsx

@@ -1,15 +1,13 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { withCookies } from 'react-cookie';
-import { store } from '../store';
 import { Paper, Button, Avatar } from '@material-ui/core';
-import { setAuth } from '../slices/initialSlice';
-import { useDispatch } from 'react-redux';
+import Loader from './common/Loader';
 
 const Dashboard = () => {
-  const dispatch = useDispatch();
+  const [loginClicked, setLoginClicked] = React.useState(false);
   const handleLogin = () => {
+    setLoginClicked(true);
     window.location.href = '/login/okta';
-    dispatch(setAuth(true));
   };
 
   return (
@@ -23,31 +21,35 @@ const Dashboard = () => {
         backgroundColor: 'lightgrey',
       }}
     >
-      <Paper style={{ backgroundColor: 'grey', width: '30vw', height: '25vh' }} elevation={2}>
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-around',
-            flexDirection: 'column',
-            height: 'inherit',
-          }}
-        >
-          <Avatar
-            src="/public/medici-logo.png"
-            style={{ height: '8vh', width: '6vw' }}
-            variant="square"
-          />
-          <Button
-            variant="contained"
-            size="large"
-            style={{ backgroundColor: '#F8F8F8' }}
-            onClick={handleLogin}
+      {loginClicked ? (
+        <Loader />
+      ) : (
+        <Paper style={{ backgroundColor: 'grey', width: '30vw', height: '25vh' }} elevation={2}>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'space-around',
+              flexDirection: 'column',
+              height: 'inherit',
+            }}
           >
-            Login via Okta
-          </Button>
-        </div>
-      </Paper>
+            <Avatar
+              src="/public/medici-logo.png"
+              style={{ height: '8vh', width: '6vw' }}
+              variant="square"
+            />
+            <Button
+              variant="contained"
+              size="large"
+              style={{ backgroundColor: '#F8F8F8' }}
+              onClick={handleLogin}
+            >
+              Login via Okta
+            </Button>
+          </div>
+        </Paper>
+      )}
     </div>
   );
 };

src/components/ProtectedRoute.tsx

@@ -1,8 +1,12 @@
 import { Redirect } from 'react-router';
 import { Route } from 'react-router-dom';
 import React from 'react';
+import { useSelector } from 'react-redux';
+import { RootState } from '@src/store';
 
 const ProtectedRoute = ({ loginRedirect, ...props }) => {
+  const { isAuthenticated } = useSelector((state: RootState) => state.initial);
+  if (!isAuthenticated) return <Redirect to={'/dashboard'} />;
   return loginRedirect === '' ? <Route {...props} /> : <Redirect to={loginRedirect} />;
 };
 

src/components/common/Loader.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { CircularProgress } from '@material-ui/core';
+import './common.module.css';
+
+const Loader = () => {
+  return (
+    <div className="loaderContainer">
+      <CircularProgress className="loader" size={100} />
+    </div>
+  );
+};
+
+export default Loader;

src/components/common/common.module.css

@@ -0,0 +1,7 @@
+.loaderContainer {
+  position: fixed;
+  z-index: 1000000;
+  .loader {
+    position: absolute;
+  }
+}

src/components/layout/Header.tsx

@@ -13,7 +13,7 @@ import { RootState } from '@store/index';
 import { withCookies } from 'react-cookie';
 import { LinearProgress } from '@material-ui/core';
 import { httpClient } from '@src/helper/api-client';
-import { setAuth } from '@slices/initialSlice';
+import { resetState, setAuth } from '@slices/initialSlice';
 import { useDispatch, useSelector } from 'react-redux';
 import ExportManifest from '@components/manifest/ExportManifest';
 import PortalMenu from './PortalMenu';
@@ -54,15 +54,13 @@ function MenuAppBar(props: any) {
   };
   const handleLogin = () => {
     window.location.href = '/login/okta';
-    dispatch(setAuth(true));
   };
   const handleLogout = async () => {
     httpClient('/api/logout', {
       method: 'POST',
     }).then(response => {
       if (response.ok) {
-        dispatch(setAuth(false));
-        window.location.href = '/';
+        dispatch(resetState());
       }
     });
   };

src/slices/initialSlice.tsx

@@ -3,7 +3,7 @@ import { Manifest } from '@src/types/Manifest';
 import { UserInfo } from '@src/types/Types';
 
 type initialStateType = {
-  isAuthenticated: Boolean;
+  isAuthenticated: boolean;
   userInfo: UserInfo;
   loginRedirect: string;
   manifestLimits: {};
@@ -46,6 +46,9 @@ const initialSlice = createSlice({
     setTeamList(state, action: PayloadAction<initialStateType['teamList']>) {
       state.teamList = action.payload;
     },
+    resetState(state) {
+      Object.assign(state, initialState);
+    },
   },
 });
 
@@ -57,6 +60,7 @@ export const {
   setPreChangeManifest,
   setUserTeams,
   setTeamList,
+  resetState,
 } = initialSlice.actions;
 
 export default initialSlice.reducer;