Merge pull request #1295 from Shelf-nu/improvement-block-app-access-w…

…ith-no-js-or-cookies feat: added a blocker for the app if cookies or js is disabled
Shelf-nu · Sep 3, 2024 · 1dc20e7 · 1dc20e7
2 parents 41b9f8c + db676e1
commit 1dc20e7
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 25 deletions.
diff --git a/app/components/layout/maintenance-mode.tsx b/app/components/layout/maintenance-mode.tsx
@@ -1,9 +1,25 @@
-import { ToolIcon } from "../icons/library";
 import { Button } from "../shared/button";
+import type { IconType } from "../shared/icons-map";
+import iconsMap from "../shared/icons-map";
 
-export default function MaintenanceMode() {
+interface Props {
+  title: string;
+  content: string;
+  cta?: {
+    to: string | undefined;
+    text: string | undefined;
+  };
+  icon: IconType;
+}
+
+export default function BlockInteractions({
+  title,
+  content,
+  cta = undefined,
+  icon,
+}: Props) {
   return (
-    <div className="size-screen relative px-4 py-16 md:p-16">
+    <div className="fixed z-[9999999] h-screen w-screen px-4 py-16 md:p-16">
       <img
         src="/static/images/bg-overlay1.png"
         alt="background"
@@ -12,25 +28,22 @@ export default function MaintenanceMode() {
       <div className="flex size-full items-center justify-center bg-white shadow-xl">
         <div className="max-w-[400px] p-6 text-center">
           <div className="mb-4 inline-flex items-center justify-center rounded-full border-8 border-solid border-primary-50 bg-primary-100 p-2 text-primary">
-            <ToolIcon />
+            {iconsMap[icon]}
           </div>
-          <h1 className="text-[18px] font-semibold leading-7">
-            Maintenance is being performed
-          </h1>
-          <p className="text-gray-600">
-            Apologies, we’re down for scheduled maintenance. Please try again
-            later.
-          </p>
-          <Button
-            to="https://www.shelf.nu/blog-categories/updates-maintenance"
-            target="_blank"
-            rel="noopener noreferrer"
-            variant="secondary"
-            width="full"
-            className="mt-8"
-          >
-            Learn more
-          </Button>
+          <h1 className="text-[18px] font-semibold leading-7">{title}</h1>
+          <p className="text-gray-600">{content}</p>
+          {cta?.to && cta?.text && (
+            <Button
+              to={cta.to}
+              target="_blank"
+              rel="noopener noreferrer"
+              variant="secondary"
+              width="full"
+              className="mt-8"
+            >
+              {cta.text}
+            </Button>
+          )}
         </div>
       </div>
     </div>

diff --git a/app/components/shared/icons-map.tsx b/app/components/shared/icons-map.tsx
@@ -43,6 +43,7 @@ import {
   LockIcon,
   ActiveSwitchIcon,
   MapIcon,
+  ToolIcon,
 } from "../icons/library";
 
 /** The possible options for icons to be rendered in the button */
@@ -91,7 +92,8 @@ export type IconType =
   | "asset-label"
   | "lock"
   | "activate"
-  | "deactivate";
+  | "deactivate"
+  | "tool";
 
 type IconsMap = {
   [key in IconType]: JSX.Element;
@@ -143,6 +145,7 @@ export const iconsMap: IconsMap = {
   lock: <LockIcon />,
   activate: <ActiveSwitchIcon />,
   deactivate: <XIcon />,
+  tool: <ToolIcon />,
 };
 
 export default iconsMap;
diff --git a/app/root.tsx b/app/root.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from "react";
 import type { User } from "@prisma/client";
 import type {
   LinksFunction,
@@ -19,7 +20,7 @@ import { withSentry } from "@sentry/remix";
 import nProgressStyles from "nprogress/nprogress.css?url";
 import { ErrorContent } from "./components/errors";
 import { HomeIcon } from "./components/icons/library";
-import MaintenanceMode from "./components/layout/maintenance-mode";
+import BlockInteractions from "./components/layout/maintenance-mode";
 import { Clarity } from "./components/marketing/clarity";
 import { config } from "./config/shelf.config";
 import { useNprogress } from "./hooks/use-nprogress";
@@ -80,6 +81,11 @@ export const shouldRevalidate = () => false;
 export function Layout({ children }: { children: React.ReactNode }) {
   const data = useRouteLoaderData<typeof loader>("root");
   const nonce = useNonce();
+  const [hasCookies, setHasCookies] = useState(true);
+  useEffect(() => {
+    setHasCookies(navigator.cookieEnabled);
+  }, []);
+
   return (
     <html lang="en" className="h-full">
       <head>
@@ -92,7 +98,28 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <Clarity />
       </head>
       <body className="h-full">
-        {children}
+        <noscript>
+          <BlockInteractions
+            title={"JavaScript is disabled"}
+            content={
+              "This website requires JavaScript to be enabled to function properly. Please enable JavaScript or change browser and try again."
+            }
+            icon="x"
+          />
+        </noscript>
+
+        {hasCookies ? (
+          children
+        ) : (
+          <BlockInteractions
+            title={"Cookies are disabled"}
+            content={
+              "This website requires cookies to be enabled to function properly. Please enable cookies and try again."
+            }
+            icon="x"
+          />
+        )}
+
         <ScrollRestoration />
         <script
           dangerouslySetInnerHTML={{
@@ -109,7 +136,21 @@ function App() {
   useNprogress();
   const { maintenanceMode } = useLoaderData<typeof loader>();
 
-  return maintenanceMode ? <MaintenanceMode /> : <Outlet />;
+  return maintenanceMode ? (
+    <BlockInteractions
+      title={"Maintenance is being performed"}
+      content={
+        "Apologies, we’re down for scheduled maintenance. Please try again later."
+      }
+      cta={{
+        to: "https://www.shelf.nu/blog-categories/updates-maintenance",
+        text: "Learn more",
+      }}
+      icon="tool"
+    />
+  ) : (
+    <Outlet />
+  );
 }
 
 export default withSentry(App);