Review changes

mock-relying-party-ui-telecom/.env

@@ -1,2 +1,3 @@
 
-REACT_APP_TOAST_TIMEOUT_IN_SEC=5
+REACT_APP_TOAST_TIMEOUT_IN_SEC=5
+REACT_APP_DEFAULT_LANGUAGE="en"

mock-relying-party-ui-telecom/README.md

@@ -27,12 +27,23 @@ The application run on PORT=5000 by default.
   - CLIENT_ID: Relying Party client Id, that is registered with MOSIP (Example:health-services)
   - ACRS: Value that needs to be passed into authorize acr_values parameter (Example:mosip:esignet:acr:generated-code)
   - PRIVATE_KEY: Private key corresponding to the public key of registered Relying Party Client
+  - MAX_AGE: Represents the maximum amount of time, in seconds, that a cached resource should be considered fresh or valid before it needs to be revalidated with the origin server.
+  (Example:max_age:21)
+  - DISPLAY: This property specifies how the authorization server should display the authentication and consent page to the end-user.
+  Possible values are page, popup, wap, touch 
+  (Exapmle: display:page)
+  - PROMPT: This property specifies the type of prompt to be used during the authentication flow.
+  (Exapmle: prompt:consent)
+  - GRANT_TYPE: This property specifies the OAuth 2.0 grant type that the client will use to request access tokens. (Example: grant_type: authorization_code)
+  - SIGN_IN_BUTTON_PLUGIN_URL: Sign in button url.
+  - SCOPE_USER_PROFILE: List of scopes that are requested when initiating an authentication request.
+  (Example: scope_user_profile: openid%20profile%20resident-service)
 
 - Build and run Docker for a service:
 
   ```
   $ docker build -t <dockerImageName>:<tag> .
-  $ docker run -it -d -p 5000:5000 -e ESIGNET_UI_BASE_URL='http://localhost:3000' -e MOCK_RELYING_PARTY_BASE_URL=http://localhost:8888 -e  REDIRECT_URI=http://localhost:5000/userprofile -e CLIENT_ID=healthservices -e ACRS="mosip:esignet:acr:static-code" -e PRIVATE_KEY='-----BEGIN PRIVATE KEY-----\nMIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCoUPbvrrOxtxAt\nR2rCmSrSjZjyvpLklB8wxCqWQJ5wuvw1j7SEvMFds9QeYpomO/GVZNYGbWuBwQEG\nWdBll9ZdI02H5hjNzZi3SFcv+N+OHFh5RHNnkeLtIuA684BJHkJNL19LcQlb+u1G\nWeqyPCk3rdDNPZYBJBcS4i1BF3SF2gW9nsvxS+xOB12l1Dubntfs1AXhSgZvy5oe\nhgJIDhy7BbqJEJPfbcOAQE8GlnjxjSY3Ja0m9YD2MT3V93DSz0OLyLQjnMs+FJQc\nRpFDupHSSa3QerEXwxqHmXyH0RZJmH1oZizdEImdgXRjgfy98a6ZwU2p43WSg1LR\nrIZU+HC7AgMBAAECggEAAnaE1ocI7B3Qp8j2v/g7zy7xQQQW5C9isXT9Zot1hhLG\nZAZBTvvwHG3oObWZqduQsm3yT8/EFfb8C9q+mO363gwJM2bjkAdlJ7FwTSxoIQ07\nIjMlOSvCVVQAUfyEMQ23TKfXziPOTkFCvZfNPmRw+faaKpavHj8n80fJ/7zXIKpE\n/Z7+izLhGmos7LgofZRqxYMcq6RznR7w9FQPsdnspC3EPudrwV+HBAEuqOMfN+Zs\n2bVqKbOz0z8WzQ7K1+bhX93flBqlO3lVNXHK+Oov3DmTG4SIxaim30vM5oijaD+q\nsXYq1r34GRtcEZ26qx3iCdFd5o9sBgA6EMQ8iOWfMQKBgQDUT87IQWNPBBzWoANf\nKR4iR4wc9f4O1uZFnJ5Ec8EBscUvccYErQ3YHxcmycpbLWRijgNnCYsDXVU7uFsm\no7pV1Qn95o8TDHbr+F/mmKq/UMuMjvUmZc93pKMADlsw7aXRHlzuggIH2nAkRUi3\nrCYdmrXWwTyJ8f0cFIlS/EQAaQKBgQDK845NT/ZqOUqJdAq7aoTjC41ER6CFMSxR\nO215g8kaeYbnRlzNcyqxk9PTEEadoHvZyAdYxRfdLU22zE0ImN2Y5Jfi0wRJYT+C\nj3q1sORezw65qB/CKwgMnE9Tiu9fHbrlpeb+lIBEnIFiAoPwOOOMzhXzUxOtlT7r\n/v4Dy3MDgwKBgQCtat7Rba+LTCWuHZeDdBd8Eorc4QV644fFlm8kJJSjKKyS21DO\nYvgq7wI/GZZjMUmMwsj+sanNvr+u/x/dCOFb2J7HuDpnacf9aKwUs+DMUldg4ShX\nC9QRuvW1RwSvi33kuPNZkfHMrlzpE3qZJFEh30vmNYKYfoOrGw8sLIfy+QKBgHGU\nTo478vbNq0YzmBH88fOyslOFFnOT6m5nqMO5miFj47io6yTbkAgjaAeV8z8h4k4m\nIN5wJwPT58smmPH3wwRe4hXB7IM4lnd13sGyBox8qowCaAudU3rjO43QklgT5lXB\nO/47k3FSeSIlsDsPS2GwsB4l3zxk6vreEMCE6pALAoGAZ6vITL4uljwBE3Wv+czJ\nEYiOzmnRLK3TwcNx2E1i4gLi8Fj2NUtXAU2BXEa9oW8Zh+b95X0GjgLJamjZi1cH\nU9ByKn/LBzASbvK5q2fLEsOWWigAUKfO6ecmc8MVniS4GJ+WGsUHcsC3usO4clm0\nWxOiTQVUZ7xZxXwy6DOFLFg=\n-----END PRIVATE KEY-----' <dockerImageName>:<tag>
+  $ docker run -it -d -p 5000:5000 -e ESIGNET_UI_BASE_URL='http://localhost:3000' -e MOCK_RELYING_PARTY_BASE_URL=http://localhost:8888 -e REDIRECT_URI=http://localhost:5000/userprofile -e CLIENT_ID=healthservices -e ACRS="mosip:esignet:acr:static-code" -e MAX_AGE=21 -e DISPLAY=page -e PROMPT=consent -e GRANT_TYPE=authorization_code -e SIGN_IN_BUTTON_PLUGIN_URL='http://127.0.0.1:5500/dist/iife/index.js' -e SCOPE_USER_PROFILE='openid%20profile%20resident-service' -e PRIVATE_KEY='-----BEGIN PRIVATE KEY-----\nMIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCoUPbvrrOxtxAt\nR2rCmSrSjZjyvpLklB8wxCqWQJ5wuvw1j7SEvMFds9QeYpomO/GVZNYGbWuBwQEG\nWdBll9ZdI02H5hjNzZi3SFcv+N+OHFh5RHNnkeLtIuA684BJHkJNL19LcQlb+u1G\nWeqyPCk3rdDNPZYBJBcS4i1BF3SF2gW9nsvxS+xOB12l1Dubntfs1AXhSgZvy5oe\nhgJIDhy7BbqJEJPfbcOAQE8GlnjxjSY3Ja0m9YD2MT3V93DSz0OLyLQjnMs+FJQc\nRpFDupHSSa3QerEXwxqHmXyH0RZJmH1oZizdEImdgXRjgfy98a6ZwU2p43WSg1LR\nrIZU+HC7AgMBAAECggEAAnaE1ocI7B3Qp8j2v/g7zy7xQQQW5C9isXT9Zot1hhLG\nZAZBTvvwHG3oObWZqduQsm3yT8/EFfb8C9q+mO363gwJM2bjkAdlJ7FwTSxoIQ07\nIjMlOSvCVVQAUfyEMQ23TKfXziPOTkFCvZfNPmRw+faaKpavHj8n80fJ/7zXIKpE\n/Z7+izLhGmos7LgofZRqxYMcq6RznR7w9FQPsdnspC3EPudrwV+HBAEuqOMfN+Zs\n2bVqKbOz0z8WzQ7K1+bhX93flBqlO3lVNXHK+Oov3DmTG4SIxaim30vM5oijaD+q\nsXYq1r34GRtcEZ26qx3iCdFd5o9sBgA6EMQ8iOWfMQKBgQDUT87IQWNPBBzWoANf\nKR4iR4wc9f4O1uZFnJ5Ec8EBscUvccYErQ3YHxcmycpbLWRijgNnCYsDXVU7uFsm\no7pV1Qn95o8TDHbr+F/mmKq/UMuMjvUmZc93pKMADlsw7aXRHlzuggIH2nAkRUi3\nrCYdmrXWwTyJ8f0cFIlS/EQAaQKBgQDK845NT/ZqOUqJdAq7aoTjC41ER6CFMSxR\nO215g8kaeYbnRlzNcyqxk9PTEEadoHvZyAdYxRfdLU22zE0ImN2Y5Jfi0wRJYT+C\nj3q1sORezw65qB/CKwgMnE9Tiu9fHbrlpeb+lIBEnIFiAoPwOOOMzhXzUxOtlT7r\n/v4Dy3MDgwKBgQCtat7Rba+LTCWuHZeDdBd8Eorc4QV644fFlm8kJJSjKKyS21DO\nYvgq7wI/GZZjMUmMwsj+sanNvr+u/x/dCOFb2J7HuDpnacf9aKwUs+DMUldg4ShX\nC9QRuvW1RwSvi33kuPNZkfHMrlzpE3qZJFEh30vmNYKYfoOrGw8sLIfy+QKBgHGU\nTo478vbNq0YzmBH88fOyslOFFnOT6m5nqMO5miFj47io6yTbkAgjaAeV8z8h4k4m\nIN5wJwPT58smmPH3wwRe4hXB7IM4lnd13sGyBox8qowCaAudU3rjO43QklgT5lXB\nO/47k3FSeSIlsDsPS2GwsB4l3zxk6vreEMCE6pALAoGAZ6vITL4uljwBE3Wv+czJ\nEYiOzmnRLK3TwcNx2E1i4gLi8Fj2NUtXAU2BXEa9oW8Zh+b95X0GjgLJamjZi1cH\nU9ByKn/LBzASbvK5q2fLEsOWWigAUKfO6ecmc8MVniS4GJ+WGsUHcsC3usO4clm0\nWxOiTQVUZ7xZxXwy6DOFLFg=\n-----END PRIVATE KEY-----' <dockerImageName>:<tag>
   ```
 
   To host mock relying party ui on a context path:

