encoded the email portion of URL for profile/useremail (#1561)

Enterprise-CMCS · Dec 11, 2024 · 35fbd00 · 35fbd00
1 parent a0e7ccd
commit 35fbd00
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/services/ui-src/src/containers/PackageList.js b/services/ui-src/src/containers/PackageList.js
@@ -218,7 +218,7 @@ const PackageList = () => {
     ({ value, row }) => (
       <Link
         className="user-name"
-        to={`${ROUTES.PROFILE}/${row.original.submitterEmail}`}
+        to={`${ROUTES.PROFILE}/${window.btoa(row.original.submitterEmail)}`}
       >
         {value}
       </Link>

diff --git a/services/ui-src/src/containers/UserManagement.js b/services/ui-src/src/containers/UserManagement.js
@@ -166,7 +166,7 @@ const UserManagement = () => {
     ({ value, row }) => (
       <Link
         className="user-name"
-        to={`${ROUTES.PROFILE}/${row.original.email}`}
+        to={`${ROUTES.PROFILE}/${window.btoa(row.original.email)}`}
       >
         {value}
       </Link>

diff --git a/services/ui-src/src/containers/UserPage.js b/services/ui-src/src/containers/UserPage.js
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { useLocation, useParams } from "react-router-dom";
+import { useLocation, useParams, useHistory } from "react-router-dom";
 import { Button, Review } from "@cmsgov/design-system";
 
 import {
@@ -157,6 +157,7 @@ export const GroupDivisionDisplay = ({ profileData = {} }) => {
  * Component housing data belonging to a particular user
  */
 const UserPage = () => {
+  const history = useHistory();
   const { userProfile, setUserInfo, updatePhoneNumber, userRole, userStatus } =
     useAppContext();
   const location = useLocation();
@@ -174,10 +175,10 @@ const UserPage = () => {
   const [isEditingPhone, setIsEditingPhone] = useState(false);
   const isReadOnly =
     location.pathname !== ROUTES.PROFILE &&
-    decodeURIComponent(userId) !== userProfile.email;
+    decodeURIComponent(userId) !== window.btoa(userProfile.email);
 
   useEffect(() => {
-    const getProfile = async (profileEmail) => {
+    const getProfile = async (encodedProfileEmail) => {
       if (!isReadOnly) {
         return [{ ...userProfile.userData }, userRole, userStatus];
       }
@@ -187,13 +188,16 @@ const UserPage = () => {
         tempProfileStatus = "status";
 
       try {
+        const profileEmail = window.atob(encodedProfileEmail);
         tempProfileData = await UserDataApi.userProfile(profileEmail);
         const profileAccess = effectiveRoleForUser(tempProfileData?.roleList);
         if (profileAccess !== null)
           [tempProfileRole, tempProfileStatus] = profileAccess;
       } catch (e) {
         console.error("Error fetching user data", e);
         setAlertCode(RESPONSE_CODE[e.message]);
+        // redirect if the user is not found
+        history.push("/notfound");
       }
 
       return [tempProfileData, tempProfileRole, tempProfileStatus];
@@ -209,7 +213,7 @@ const UserPage = () => {
         console.error("Error fetching user data", e);
         setAlertCode(RESPONSE_CODE[e.message]);
       });
-  }, [isReadOnly, userId, userProfile, userRole, userStatus]);
+  }, [isReadOnly, userId, userProfile, userRole, userStatus, history]);
 
   const onPhoneNumberCancel = useCallback(() => {
     setIsEditingPhone(false);