Merge pull request #359 from contentstack/bugFix/cmg-117

fixed back button on login page

Author: RohitKini

ui/src/hooks/usePreventBackNavigation.tsx

@@ -1,24 +1,22 @@
 import { useEffect } from "react";
-import { useLocation, useNavigate } from "react-router";
+import { useNavigate } from "react-router-dom";
 
 const usePreventBackNavigation = (): void => {
-    const navigate = useNavigate();
-    const location = useLocation();
-  
-    useEffect(() => {
-      // push a dummy state to the history stack
-      window.history.pushState(null, "", window.location.href);
-  
-      const handlePopState = () => {
-        navigate(location.pathname, { replace: true });
-      };
-  
-      window.addEventListener("popstate", handlePopState);
-  
-      return () => {
-        window.removeEventListener("popstate", handlePopState);
-      };
-    }, [navigate, location]);
-  };
+  const navigate = useNavigate();
 
+  useEffect(() => {
+    const handleBackNavigation = (event: PopStateEvent) => {
+      event.preventDefault();
+      navigate(window.location.pathname, { replace: true });
+    };
+
+    window.history.pushState(null, "", window.location.href);
+
+    window.addEventListener("popstate", handleBackNavigation);
+
+    return () => {
+      window.removeEventListener("popstate", handleBackNavigation);
+    };
+  }, [navigate]);
+};
 export default usePreventBackNavigation;

ui/src/pages/Login/index.tsx

@@ -30,7 +30,7 @@ import { userSession, requestSMSToken } from '../../services/api/login.service';
 
 // Interface
 import { IProps, IStates, defaultStates, User, UserRes, LoginType } from './login.interface';
-import usePreventBackNavigation from '../../hooks/usePreventBackNavigation';
+
 
 //Components
 import AccountPage from '../../components/AccountPage';
@@ -42,7 +42,6 @@ import { RootState } from '../../store';
 const Login: FC<IProps> = () => {
   const [data, setData] = useState<LoginType>({});
 
-  usePreventBackNavigation();
 
   // ************* Fetch Login Data ************
   const fetchData = async () => {
@@ -70,7 +69,7 @@ const Login: FC<IProps> = () => {
   // ************* ALL States Here ************
   const [loginStates, setLoginStates] = useState<IStates>(defaultStates);
   const [isLoading, setIsLoading] = useState<boolean>(false)
-  const [isBlock, setIsBlock] = useState(false);
+  // const [isBlock, setIsBlock] = useState(false);
 
   const navigate = useNavigate();
   const location = useLocation();
@@ -197,13 +196,13 @@ const Login: FC<IProps> = () => {
     }
   };
 
-  useEffect(()=>{
-    if(region && loginStates?.tfa){
-      setIsBlock(true);
+  // useEffect(()=>{
+  //   if(region && loginStates?.tfa){
+  //     setIsBlock(true);
 
-    }
+  //   }
 
-  },[loginStates]);
+  // },[loginStates]);
 
   // Function for TFA validation
   const TFAValidation = (value: string): string | undefined => {
@@ -242,20 +241,43 @@ const Login: FC<IProps> = () => {
     };
   };
 
-  useEffect(()=>{ 
-    const handlePopState = (event: PopStateEvent) => {
-      event.preventDefault();
-      window.history.pushState(null, '', window.location.href);
+  // useEffect(()=>{ 
+  //   const handlePopState = (event: PopStateEvent) => {
+  //     event.preventDefault();
+  //     window.history.pushState(null, '', window.location.href);
+  //   };
+  //   if(isBlock){
+  //     window.history.pushState(null, '', window.location.href);
+  //   }
+  //   window.history.pushState(null, '', window.location.href);
+  //   window.addEventListener('popstate',handlePopState);
+  //   return () => {
+  //     window.removeEventListener('popstate', handlePopState);
+  //   };
+  // },[isBlock]);
+
+  useEffect(() => {
+
+    const redirectUrl = loginStates?.tfa && region ? `/login?region=${region}` : "/region-login"
+
+    const handleBackButton = () => {
+      // Redirect to an internal route
+      navigate(redirectUrl, { replace: true });
     };
-    if(isBlock){
-      window.history.pushState(null, '', window.location.href);
-    }
+
     window.history.pushState(null, '', window.location.href);
-    window.addEventListener('popstate',handlePopState);
+
+    const handlePopState = () => {
+      handleBackButton();
+    };
+
+    window.addEventListener('popstate', handlePopState);
+
     return () => {
       window.removeEventListener('popstate', handlePopState);
     };
-  },[isBlock]);
+  }, [navigate,  loginStates]);  
+      
 
 
   return (