mock-relying-party-ui-telecom/public/env-config.js

@@ -1,8 +1,8 @@
 window._env_ = {
   ESIGNET_UI_BASE_URL: "http://localhost:3000",
   MOCK_RELYING_PARTY_SERVER_URL: "http://localhost:5000/mock-relying-party-server",
-  REDIRECT_URI_USER_PROFILE: "http://localhost:5000/userprofile",
-  REDIRECT_URI: "http://localhost:5000/userprofile",
+  REDIRECT_URI_SIM_REGISTRATION_COMPLETED: "http://localhost:5000/sim-registration-completed",
+  REDIRECT_URI: "http://localhost:5000/sim-registration-completed",
   CLIENT_ID: "healthservices",
   ACRS: "mosip:idp:acr:generated-code%20mosip:idp:acr:biometrics%20mosip:idp:acr:static-code",
   SCOPE_USER_PROFILE: "openid%20profile%20resident-service",

mock-relying-party-ui-telecom/public/index.html

@@ -3,6 +3,7 @@
   <head>
     <script src="%PUBLIC_URL%/env-config.js"></script>
     <script src="%PUBLIC_URL%/plugin-config.js" defer></script>
+    <script id="sign-in-plugin-placeholder"></script>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />

mock-relying-party-ui-telecom/public/locales/ar.json

@@ -7,7 +7,7 @@
     "help": "يساعد",
     "language": "لغة"
   },
