From bea80585446557ac003b82d769319f9ab81b36c2 Mon Sep 17 00:00:00 2001
From: abijithS-aot <abijith.s@aot-technologies.com>
Date: Wed, 22 May 2024 05:38:15 -0700
Subject: [PATCH 1/6] multitenant landing page

---
 .../src/apiManager/endpoints/index.js         |   1 +
 .../src/apiManager/services/tenantServices.js |  12 ++
 .../src/components/MultiTenant/LandingPage.js |  56 +++++++++
 .../src/components/MultiTenant/index.js       |   6 +
 .../components/MultiTenant/landingPage.css    | 115 ++++++++++++++++++
 .../src/components/PrivateRoute.jsx           |   4 +
 6 files changed, 194 insertions(+)
 create mode 100644 forms-flow-web/src/components/MultiTenant/LandingPage.js
 create mode 100644 forms-flow-web/src/components/MultiTenant/index.js
 create mode 100644 forms-flow-web/src/components/MultiTenant/landingPage.css

diff --git a/forms-flow-web/src/apiManager/endpoints/index.js b/forms-flow-web/src/apiManager/endpoints/index.js
index db909cb84b..86eb95d5f2 100644
--- a/forms-flow-web/src/apiManager/endpoints/index.js
+++ b/forms-flow-web/src/apiManager/endpoints/index.js
@@ -77,6 +77,7 @@ const API = {
   HANDLE_AUTHORIZATION_FOR_DESIGNER: `${WEB_BASE_URL}/authorizations/resource/<resource_id>`,
   GET_FILTERS : `${WEB_BASE_URL}/filter`,
   GET_BPM_TASK_FILTERS : `${BPM_BASE_URL_EXT}/v1/task-filters`,
+  VALIDATE_TENANT: `${MT_ADMIN_BASE_URL}/${MT_ADMIN_BASE_URL_VERSION}/tenants/tenant_id/validate`,
 };
 
 export default API;
diff --git a/forms-flow-web/src/apiManager/services/tenantServices.js b/forms-flow-web/src/apiManager/services/tenantServices.js
index adbacd8dd4..55d5bb651b 100644
--- a/forms-flow-web/src/apiManager/services/tenantServices.js
+++ b/forms-flow-web/src/apiManager/services/tenantServices.js
@@ -1,9 +1,12 @@
 import { tenantDetail } from "../../constants/tenantConstant";
+import { RequestService } from "@formsflow/service";
 import {
   setTenantDetails,
   setTenantID,
 } from "../../actions/tenantActions";
 import { Keycloak_Tenant_Client } from "../../constants/constants";
+import { replaceUrl } from "../../helper/helper";
+import API from "../endpoints";
 
 
 
@@ -25,3 +28,12 @@ export const setTenantFromId = (tenantKey, ...rest) => {
     done(null, tenantDetail);
   };
 };
