[ES-2256] Modified Subheading as per need

apitest/pom.xml

@@ -388,7 +388,7 @@
 		<dependency>
 			<groupId>io.mosip.testrig.apirig.apitest.commons</groupId>
 			<artifactId>apitest-commons</artifactId>
-			<version>1.2.0.1-SNAPSHOT</version>
+			<version>1.2.0.1</version>
 		</dependency>
 
 	</dependencies>

oidc-ui/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:12.18.4-alpine as build_esignet_ui
+FROM node:18-alpine as build_esignet_ui
 
 ARG sign_in_with_esignet_plugin_url
 ENV SIGN_IN_WITH_ESIGNET_PLUGIN_URL=$sign_in_with_esignet_plugin_url

oidc-ui/public/locales/ar.json

@@ -141,7 +141,7 @@
   },
   "header": {
     "login_heading": "تسجيل الدخول",
-    "login_subheading": "الرجاء إدخال اسم المستخدم وكلمة المرور المسجلين لديك",
+    "login_subheading": "<strong>{{clientName}}</strong> يطلب المصادقة.",
     "login_linkName": "التسجيل المسبق",
     "more_ways_to_sign_in": "المزيد من الطرق لتسجيل الدخول",
     "invalid_auth_factor": "عوامل المصادقة غير صالحة. حاول مرة اخرى...",

oidc-ui/public/locales/en.json

@@ -142,7 +142,7 @@
   },
   "header": {
     "login_heading": "Login",
-    "login_subheading": "Please enter your registered username and password",
+    "login_subheading": "<strong>{{clientName}}</strong> is requesting authentication",
     "login_linkName": "Preregister",
     "more_ways_to_sign_in": "More Ways to Login",
     "invalid_auth_factor": "Invalid Auth Factors. Please Try Again...",

oidc-ui/public/locales/hi.json

@@ -142,7 +142,7 @@
   },
   "header": {
     "login_heading": "ईसिग्नेट से लॉगिन करें",
-    "login_subheading": "कृपया अपना पंजीकृत उपयोगकर्ता नाम और पासवर्ड दर्ज करें",
+    "login_subheading": "<strong>{{clientName}}</strong> प्रमाणीकरण का अनुरोध कर रहा है।",
     "login_linkName": "पूर्व-पंजीकरण",
     "more_ways_to_sign_in": "साइन इन करने के और तरीके",
     "invalid_auth_factor": "अमान्य प्रमाणीकरण कारक. कृपया पुन: प्रयास करें...",

oidc-ui/public/locales/km.json

@@ -142,7 +142,7 @@
   },
   "header": {
     "login_heading": "ចូលដោយប្រើ eSignet",
-    "login_subheading": "សូមបញ្ចូលឈ្មោះអ្នកប្រើប្រាស់ និងពាក្យសម្ងាត់ដែលបានចុះឈ្មោះរបស់អ្នក។",
+    "login_subheading": "<strong>{{clientName}}</strong> កំពុងស្នើសុំការផ្ទៀងផ្ទាត់ភាពត្រឹមត្រូវ។",
     "login_linkName": "ចុះឈ្មោះជាមុន",
     "more_ways_to_sign_in": "វិធីច្រើនទៀតដើម្បីចូល",
     "invalid_auth_factor": "កត្តាផ្ទៀងផ្ទាត់មិនត្រឹមត្រូវ។ សូមព្យាយាមម្តងទៀត...",

oidc-ui/public/locales/kn.json

@@ -142,7 +142,7 @@
   },
   "header": {
     "login_heading": "ಇಸಿಗ್ನೆಟ್ ಮೂಲಕ ಲಾಗಿನ್ ಮಾಡಿ",
-    "login_subheading": "ದಯವಿಟ್ಟು ನಿಮ್ಮ ನೋಂದಾಯಿತ ಬಳಕೆದಾರಹೆಸರು ಮತ್ತು ಪಾಸ್‌ವರ್ಡ್ ಅನ್ನು ನಮೂದಿಸಿ",
+    "login_subheading": "<strong>{{clientName}}</strong> ದೃಢೀಕರಣವನ್ನು ವಿನಂತಿಸುತ್ತಿದೆ.",
     "login_linkName": "ಮುಂಚಿತವಾಗಿ ನೋಂದಾಯಿಸಿ",
     "more_ways_to_sign_in": "ಸೈನ್ ಇನ್ ಮಾಡಲು ಇನ್ನಷ್ಟು ಮಾರ್ಗಗಳು",
     "invalid_auth_factor": "ಅಮಾನ್ಯವಾದ ದೃಢೀಕರಣ ಅಂಶಗಳು ದಯವಿಟ್ಟು ಪುನಃ ಪ್ರಯತ್ನಿಸಿ...",

oidc-ui/public/locales/ta.json

@@ -142,7 +142,7 @@
   },
   "header": {
     "login_heading": "eSignet மூலம் உள்நுழையவும்",
-    "login_subheading": "உங்கள் பதிவு செய்யப்பட்ட பயனர்பெயர் மற்றும் கடவுச்சொல்லை உள்ளிடவும்",
+    "login_subheading": "<strong>{{clientName}}</strong> அங்கீகாரத்தைக் கோருகிறது.",
     "login_linkName": "முன்பதிவு",
     "more_ways_to_sign_in": "உள்நுழைவதற்கான கூடுதல் வழிகள்",
     "invalid_auth_factor": "தவறான அங்கீகார காரணிகள் தயவுசெய்து மீண்டும் முயற்சி செய்க...",

oidc-ui/src/components/Background.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
-import { useTranslation } from "react-i18next";
+import { useTranslation, Trans } from "react-i18next";
 import { configurationKeys } from "../constants/clientConstants";
-  
+
 export default function Background({
   heading,
   subheading,
@@ -22,7 +22,7 @@ export default function Background({
   );
 
   useEffect(() => {
-    if(signupConfig?.[configurationKeys.signupBanner]) {
+    if (signupConfig?.[configurationKeys.signupBanner]) {
       setSignupBanner(true);
       setSignupURL(signupConfig[configurationKeys.signupURL] + "#" + authService.getAuthorizeQueryParam());
     }
@@ -48,7 +48,9 @@ export default function Background({
           <h1 className="flex text-center justify-center title-font sm:text-base text-base mb-3 font-medium text-gray-900">
             {heading}
           </h1>
-          <h1 className="flex text-center justify-center title-font sm:text-base text-base mb-3 font-small text-gray-400">{subheading}</h1>
+          <h1 className="text-center justify-center title-font sm:text-base text-base mb-3 font-small text-gray-400">
+            <Trans i18nKey="header.login_subheading" values={{ clientName: subheading }} components={{strong: <strong />}} />
+          </h1>
         </div>
         <div className="w-full flex mb-4 justify-center items-center">
           <img
@@ -68,11 +70,11 @@ export default function Background({
         {component}
       </div>
       {/* Enable the signup banner when it is true in the signup.config of oauth-details */}
-      {signupBanner && 
-      <div className="signup-banner">
-        <p className="signup-banner-text">{t("noAccount")}</p>
-        <a className="signup-banner-hyperlink" id="signup-url-button" href={signupURL} target="_self" onClick={() => handleSignup()}>{t("signup_for_unified_login")}</a>
-      </div>}
+      {signupBanner &&
+        <div className="signup-banner">
+          <p className="signup-banner-text">{t("noAccount")}</p>
+          <a className="signup-banner-hyperlink" id="signup-url-button" href={signupURL} target="_self" onClick={() => handleSignup()}>{t("signup_for_unified_login")}</a>
+        </div>}
     </div>
   );
 }

oidc-ui/src/pages/Login.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import Otp from "../components/Otp";
 import Pin from "../components/Pin";
 import { generateFieldData } from "../constants/formFields";
@@ -18,6 +18,7 @@ import openIDConnectService from "../services/openIDConnectService";
 import DefaultError from "../components/DefaultError";
 import Password from "../components/Password";
 import Form from "../components/Form";
+import langConfigService from "./../services/langConfigService";
 
 function InitiateL1Biometrics(openIDConnectService, backButtonDiv) {
   return React.createElement(L1Biometrics, {
@@ -100,7 +101,7 @@ function createDynamicLoginElements(
       "The component " + { authFactorType } + " has not been created yet."
     );
   }
-  
+
   if (authFactorType === validAuthFactors.OTP) {
     return InitiateOtp(oidcService, backButtonDiv);
   }
@@ -120,7 +121,7 @@ function createDynamicLoginElements(
   if (authFactorType === validAuthFactors.KBA) {
     return InitiateForm(oidcService, backButtonDiv);
   }
-  
+
   if (authFactorType === validAuthFactors.WLA) {
     return InitiateLinkedWallet(authFactor, oidcService, backButtonDiv);
   }
@@ -138,6 +139,8 @@ export default function LoginPage({ i18nKeyPrefix = "header" }) {
   const [authFactorType, setAuthFactorType] = useState(null);
   const [searchParams] = useSearchParams();
   const location = useLocation();
+  const [langMap, setLangMap] = useState(null);
+  const firstRender = useRef(true);
 
   var decodeOAuth = Buffer.from(location.hash ?? "", "base64")?.toString();
   var nonce = searchParams.get("nonce");
@@ -147,37 +150,37 @@ export default function LoginPage({ i18nKeyPrefix = "header" }) {
     if (!decodeOAuth) {
       return;
     }
+    const initialize = async () => {
+      const langConfig = await langConfigService.getLangCodeMapping();
+      setLangMap(langConfig);
+    }
+    if (firstRender.current) {
+      firstRender.current = false;
+      initialize();
+      return;
+    }
     loadComponent();
   }, []);
-  
+
   useEffect(() => {
-    if (authFactorType === null) {
-      setSubHeaderText(t("subheader_text.all_login_options"));
-    } else {
-      setSubHeader();
-    }
-  }, [authFactorType, i18n.language]);
 
-  const setSubHeader = () => {
-    if (authFactorType === "OTP") {
-      setSubHeaderText(t("subheader_text.otp_login"));
-    }
-    else if (authFactorType === "BIO") {
-      setSubHeaderText(t("subheader_text.biometrics_login"));
-    }
-    else if (authFactorType === "PIN") {
-      setSubHeaderText(t("subheader_text.pin_login"));
-    }
-    else if (authFactorType === "PWD") {
-      setSubHeaderText(t("subheader_text.password_login"));
-    }
-    else if (authFactorType === "KBA") {
-      setSubHeaderText(t("subheader_text.kba_login"));
-    }
-    else if(authFactorType === "WLA") {
-      setSubHeaderText(t("subheader_text.wallet_login"));
+    if (langMap) {
+      const currLang = i18n.language;
+
+      const currLang2letter = langMap[currLang];
+
+      console.log("useEffect langMap", currLang, currLang2letter);
+
+      let clientNameInLang = "";
+      if (clientName) {
+        clientNameInLang = (currLang in clientName)
+          ? clientName[currLang] : (currLang2letter in clientName)
+            ? clientName[currLang2letter] : clientName['@none'];
+      }
+
+      setSubHeaderText(clientNameInLang);
     }
-  }
+  }, [langMap, clientName, i18n.language]);
 
   let parsedOauth = null;
 
@@ -205,7 +208,7 @@ export default function LoginPage({ i18nKeyPrefix = "header" }) {
       )
     );
   };
-  
+
   const handleBackButtonClick = () => {
     setAuthFactorType(null)
     setCompToShow(InitiateSignInOptions(handleSignInOptionClick, oidcService));