-  "userprofile": {
+  "simRegistrationCompleted": {
     "welcome_msg": "مرحباً",
     "loading_msg": "تحميل! انتظر من فضلك...",
     "profile_picture": "الصوره الشخصيه",
@@ -19,9 +19,6 @@
     "fetch_details": "قم بالتسجيل للحصول على بطاقة SIM الإلكترونية باستخدام بطاقة الهوية الوطنية"
   },
   "error": {
-    "sign_in_failed": "المصادقة فشلت! حاول تسجيل الدخول باستخدام e-Signet",
-    "sign_up_failed": "فشل انشاء الحساب! حاول تسجيل الدخول باستخدام e-Signet",
-    "invalid_details": "تفاصيل غير صحيحة! حاول جلب التفاصيل من e-Signet",
     "authCode_missing": "AuthCode مفقود",
     "no_response_msg": "لا يوجد رد",
     "no_devices_found_msg": "لم يتم العثور علي الجهاز. يرجى التحقق من الاتصال وإعادة المحاولة.",

mock-relying-party-ui-telecom/public/locales/en.json

@@ -7,7 +7,7 @@
     "help": "Help",
     "language": "Language"
   },
-  "userprofile": {
+  "simRegistrationCompleted": {
     "welcome_msg": "Welcome",
     "loading_msg": "Loading! Please wait...",
     "profile_picture": "profile picture",
@@ -19,9 +19,6 @@
     "fetch_details": "Register for e-SIM Using National ID"
   },
   "errors": {
-    "sign_in_failed": "Authentication failed! Try sign in with e-Signet",
-    "sign_up_failed": "Sign Up failed! Try sign in with e-Signet",
-    "invalid_details": "Invalid details! Try fetching details from e-Signet",
     "authCode_missing": "AuthCode Missing",
     "no_response_msg": "No Response",
     "no_devices_found_msg": "Device Not Found. Please Check the Connectivity and Retry.",

mock-relying-party-ui-telecom/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "MOSIP - Mock Relying Party Health Portal",
-  "name": "MOSIP - Mock Relying Party Health Portal",
+  "short_name": "MOSIP - Mock Relying Party Telecom",
+  "name": "MOSIP - Mock Relying Party Telecom",
   "icons": [
     {
       "src": "favicon.ico",

mock-relying-party-ui-telecom/public/plugin-config.js

@@ -1,5 +1,5 @@
 (function () {
-    var script = document.createElement('script');
-    script.src = window._env_.SIGN_IN_BUTTON_PLUGIN_URL;
-    document.head.appendChild(script);
+  var script = document.createElement("script");
+  script.src = window._env_.SIGN_IN_BUTTON_PLUGIN_URL;
+  document.head.replaceChild(script, document.getElementById("sign-in-plugin-placeholder"));
 })();

mock-relying-party-ui-telecom/src/App.css

@@ -0,0 +1,23 @@
+.backgroundColor {
+  background-color: #f7fbfc;
+}
+
+.buttonColor {
+  color: #1c1c1c;
+}
+
+.buttonColor:hover {
+  color: #014ae7;
+}
+
+.primaryTextColor {
+  color: #2c2c2c;
+}
+
+.secondaryTextColor {
+  color: #764b00;
+}
+
+.secondaryBackgroundColor {
+  background-color: #fffaf0;
+}

mock-relying-party-ui-telecom/src/App.js

@@ -7,7 +7,7 @@ import { useTranslation } from "react-i18next";
 import { useEffect, useState } from "react";
 import langConfigService from "./services/langConfigService";
 import Background from "./components/Background";
-import UserProfilePage from "./pages/UserProfile";
+import SimRegistrationCompletedPage from "./pages/SimRegistrationCompleted";
 
 function App() {
   const { i18n } = useTranslation();
@@ -49,8 +49,8 @@ function App() {
       <BrowserRouter>
         <Routes>
           <Route path={process.env.PUBLIC_URL + "/"} element={<Background langOptions={langOptions} />} />
+          <Route path={process.env.PUBLIC_URL + "/sim-registration-completed"} element={<SimRegistrationCompletedPage langOptions={langOptions} />} />
           <Route path={process.env.PUBLIC_URL + "/sim-register"} element={<RegistrationPage langOptions={langOptions} />} />
-          <Route path={process.env.PUBLIC_URL + "/userprofile"} element={<UserProfilePage langOptions={langOptions} />} />
         </Routes>
       </BrowserRouter>
       <ToastContainer position="top-center" hideProgressBar={true} pauseOnHover={false} draggable={false} />

mock-relying-party-ui-telecom/src/components/Background.js

@@ -1,6 +1,5 @@
 import { useTranslation } from "react-i18next";
 import NavHeader from "./NavHeader";
-import themes from "../components/theme.json"
 
 export default function Background({
   component,
@@ -15,12 +14,12 @@ export default function Background({
     <>
       <section className="flex flex-col h-screen">
         <NavHeader langOptions={langOptions} />
-        <div className="flex flex-grow md:flex-row flex-col h-fit" style={{ backgroundColor: themes.colors.backgroundColor }}>
+        <div className="flex flex-grow md:flex-row flex-col h-fit backgroundColor">
           <div className="flex flex-col md:w-1/2">
             <div className="h-3/5 mt-5 flex justify-center h-96">
               <img
                 alt="util"
-                src={themes.images.telecomBackground}
+                src="images/backgroundImage.png"
               />
             </div>
           </div>

mock-relying-party-ui-telecom/src/components/NavHeader.js

@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import Select from "react-select";
-import themes from "../components/theme.json"
 
 export default function NavHeader({ langOptions, i18nKeyPrefix = "background" }) {
   const { t, i18n } = useTranslation("translation", {
@@ -48,8 +47,6 @@ export default function NavHeader({ langOptions, i18nKeyPrefix = "background" })
     { label: "help", url: "#" },
   ];
 
-  const telecomLogo = process.env.REACT_APP_TELECOM_LOGO_URL;
-
   return (
     <nav className="bg-white border-gray-500">
       <div className="flex items-center grid grid-cols-3 md:order-2 justify-center mb-2 mt-2">
@@ -68,14 +65,14 @@ export default function NavHeader({ langOptions, i18nKeyPrefix = "background" })
       </div>
       <div className="bg-[#FFFFFF] shadow-lg border-[#707070] px-2 sm:px-4 py-3">
         <div className="flex items-center">
-          <img src={themes.images.telecomLogo} alt={t("fastline")} className="ml-8 mr-8" />
+          <img src="images/company_logo.png" alt={t("fastline")} className="ml-8 mr-8" />
           <div className="flex w-full justify-end space-x-8 ml-8 mr-8 text-xl font-medium">
             {navList.map((nav) => {
               return (
                 <div key={nav.label}>
                   <a
                     href={process.env.PUBLIC_URL + nav.url}
-                    className="text-[#1C1C1C] hover:text-[#014AE7]"
+                    className="buttonColor buttonColor:hover"
                     aria-current="page"
                   >
                     {t(nav.label)}

mock-relying-party-ui-telecom/src/components/Registration.js

@@ -135,7 +135,7 @@ export default function Registration({
           {t("new_sim")}
         </h1>
         <div className="flex items-center justify-center">
-          <img src="../images/sim.png" alt={t("sim")} />
+          <img src="images/sim_image.png" alt={t("sim")} className="object-contain rtl:scale-x-[-1]" />
         </div>
         <div id="sign-in-with-esignet" className="flex items-center justify-center"></div>
 

mock-relying-party-ui-telecom/src/components/UserProfile.js → mock-relying-party-ui-telecom/src/components/SimRegistrationCompleted.js

@@ -6,9 +6,9 @@ import { LoadingStates as states } from "../constants/states";
 import LoadingIndicator from "../common/LoadingIndicator";
 import { useTranslation } from "react-i18next";
 
-export default function UserProfile({
+export default function SimRegistrationCompleted({
   relyingPartyService,
-  i18nKeyPrefix = "userprofile",
+  i18nKeyPrefix = "simRegistrationCompleted",
 }) {
   const { t } = useTranslation("translation", {
     keyPrefix: i18nKeyPrefix,
@@ -44,7 +44,7 @@ export default function UserProfile({
       }
     };
     getSearchParams();
-    
+
   }, []);
 
   //Handle Login API Integration here
@@ -95,10 +95,10 @@ export default function UserProfile({
                 }
               />
             </div>
-            <div className="p-2 m-8 text-center bg-[#FFFAF0] rounded-md text-[#764B00] font-medium justify-center">
+            <div className="p-2 m-8 text-center rounded-md font-medium justify-center secondaryBackgroundColor secondaryTextColor">
               {t("telecom_msg")}
             </div>
-            <div className="flex text-center justify-center text-[#2C2C2C]">
+            <div className={"flex text-center justify-center primaryTextColor"}>
               <p dangerouslySetInnerHTML={{ __html: t("further_steps") }}></p>
             </div>
           </>

mock-relying-party-ui-telecom/src/i18n.js

@@ -13,7 +13,7 @@ i18n
   // init i18next
   .init({
     debug: false,
-    fallbackLng: "en", //window["envConfigs"].defaultLang, //default language
+    fallbackLng: process.env.REACT_APP_DEFAULT_LANGUAGE, //window["envConfigs"].defaultLang, //default language
     interpolation: {
       escapeValue: false, // not needed for react as it escapes by default
     },

mock-relying-party-ui-telecom/src/pages/UserProfile.js → mock-relying-party-ui-telecom/src/pages/SimRegistrationCompleted.js

@@ -1,12 +1,12 @@
 import React from "react";
 import relyingPartyService from "../services/relyingPartyService";
-import UserProfile from "../components/UserProfile";
 import Background from "../components/Background";
+import SimRegistrationCompleted from "../components/SimRegistrationCompleted";
 
-export default function UserProfilePage({ langOptions }) {
+export default function SimRegistrationCpmpletedPage({ langOptions }) {
   return (
     <Background
-      component={React.createElement(UserProfile, {
+      component={React.createElement(SimRegistrationCompleted, {
         relyingPartyService: relyingPartyService,
       })}
       langOptions={langOptions}