Merge pull request #502 from GurukiranP/ES_500

[ES-500] moved env variables to config.json file.

oidc-ui/.env

@@ -46,7 +46,3 @@ REACT_APP_WALLET_LOGO_URL=""
 REACT_APP_CONSENT_SCREEN_TIME_OUT_BUFFER_IN_SEC=5
 
 REACT_APP_WALLET_QR_CODE_AUTO_REFRESH_LIMIT=3
-REACT_APP_BACKGROUND_LOGO=false
-REACT_APP_FOOTER=true
-REACT_APP_REMOVE_INDICATOR_PIPE=true
-REACT_APP_NO_OUTLINE_TOGGLE=true

oidc-ui/.env.development

@@ -1,5 +1 @@
-REACT_APP_SBI_ENV=Staging
-REACT_APP_BACKGROUND_LOGO=false
-REACT_APP_FOOTER=true
-REACT_APP_REMOVE_INDICATOR_PIPE=true
-REACT_APP_NO_OUTLINE_TOGGLE=true
+REACT_APP_SBI_ENV=Staging

oidc-ui/.env.production

@@ -1,6 +1,2 @@
 REACT_APP_SBI_ENV=Staging
-REACT_APP_ESIGNET_API_URL=/v1/esignet
-REACT_APP_BACKGROUND_LOGO=false
-REACT_APP_FOOTER=true
-REACT_APP_REMOVE_INDICATOR_PIPE=true
-REACT_APP_NO_OUTLINE_TOGGLE=true
+REACT_APP_ESIGNET_API_URL=/v1/esignet

oidc-ui/README.md

@@ -66,8 +66,14 @@ The application runs on PORT=3000 by default.
   - REACT_APP_WALLET_LOGO_URL: URL for the logo in the wallet QRCode. This feature supports cross-origin-enabled image URLs only.
   - REACT_APP_CONSENT_SCREEN_TIME_OUT_BUFFER_IN_SEC: Buffer time for the consent screen expiry timer.
   - REACT_APP_WALLET_QR_CODE_AUTO_REFRESH_LIMIT: Limit for the QR code auto refresh.
-  - REACT_APP_BACKGROUND_LOGO: Set a logo in the main page, in ledt side of the main card
-  - REACT_APP_FOOTER: Set footer in the main page
+
+- JSON configuration variables
+
+  - username_info_icon: Set info icon next to the username label in the password login.
+  - background_logo: Set a logo in the login and consent page, to the left side of the main card.
+  - footer: Set footer to the bottom of all the pages.
+  - remove_language_indicator_pipe: Remove the indicator pipe next to the language display in the navbar
+  - outline_toggle: Set outline toggler instead of slider toggler.
 
 - Theme based configuration
 

oidc-ui/public/config.json

@@ -1,3 +1,7 @@
 {
-    "username_info_icon": true
+    "username_info_icon": true,
+    "background_logo": false,
+    "footer": true,
+    "remove_language_indicator_pipe": true,
+    "outline_toggle": false
 }

oidc-ui/src/components/Background.js

@@ -1,8 +1,10 @@
 import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { configurationKeys } from "../constants/clientConstants";
-import { getBooleanValue } from "../services/utilService";
+import configService from "../services/configService";
 
