impersonate user feature

package.json

@@ -17,6 +17,7 @@
     "@types/react-dom": "^18.2.4",
     "@types/react-redux": "^7.1.25",
     "@types/react-router-dom": "^5.3.3",
+    "@types/lodash.debounce": "^4.0.8",
     "axios": "^1.4.0",
     "bootstrap": "^5.3.3",
     "chart.js": "^4.1.1",

src/App.tsx

@@ -40,6 +40,7 @@ import ViewSubmissions from "pages/Assignments/ViewSubmissions";
 import ViewScores from "pages/Assignments/ViewScores";
 import ViewReports from "pages/Assignments/ViewReports";
 import ViewDelayedJobs from "pages/Assignments/ViewDelayedJobs";
+import ImpersonateUser from "pages/Impersonate/ImpersonateUser";
 function App() {
   const router = createBrowserRouter([
     {
@@ -288,6 +289,10 @@ function App() {
             },
           ],
         },
+        {
+          path: "impersonate",
+          element: <ProtectedRoute element={<ImpersonateUser />} />,
+        },
         { path: "*", element: <NotFound /> },
         { path: "questionnaire", element: <Questionnaire /> }, // Added the Questionnaire route
       ],

src/layout/Header.tsx

@@ -1,22 +1,29 @@
 import React, { Fragment, useState, useEffect } from "react";
 import { Button, Container, Nav, Navbar, NavDropdown } from "react-bootstrap";
-import { useSelector } from "react-redux";
-import { Link, useNavigate } from "react-router-dom";
+import { useSelector, useDispatch } from "react-redux";
+import useAPI from "hooks/useAPI";
+import { Link, useNavigate, useLocation } from "react-router-dom";
 import { RootState } from "../store/store";
+import { alertActions } from "store/slices/alertSlice";
 import { ROLE } from "../utils/interfaces";
 import { hasAllPrivilegesOf } from "../utils/util";
+import { authenticationActions } from "../store/slices/authenticationSlice";
+import { setAuthToken } from "../utils/auth";
 import detective from "../assets/detective.png";
 
 /**
  * @author Ankur Mundra on May, 2023
  */
 
 const Header: React.FC = () => {
+  const { data: userResponse, sendRequest: fetchUsers } = useAPI();
   const auth = useSelector(
     (state: RootState) => state.authentication,
     (prev, next) => prev.isAuthenticated === next.isAuthenticated
   );
   const navigate = useNavigate();
+  const dispatch = useDispatch();
+  const location = useLocation();
 
   const [visible, setVisible] = useState(true);
 
@@ -67,6 +74,136 @@ const Header: React.FC = () => {
   //   console.log(visible, 'Changed');
   // }, [visible]);
 
+const impersonateUserPayload = localStorage.getItem("impersonateBannerMessage");
+
+useEffect(() => {
+        fetchUsers({
+        method: "get",
+        url: `/users/${auth.user.id}/managed`,
+      });
+    }, [fetchUsers, auth.user.id]);
+
+const ImpersonateBanner = () => {
+  const [impersonateName, setImpersonateName] = useState("");
+  const { error, data: impersonateUserResponse, sendRequest: impersonateUser } = useAPI();
+  const handleImpersonate = (value: string) => {
+      if (!userResponse || !userResponse.data) {
+          console.error("userResponse is undefined or does not have data.");
+          return;
+      }
+      const matchedUser = userResponse.data.find((user: { name: string }) => user.name === value);
+      if (matchedUser) {
+          console.log("Match found:", matchedUser.id);
+          impersonateUser({
+              method: "post",
+              url: `/impersonate`,
+              data: {
+                impersonate_id: matchedUser.id,
+              },
+          });
+      } else {
+          console.log("No match found for", value);
+          dispatch(
+              alertActions.showAlert({
+                variant: "danger",
+                message: "Invalid Request!",
+              })
+            );
+      }
+  };
+
+  // Set Impersonation Message after the impersonateUser POST API call is complete
+  useEffect(() => {
+    if (impersonateUserResponse?.status === 200) {
+      const impersonateMessage =
+        "impersonate..."
+      localStorage.setItem("impersonateBannerMessage", impersonateMessage);
+    }
+  }, [impersonateUserResponse]);
+
+  // Handle any uncaught user impersonation errors
+  useEffect(() => {
+    if (error) {
+      dispatch(alertActions.showAlert({ variant: "danger", message: error }));
+    }
+  }, [error, dispatch]);
+
+  // Impersonate user authentication
+  useEffect(() => {
+    if (impersonateUserResponse?.data) {
+      dispatch(
+        authenticationActions.setAuthentication({
+          authToken: impersonateUserResponse.data.token,
+          user: setAuthToken(impersonateUserResponse.data.token),
+        })
+      );
+
+      navigate(location.state?.from ? location.state.from : "/");
+      navigate(0);
+    }
+  }, [impersonateUserResponse]);
+
+  const handleCancelImpersonate = () => {
+    dispatch(
+      authenticationActions.setAuthentication({
+        authToken: localStorage.getItem("originalUserToken"),
+        user: setAuthToken(localStorage.getItem("originalUserToken") || ""),
+      })
+    );
+
+    localStorage.removeItem("originalUserToken");
+    localStorage.removeItem("impersonateBannerMessage");
+
+    navigate(location.state?.from ? location.state.from : "/");
+    navigate(0);
+  };
+
+  return (
+      <li id="impersonate" style={{ backgroundColor: 'transparent', padding: 0, listStyle: 'none', marginBottom: -20}}>
+        <div className="input-group">
+          <input
+            type="text"
+            id="inputImpersonateBox"
+            value={impersonateName}
+            placeholder="impersonate..."
+            onChange={(e) => setImpersonateName(e.target.value)}
+            onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                    handleImpersonate(impersonateName); // Call the impersonate API on "Enter"
+                }
+            }}
+            style={{
+              backgroundColor: 'white',  /* White background */
+              border: '1px solid #24a0ed', /* Border */
+              padding: '3px 8px',        /* Reduced padding */
+              height: '28px',            /* Reduced height */
+              fontSize: '14px',          /* Reduced font size */
+              width: '110px',            /* Fixed width to fit placeholder */
+              outline: 'none',          /* Remove default outline */
+            }}
+           />
+          <span className="input-group-btn" style={{ margin: 0, padding: 0 }}>
+            <button
+              type="button"
+              className="btn btn-danger"
+              id="impersonate-button"
+              onClick={handleCancelImpersonate}
+              style={{
+                padding: '3px 8px',  /* Reduced padding */
+                height: '28px',      /* Same height as the input */
+                fontSize: '14px',    /* Same font size as the input */
+                display: 'flex',
+                alignItems: 'center', /* Vertically center the text in the button */
+              }}
+            >
+              Revert
+            </button>
+          </span>
+        </div>
+      </li>
+  );
+};
+
   return (
     <Fragment>
       <Navbar
@@ -159,6 +296,7 @@ const Header: React.FC = () => {
                   Anonymized View
                 </Nav.Link>
               </Nav>
+              {impersonateUserPayload && <ImpersonateBanner />}
               {visible ? (
                 <Nav.Item className="text-light ps-md-3 pe-md-3">
                   User: {auth.user.full_name}

src/pages/Impersonate/ImpersonateUser.css

@@ -0,0 +1,29 @@
+/* Impersonate Button Spinner */
+.loader {
+  width: 32px;
+  aspect-ratio: 1;
+  display: grid;
+  border-radius: 50%;
+  background: linear-gradient(0deg, rgb(0 0 0/50%) 30%, #0000 0 70%, rgb(0 0 0/100%) 0) 50%/8% 100%,
+    linear-gradient(90deg, rgb(0 0 0/25%) 30%, #0000 0 70%, rgb(0 0 0/75%) 0) 50%/100% 8%;
+  background-repeat: no-repeat;
+  animation: l23 1s infinite steps(12);
+}
+.loader::before,
+.loader::after {
+  content: "";
+  grid-area: 1/1;
+  border-radius: 50%;
+  background: inherit;
+  opacity: 0.915;
+  transform: rotate(30deg);
+}
+.loader::after {
+  opacity: 0.83;
+  transform: rotate(60deg);
+}
+@keyframes l23 {
+  100% {
+    transform: rotate(1turn);
+  }
+}