go team... banner for no role case (#220)

Enterprise-CMCS · Nov 28, 2023 · 3e1ec2a · 3e1ec2a
1 parent 430c4de
commit 3e1ec2a
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 17 deletions.
diff --git a/src/services/ui/src/components/UsaBanner/index.tsx b/src/services/ui/src/components/UsaBanner/index.tsx
@@ -5,6 +5,7 @@ import { GovernmentBuildingIcon } from "../GovernmentBuildingIcon";
 import UsFlag from "@/assets/us_flag_small.png";
 import { useMediaQuery } from "@/hooks";
 import { useUserContext } from "../Context/userContext";
+import { useLoaderData } from "react-router-dom";
 
 export const UsaBanner = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -21,6 +22,7 @@ export const UsaBanner = () => {
       return false;
     }
   }, []);
+  const { error } = useLoaderData() as { error: string };
   return (
     <>
       <div className="bg-[#f0f0f0]">
@@ -72,22 +74,8 @@ export const UsaBanner = () => {
             </div>
           </button>
         )}
-        {hasRole && (
-          <div className="w-full  px-4 py-1 lg:px-8 text-xs mx-auto flex gap-2 items-center justify-center bg-red-200 ">
-            <p className="text-center text-base">
-              You do not have access to view the entire application.{" "}
-              <a
-                rel="noreferrer"
-                href="https://test.home.idm.cms.gov/"
-                target="_blank"
-                className="text-blue-600 inline  no-underline"
-              >
-                Please visit IDM
-              </a>{" "}
-              to request the appropriate user role(s).
-            </p>
-          </div>
-        )}
+        {hasRole && <NoRole />}
+        {error?.length > 0 && <NoRole />}
 
         {isOpen && (
           <div className="flex flex-col gap-3 px-3 mt-3 sm:flex-row max-w-screen-lg mx-auto pb-4">
@@ -139,3 +127,22 @@ export const MiniLock = () => {
     </svg>
   );
 };
+
+const NoRole = () => {
+  return (
+    <div className="w-full  px-4 py-1 lg:px-8 text-xs mx-auto flex gap-2 items-center justify-center bg-red-200 ">
+      <p className="text-center text-base">
+        You do not have access to view the entire application.{" "}
+        <a
+          rel="noreferrer"
+          href="https://test.home.idm.cms.gov/"
+          target="_blank"
+          className="text-blue-600 inline  no-underline"
+        >
+          Please visit IDM
+        </a>{" "}
+        to request the appropriate user role(s).
+      </p>
+    </div>
+  );
+};
diff --git a/src/services/ui/src/pages/welcome/index.tsx b/src/services/ui/src/pages/welcome/index.tsx
@@ -3,12 +3,22 @@ import OneMacLogo from "@/assets/onemac_logo.svg";
 import * as Heroicons from "@heroicons/react/24/outline";
 import { QueryClient } from "@tanstack/react-query";
 import { getUser } from "@/api/useGetUser";
-import { Link } from "react-router-dom";
+import { Link, redirect, useLoaderData } from "react-router-dom";
 import { Button } from "@/components/Inputs";
 import { ROUTES, FAQ_TARGET } from "@/routes";
 
 export const loader = (queryClient: QueryClient) => {
   return async () => {
+    const queryString = window.location.search;
+    // Parse the query string to get URL parameters
+    const queryParams = new URLSearchParams(queryString);
+    // Access specific parameters
+    const errorDescription = queryParams.get("error_description");
+    const error = queryParams.get("error");
+    if (errorDescription || error) {
+      console.error("Authentication Error:", { errorDescription, error });
+      return { error };
+    }
     if (!queryClient.getQueryData(["user"])) {
       return await queryClient.fetchQuery({
         queryKey: ["user"],