Develop (#302)

* MOSIP-32604 added complete side nav

Signed-off-by: Mayura Deshmukh <mayura.deshmukh@gmail.com>

* MOSIP-32943 user profile extracted from response

Signed-off-by: Mayura Deshmukh <mayura.deshmukh@gmail.com>

---------

Signed-off-by: Mayura Deshmukh <mayura.deshmukh@gmail.com>

pmp-reactjs-ui/package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "axios": "^1.6.8",
     "http-proxy-middleware": "^3.0.0",
+    "jwt-decode": "^4.0.0",
     "react": "^18.2.0",
     "react-cookie": "^7.1.4",
     "react-dom": "^18.2.0",

pmp-reactjs-ui/src/pages/Dashboard.js

@@ -1,4 +1,5 @@
 import { useNavigate } from 'react-router-dom';
+import { getUserProfile } from '../services/UserProfileService.js';
 
 function Dashboard() {
 
@@ -12,7 +13,7 @@ function Dashboard() {
     <div className="w-full p-5 bg-anti-flash-white h-fit font-inter">
       <div className="mb-7 mt-4 ml-5 text-xl font-semibold tracking-tight text-gray-700">
         <p >
-          Welcome User,
+          Welcome {getUserProfile().firstName} {getUserProfile().lastName},
         </p>
       </div>
       <div className="flex mt-2 ml-7 flex-wrap">

pmp-reactjs-ui/src/pages/HeaderNav.js

@@ -1,5 +1,6 @@
 import profileIcon from '../profile_icon.png';
 import { useState } from 'react';
+import { getUserProfile } from '../services/UserProfileService.js';
 
 function HeaderNav() {
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -32,7 +33,7 @@ function HeaderNav() {
                         </svg>
                     </div>
 
-                    <h2 className="text-xs font-bold text-gray-600 ml-1">Organisation Name</h2>
+                    <h2 className="text-xs font-bold text-gray-600 ml-1">{getUserProfile().orgName}</h2>
                 </div>
                 <div className="flex items-center">
                     <button className="relative flex rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-transparent"

pmp-reactjs-ui/src/services/HttpService.js

@@ -1,11 +1,31 @@
 import axios from 'axios';
 import { loginRedirect } from './LoginRedirectService.js';
+import { jwtDecode } from 'jwt-decode';
+import { setUserProfile, getUserProfile } from './UserProfileService.js';
 
 const HttpService = axios.create({
   withCredentials: true
 });
 
 HttpService.interceptors.response.use((response) => { // block to handle success case
+  const originalRequest = response.config;
+  if (originalRequest.url.split('/').includes('validateToken')) { // Added this condition to avoid infinite loop 
+    if (!getUserProfile()) {
+      const resp = response.data.response;
+      const userData = jwtDecode(resp.token);
+      //console.log(resp);
+      setUserProfile({
+        "userName": userData.preferred_username,
+        "firstName": userData.given_name,
+        "lastName": userData.family_name,
+        "email": userData.email,
+        "orgName": userData.organizationName,
+        "partnerType": userData.partnerType,
+        "langCode": resp.langCode,
+        "roles": resp.role
+      });
+    }
+  }
   return response;
 }, function (error) { // block to handle error case
   const originalRequest = error.config;

pmp-reactjs-ui/src/services/UserProfileService.js

@@ -0,0 +1,19 @@
+
+let userProfile = null;
+
+export const setUserProfile = (userData) => {
+    userProfile = {
+        "userName": userData.userName,
+        "firstName": userData.firstName,
+        "lastName": userData.lastName,
+        "email": userData.email,
+        "orgName": userData.orgName,
+        "partnerType": userData.partnerType,
+        "langCode": userData.langCode,
+        "roles": userData.roles
+    }
+} 
+
+export const getUserProfile = () => {
+    return userProfile; 
+}