Merge pull request #2091 from abilpraju-aot/feature/FWF-3280-landing-…

…page

Route for checking multitenant login

forms-flow-web/src/apiManager/endpoints/index.js

@@ -78,6 +78,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;

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);
+};

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>

forms-flow-web/src/components/MultiTenant/LandingPage.js

@@ -0,0 +1,81 @@
+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 = (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"
+        />
+      </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">{t("Enter your Tenant Name")}</h1>
+          <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"
+                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
+              type="submit"
+              className="btn btn-primary btnTenant"
+              disabled={!username}
+            >
+              {t("Proceed to Sign In")}
+            </button>
+          </form>
+          {/* <div className="lineTenant"></div>
+          <div className="supportText">{t("Contact formsflow.ai support")}</div>
+          <div className="supportLink">
+            <a href="/contact">[email protected]</a>
+          </div> */}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LandingPage;

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 />;
+});

forms-flow-web/src/components/MultiTenant/landingPage.css

@@ -0,0 +1,117 @@
+.landing {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  align-items: center;
+}
+
+.imageContainer {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-position: left top;
+  padding: 1rem;
+}
+
+.image {
+  width: 100%;
+  max-width: 700px;
+  object-fit: contain;
+}
+
+.formContainer {
+  width: 100%;
+  max-width: 500px;
+  padding: 5rem;
+  background-color: #f9f9f9;
+  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 {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.logo {
+  max-width: 150px;
+}
+
+.heading {
+  margin-bottom: 20px;
+  font-size: 1.5rem;
+  text-align: center;
+}
+
+.formTenant {
+  width: 100%;
+}
+
+.formGroupTenant {
+  width: 100%;
+  margin-bottom: 20px;
+  text-align: left;
+}
+
+.formLabelTenant {
+  display: block;
+  margin-bottom: 10px;
+  font-size: 1rem;
+  line-height: 1.66666667;
+}
+
+.btnTenant {
+  display: block;
+  width: 100%;
+  margin-bottom: 20px;
+  padding: 6px 10px;
+  font-size: 0.875rem;
+  line-height: 1.3333333;
+  border-radius: 1px;
+}
+
+.lineTenant {
+  width: 100%;
+  height: 1px;
+  background-color: #ccc;
+  margin-bottom: 20px;
+}
+
+.supportText {
+  color: black;
+  text-align: center;
+}
+
+.supportLink {
+  text-align: center;
+}
+
+.supportLink a {
+  color: #007bff;
+  text-decoration: none;
+}
+
+.supportLink a:hover {
+  text-decoration: underline;
+}
+
+@media (min-width: 768px) {
+  .landing {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .imageContainer {
+    flex: 1;
+    max-width: 50%;
+  }
+
+  .formContainer {
+    flex: 1;
+    margin: auto;
+  }
+}