+
+export const validateTenant = (tenantId) => {
+  const validateTenantUrl = replaceUrl(
+    API.VALIDATE_TENANT,
+    "<tenant_id>",
+    tenantId
+  );
+  return RequestService.httpGETRequest(validateTenantUrl);
+};
\ No newline at end of file
diff --git a/forms-flow-web/src/components/MultiTenant/LandingPage.js b/forms-flow-web/src/components/MultiTenant/LandingPage.js
new file mode 100644
index 0000000000..5428d3ebf4
--- /dev/null
+++ b/forms-flow-web/src/components/MultiTenant/LandingPage.js
@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import "./landingPage.css";
+import { validateTenant } from "../../apiManager/services/tenantServices";
+
+const LandingPage = () => {
+  const [username, setUsername] = useState("");
+
+  const handleSubmit = () => {
+    console.log("clicking");
+    validateTenant(username);
+  };
+
+  return (
+    <div className="landing">
+      <div className="imageContainer">
+        <img src="https://i0.wp.com/formsflow.ai/wp-content/uploads/2021/08/srvc-bnr.png?fit=702%2C569&ssl=1" alt="Login Image" className="image" />
+      </div>
+      <div className="formContainer">
+        <div className="innerContainer">
+          <img src="https://149641023.v2.pressablecdn.com/wp-content/uploads/2022/05/Site_logo.png" alt="formsflow Logo" className="logo" />
+          <h1 className="heading">Enter your Tenant Name</h1>
+          <div className="formControls">
+            <label htmlFor="username" className="label">Please provide your teanant name to sign in</label>
+            <input
+              type="text"
+              id="username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              className="input"
+              placeholder="Eg: johndoe"
+            />
+          </div>
+          <div className="formControls">
+            <button
+              className={username ? "button" : "buttonDisabled"}
+              onClick={handleSubmit}
+              disabled={!username}
+            >
+              Proceed to Sign In
+            </button>
+
+          </div>
+          <div className="line"></div>
+          <div className="supportText">
+            Contact formsflow.ai support
+          </div>
+          <div className="supportLink">
+            <a href="/contact">info@formsflow.ai</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LandingPage;
\ No newline at end of file
diff --git a/forms-flow-web/src/components/MultiTenant/index.js b/forms-flow-web/src/components/MultiTenant/index.js
new file mode 100644
index 0000000000..986610f4c7
--- /dev/null
+++ b/forms-flow-web/src/components/MultiTenant/index.js
@@ -0,0 +1,6 @@
+import React from "react";
+import LandingPage from "./LandingPage";
+
+export default React.memo(() => {
+  return <LandingPage />;
+});
diff --git a/forms-flow-web/src/components/MultiTenant/landingPage.css b/forms-flow-web/src/components/MultiTenant/landingPage.css
new file mode 100644
index 0000000000..6d64a706e5
--- /dev/null
+++ b/forms-flow-web/src/components/MultiTenant/landingPage.css
@@ -0,0 +1,115 @@
+.landing {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    /* height: 100vh; */
+  }
+  
+  .imageContainer {
+    flex: 1;
+    text-align: center;
+  }
+  
+  .image {
+    background-repeat: no-repeat;
+   background-position: top ;
+   background-color:transparent;
+   overflow: visible;
+   white-space: nowrap;
+   height: 100%;
+   vertical-align: middle;
+   margin: 0;
+   padding: 0 50px;
+   width: 572px;
+  }
+  
+  .formContainer {
+    flex: 1;
+    margin-left: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .innerContainer {
+    width: 100%;
+    max-width: 400px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  
+  .logo {
+    max-width: 150px;
+    margin-bottom: 20px;
+  }
+  
+  .heading {
+    margin-bottom: 20px;
+    font-size: 24px;
+  }
+  
+  .formControls {
+    width: 100%;
+    margin-bottom: 20px;
+  }
+  
+  .label {
+    display: block;
+    margin-bottom: 20px;
+  }
+  
+  .input {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 20px;
+    border-radius: 5px;
+    border: 1px solid rgb(147, 157, 162);
+    color: #000;
+    background-color: #E8F0FE;
+  }
+  
+  .input::placeholder {
+    color: #ccc;
+  }
+  
+  .button {
+    width: 150px;
+    padding: 8px;
+    font-size: 14px;
+    border-radius: 5px;
+    border: none;
+    background-color: #007bff;
+    color: #fff;
+    cursor: pointer;
+    margin-bottom: 60px;
+  }
+  
+  .buttonDisabled {
+    width: 150px;
+    padding: 8px;
+    font-size: 14px;
+    border-radius: 5px;
+    border: none;
+    color: #fff;
+    margin-bottom: 60px;
+    background-color: #cccccc;
+    cursor: not-allowed;
+  }
+  
+  
+  .line {
+    width: 100%;
+    height: 1px;
+    background-color: #ccc;
+    margin-bottom: 20px;
+  }
+  
+  .supportText {
+    color: black;
+  }
+  
+  .supportLink {
+    margin-bottom: 20px;
+  }
+  
\ No newline at end of file
diff --git a/forms-flow-web/src/components/PrivateRoute.jsx b/forms-flow-web/src/components/PrivateRoute.jsx
index 4628ccd53a..a7db33b3a4 100644
--- a/forms-flow-web/src/components/PrivateRoute.jsx
+++ b/forms-flow-web/src/components/PrivateRoute.jsx
@@ -42,6 +42,7 @@ import InsightsPage from "./Insights";
 import Application from "./Application";
 import Modeler from "./Modeler";
 import Drafts from "./Draft";
+import LandingPage from "./MultiTenant";
 import {
   BPM_API_URL_WITH_VERSION,
   WEB_BASE_URL,
@@ -223,6 +224,9 @@ const PrivateRoute = React.memo((props) => {
             {ENABLE_FORMS_MODULE && (
               <Route path={`${BASE_ROUTE}form`} component={Form} />
             )}
+            {ENABLE_FORMS_MODULE && (
+              <Route path={`${BASE_ROUTE}landing`} component={LandingPage} />
+            )}
             {ENABLE_FORMS_MODULE && (
               <DesignerRoute path={`${BASE_ROUTE}formflow`} component={Form} />
             )}

From c72b0944dd6299c9c6682e812df1dc39b055dc0f Mon Sep 17 00:00:00 2001
From: abilpraju-aot <abil.raju@aot-technologies.com>
Date: Wed, 5 Jun 2024 00:33:07 +0530
Subject: [PATCH 2/6] route page for tenant login

---
 .../src/apiManager/endpoints/index.js         |   2 +-
 forms-flow-web/src/components/BaseRouting.jsx |  15 +-
 .../src/components/MultiTenant/LandingPage.js |  81 ++++---
 .../components/MultiTenant/landingPage.css    | 217 +++++++++---------
 .../src/components/PrivateRoute.jsx           |   2 +-
 5 files changed, 174 insertions(+), 143 deletions(-)

diff --git a/forms-flow-web/src/apiManager/endpoints/index.js b/forms-flow-web/src/apiManager/endpoints/index.js
index 86eb95d5f2..dde4c7a40d 100644
--- a/forms-flow-web/src/apiManager/endpoints/index.js
+++ b/forms-flow-web/src/apiManager/endpoints/index.js
@@ -77,7 +77,7 @@ const API = {
   HANDLE_AUTHORIZATION_FOR_DESIGNER: `${WEB_BASE_URL}/authorizations/resource/<resource_id>`,
   GET_FILTERS : `${WEB_BASE_URL}/filter`,
   GET_BPM_TASK_FILTERS : `${BPM_BASE_URL_EXT}/v1/task-filters`,
-  VALIDATE_TENANT: `${MT_ADMIN_BASE_URL}/${MT_ADMIN_BASE_URL_VERSION}/tenants/tenant_id/validate`,
+  VALIDATE_TENANT: `${MT_ADMIN_BASE_URL}/${MT_ADMIN_BASE_URL_VERSION}/tenants/<tenant_id>/validate`,
 };
 
 export default API;
diff --git a/forms-flow-web/src/components/BaseRouting.jsx b/forms-flow-web/src/components/BaseRouting.jsx
index c5de082e5b..12be48a183 100644
--- a/forms-flow-web/src/components/BaseRouting.jsx
+++ b/forms-flow-web/src/components/BaseRouting.jsx
@@ -1,10 +1,10 @@
 import React from "react";
-import { Route, Switch, Redirect, useLocation } from "react-router-dom";
+import { Route, Switch, useLocation } from "react-router-dom";
 import { useSelector } from "react-redux";
 
 import PublicRoute from "./PublicRoute";
 import PrivateRoute from "./PrivateRoute";
-import { BASE_ROUTE } from "../constants/constants";
+import { BASE_ROUTE, MULTITENANCY_ENABLED } from "../constants/constants";
 
 import Footer from "../components/Footer";
 import { ToastContainer } from "react-toastify";
@@ -15,6 +15,7 @@ import i18n from "../resourceBundles/i18n";
 import { setLanguage } from "../actions/languageSetAction";
 import { initPubSub } from "../actions/pubSubActions";
 import { push } from "connected-react-router";
+import LandingPage from "./MultiTenant";
 
 const BaseRouting = React.memo(
   ({ store, publish, subscribe, getKcInstance }) => {
@@ -49,10 +50,11 @@ const BaseRouting = React.memo(
     React.useEffect(() => {
       publish("ES_ROUTE", location);
     }, [location]);
-
-    return (
     
- 
+    if (MULTITENANCY_ENABLED && !location.pathname.startsWith("/tenant/")) {
+      return <LandingPage />;
+    }
+    return (
         <div className="container  mt-5">
         <div className="min-container-height ps-md-3">
         <ToastContainer />
@@ -74,8 +76,7 @@ const BaseRouting = React.memo(
                 />
               </Route>
               <Route path="/404" exact={true} component={NotFound} />
-              <Redirect from="*" to="/404" />
-            </Switch>
+           </Switch>
         </div>
             {isAuth ? <Footer /> : null}
         </div>
diff --git a/forms-flow-web/src/components/MultiTenant/LandingPage.js b/forms-flow-web/src/components/MultiTenant/LandingPage.js
index 5428d3ebf4..dd4a71e090 100644
--- a/forms-flow-web/src/components/MultiTenant/LandingPage.js
+++ b/forms-flow-web/src/components/MultiTenant/LandingPage.js
@@ -1,49 +1,74 @@
 import React, { useState } from "react";
+import { useHistory } from "react-router-dom";
 import "./landingPage.css";
 import { validateTenant } from "../../apiManager/services/tenantServices";
+import { useTranslation } from "react-i18next";
 
 const LandingPage = () => {
   const [username, setUsername] = useState("");
+  const [error, setError] = useState(null);
+  const history = useHistory();
+  const { t } = useTranslation();
 
-  const handleSubmit = () => {
-    console.log("clicking");
-    validateTenant(username);
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    validateTenant(username)
+      .then((res) => {
+        if (res.data.status === "INVALID") {
+          setError(t("Tenant not found"));
+        } else {
+          setError(null); // Clear the error if validation is successful
+          history.push(`/tenant/${username}`);
+        }
+      })
+      .catch((err) => {
+        console.error("error", err);
+      });
   };
 
   return (
     <div className="landing">
       <div className="imageContainer">
-        <img src="https://i0.wp.com/formsflow.ai/wp-content/uploads/2021/08/srvc-bnr.png?fit=702%2C569&ssl=1" alt="Login Image" className="image" />
+        <img
+          src="https://i0.wp.com/formsflow.ai/wp-content/uploads/2021/08/srvc-bnr.png?fit=702%2C569&ssl=1"
+          alt="Login Image"
+          className="image"
+        />
       </div>
       <div className="formContainer">
         <div className="innerContainer">
-          <img src="https://149641023.v2.pressablecdn.com/wp-content/uploads/2022/05/Site_logo.png" alt="formsflow Logo" className="logo" />
-          <h1 className="heading">Enter your Tenant Name</h1>
-          <div className="formControls">
-            <label htmlFor="username" className="label">Please provide your teanant name to sign in</label>
-            <input
-              type="text"
-              id="username"
-              value={username}
-              onChange={(e) => setUsername(e.target.value)}
-              className="input"
-              placeholder="Eg: johndoe"
-            />
-          </div>
-          <div className="formControls">
+          <img
+            src="https://149641023.v2.pressablecdn.com/wp-content/uploads/2022/05/Site_logo.png"
+            alt="formsflow Logo"
+            className="logo"
+          />
+          <h1 className="heading">{t("Enter your Tenant Name")}</h1>
+          <form onSubmit={handleSubmit} className="form-tenant">
+            <div className="form-group-tenant">
+              <label htmlFor="username" className="form-label-tenant">
+              {t("Please provide your tenant name to sign in")}
+              </label>
+              <input
+                type="text"
+                id="username"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                className={`form-control ${error ? "is-invalid" : ""}`}
+                placeholder="Eg: johndoe"
+                required
+              />
+              {error && <div className="invalid-feedback">{error}</div>}
+            </div>
             <button
-              className={username ? "button" : "buttonDisabled"}
-              onClick={handleSubmit}
+              type="submit"
+              className="btn btn-primary btn-tenant"
               disabled={!username}
             >
-              Proceed to Sign In
+             {t("Proceed to Sign In")}
             </button>
-
-          </div>
-          <div className="line"></div>
-          <div className="supportText">
-            Contact formsflow.ai support
-          </div>
+          </form>
+          <div className="line-tenant"></div>
+          <div className="supportText">{t("Contact formsflow.ai support")}</div>
           <div className="supportLink">
             <a href="/contact">info@formsflow.ai</a>
           </div>
@@ -53,4 +78,4 @@ const LandingPage = () => {
   );
 };
 
-export default LandingPage;
\ No newline at end of file
+export default LandingPage;
diff --git a/forms-flow-web/src/components/MultiTenant/landingPage.css b/forms-flow-web/src/components/MultiTenant/landingPage.css
index 6d64a706e5..162ac5dc14 100644
--- a/forms-flow-web/src/components/MultiTenant/landingPage.css
+++ b/forms-flow-web/src/components/MultiTenant/landingPage.css
@@ -1,115 +1,120 @@
 .landing {
-    display: flex;
-    justify-content: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px;
+  height: 100vh;
+}
+
+.imageContainer {
+  width: 100%;
+  max-width: 50%; /* Adjust as needed */
+  margin-right: 20px; /* Add margin for spacing */
+}
+
+.image {
+  width: 100%;
+  height: auto;
+}
+
+.formContainer {
+  width: 100%;
+  max-width: 500px; /* Adjust as needed */
+  padding: 20px;
+  background-color: #f9f9f9;
+  border-radius: 10px;
+  box-shadow:
+    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
+    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
+    0 12.5px 10px rgba(0, 0, 0, 0.06),
+    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
+    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
+    0 100px 80px rgba(0, 0, 0, 0.12),
+    0 0 10px rgba(0, 0, 0, 0.1); /* Add top border shadow */
+}
+
+.innerContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.logo {
+  max-width: 150px;
+  margin-top: 20px;
+}
+
+.heading {
+  margin-bottom: 20px;
+  font-size: 24px;
+}
+
+.form-tenant {
+  width: 100%;
+}
+
+.form-group-tenant {
+  width: 100%;
+  margin-bottom: 20px;
+  text-align: left;
+}
+
+.form-label-tenant {
+  display: block;
+  margin-bottom: 10px;
+  font-size: 16px;
+  font-weight: 200;
+}
+
+.form-control-tenant {
+  width: 100%;
+}
+
+.btn-tenant {
+  display: block;
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.line-tenant {
+  width: 100%;
+  height: 1px;
+  background-color: #ccc;
+  margin-bottom: 20px;
+}
+
+.supportText {
+  color: black;
+}
+
+.supportLink {
+  margin-bottom: 20px;
+}
+
+.supportLink a {
+  color: #007bff;
+  text-decoration: none;
+}
+
+.supportLink a:hover {
+  text-decoration: underline;
+}
+
+/* Media Queries for Responsive Design */
+@media (max-width: 768px) {
+  .landing {
+    flex-direction: column;
     align-items: center;
-    /* height: 100vh; */
   }
   
   .imageContainer {
-    flex: 1;
-    text-align: center;
-  }
-  
-  .image {
-    background-repeat: no-repeat;
-   background-position: top ;
-   background-color:transparent;
-   overflow: visible;
-   white-space: nowrap;
-   height: 100%;
-   vertical-align: middle;
-   margin: 0;
-   padding: 0 50px;
-   width: 572px;
-  }
-  
-  .formContainer {
-    flex: 1;
-    margin-left: 20px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  
-  .innerContainer {
-    width: 100%;
-    max-width: 400px;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-  }
-  
-  .logo {
-    max-width: 150px;
-    margin-bottom: 20px;
-  }
-  
-  .heading {
-    margin-bottom: 20px;
-    font-size: 24px;
-  }
-  
-  .formControls {
-    width: 100%;
-    margin-bottom: 20px;
-  }
-  
-  .label {
-    display: block;
-    margin-bottom: 20px;
-  }
-  
-  .input {
-    width: 100%;
-    padding: 10px;
+    max-width: 100%;
+    margin-right: 0;
     margin-bottom: 20px;
-    border-radius: 5px;
-    border: 1px solid rgb(147, 157, 162);
-    color: #000;
-    background-color: #E8F0FE;
   }
   
-  .input::placeholder {
-    color: #ccc;
-  }
-  
-  .button {
-    width: 150px;
-    padding: 8px;
-    font-size: 14px;
-    border-radius: 5px;
-    border: none;
-    background-color: #007bff;
-    color: #fff;
-    cursor: pointer;
-    margin-bottom: 60px;
-  }
-  
-  .buttonDisabled {
-    width: 150px;
-    padding: 8px;
-    font-size: 14px;
-    border-radius: 5px;
-    border: none;
-    color: #fff;
-    margin-bottom: 60px;
-    background-color: #cccccc;
-    cursor: not-allowed;
-  }
-  
-  
-  .line {
-    width: 100%;
-    height: 1px;
-    background-color: #ccc;
-    margin-bottom: 20px;
-  }
-  
-  .supportText {
-    color: black;
-  }
-  
-  .supportLink {
-    margin-bottom: 20px;
+  .formContainer {
+    max-width: 100%;
+    margin-right: 0;
   }
-  
\ No newline at end of file
+}
diff --git a/forms-flow-web/src/components/PrivateRoute.jsx b/forms-flow-web/src/components/PrivateRoute.jsx
index 621d2a53bb..c8ee73eae5 100644
--- a/forms-flow-web/src/components/PrivateRoute.jsx
+++ b/forms-flow-web/src/components/PrivateRoute.jsx
@@ -81,7 +81,7 @@ const PrivateRoute = React.memo((props) => {
   const tenant = useSelector((state) => state.tenants);
   const [authError, setAuthError] = React.useState(false);
   const [kcInstance, setKcInstance] = React.useState(getKcInstance());
-
+  
   const authenticate = (instance, store) => {
     setKcInstance(instance);
     store.dispatch(

From 4042eb704603f8858e8a2457bcfc3ef50d832ef9 Mon Sep 17 00:00:00 2001
From: abilpraju-aot <abil.raju@aot-technologies.com>
Date: Wed, 5 Jun 2024 19:44:36 +0530
Subject: [PATCH 3/6] changed style

---
 .../src/components/MultiTenant/LandingPage.js |  4 +-
 .../components/MultiTenant/landingPage.css    | 51 +++++++++----------
 2 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/forms-flow-web/src/components/MultiTenant/LandingPage.js b/forms-flow-web/src/components/MultiTenant/LandingPage.js
index dd4a71e090..b0cc660106 100644
--- a/forms-flow-web/src/components/MultiTenant/LandingPage.js
+++ b/forms-flow-web/src/components/MultiTenant/LandingPage.js
@@ -67,11 +67,11 @@ const LandingPage = () => {
              {t("Proceed to Sign In")}
             </button>
           </form>
-          <div className="line-tenant"></div>
+          {/* <div className="line-tenant"></div>
           <div className="supportText">{t("Contact formsflow.ai support")}</div>
           <div className="supportLink">
             <a href="/contact">info@formsflow.ai</a>
-          </div>
+          </div> */}
         </div>
       </div>
     </div>
diff --git a/forms-flow-web/src/components/MultiTenant/landingPage.css b/forms-flow-web/src/components/MultiTenant/landingPage.css
index 162ac5dc14..1da43a9b6f 100644
--- a/forms-flow-web/src/components/MultiTenant/landingPage.css
+++ b/forms-flow-web/src/components/MultiTenant/landingPage.css
@@ -1,36 +1,31 @@
 .landing {
   display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 20px;
   height: 100vh;
 }
 
 .imageContainer {
-  width: 100%;
-  max-width: 50%; /* Adjust as needed */
-  margin-right: 20px; /* Add margin for spacing */
+  flex: 1;
+  display: flex;
+  background-position: left top; 
 }
 
 .image {
-  width: 100%;
-  height: auto;
+  width: auto;
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain; /* Ensure the image does not stretch */
+  align-self: flex-start;
 }
 
 .formContainer {
-  width: 100%;
-  max-width: 500px; /* Adjust as needed */
-  padding: 20px;
+  flex: 1;
+  max-width: 500px;
+  max-height: 400px;
+  padding: 5rem;
   background-color: #f9f9f9;
-  border-radius: 10px;
-  box-shadow:
-    0 2.8px 2.2px rgba(0, 0, 0, 0.034),
-    0 6.7px 5.3px rgba(0, 0, 0, 0.048),
-    0 12.5px 10px rgba(0, 0, 0, 0.06),
-    0 22.3px 17.9px rgba(0, 0, 0, 0.072),
-    0 41.8px 33.4px rgba(0, 0, 0, 0.086),
-    0 100px 80px rgba(0, 0, 0, 0.12),
-    0 0 10px rgba(0, 0, 0, 0.1); /* Add top border shadow */
+  border-top: 2px solid transparent;
+  margin: 10rem 10rem auto auto; /* Default margin for larger screens */
+  box-shadow: 0 0.5rem 1rem 0 rgba(3,3,3,0.16), 0 0 0.375rem 0 rgba(3,3,3,0.08); /* Add top border shadow */
 }
 
 .innerContainer {
@@ -41,7 +36,6 @@
 
 .logo {
   max-width: 150px;
-  margin-top: 20px;
 }
 
 .heading {
@@ -63,7 +57,7 @@
   display: block;
   margin-bottom: 10px;
   font-size: 16px;
-  font-weight: 200;
+  line-height: 1.66666667;
 }
 
 .form-control-tenant {
@@ -74,6 +68,10 @@
   display: block;
   width: 100%;
   margin-bottom: 20px;
+  padding: 6px 10px;
+  font-size: 14px;
+  line-height: 1.3333333;
+  border-radius: 1px;
 }
 
 .line-tenant {
@@ -100,7 +98,7 @@
   text-decoration: underline;
 }
 
-/* Media Queries for Responsive Design */
+
 @media (max-width: 768px) {
   .landing {
     flex-direction: column;
@@ -112,9 +110,10 @@
     margin-right: 0;
     margin-bottom: 20px;
   }
-  
+}
+
+@media (max-width: 576px) {
   .formContainer {
-    max-width: 100%;
-    margin-right: 0;
+    margin: 0px;;
   }
 }

From f2a0a1aeb6aa5aca2223581f677d62af44c91dda Mon Sep 17 00:00:00 2001
From: abilpraju-aot <abil.raju@aot-technologies.com>
Date: Thu, 6 Jun 2024 13:56:54 +0530
Subject: [PATCH 4/6] updated style

---
 .../src/components/MultiTenant/LandingPage.js | 14 ++--
 .../components/MultiTenant/landingPage.css    | 70 +++++++++----------
 2 files changed, 41 insertions(+), 43 deletions(-)

diff --git a/forms-flow-web/src/components/MultiTenant/LandingPage.js b/forms-flow-web/src/components/MultiTenant/LandingPage.js
index b0cc660106..7ecf45e2a9 100644
--- a/forms-flow-web/src/components/MultiTenant/LandingPage.js
+++ b/forms-flow-web/src/components/MultiTenant/LandingPage.js
@@ -43,10 +43,10 @@ const LandingPage = () => {
             className="logo"
           />
           <h1 className="heading">{t("Enter your Tenant Name")}</h1>
-          <form onSubmit={handleSubmit} className="form-tenant">
-            <div className="form-group-tenant">
-              <label htmlFor="username" className="form-label-tenant">
-              {t("Please provide your tenant name to sign in")}
+          <form onSubmit={handleSubmit} className="formTenant">
+            <div className="formGroupTenant">
+              <label htmlFor="username" className="formLabelTenant">
+                {t("Please provide your tenant name to sign in")}
               </label>
               <input
                 type="text"
@@ -61,13 +61,13 @@ const LandingPage = () => {
             </div>
             <button
               type="submit"
-              className="btn btn-primary btn-tenant"
+              className="btn btn-primary btnTenant"
               disabled={!username}
             >
-             {t("Proceed to Sign In")}
+              {t("Proceed to Sign In")}
             </button>
           </form>
-          {/* <div className="line-tenant"></div>
+          {/* <div className="lineTenant"></div>
           <div className="supportText">{t("Contact formsflow.ai support")}</div>
           <div className="supportLink">
             <a href="/contact">info@formsflow.ai</a>
diff --git a/forms-flow-web/src/components/MultiTenant/landingPage.css b/forms-flow-web/src/components/MultiTenant/landingPage.css
index 1da43a9b6f..f1a1d0710f 100644
--- a/forms-flow-web/src/components/MultiTenant/landingPage.css
+++ b/forms-flow-web/src/components/MultiTenant/landingPage.css
@@ -1,31 +1,34 @@
 .landing {
   display: flex;
+  flex-direction: column;
   height: 100vh;
+  align-items: center;
 }
 
 .imageContainer {
-  flex: 1;
+  width: 100%;
   display: flex;
-  background-position: left top; 
+  justify-content: center;
+  align-items: center;
+  background-position: left top;
+  padding: 1rem;
 }
 
 .image {
-  width: auto;
-  max-width: 100%;
-  max-height: 100%;
-  object-fit: contain; /* Ensure the image does not stretch */
-  align-self: flex-start;
+  width: 100%;
+  max-width: 700px;
+  object-fit: contain;
 }
 
 .formContainer {
-  flex: 1;
+  width: 100%;
   max-width: 500px;
-  max-height: 400px;
   padding: 5rem;
   background-color: #f9f9f9;
-  border-top: 2px solid transparent;
-  margin: 10rem 10rem auto auto; /* Default margin for larger screens */
-  box-shadow: 0 0.5rem 1rem 0 rgba(3,3,3,0.16), 0 0 0.375rem 0 rgba(3,3,3,0.08); /* Add top border shadow */
+  box-shadow: 0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16),
+    0 0 0.375rem 0 rgba(3, 3, 3, 0.08);
+  margin: 1rem auto;
+  /* border-radius: 8px; */
 }
 
 .innerContainer {
@@ -40,41 +43,38 @@
 
 .heading {
   margin-bottom: 20px;
-  font-size: 24px;
+  font-size: 1.5rem;
+  text-align: center;
 }
 
-.form-tenant {
+.formTenant {
   width: 100%;
 }
 
-.form-group-tenant {
+.formGroupTenant {
   width: 100%;
   margin-bottom: 20px;
   text-align: left;
 }
 
-.form-label-tenant {
+.formLabelTenant {
   display: block;
   margin-bottom: 10px;
-  font-size: 16px;
+  font-size: 1rem;
   line-height: 1.66666667;
 }
 
-.form-control-tenant {
-  width: 100%;
-}
-
-.btn-tenant {
+.btnTenant {
   display: block;
   width: 100%;
   margin-bottom: 20px;
   padding: 6px 10px;
-  font-size: 14px;
+  font-size: 0.875rem;
   line-height: 1.3333333;
   border-radius: 1px;
 }
 
-.line-tenant {
+.lineTenant {
   width: 100%;
   height: 1px;
   background-color: #ccc;
@@ -83,10 +83,11 @@
 
 .supportText {
   color: black;
+  text-align: center;
 }
 
 .supportLink {
-  margin-bottom: 20px;
+  text-align: center;
 }
 
 .supportLink a {
@@ -98,22 +99,19 @@
   text-decoration: underline;
 }
 
-
-@media (max-width: 768px) {
+@media (min-width: 768px) {
   .landing {
-    flex-direction: column;
-    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
   }
-  
+
   .imageContainer {
-    max-width: 100%;
-    margin-right: 0;
-    margin-bottom: 20px;
+    flex: 1;
+    max-width: 50%;
   }
-}
 
-@media (max-width: 576px) {
   .formContainer {
-    margin: 0px;;
+    flex: 1;
+    margin: auto;
   }
 }

From dd7177a023757e5fed06f055dceb5348c01ac993 Mon Sep 17 00:00:00 2001
From: abilpraju-aot <abil.raju@aot-technologies.com>
Date: Thu, 13 Jun 2024 09:21:41 +0530
Subject: [PATCH 5/6] updated code based on comments

---
 .../src/components/PrivateRoute.jsx           | 105 ++++++++++--------
 1 file changed, 59 insertions(+), 46 deletions(-)

diff --git a/forms-flow-web/src/components/PrivateRoute.jsx b/forms-flow-web/src/components/PrivateRoute.jsx
index c8ee73eae5..8f94ca23b3 100644
--- a/forms-flow-web/src/components/PrivateRoute.jsx
+++ b/forms-flow-web/src/components/PrivateRoute.jsx
@@ -31,7 +31,7 @@ import {
 
 import Loading from "../containers/Loading";
 import NotFound from "./NotFound";
-import { setTenantFromId } from "../apiManager/services/tenantServices";
+import { setTenantFromId, validateTenant } from "../apiManager/services/tenantServices";
 
 // Lazy imports is having issues with micro-front-end build
 
@@ -42,7 +42,6 @@ import InsightsPage from "./Insights";
 import Application from "./Application";
 import Modeler from "./Modeler";
 import Drafts from "./Draft";
-import LandingPage from "./MultiTenant";
 import {
   BPM_API_URL_WITH_VERSION,
   WEB_BASE_URL,
@@ -81,7 +80,8 @@ const PrivateRoute = React.memo((props) => {
   const tenant = useSelector((state) => state.tenants);
   const [authError, setAuthError] = React.useState(false);
   const [kcInstance, setKcInstance] = React.useState(getKcInstance());
-  
+  const [tenantValid, setTenantValid] = React.useState(true); // State to track tenant validity
+
   const authenticate = (instance, store) => {
     setKcInstance(instance);
     store.dispatch(
@@ -89,71 +89,82 @@ const PrivateRoute = React.memo((props) => {
     );
     dispatch(setUserAuth(instance.isAuthenticated()));
     store.dispatch(setUserToken(instance.getToken()));
-    //Set Cammunda/Formio Base URL
+    // Set Cammunda/Formio Base URL
     setApiBaseUrlToLocalStorage();
-    // get formio roles
+    // Get formio roles
     store.dispatch(
       getFormioRoleIds((err) => {
         if (err) {
           console.error(err);
-          // doLogout();
         } else {
           store.dispatch(
             setUserDetails(
               JSON.parse(StorageService.get(StorageService.User.USER_DETAILS))
             )
           );
-
-          // onAuthenticatedCallback();
         }
       })
     );
   };
 
   useEffect(() => {
-    let instance = tenantId ? kcServiceInstance(tenantId) : kcServiceInstance();
-    if (tenantId && props.store) {
-      let currentTenant = sessionStorage.getItem("tenantKey");
-      if (currentTenant && currentTenant !== tenantId) {
-        sessionStorage.clear();
-        localStorage.clear();
-      }
-      sessionStorage.setItem("tenantKey", tenantId);
-      dispatch(setTenantFromId(tenantId));
-    }
-    if (props.store) {
+    if (tenantId) {
+      validateTenant(tenantId)
+        .then((res) => {
+          if (res.data.status === "INVALID") {
+            setTenantValid(false);
+          } else {
+            setTenantValid(true);
+            let instance = kcServiceInstance(tenantId);
+            if (tenantId && props.store) {
+              let currentTenant = sessionStorage.getItem("tenantKey");
+              if (currentTenant && currentTenant !== tenantId) {
+                sessionStorage.clear();
+                localStorage.clear();
+              }
+              sessionStorage.setItem("tenantKey", tenantId);
+              dispatch(setTenantFromId(tenantId));
+              instance.initKeycloak((authenticated) => {
+                if (!authenticated) {
+                  setAuthError(true);
+                } else {
+                  authenticate(instance, props.store);
+                  publish("FF_AUTH", instance);
+                }
+              });
+            }
+          }
+        })
+        .catch((err) => {
+          console.error("Error validating tenant", err);
+          setTenantValid(false);
+        });
+    } else if (props.store) {
       if (kcInstance) {
         authenticate(kcInstance, props.store);
       } else {
+        let instance = kcServiceInstance();
         instance.initKeycloak((authenticated) => {
-          if(!authenticated)
-          {
+          if (!authenticated) {
             setAuthError(true);
-          }
-          else{
+          } else {
             authenticate(instance, props.store);
             publish("FF_AUTH", instance);
           }
         });
       }
     }
-  }, [props.store, tenantId, dispatch]);
+  }, [tenantId, props.store, dispatch]);
 
-  /**
-   * Retrieves the user's locale from the Keycloak instance or the tenant data, and dispatches an action to set the language in the application state.
-   * This effect is triggered whenever the Keycloak instance or the tenant data changes.
-   */
   useEffect(() => {
-    if(kcInstance){
+    if (kcInstance) {
       const lang = kcInstance?.userData?.locale ||
-      tenant?.tenantData?.details?.locale ||
-      selectedLanguage ;
+        tenant?.tenantData?.details?.locale ||
+        selectedLanguage;
       dispatch(setLanguage(lang));
     }
   }, [kcInstance, tenant?.tenantData]);
 
-  // useMemo prevents unneccessary rerendering caused by the route update.
-
   const DesignerRoute = useMemo(
     () =>
       ({ component: Component, ...rest }) =>
@@ -228,6 +239,11 @@ const PrivateRoute = React.memo((props) => {
         ),
     [userRoles]
   );
+
+  if (!tenantValid) {
+    return <NotFound/>;
+  }
+
   return (
     <>
       {authError ? (
@@ -238,9 +254,6 @@ const PrivateRoute = React.memo((props) => {
             {ENABLE_FORMS_MODULE && (
               <Route path={`${BASE_ROUTE}form`} component={Form} />
             )}
-            {ENABLE_FORMS_MODULE && (
-              <Route path={`${BASE_ROUTE}landing`} component={LandingPage} />
-            )}
             {ENABLE_FORMS_MODULE && (
               <DesignerRoute path={`${BASE_ROUTE}formflow`} component={Form} />
             )}
@@ -253,14 +266,12 @@ const PrivateRoute = React.memo((props) => {
                 component={Application}
               />
             )}
-
             {ENABLE_PROCESSES_MODULE && (
               <DesignerRoute
                 path={`${BASE_ROUTE}processes`}
                 component={Modeler}
               />
             )}
-
             {ENABLE_DASHBOARDS_MODULE && (
               <ReviewerRoute
                 path={`${BASE_ROUTE}metrics`}
@@ -281,13 +292,15 @@ const PrivateRoute = React.memo((props) => {
             )}
 
             <Route exact path={BASE_ROUTE}>
-              {userRoles.length && <Redirect
-                to={
-                  userRoles?.includes(STAFF_REVIEWER)
-                    ? `${redirecUrl}task`
-                    : `${redirecUrl}form`
-                }
-              />}
+              {userRoles.length && (
+                <Redirect
+                  to={
+                    userRoles?.includes(STAFF_REVIEWER)
+                      ? `${redirecUrl}task`
+                      : `${redirecUrl}form`
+                  }
+                />
+              )}
             </Route>
             <Route path="/404" exact={true} component={NotFound} />
             <Redirect from="*" to="/404" />
@@ -300,4 +313,4 @@ const PrivateRoute = React.memo((props) => {
   );
 });
 
-export default PrivateRoute;
+export default PrivateRoute;
\ No newline at end of file

From ef3fc1c7c7e33b81139e26fc7e6e47585a95dec6 Mon Sep 17 00:00:00 2001
From: abilpraju-aot <abil.raju@aot-technologies.com>
Date: Thu, 13 Jun 2024 09:56:38 +0530
Subject: [PATCH 6/6] code optimized

---
 .../src/components/PrivateRoute.jsx           | 63 ++++++++++---------
 1 file changed, 33 insertions(+), 30 deletions(-)

diff --git a/forms-flow-web/src/components/PrivateRoute.jsx b/forms-flow-web/src/components/PrivateRoute.jsx
index cc1def071e..9baf9edb86 100644
--- a/forms-flow-web/src/components/PrivateRoute.jsx
+++ b/forms-flow-web/src/components/PrivateRoute.jsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-vars */
-import React, { useEffect, Suspense, lazy, useMemo } from "react";
+import React, { useEffect, Suspense, lazy, useMemo,useCallback } from "react";
 import { Route, Switch, Redirect, useParams } from "react-router-dom";
-import { useDispatch, useSelector } from "react-redux";
+import { useDispatch, useSelector} from "react-redux";
 import {
   BASE_ROUTE,
   DRAFT_ENABLED,
@@ -31,7 +31,10 @@ import {
 
 import Loading from "../containers/Loading";
 import NotFound from "./NotFound";
-import { setTenantFromId, validateTenant } from "../apiManager/services/tenantServices";
+import {
+  setTenantFromId,
+  validateTenant,
+} from "../apiManager/services/tenantServices";
 
 // Lazy imports is having issues with micro-front-end build
 
@@ -107,15 +110,33 @@ const PrivateRoute = React.memo((props) => {
     );
   };
 
+  const keycloakInitialize = useCallback(() => {
+    let instance = tenantId ? kcServiceInstance(tenantId) : kcServiceInstance();
+    if (props.store) {
+      if (kcInstance) {
+        authenticate(kcInstance, props.store);
+      } else {
+        instance.initKeycloak((authenticated) => {
+          if (!authenticated) {
+            setAuthError(true);
+          } else {
+            authenticate(instance, props.store);
+            publish("FF_AUTH", instance);
+          }
+        });
+      }
+    }
+  }, [props.store, kcInstance, tenantId]);
+
   useEffect(() => {
-    if (tenantId) {
+    if (tenantId && MULTITENANCY_ENABLED) {
       validateTenant(tenantId)
         .then((res) => {
           if (res.data.status === "INVALID") {
             setTenantValid(false);
           } else {
             setTenantValid(true);
-            let instance = kcServiceInstance(tenantId);
+
             if (tenantId && props.store) {
               let currentTenant = sessionStorage.getItem("tenantKey");
               if (currentTenant && currentTenant !== tenantId) {
@@ -124,14 +145,7 @@ const PrivateRoute = React.memo((props) => {
               }
               sessionStorage.setItem("tenantKey", tenantId);
               dispatch(setTenantFromId(tenantId));
-              instance.initKeycloak((authenticated) => {
-                if (!authenticated) {
-                  setAuthError(true);
-                } else {
-                  authenticate(instance, props.store);
-                  publish("FF_AUTH", instance);
-                }
-              });
+              keycloakInitialize();
             }
           }
         })
@@ -139,26 +153,15 @@ const PrivateRoute = React.memo((props) => {
           console.error("Error validating tenant", err);
           setTenantValid(false);
         });
-    } else if (props.store) {
-      if (kcInstance) {
-        authenticate(kcInstance, props.store);
-      } else {
-        let instance = kcServiceInstance();
-        instance.initKeycloak((authenticated) => {
-          if (!authenticated) {
-            setAuthError(true);
-          } else {
-            authenticate(instance, props.store);
-            publish("FF_AUTH", instance);
-          }
-        });
-      }
+    } else {
+      keycloakInitialize();
     }
   }, [tenantId, props.store, dispatch]);
 
   useEffect(() => {
     if (kcInstance) {
-      const lang = kcInstance?.userData?.locale ||
+      const lang =
+        kcInstance?.userData?.locale ||
         tenant?.tenantData?.details?.locale ||
         selectedLanguage;
       dispatch(setLanguage(lang));
@@ -238,7 +241,7 @@ const PrivateRoute = React.memo((props) => {
   );
 
   if (!tenantValid) {
-    return <NotFound/>;
+    return <NotFound />;
   }
 
   return (
@@ -310,4 +313,4 @@ const PrivateRoute = React.memo((props) => {
   );
 });
 
-export default PrivateRoute;
\ No newline at end of file
+export default PrivateRoute;