[ES-412] Implemented signup banner to all the login screens

Signed-off-by: GurukiranP <[email protected]>
mosip · Nov 9, 2023 · a114a2c · a114a2c
1 parent fe2ea1b
commit a114a2c
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 5 deletions.
diff --git a/esignet-service/src/main/resources/application-local.properties b/esignet-service/src/main/resources/application-local.properties
@@ -252,14 +252,17 @@ crypto.PrependThumbprint.enable=true
 mosip.esignet.ui.wallet.config={{'wallet.name': 'Inji', 'wallet.logo-url': 'inji_logo.png', 'wallet.download-uri': '#', \
  'wallet.deep-link-uri': 'inji://landing-page-name?linkCode=LINK_CODE&linkExpireDateTime=LINK_EXPIRE_DT' }}
 
+mosip.esignet.ui.signup.config={'signup.banner': true, 'signup.url': 'http://localhost:3000/signup'}
+
 mosip.esignet.ui.config.key-values={'sbi.env': 'Developer', 'sbi.timeout.DISC': 30, \
   'sbi.timeout.DINFO': 30, 'sbi.timeout.CAPTURE': 30, 'sbi.capture.count.face': 1, 'sbi.capture.count.finger': 2, \
   'sbi.capture.count.iris': 1, 'sbi.capture.score.face': 70, 'sbi.capture.score.finger':70, 'sbi.capture.score.iris':70, \
   'send.otp.channels':'email,phone', 'consent.screen.timeout-in-secs':${mosip.esignet.authentication-expire-in-secs}, \
   'consent.screen.timeout-buffer-in-secs': 5, 'sbi.port.range': 4501-4600, 'sbi.bio.subtypes.iris': 'UNKNOWN', 'sbi.bio.subtypes.finger': 'UNKNOWN', \
   'resend.otp.delay.secs': 120, 'captcha.enable': '', 'captcha.sitekey': '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI', \
   'linked-transaction-expire-in-secs': 120, 'wallet.qr-code-buffer-in-secs': 10, 'auth.txnid.length': 10, \
-  'otp.length': 6, 'password.regex': '', 'wallet.qr-code.auto-refresh-limit': 3, 'wallet.config': ${mosip.esignet.ui.wallet.config}}
+  'otp.length': 6, 'password.regex': '', 'wallet.qr-code.auto-refresh-limit': 3, 'wallet.config': ${mosip.esignet.ui.wallet.config}, \
+  'signup.config': ${mosip.esignet.ui.signup.config}}
 
 ##  ---------------------------------------------- VCI ------------------------------------------------------------------
 

diff --git a/oidc-ui/public/locales/ar.json b/oidc-ui/public/locales/ar.json
@@ -132,7 +132,9 @@
     "download_now": "التحميل الان",
     "logo_alt": "e-Signet",
     "backgroud_image_alt": "قم بتسجيل الدخول باستخدام e-Signet",
-    "language": "لغة"
+    "language": "لغة",
+    "noAccount": "ليس لديك حساب؟",
+    "signup_with_one_login": "قم بالتسجيل باستخدام نظام تسجيل الدخول الواحد"
   },
   "tabs": {
     "pin_tab_name": "قم بتسجيل الدخول باستخدام PIN",

diff --git a/oidc-ui/public/locales/en.json b/oidc-ui/public/locales/en.json
@@ -132,7 +132,9 @@
     "download_now": "Download Now",
     "logo_alt": "e-Signet",
     "backgroud_image_alt": "Sign in with e-Signet",
-    "language": "Language"
+    "language": "Language",
+    "noAccount": "Don't have an account?",
+    "signup_with_one_login": "Sign Up with One-Login System"
   },
   "tabs": {
     "pin_tab_name": "Login with PIN",

diff --git a/oidc-ui/src/components/Background.js b/oidc-ui/src/components/Background.js
@@ -1,15 +1,33 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
+import { configurationKeys } from "../constants/clientConstants";
+import { useLocation } from "react-router-dom";
 
 export default function Background({
   heading,
   clientLogoPath,
   clientName,
   component,
   i18nKeyPrefix = "header",
+  oidcService
 }) {
   const { t } = useTranslation("translation", { keyPrefix: i18nKeyPrefix });
 
+  const location = useLocation();
+  const [signupBanner, setSignupBanner] = useState(false);
+  const [signupURL, setSignupURL] = useState("");
+
+  let signupConfig = oidcService.getEsignetConfiguration(
+    configurationKeys.signupConfig
+  );
+
+  useEffect(() => {
+    if(signupConfig?.[configurationKeys.signupBanner]) {
+      setSignupBanner(true);
+      setSignupURL(signupConfig[configurationKeys.signupURL] + location.search + location.hash)
+    }
+  }, []);
+
   return (
     <>
     {/* height is used by subtracting navbar height  */}
@@ -51,6 +69,12 @@ export default function Background({
               ></div>
               {component}
             </div>
+            {/* Enable the signup banner when it is true in the signup.config of oauth-details */}
+            {signupBanner && 
+            <div className="text-center bg-[#FFF9F0] py-3 relative top-4 mt-2">
+              <p className="text-sm">{t("noAccount")}</p>
+              <a className="text-[#2F8EA3] hover:text-sky-600 focus:text-sky-600 font-semibold" href={signupURL} target="_self">{t("signup_with_one_login")}</a>
+            </div>}
           </div>
         </div>
       </section>

diff --git a/oidc-ui/src/constants/clientConstants.js b/oidc-ui/src/constants/clientConstants.js
@@ -76,7 +76,10 @@ const configurationKeys = {
   consentScreenExpireInSec: "consent.screen.timeout-in-secs",
   consentScreenTimeOutBufferInSec: "consent.screen.timeout-buffer-in-secs",
   walletQrCodeAutoRefreshLimit: "wallet.qr-code.auto-refresh-limit",
-  walletConfig: "wallet.config"
+  walletConfig: "wallet.config",
+  signupConfig: "signup.config",
+  signupBanner: "signup.banner",
+  signupURL: "signup.url"
 };
 
 export {

diff --git a/oidc-ui/src/pages/Login.js b/oidc-ui/src/pages/Login.js
@@ -191,6 +191,7 @@ export default function LoginPage({ i18nKeyPrefix = "header" }) {
         clientLogoPath={clientLogoURL}
         clientName={clientName}
         component={compToShow}
+        oidcService={oidcService}
       />
     </>
   );