ES-854: Signup portal language code is not configurable , it's hard coded

signup-ui/public/env-config.js

@@ -15,7 +15,8 @@ urlSearchParams.forEach(function (value, key) {
 window._env_ = {
   // Set the default language, if ui_locales available from the URL else set it to khmer.
   DEFAULT_LANG: jsonObject.ui_locales ?? "km",
-  DEFAULT_THEME: '',
-  DEFAULT_FEVICON: 'favicon.ico',
-  DEFAULT_TITLE: 'eSignet-Signup',
+  DEFAULT_THEME: "",
+  DEFAULT_FEVICON: "favicon.ico",
+  DEFAULT_TITLE: "eSignet-Signup",
+  SUPPORTED_LNG: ["en", "km"],
 };

signup-ui/public/locales/default.json

@@ -0,0 +1,15 @@
+{
+  "languages_2Letters": {
+    "km": "ខ្មែរ",
+    "en": "English"
+  },
+  "rtlLanguages": ["ar"],
+  "langCodeMapping": {
+    "khm": "km",
+    "eng": "en"
+  },
+  "langFontMapping": {
+    "en": "font-inter",
+    "km": "font-kantumruypro"
+  }
+}

signup-ui/src/App.tsx

@@ -3,17 +3,24 @@ import { Inspector, InspectParams } from "react-dev-inspector";
 
 import "./App.css";
 
+import { useCallback, useEffect } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useTranslation } from "react-i18next";
 import { BrowserRouter } from "react-router-dom";
 
-import { langFontMapping } from "~constants/language";
 import { HttpError } from "~services/api.service";
+import langConfigService from "~services/langConfig.service";
 
 import { AppRouter } from "./app/AppRouter";
+import {
+  langFontMappingSelector,
+  setLangCodeMappingSelector,
+  setLangFontMappingSelector,
+  setLanguages2LettersSelector,
+  setRtlLanguagesSelector,
+  useLanguageStore,
+} from "./useLanguageStore";
 
-import NavBar from "~components/ui/nav-bar";
-import Footer from "~components/ui/footer";
 // Create a client
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -33,6 +40,55 @@ const queryClient = new QueryClient({
 function App() {
   const isDev = process.env.NODE_ENV === "development";
 
+  const {
+    langFontMapping,
+    setLanguages2Letters,
+    setRtlLanguages,
+    setLangCodeMapping,
+    setLangFontMapping,
+  } = useLanguageStore(
+    useCallback(
+      (state) => ({
+        langFontMapping: langFontMappingSelector(state),
+        setLanguages2Letters: setLanguages2LettersSelector(state),
+        setRtlLanguages: setRtlLanguagesSelector(state),
+        setLangCodeMapping: setLangCodeMappingSelector(state),
+        setLangFontMapping: setLangFontMappingSelector(state),
+      }),
+      []
+    )
+  );
+
+  useEffect(() => {
+    try {
+      langConfigService.getLocaleConfiguration().then((response: any) => {
+        let lookup: { [key: string]: number } = {};
+        let supportedLanguages = response.languages_2Letters;
+        let langData = [];
+        for (let lang in supportedLanguages) {
+          //check to avoid duplication language labels
+          if (!(supportedLanguages[lang] in lookup)) {
+            lookup[supportedLanguages[lang]] = 1;
+            langData.push({
+              label: supportedLanguages[lang],
+              value: lang,
+            });
+          }
+        }
+        setLangCodeMapping(response.langCodeMapping);
+        setLanguages2Letters(response.languages_2Letters);
+        setRtlLanguages(response.rtlLanguages);
+        setLangFontMapping(response.langFontMapping);
+      });
+    } catch (error) {
+      console.error("Failed to load rtl languages!");
+    }
+
+    window.onbeforeunload = function () {
+      return true;
+    };
+  }, []);
+
   const { i18n } = useTranslation();
 
   return (

signup-ui/src/components/language.tsx

@@ -1,14 +1,29 @@
+import { useCallback } from "react";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import { useTranslation } from "react-i18next";
 
 import { ReactComponent as TranslationIcon } from "~assets/svg/translation-icon.svg";
-import { langFontMapping, languages_2Letters } from "~constants/language";
 import { cn } from "~utils/cn";
+import {
+  langFontMappingSelector,
+  languages2LettersSelector,
+  useLanguageStore,
+} from "~/useLanguageStore";
 
 import { Icons } from "./ui/icons";
 
 export const Language = () => {
   const { i18n } = useTranslation();
+  const { languages_2Letters, langFontMapping } = useLanguageStore(
+    useCallback(
+      (state) => ({
+        languages_2Letters: languages2LettersSelector(state),
+        langFontMapping: langFontMappingSelector(state),
+      }),
+      []
+    )
+  );
+
   const ui_locales = "ui_locales";
 
   const handleLanguageChange = (language: string) => {

signup-ui/src/pages/ResetPasswordPage/Otp/Otp.tsx

@@ -34,6 +34,7 @@ import {
   SettingsDto,
   VerifyChallengeRequestDto,
 } from "~typings/types";
+import { langCodeMappingSelector, useLanguageStore } from "~/useLanguageStore";
 
 import { resetPasswordFormDefaultValues } from "../ResetPasswordPage";
 import {
@@ -64,6 +65,16 @@ export const Otp = ({ methods, settings }: OtpProps) => {
       []
     )
   );
+
+  const { langCodeMapping } = useLanguageStore(
+    useCallback(
+      (state) => ({
+        langCodeMapping: langCodeMappingSelector(state),
+      }),
+      []
+    )
+  );
+
   const { trigger, reset, formState, resetField } = methods;
   const [resendAttempts, setResendAttempts] = useState<number>(0);
   const { generateChallengeMutation } = useGenerateChallenge();
@@ -156,7 +167,7 @@ export const Otp = ({ methods, settings }: OtpProps) => {
             }${getValues("username")}`,
             fullname: getValues("fullname"),
             captchaToken: getValues("captchaToken"),
-            locale: getLocale(i18n.language),
+            locale: getLocale(i18n.language, langCodeMapping),
             regenerate: true,
             purpose: "RESET_PASSWORD",
           },

signup-ui/src/pages/ResetPasswordPage/UserInfo/UserInfo.tsx

@@ -43,6 +43,7 @@ import {
   ResetPasswordForm,
   SettingsDto,
 } from "~typings/types";
+import { langCodeMappingSelector, useLanguageStore } from "~/useLanguageStore";
 
 import { resetPasswordFormDefaultValues } from "../ResetPasswordPage";
 import {
@@ -84,6 +85,16 @@ export const UserInfo = ({ settings, methods }: UserInfoProps) => {
       []
     )
   );
+
+  const { langCodeMapping } = useLanguageStore(
+    useCallback(
+      (state) => ({
+        langCodeMapping: langCodeMappingSelector(state),
+      }),
+      []
+    )
+  );
+
   const { generateChallengeMutation } = useGenerateChallenge();
 
   const handleReCaptchaChange = (token: string | null) => {
@@ -130,7 +141,7 @@ export const UserInfo = ({ settings, methods }: UserInfoProps) => {
             }${getValues("username")}`,
             fullname: getValues("fullname"),
             captchaToken: getValues("captchaToken"),
-            locale: getLocale(i18n.language),
+            locale: getLocale(i18n.language, langCodeMapping),
             regenerate: false,
             purpose: "RESET_PASSWORD",
           },

signup-ui/src/pages/SignUpPage/Otp/Otp.tsx

@@ -31,6 +31,7 @@ import {
   SettingsDto,
   VerifyChallengeRequestDto,
 } from "~typings/types";
+import { langCodeMappingSelector, useLanguageStore } from "~/useLanguageStore";
 
 import { SignUpForm, signUpFormDefaultValues } from "../SignUpPage";
 import {
@@ -61,6 +62,14 @@ export const Otp = ({ methods, settings }: OtpProps) => {
       []
     )
   );
+  const { langCodeMapping } = useLanguageStore(
+    useCallback(
+      (state) => ({
+        langCodeMapping: langCodeMappingSelector(state),
+      }),
+      []
+    )
+  );
   const { trigger, reset, resetField, formState } = methods;
   const [resendAttempts, setResendAttempts] = useState<number>(0);
   const { generateChallengeMutation } = useGenerateChallenge();
@@ -153,7 +162,7 @@ export const Otp = ({ methods, settings }: OtpProps) => {
               settings.response.configs["identifier.prefix"]
             }${getValues("phone")}`,
             captchaToken: getValues("captchaToken"),
-            locale: getLocale(i18n.language),
+            locale: getLocale(i18n.language, langCodeMapping),
             regenerate: true,
             purpose: "REGISTRATION",
           },

signup-ui/src/pages/SignUpPage/Phone/Phone.tsx

@@ -39,6 +39,7 @@ import {
   GenerateChallengeRequestDto,
   SettingsDto,
 } from "~typings/types";
+import { langCodeMappingSelector, useLanguageStore } from "~/useLanguageStore";
 
 import { SignUpForm, signUpFormDefaultValues } from "../SignUpPage";
 import {
@@ -63,6 +64,16 @@ export const Phone = ({ settings, methods }: PhoneProps) => {
       []
     )
   );
+
+  const { langCodeMapping } = useLanguageStore(
+    useCallback(
+      (state) => ({
+        langCodeMapping: langCodeMappingSelector(state),
+      }),
+      []
+    )
+  );
+
   const [hasError, setHasError] = useState<boolean>(false);
   const { control, setValue, getValues } = useFormContext();
   const { generateChallengeMutation } = useGenerateChallenge();
@@ -123,7 +134,7 @@ export const Phone = ({ settings, methods }: PhoneProps) => {
               settings.response.configs["identifier.prefix"]
             }${getValues("phone")}`,
             captchaToken: getValues("captchaToken"),
-            locale: getLocale(i18n.language),
+            locale: getLocale(i18n.language, langCodeMapping),
             regenerate: false,
             purpose: "REGISTRATION",
           },

signup-ui/src/services/i18n.service.ts

@@ -4,8 +4,6 @@ import Backend from "i18next-http-backend";
 import ICU from "i18next-icu";
 import { initReactI18next } from "react-i18next";
 
-import { languages_2Letters } from "~constants/language";
-
 if (!localStorage.getItem("esignet-signup-language")) {
   localStorage.setItem(
     "esignet-signup-language",
@@ -34,7 +32,6 @@ i18n
     interpolation: {
       escapeValue: false, // not needed for react as it escapes by default
     },
-    supportedLngs: Object.keys(languages_2Letters),
     backend: {
       loadPath: process.env.PUBLIC_URL + "/locales/{{lng}}.json",
     },

signup-ui/src/services/langConfig.service.ts

@@ -0,0 +1,33 @@
+import axios from "axios";
+
+import { StringMap } from "../constants/types";
+import ILangConfig from "../models/langConfig.model";
+
+const defaultConfigEndpoint = "/locales/default.json";
+
+/**
+ * fetchs and return the locale configuration stored in public folder
+ * @returns json object
+ */
+const getLocaleConfiguration = async (): Promise<ILangConfig> => {
+  const endpoint = process.env.PUBLIC_URL + defaultConfigEndpoint;
+
+  const response = await axios.get(endpoint);
+  return response.data;
+};
+
+const getLangCodeMapping = async (): Promise<StringMap> => {
+  let localConfig: ILangConfig = await getLocaleConfiguration();
+  let reverseMap = Object.entries(localConfig.langCodeMapping).reduce(
+    (pv, [key, value]) => ((pv[value] = key), pv),
+    {} as StringMap
+  );
+  return reverseMap;
+};
+
+const langConfigService = {
+  getLocaleConfiguration,
+  getLangCodeMapping,
+};
+
+export default langConfigService;