From fa069e5ef00b625ab248c95219dd88e6c90af9ec Mon Sep 17 00:00:00 2001 From: Sreejit-K Date: Wed, 28 Feb 2024 15:01:58 +0530 Subject: [PATCH 1/2] Added loaders for both pages and minor changes in look and feel Signed-off-by: Sreejit-K --- .gitignore | 1 + inji-web/src/Router.js | 2 +- inji-web/src/pages/Home/IssuerList.js | 2 +- inji-web/src/pages/Home/index.js | 6 ++-- .../src/pages/IssuerPage/CertificateList.js | 2 +- inji-web/src/pages/IssuerPage/Header.js | 6 ++-- inji-web/src/pages/IssuerPage/index.js | 9 ++++-- inji-web/src/pages/PageTemplate/Navbar.jsx | 2 +- inji-web/src/utils/LoadingScreen.css | 31 +++++++++++++++++++ inji-web/src/utils/LoadingScreen.js | 14 +++++++++ 10 files changed, 63 insertions(+), 12 deletions(-) create mode 100644 inji-web/src/utils/LoadingScreen.css create mode 100644 inji-web/src/utils/LoadingScreen.js diff --git a/.gitignore b/.gitignore index ceaca721..848083e1 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ .idea helm/inji-web/charts helm/inji-web/Chart.lock +inji-web/node_modules \ No newline at end of file diff --git a/inji-web/src/Router.js b/inji-web/src/Router.js index 92dcf017..da85e165 100644 --- a/inji-web/src/Router.js +++ b/inji-web/src/Router.js @@ -13,7 +13,7 @@ export const router = createBrowserRouter([ element: , }, { - path: "/issuers/:issuerId", + path: "/issuers/:issuerId/:displayName", element: , }, { diff --git a/inji-web/src/pages/Home/IssuerList.js b/inji-web/src/pages/Home/IssuerList.js index 5a7f124c..dfa86674 100644 --- a/inji-web/src/pages/Home/IssuerList.js +++ b/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 } diff --git a/inji-web/src/pages/Home/index.js b/inji-web/src/pages/Home/index.js index a1acf067..98c2b0a3 100644 --- a/inji-web/src/pages/Home/index.js +++ b/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 ( - {/* */} - + {loading ? : + + } ) } diff --git a/inji-web/src/pages/IssuerPage/CertificateList.js b/inji-web/src/pages/IssuerPage/CertificateList.js index e03e613c..2e3a5633 100644 --- a/inji-web/src/pages/IssuerPage/CertificateList.js +++ b/inji-web/src/pages/IssuerPage/CertificateList.js @@ -45,7 +45,7 @@ function CertificateList({issuerId, credentialList, clientId}) { return ( - List of Certificates + List of Credentials diff --git a/inji-web/src/pages/IssuerPage/Header.js b/inji-web/src/pages/IssuerPage/Header.js index 6c982fc8..9ead28c4 100644 --- a/inji-web/src/pages/IssuerPage/Header.js +++ b/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}) { - {issuerId} + {displayName} @@ -61,7 +61,7 @@ function Header({credentialsList, updateCredentialsList, defaultList}) { renderInput={(params) => ( -
- +
+ {loading ? : + + } ); } diff --git a/inji-web/src/pages/PageTemplate/Navbar.jsx b/inji-web/src/pages/PageTemplate/Navbar.jsx index 9fddd549..623583a4 100644 --- a/inji-web/src/pages/PageTemplate/Navbar.jsx +++ b/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) { diff --git a/inji-web/src/utils/LoadingScreen.css b/inji-web/src/utils/LoadingScreen.css new file mode 100644 index 00000000..75a91aae --- /dev/null +++ b/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); + } + } \ No newline at end of file diff --git a/inji-web/src/utils/LoadingScreen.js b/inji-web/src/utils/LoadingScreen.js new file mode 100644 index 00000000..75d6b9ec --- /dev/null +++ b/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 ( + +
+ +
+ ); +}; + +export default LoadingScreen; \ No newline at end of file From 22d9f5fde1a780620ca94b260f25ef6310bf45a4 Mon Sep 17 00:00:00 2001 From: Sreejit-K Date: Wed, 28 Feb 2024 15:17:10 +0530 Subject: [PATCH 2/2] Docker changes for UI Signed-off-by: Sreejit-K --- inji-web/Dockerfile | 4 ---- 1 file changed, 4 deletions(-) diff --git a/inji-web/Dockerfile b/inji-web/Dockerfile index 5cd9bab9..21ba5611 100644 --- a/inji-web/Dockerfile +++ b/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