feat: add support for redirecting user to signup blocked if not allowed

Author: deepjyoti30-st

packages/tenant-enrollment-react/src/components/no-access/NoAccess.tsx

@@ -0,0 +1,20 @@
+import { Card } from "@shared/ui";
+import classNames from "classnames/bind";
+
+import style from "./no-access.module.scss";
+const cx = classNames.bind(style);
+
+type NoAccessProps = {
+  headerText: string;
+  descriptionComponent: React.ReactNode;
+  useDangerAccent?: boolean;
+};
+
+export const NoAccess: React.FC<NoAccessProps> = ({ headerText, descriptionComponent, useDangerAccent = false }) => {
+  return (
+    <Card className={cx("noAccessMessageContainer")}>
+      <div className={cx("header")}>{headerText}</div>
+      <div className={cx("messageContainer", { danger: useDangerAccent })}>{descriptionComponent}</div>
+    </Card>
+  );
+};

packages/tenant-enrollment-react/src/components/no-access/index.ts

@@ -0,0 +1 @@
+export { NoAccess } from "./NoAccess";

packages/tenant-enrollment-react/src/pages/awaiting-approval/awaiting-approval.module.scss renamed to packages/tenant-enrollment-react/src/components/no-access/no-access.module.scss

@@ -1,4 +1,4 @@
-.awaitingApprovalMessageContainer {
+.noAccessMessageContainer {
   .header {
     font-weight: 700;
     font-size: 28px;
@@ -26,5 +26,13 @@
       line-height: 20px;
       color: var(--neutral-color-neutral-11);
     }
+
+    &.danger {
+      border-color: var(--semantic-colors-error-6);
+
+      b {
+        color: var(--semantic-colors-error-9);
+      }
+    }
   }
 }

packages/tenant-enrollment-react/src/pages/awaiting-approval/awaiting-approval.tsx

@@ -1,23 +1,18 @@
-import { Card } from "@shared/ui";
-import classNames from "classnames/bind";
-
+import { NoAccess } from "../../components/no-access/NoAccess";
 import { usePluginContext } from "../../plugin";
 
-import style from "./awaiting-approval.module.scss";
-const cx = classNames.bind(style);
-
 export const AwaitingApproval = () => {
   const { t } = usePluginContext();
 
   return (
-    <Card className={cx("awaitingApprovalMessageContainer")}>
-      <div className={cx("header")}>{t("PL_TE_JOIN_TENANT_AWAITING_APPROVAL_HEADER")}</div>
-      <div className={cx("messageContainer")}>
+    <NoAccess
+      headerText={t("PL_TE_JOIN_TENANT_AWAITING_APPROVAL_HEADER")}
+      descriptionComponent={
         <div>
           {t("PL_TE_JOIN_TENANT_AWAITING_APPROVAL_MESSAGE")}{" "}
           <b>{t("PL_TE_JOIN_TENANT_AWAITING_APPROVAL_MESSAGE_HIGHLIGHT")}</b>
         </div>
-      </div>
-    </Card>
+      }
+    />
   );
 };

packages/tenant-enrollment-react/src/pages/blocked/index.ts

@@ -0,0 +1 @@
+export { SignUpBlocked } from "./signup-blocked";

packages/tenant-enrollment-react/src/pages/blocked/signup-blocked.tsx

@@ -0,0 +1,18 @@
+import { NoAccess } from "../../components/no-access/NoAccess";
+import { usePluginContext } from "../../plugin";
+
+export const SignUpBlocked = () => {
+  const { t } = usePluginContext();
+
+  return (
+    <NoAccess
+      headerText={t("PL_TE_JOIN_TENANT_AWAITING_APPROVAL_HEADER")}
+      descriptionComponent={
+        <div>
+          <b>{t("PL_TE_SIGN_UP_BLOCKED_MESSAGE_HIGHLIGHT")}</b> <b>{t("PL_TE_SIGN_UP_BLOCKED_MESSAGE_SUFFIX")}</b>
+        </div>
+      }
+      useDangerAccent
+    />
+  );
+};

packages/tenant-enrollment-react/src/plugin.tsx

@@ -14,6 +14,7 @@ import { getApi } from "./api";
 import { PLUGIN_ID, API_PATH } from "./constants";
 import { enableDebugLogs, logDebugMessage } from "./logger";
 import { AwaitingApproval } from "./pages/awaiting-approval";
+import { SignUpBlocked } from "./pages/blocked";
 import { defaultTranslationsTenantEnrollment } from "./translations";
 import { SuperTokensPluginTenantEnrollmentPluginConfig, TranslationKeys } from "./types";
 
@@ -70,6 +71,10 @@ export const init = createPluginInitFunction<
               path: "/awaiting-approval",
               handler: () => AwaitingApproval.call(null),
             },
+            {
+              path: "/signup-blocked",
+              handler: () => SignUpBlocked.call(null),
+            },
           ],
         };
       },
@@ -95,7 +100,8 @@ export const init = createPluginInitFunction<
                     // Update the message before re-throwing the error
                     error.message = "Not allowed to signup to tenant";
 
-                    // TODO: Redirect the user to not allowed to signup view
+                    // Redirect the user to not allowed to signup view
+                    window.location.assign("/signup-blocked");
                   }
                 }
 

packages/tenant-enrollment-react/src/translations.ts

@@ -4,5 +4,9 @@ export const defaultTranslationsTenantEnrollment = {
     PL_TE_JOIN_TENANT_AWAITING_APPROVAL_MESSAGE:
       "It is essential to obtain the tenant administrator's approval before proceeding with the",
     PL_TE_JOIN_TENANT_AWAITING_APPROVAL_MESSAGE_HIGHLIGHT: "tenant joining process",
+    PL_TE_SIGN_UP_BLOCKED_HEADER: "Signing up to the tenant is disabled",
+    PL_TE_SIGN_UP_BLOCKED_MESSAGE_HIGHLIGHT: "Signing up to this tenant is currently blocked.",
+    PL_TE_SIGN_UP_BLOCKED_MESSAGE_SUFFIX:
+      "If you think this is a mistake, please reach out to tenant administrators or request an invitation to join the tenant.",
   },
 } as const;