Terms Of Use Refactor CRASM-3304

frontend/src/components/Dashboard/PageSection.tsx

@@ -1,17 +1,55 @@
-import React from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { Box, Grid } from '@mui/material';
 import { useAuthContext } from 'context';
 import useFirstLoginPopup from 'hooks/useFirstLoginPopup';
 import InfoLabel from 'components/Dashboard/InfoLabel';
 import FirstLoginPopup from 'components/Dialog/FirstLoginPopup';
 import infoIconContent from 'pages/VulnerabilityScanDash/infoIconContent.json';
+import { useLocation, useHistory } from 'react-router-dom';
 
 const tooltipContentJson = infoIconContent.infoIconContent;
 
 const PageSection = ({ children }: { children: React.ReactNode }) => {
   const { user, apiPost, apiGet, setUser } = useAuthContext();
   const { show: showFirstLoginPopup, close: handleCloseFirstLoginPopup } =
     useFirstLoginPopup(user ?? null, apiPost, apiGet, setUser);
+
+  const location = useLocation();
+  const history = useHistory();
+
+  const [showPopup, setShowPopup] = useState<boolean>(
+    Boolean(showFirstLoginPopup) ||
+      Boolean(
+        location.state &&
+          (location.state as { showFirstLoginPopup?: boolean })
+            .showFirstLoginPopup === true
+      )
+  );
+  const clearedFlag = useRef(false);
+
+  useEffect(() => {
+    if (showFirstLoginPopup) setShowPopup(true);
+  }, [showFirstLoginPopup]);
+
+  useEffect(() => {
+    if (
+      (location.state as { showFirstLoginPopup?: boolean })
+        ?.showFirstLoginPopup &&
+      !clearedFlag.current
+    ) {
+      history.replace({
+        ...location,
+        state: { ...(location.state || {}), showFirstLoginPopup: false }
+      });
+      clearedFlag.current = true;
+    }
+  }, [location, history]);
+
+  const handleClose = () => {
+    setShowPopup(false);
+    handleCloseFirstLoginPopup();
+  };
+
   return (
     <Box
       sx={{
@@ -33,8 +71,8 @@ const PageSection = ({ children }: { children: React.ReactNode }) => {
         </Grid>
       </Grid>
       <FirstLoginPopup
-        showFirstLoginPopup={showFirstLoginPopup}
-        handleCloseFirstLoginPopup={handleCloseFirstLoginPopup}
+        showFirstLoginPopup={showPopup}
+        handleCloseFirstLoginPopup={handleClose}
       />
       {children}
     </Box>

frontend/src/components/Gates/AppGate.tsx

@@ -4,6 +4,8 @@ import { BoxProps } from '@mui/material';
 import { useAuthContext } from 'context';
 import { useCheckUserState } from 'hooks/useCheckUserState';
 import { useMaintenanceNotifications } from '@/hooks/useMaintenanceNotifications';
+import { useLocation } from 'react-router-dom';
+import { TermsOfUse } from 'pages/TermsOfUse/TermsOfUse';
 
 // Shared components
 import { LoginBlockedDialog } from 'components/LoginBlockedDialog';
@@ -23,6 +25,11 @@ export interface WidgetProps extends BoxProps {
 
 const AppGate: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const { user, apiGet, userMustSign, logout, isLoggingOut } = useAuthContext();
+  const location = useLocation();
+
+  if (location.pathname === '/terms') {
+    return <TermsOfUse />;
+  }
 
   const { isUpdateStateFormOpen, setIsUpdateStateFormOpen } = useCheckUserState(
     user,

frontend/src/components/Routes/Routes.tsx

@@ -33,7 +33,6 @@ export const Routes: React.FC = () => {
       />
       <Route exact path="/login-gov-callback" component={LoginGovCallback} />
       <Route exact path="/okta-callback" component={OktaCallback} />
-      <Route exact path="/terms" component={TermsOfUse} />
       <RouteGuard
         exact
         path="/inventory"

frontend/src/components/index.ts

@@ -6,7 +6,6 @@ export * from './Table';
 export * from './Paginator';
 export * from './ColumnFilter';
 export * from './SelectFilter';
-export * from './AuthForm';
 export * from './FileInput';
 export * from './ImportExport';
 export * from './Routes/RouteGuard';