Added loaders for both pages and minor changes in look and feel

.gitignore

@@ -2,3 +2,4 @@
 .idea
 helm/inji-web/charts
 helm/inji-web/Chart.lock
+inji-web/node_modules

inji-web/Dockerfile

@@ -7,10 +7,6 @@ WORKDIR /app
 # Copy package.json and package-lock.json to the working directory
 COPY package*.json ./
 
-ENV REACT_APP_ESIGNET_UI_URL=
-ENV REACT_APP_ESIGNET_REDIRECT_URl=
-ENV REACT_APP_MIMOTO_URL=
-
 # Install Node.js dependencies
 RUN npm install
 

inji-web/src/Router.js

@@ -13,7 +13,7 @@ export const router = createBrowserRouter([
         element: <Home />,
     },
     {
-        path: "/issuers/:issuerId",
+        path: "/issuers/:issuerId/:displayName",
         element: <Issuer/>,
     },
     {

inji-web/src/pages/Home/IssuerList.js

@@ -27,7 +27,7 @@ const getCardsData = (issuersList, navigate) => {
             title: issuer.display[0].name,
             icon: null,
             onClick: () => {
-                navigate(`/issuers/${issuer.credential_issuer}`)
+                navigate(`/issuers/${issuer.credential_issuer}/${issuer.display[0].name}`)
             },
             clickable: true
         }

inji-web/src/pages/Home/index.js

@@ -7,6 +7,7 @@ import { useEffect, useState } from "react";
 import _axios from 'axios';
 import { IssuersData } from "./testData";
 import {FETCH_ISSUERS_URL, MIMOTO_URL} from "../../utils/config";
+import LoadingScreen from "../../utils/LoadingScreen";
 
 export default function Home(props) {
 
@@ -42,8 +43,9 @@ export default function Home(props) {
     return (
         <PageTemplate>
             <SearchIssuers options={issuersList} setFilteredIssuerList={setFilteredList}/>
-            {/* <IssuersList issuersList={filteredList.length === 0 ? issuersList: filteredList}/> */}
-            <IssuersList issuersList={ issuersList}/>
+            {loading ? <LoadingScreen /> :
+                <IssuersList issuersList={ issuersList}/>
+            }
         </PageTemplate>
     )
 }

inji-web/src/pages/IssuerPage/CertificateList.js

@@ -45,7 +45,7 @@ function CertificateList({issuerId, credentialList, clientId}) {
     return (
         <CertificatesBox>
             <Title variant='h6'>
-                List of Certificates
+                List of Credentials
             </Title>
             <GridComponent cards={cards}/>
         </CertificatesBox>

inji-web/src/pages/IssuerPage/Header.js

@@ -35,7 +35,7 @@ const IssuerTitle = styled(Typography)`
 
 function Header({credentialsList, updateCredentialsList, defaultList}) {
     const navigate = useNavigate();
-    const { issuerId } = useParams();
+    const { issuerId, displayName} = useParams();
     const [defaultOptions, setDefaultOptions] = useState([]);
 
     useEffect(() => {
@@ -51,7 +51,7 @@ function Header({credentialsList, updateCredentialsList, defaultList}) {
                             <BackArrow />
                         </IconButton>
                         <IssuerTitle>
-                            {issuerId}
+                            {displayName}
                         </IssuerTitle>
                     </Box>
                 </Grid>
@@ -61,7 +61,7 @@ function Header({credentialsList, updateCredentialsList, defaultList}) {
                         renderInput={(params) => (
                             <TextField
                                 {...params}
-                                label="Search Certificate"
+                                label="Search Credentials"
                                 InputProps={{
                                     ...params.InputProps,
                                     type: 'search',

inji-web/src/pages/IssuerPage/index.js

@@ -5,9 +5,10 @@ import CertificateList from "./CertificateList";
 import _axios from 'axios';
 import {getCredentialsSupportedUrl, getSearchIssuersUrl} from "../../utils/config";
 import { useParams } from 'react-router-dom';
+import LoadingScreen from '../../utils/LoadingScreen';
 
 function Issuer() {
-    const { issuerId } = useParams();
+    const { issuerId, displayName } = useParams();
     const [credentialsList, setCredentialsList] = useState([]);
     const [defaultList, setDefaultList] = useState([]);
     const [issuerClientId, setIssuerClientId] = useState();
@@ -47,8 +48,10 @@ function Issuer() {
     // TODO: show a loader while loading and error message in case of any errors
     return (
         <PageTemplate>
-            <Header issuer={issuerId} credentialsList={credentialsList} updateCredentialsList={setCredentialsList} defaultList={defaultList}/>
-            <CertificateList credentialList={credentialsList} issuerId={issuerId} clientId={issuerClientId}/>
+            <Header issuer={displayName} credentialsList={credentialsList} updateCredentialsList={setCredentialsList} defaultList={defaultList}/>
+            {loading ? <LoadingScreen /> :
+             <CertificateList credentialList={credentialsList} issuerId={issuerId} clientId={issuerClientId}/>
+            }    
         </PageTemplate>
     );
 }

inji-web/src/pages/PageTemplate/Navbar.jsx

@@ -9,7 +9,7 @@ import {DownloadButton, InjiNavbar, StyledGridItem, StyledLink, StyledToolbar} f
 import { useNavigate } from 'react-router-dom';
 import logo from "../../assets/inji-logo.png";
 
-const links = ['Link 1', 'Link 2', 'Link 3'];
+const links = [];
 
 function Navbar(props) {
 

inji-web/src/utils/LoadingScreen.css

@@ -0,0 +1,31 @@
+.loading-screen {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: #1c1e1f;
+    opacity: 0.5;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+  }
+
+  .loading-spinner {
+    border: 7px solid #f3f3f3;
+    border-top: 7px solid #793a02;
+    border-radius: 50%;
+    width: 100px;
+    height: 100px;
+    animation: spin 1.5s linear infinite;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }

inji-web/src/utils/LoadingScreen.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import './LoadingScreen.css'; 
+import { CircularProgress } from '@mui/material';
+
+const LoadingScreen = () => {
+    return (
+
+      <div className="loading-screen">
+        <CircularProgress style={{color: '#E86E04'}}/>
+      </div>
+    );
+};
+
+export default LoadingScreen;