+const config = await configService();
+
 export default function Background({
   heading,
   subheading,
@@ -32,7 +34,7 @@ export default function Background({
   // check if background logo is needed or not,
   // create div according to the environment variable
   const backgroundLogoDiv =
-    getBooleanValue("REACT_APP_BACKGROUND_LOGO") ? (
+    config["background_logo"] ? (
       <div className="flex justify-center m-10 lg:mt-20 mb:mt-0 lg:w-1/2 md:w-1/2 md:block sm:w-1/2 sm:block hidden w-5/6 mt-20 mb-10 md:mb-0">
         <img
           className="background-logo object-contain rtl:scale-x-[-1]"

oidc-ui/src/components/Consent.js

@@ -8,7 +8,9 @@ import { LoadingStates, LoadingStates as states } from "../constants/states";
 import FormAction from "./FormAction";
 import langConfigService from "./../services/langConfigService";
 import ModalPopup from "../common/ModalPopup";
-import { getBooleanValue } from "../services/utilService";
+import configService from "../services/configService";
+
+const config = await configService();
 
 export default function Consent({
   authService,
@@ -46,11 +48,9 @@ export default function Consent({
   const [timeLeft, setTimeLeft] = useState(null);
   const [cancelPopup, setCancelPopup] = useState(false);
 
-  const slideToggleClass = getBooleanValue(
-    "REACT_APP_NO_OUTLINE_TOGGLE"
-  )
-    ? "toggle-no-outline"
-    : "toggle-outline";
+  const slideToggleClass = config["outline_toggle"]
+    ? "toggle-outline"
+    : "toggle-no-outline";
 
   const hasAllElement = (mainArray, subArray) =>
     subArray.every((ele) => mainArray.includes(ele));
@@ -407,7 +407,7 @@ export default function Consent({
   // check if background logo is needed or not,
   // create div according to the environment variable
   const backgroundLogoDiv =
-    getBooleanValue("REACT_APP_BACKGROUND_LOGO") ? (
+    config["background_logo"] ? (
       <div className="flex justify-center m-10 lg:mt-20 mb:mt-0 lg:w-1/2 md:w-1/2 md:block sm:w-1/2 sm:block hidden w-5/6 mt-20 mb-10 md:mb-0">
         <img
           className="background-logo object-contain rtl:scale-x-[-1]"

oidc-ui/src/components/EsignetDetails.js

@@ -1,7 +1,9 @@
 import { useTranslation } from "react-i18next";
 import { useEffect, useState } from "react";
 import { LoadingStates as states } from "../constants/states";
-import { getBooleanValue } from "../services/utilService";
+import configService from "../services/configService";
+
+const config = await configService();
 
 export default function EsignetDetails({ i18nKeyPrefix = "esignetDetails" }) {
   const { t } = useTranslation("translation", { keyPrefix: i18nKeyPrefix });
@@ -31,7 +33,7 @@ export default function EsignetDetails({ i18nKeyPrefix = "esignetDetails" }) {
   // check if background logo is needed or not,
   // create div according to the environment variable
   const backgroundLogoDiv =
-    getBooleanValue("REACT_APP_BACKGROUND_LOGO") ? (
+    config["background_logo"] ? (
       <div className="flex justify-center m-10 lg:mt-20 mb:mt-0 lg:w-1/2 md:w-1/2 md:block sm:w-1/2 sm:block hidden w-5/6 mt-20 mb-10 md:mb-0">
         <img
           className="background-logo object-contain rtl:scale-x-[-1]"

oidc-ui/src/components/Footer.js

@@ -1,14 +1,15 @@
 import { useTranslation } from "react-i18next";
-import { getBooleanValue } from "../services/utilService";
+import configService from "../services/configService";
+
+const config = await configService();
 
 export default function Footer({ i18nKeyPrefix = "footer" }) {
-  const footerCheck = getBooleanValue("REACT_APP_FOOTER");
 
   const { t } = useTranslation("translation", {
     keyPrefix: i18nKeyPrefix,
   });
 
-  return footerCheck && (
+  return config["footer"] && (
     <footer className="footer-container flex w-full flex-row flex-wrap items-center justify-center gap-y-6 gap-x-1 border border-blue-gray-50 text-center">
       {t("powered_by")}
       <img className="footer-brand-logo" alt={t("logo_alt")} />

oidc-ui/src/components/L1Biometrics.js

@@ -11,7 +11,6 @@ import InputWithImage from "./InputWithImage";
 import ErrorIndicator from "../common/ErrorIndicator";
 import { useTranslation } from "react-i18next";
 import { init, propChange } from "secure-biometric-interface-integrator";
-import { getBooleanValue } from "../services/utilService";
 
 let fieldsState = {};
 

oidc-ui/src/components/LoginQRCode.js

@@ -9,7 +9,6 @@ import {
   walletConfigKeys,
 } from "../constants/clientConstants";
 import { LoadingStates as states } from "../constants/states";
-import { getBooleanValue } from "../services/utilService";
 
 var linkAuthTriggered = false;
 

oidc-ui/src/components/NavHeader.js

@@ -1,7 +1,9 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Select from "react-select";
-import { getBooleanValue } from "../services/utilService";
+import configService from "../services/configService";
+
+const config = await configService();
 
 export default function NavHeader({ langOptions, i18nKeyPrefix = "header" }) {
   const { t, i18n } = useTranslation("translation", {
@@ -13,14 +15,12 @@ export default function NavHeader({ langOptions, i18nKeyPrefix = "header" }) {
     i18n.changeLanguage(e.value);
   };
 
-  const removeIndicatorPipe = getBooleanValue("REACT_APP_REMOVE_INDICATOR_PIPE");
-
   const customStyles = {
       control: (base) => ({
         ...base,
         border: 0,
       }),
-      ...(removeIndicatorPipe && {
+      ...(config["remove_language_indicator_pipe"] && {
         valueContainer: (base) => ({
           ...base,
           padding: 0,

oidc-ui/src/components/Otp.js

@@ -2,7 +2,6 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import OtpGet from "./OtpGet";
 import OtpVerify from "./OtpVerify";
-import { getBooleanValue } from "../services/utilService";
 
 const OTPStatusEnum = {
   getOtp: "GETOTP",

oidc-ui/src/components/Password.js

@@ -15,7 +15,6 @@ import FormAction from "./FormAction";
 import InputWithImage from "./InputWithImage";
 import ReCAPTCHA from "react-google-recaptcha";
 import ErrorBanner from "../common/ErrorBanner";
-import { getBooleanValue } from "../services/utilService";
 
 const fields = passwordFields;
 let fieldsState = {};

oidc-ui/src/components/Pin.js

@@ -12,7 +12,6 @@ import { otpFields } from "../constants/formFields";
 import { LoadingStates as states } from "../constants/states";
 import FormAction from "./FormAction";
 import Input from "./Input";
-import { getBooleanValue } from "../services/utilService";
 
 const fields = otpFields;
 let fieldsState = {};