Navigate to the profile/account when the user cancel re-authen during the change pw process

src/components/Dashboard/AuthenticateModal.tsx

@@ -2,6 +2,7 @@ import { authenticate } from "apis/eduidAuthn";
 import NotificationModal from "components/Common/NotificationModal";
 import { useAppDispatch, useAppSelector } from "eduid-hooks";
 import { FormattedMessage } from "react-intl";
+import { useNavigate } from "react-router-dom";
 import authnSlice from "slices/Authn";
 import { clearNotifications } from "slices/Notifications";
 
@@ -10,6 +11,7 @@ export function AuthenticateModal() {
   const re_authenticate = useAppSelector((state) => state.authn.re_authenticate);
   const frontend_action = useAppSelector((state) => state.authn.frontend_action);
   const frontend_state = useAppSelector((state) => state.authn.frontend_state);
+  const navigate = useNavigate();
 
   async function handleAuthenticate() {
     dispatch(authnSlice.actions.setReAuthenticate(false));
@@ -21,6 +23,15 @@ export function AuthenticateModal() {
     }
   }
 
+  function handleCloseModal() {
+    // navigate to account when user cancel re-authentication
+    if (frontend_action === "changepwAuthn" && re_authenticate) {
+      navigate("profile/account/");
+    }
+    dispatch(authnSlice.actions.setAuthnFrontendReset());
+    dispatch(authnSlice.actions.setReAuthenticate(false));
+  }
+
   return (
     <NotificationModal
       id="security-confirm-modal"
@@ -32,10 +43,7 @@ export function AuthenticateModal() {
         />
       }
       showModal={re_authenticate}
-      closeModal={() => {
-        dispatch(authnSlice.actions.setAuthnFrontendReset());
-        dispatch(authnSlice.actions.setReAuthenticate(false));
-      }}
+      closeModal={handleCloseModal}
       acceptModal={handleAuthenticate}
       acceptButtonText={<FormattedMessage defaultMessage="Continue" description="continue button" />}
     />

src/components/Dashboard/ChangePassword.tsx

@@ -38,6 +38,7 @@ export function ChangePassword() {
   const dispatch = useAppDispatch();
   const intl = useIntl();
   const suggested = useAppSelector((state) => state.chpass.suggested_password);
+  const re_authenticate = useAppSelector((state) => state.authn.re_authenticate);
   const [renderSuggested, setRenderSuggested] = useState(true); // toggle display of custom or suggested password forms
   const navigate = useNavigate();
   let isMounted = true;

src/components/Dashboard/ChangePasswordDisplay.tsx

@@ -11,6 +11,7 @@ function ChangePasswordDisplay() {
   async function handleSuggestedPassword() {
     const response = await dispatch(fetchSuggestedPassword());
     if (fetchSuggestedPassword.fulfilled.match(response)) {
+      console.log("response", response);
       navigate("/profile/chpass");
     }
   }