Merge branch 'zhoufang/dev/412' into 'dev'

#412 Updated redirect logic

See merge request !455

src/main/www/src/App.js

@@ -16,13 +16,13 @@ import {
   getCurrentMode,
   LOGIN_FROM_KEY,
   MODE_REACT_ONLY,
+  ORIGINAL_PATH_KEY,
   ROUTE_SIGN_IN,
 } from './Constants/Constants';
 import PortalContext from './Context/PortalContext';
 import GlobalContext from './Context/GlobalContext';
 import Loading from './components/UIComponents/Loading/Loading';
 import { isProd } from './Utils/formFunctionHelpers';
-import PortalLogin from './components/Portal/Login/PortalLogin';
 import TopSlideMsg from './components/UIComponents/Notifications/TopSlideMsg';
 
 const theme = createMuiTheme({
@@ -158,7 +158,7 @@ const App = () => {
             <Switch>
               <Route exact path="/">
                 {localStorage.getItem(LOGIN_FROM_KEY) === 'Portal' ? (
-                  <Redirect to="/portal" />
+                  <Redirect to={sessionStorage.getItem(ORIGINAL_PATH_KEY) || '/portal'} />
                 ) : (
                   <Redirect to="/application" />
                 )}
@@ -184,22 +184,12 @@ const App = () => {
                 </AppTemplate>
               </Route>
 
-              <Route path="/portal/login">
-                {/* Only show Portal when the user has a valid relation under his/her org */}
-                {currentUser?.relation?.length > 0 && <Redirect to="/portal" />}
-                <PortalLogin isFetchingUser={isFetchingUser} setIsFetchingUser={setIsFetchingUser} />
-              </Route>
-
               <Route path="/portal">
-                {currentUser?.relation?.length ? (
-                  <PortalContext.Provider value={PortalContextValue}>
-                    <BrowserRouter hashType="noslash">
-                      <Portal />
-                    </BrowserRouter>
-                  </PortalContext.Provider>
-                ) : (
-                  <Redirect to="/portal/login" />
-                )}
+                <PortalContext.Provider value={PortalContextValue}>
+                  <BrowserRouter hashType="noslash">
+                    <Portal isFetchingUser={isFetchingUser} setIsFetchingUser={setIsFetchingUser} />
+                  </BrowserRouter>
+                </PortalContext.Provider>
               </Route>
 
               {/* Redirect user to 404 page for all the unknown pathnames/urls */}

src/main/www/src/Constants/Constants.js

@@ -21,6 +21,7 @@ export const api_prefix = () => {
 };
 
 export const LOGIN_FROM_KEY = 'logInFrom';
+export const ORIGINAL_PATH_KEY = 'originalPath';
 export const API_PREFIX_FORM = api_prefix() + '/form';
 export const API_FORM_PARAM = '?sort=dateCreated&order=desc';
 

src/main/www/src/components/Portal/ContactManagement/ContactManagement.tsx

@@ -34,6 +34,7 @@ import { fetchWrapper, fetchWrapperPagination, isProd } from '../../../Utils/for
 import GlobalContext from '../../../Context/GlobalContext';
 import { checkPermission } from '../../../Utils/portalFunctionHelpers';
 import HelpIcon from '@material-ui/icons/Help';
+import NoAccess from '../../ErrorPages/NoAccess';
 
 const isReactOnlyMode = getCurrentMode() === MODE_REACT_ONLY;
 
@@ -492,7 +493,9 @@ export default function ContactManagement() {
     saveContacts(contactData);
   }, [contactData, allRelations]);
 
-  return (
+  return !checkPermission(PERMISSIONS_BASED_ON_ROLES.accessContacts, currentUser?.relation) ? (
+    <NoAccess />
+  ) : (
     <>
       <RecentActorsIcon className={classes.headerIcon} />
       <Typography className={classes.pageTitle} variant="h4" component="h1">

src/main/www/src/components/Portal/OrgProfile/OrgProfiles.tsx

 import { createStyles, makeStyles, Typography, Theme } from '@material-ui/core';
 import BusinessIcon from '@material-ui/icons/Business';
-import { brightOrange, iconGray } from '../../../Constants/Constants';
+import { brightOrange, iconGray, PERMISSIONS_BASED_ON_ROLES } from '../../../Constants/Constants';
+import GlobalContext from '../../../Context/GlobalContext';
+import { checkPermission } from '../../../Utils/portalFunctionHelpers';
 import OrgProfilesBasicInfo from './OrgProfilesBasicInfo';
 import OrgProfilesLinks from './OrgProfilesLinks';
+import { useContext } from 'react';
+import NoAccess from '../../ErrorPages/NoAccess';
 
 const useStyle = makeStyles((theme: Theme) =>
   createStyles({
@@ -19,8 +23,11 @@ const useStyle = makeStyles((theme: Theme) =>
 
 export default function OrgProfile() {
   const classes = useStyle();
+  const { currentUser } = useContext(GlobalContext);
 
-  return (
+  return !checkPermission(PERMISSIONS_BASED_ON_ROLES.accessOrgProfile, currentUser?.relation) ? (
+    <NoAccess />
+  ) : (
     <>
       <BusinessIcon className={classes.headerIcon} />
       <Typography variant="h4" component="h1" className={classes.pageHeader}>

src/main/www/src/components/Portal/Portal.tsx

@@ -4,16 +4,15 @@ import { Switch, Route, Redirect } from 'react-router-dom';
 import { CircularProgress, Theme } from '@material-ui/core';
 import { makeStyles, createStyles } from '@material-ui/core/styles';
 import LeftNavBar from './NavBar/LeftNavBar';
-import { LOGIN_FROM_KEY, mainContentBGColor, PERMISSIONS_BASED_ON_ROLES } from '../../Constants/Constants';
+import { LOGIN_FROM_KEY, mainContentBGColor, ORIGINAL_PATH_KEY } from '../../Constants/Constants';
 import Dashboard from './Dashboard/Dashboard';
 import AppTopBar from './NavBar/AppTopBar';
 import OrgProfile from './OrgProfile/OrgProfiles';
 import ContactManagement from './ContactManagement/ContactManagement';
 import { useEffect, useContext, useState } from 'react';
 import GlobalContext from '../../Context/GlobalContext';
-import { checkPermission } from '../../Utils/portalFunctionHelpers';
-import NoAccess from '../ErrorPages/NoAccess';
 import PortalFooter from './PortalFooter';
+import PortalLogin from './Login/PortalLogin';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -35,63 +34,94 @@ const useStyles = makeStyles((theme: Theme) =>
       },
     },
     loadingContainer: {
-      height: 'calc(100vh - 200px)',
+      backgroundColor: '#fff',
+      position: 'fixed',
+      top: 0,
+      bottom: 0,
+      left: 0,
+      right: 0,
       display: 'flex',
       justifyContent: 'center',
       alignItems: 'center',
     },
+    loginFooter: {
+      '& div, & div a': {
+        color: 'white',
+        textShadow: '1px 1px #000',
+      },
+    },
   })
 );
 
-export default function MainPortal() {
+const originalPath = window.location.pathname !== '/portal/login' ? window.location.pathname : '/portal/dashboard';
+
+export default function MainPortal({
+  isFetchingUser,
+  setIsFetchingUser,
+}: {
+  isFetchingUser: boolean;
+  setIsFetchingUser: () => void;
+}) {
   const classes = useStyles();
   const [mobileOpen, setMobileOpen] = useState(false);
   const { gotCSRF, currentUser } = useContext(GlobalContext);
-
+  const loggedIn = currentUser !== null;
   const handleDrawerToggle = () => {
     setMobileOpen(!mobileOpen);
   };
 
+  useEffect(() => {
+    !loggedIn
+      ? sessionStorage.setItem(ORIGINAL_PATH_KEY, originalPath)
+      : sessionStorage.setItem(ORIGINAL_PATH_KEY, '/portal');
+  }, [loggedIn]);
+
   useEffect(() => {
     localStorage.setItem(LOGIN_FROM_KEY, 'Form');
   }, []);
 
   return (
     <>
-      <AppTopBar handleDrawerToggle={handleDrawerToggle} />
-
-      <LeftNavBar mobileOpen={mobileOpen} handleDrawerToggle={handleDrawerToggle} />
-      <main className={classes.content}>
-        {gotCSRF ? (
-          <Switch>
-            <Route path="/portal/dashboard">
-              <Dashboard />
-            </Route>
-            <Route exact path="/portal/org-profile">
-              {checkPermission(PERMISSIONS_BASED_ON_ROLES.accessOrgProfile, currentUser?.relation) ? (
+      {currentUser && (
+        <>
+          <AppTopBar handleDrawerToggle={handleDrawerToggle} />
+          <LeftNavBar mobileOpen={mobileOpen} handleDrawerToggle={handleDrawerToggle} />
+        </>
+      )}
+      {/* When current user has not logged in, we need to show login page, so the main content part should be hidden */}
+      <main className={loggedIn ? classes.content : ''}>
+        {gotCSRF && !isFetchingUser ? (
+          <>
+            <Switch>
+              <Route path="/portal/login">
+                {loggedIn && <Redirect to={sessionStorage.getItem(ORIGINAL_PATH_KEY)} />}
+                <PortalLogin isFetchingUser={isFetchingUser} setIsFetchingUser={setIsFetchingUser} />
+              </Route>
+              <Route path="/portal/dashboard">
+                {!loggedIn && <Redirect to="/portal/login" />}
+                <Dashboard />
+              </Route>
+              <Route exact path="/portal/org-profile">
+                {!loggedIn && <Redirect to="/portal/login" />}
                 <OrgProfile />
-              ) : (
-                <NoAccess />
-              )}
-            </Route>
-            <Route exact path="/portal/contact-management">
-              {checkPermission(PERMISSIONS_BASED_ON_ROLES.accessContacts, currentUser?.relation) ? (
+              </Route>
+              <Route exact path="/portal/contact-management">
+                {!loggedIn && <Redirect to="/portal/login" />}
                 <ContactManagement />
-              ) : (
-                <NoAccess />
-              )}
-            </Route>
-            <Route path="/portal">
-              <Redirect to="/portal/dashboard" />
-            </Route>
-          </Switch>
+              </Route>
+              <Route path="/portal">
+                <Redirect to="/portal/dashboard" />
+              </Route>
+            </Switch>
+            <div className={classes.loginFooter}>
+              <PortalFooter />
+            </div>
+          </>
         ) : (
           <div className={classes.loadingContainer}>
             <CircularProgress />
           </div>
         )}
-
-        <PortalFooter />
       </main>
     </>
   );