[TM-1492] make dashboard endpoints publicly accessible

src/components/extensive/BlurContainer/BlurContainer.tsx

@@ -6,7 +6,7 @@ import Text from "@/components/elements/Text/Text";
 
 export interface BlurContainerProps {
   isBlur: boolean;
-  textInformation?: string;
+  textInformation?: string | React.ReactNode;
   children: React.ReactNode;
   className?: string;
 }
@@ -16,16 +16,31 @@ const BlurContainer = ({ isBlur, textInformation, children, className, ...props
     return <>{children}</>;
   }
 
+  const LoginText = () => (
+    <>
+      <a href="/auth/login" className="text-12-semibold underline">
+        Login to view.
+      </a>{" "}
+      If you are a funder or representing a government agency, please{" "}
+      <a
+        href="https://terramatchsupport.zendesk.com/hc/en-us/requests/new?ticket_form_id=30623040820123&tf_subject=Account%20Access%20Request%20for%20TerraMatch%20Dashboard&tf_description=Please%20provide%20your%20details%20to%20request%20access%20to%20the%20TerraMatch%20Dashboard.%20Once%20your%20information%20is%20submitted,%20our%20team%20will%20review%20your%20request%20and%20set%20up%20an%20account%20for%20you.%20You%E2%80%99ll%20receive%20an%20email%20with%20further%20instructions%20once%20your%20account%20is%20ready"
+        className="text-12-semibold underline"
+      >
+        click here to request an account.
+      </a>
+    </>
+  );
+
   return (
     <div className={tw("relative w-full text-black", className)}>
       <div
         className={`absolute left-0 top-0 flex h-full w-full items-center justify-center rounded-xl ${
           isBlur ? "z-[1] bg-[#9d9a9a29] backdrop-blur-sm" : ""
         }`}
       >
-        <When condition={isBlur && textInformation}>
+        <When condition={isBlur && !!textInformation}>
           <Text variant="text-12-semibold" className="h-fit w-fit max-w-[80%] rounded-lg bg-white px-4 py-3">
-            {textInformation}
+            {typeof textInformation === "string" ? textInformation : <LoginText />}
           </Text>
         </When>
       </div>

src/components/extensive/PageElements/Card/PageCard.tsx

@@ -8,6 +8,7 @@ import EmptyField, { EmptyFieldProps } from "@/components/elements/Field/EmptyFi
 import Paper from "@/components/elements/Paper/Paper";
 import Text from "@/components/elements/Text/Text";
 import ToolTip from "@/components/elements/Tooltip/Tooltip";
+import { useMyUser } from "@/connections/User";
 import { NO_DATA_INFORMATION } from "@/constants/dashboardConsts";
 import { withFrameworkShow } from "@/context/framework.provider";
 import { TextVariants } from "@/types/common";
@@ -55,6 +56,7 @@ const PageCard = ({
   const [collapseSubtile, setCollapseSubtile] = useState(true);
   const [subtitleText, setSubtitleText] = useState(subtitle);
   const t = useT();
+  const [, { user }] = useMyUser();
 
   const maxLength = 278;
 
@@ -68,7 +70,7 @@ const PageCard = ({
 
   return (
     <Paper {...props}>
-      <BlurContainer isBlur={!isUserAllowed} textInformation={NO_DATA_INFORMATION}>
+      <BlurContainer isBlur={!isUserAllowed} textInformation={user !== undefined ? NO_DATA_INFORMATION : <></>}>
         <When condition={!!title || !!headerChildren}>
           <div className="flex flex-wrap justify-between">
             <When condition={!!title}>

src/middleware.page.ts

@@ -14,6 +14,10 @@ export async function middleware(request: NextRequest) {
     const accessToken = request.cookies.get("accessToken")?.value;
     const middlewareCache = request.cookies.get(MiddlewareCacheKey)?.value;
 
+    if (request.nextUrl.pathname.startsWith("/dashboard")) {
+      return NextResponse.next();
+    }
+
     if (!!accessToken && !!middlewareCache) {
       // Skip middleware for dashboard routes to prevent redirect loop
       if (request.nextUrl.pathname.startsWith("/dashboard")) {
@@ -37,7 +41,8 @@ export async function middleware(request: NextRequest) {
         matcher.startWith("/auth")?.next();
         matcher.exact("/")?.next();
 
-        matcher.redirect("/auth/login");
+        // Commented for now as any unauthenticated user can access to the dashboard
+        // matcher.redirect("/auth/login");
       },
       async () => {
         // The redux store isn't available yet at this point, so we do a quick manual users/me fetch

src/pages/dashboard/index.page.tsx

@@ -8,6 +8,7 @@ import BlurContainer from "@/components/extensive/BlurContainer/BlurContainer";
 import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
 import PageCard from "@/components/extensive/PageElements/Card/PageCard";
 import PageRow from "@/components/extensive/PageElements/Row/PageRow";
+import { useMyUser } from "@/connections/User";
 import {
   CHART_TYPES,
   JOBS_CREATED_CHART_TYPE,
@@ -57,6 +58,7 @@ export interface GraphicLegendProps {
 
 const Dashboard = () => {
   const t = useT();
+  const [, { user }] = useMyUser();
   const { filters, setFilters, frameworks } = useDashboardContext();
   const {
     dashboardHeader,
@@ -283,7 +285,7 @@ const Dashboard = () => {
           </When>
           <BlurContainer
             isBlur={isUserAllowed !== undefined ? !isUserAllowed?.allowed : false}
-            textInformation={NO_DATA_INFORMATION}
+            textInformation={user !== undefined ? NO_DATA_INFORMATION : <></>}
           >
             <div className="grid w-full grid-cols-3 gap-4">
               {dashboardHeader.map((item, index) => (