Merge pull request #11 from shiva-beehyv/fix-multiple-downloads-issue

Fix issue with downloading the certificates multiple times
mosip · Feb 28, 2024 · c9034ec · c9034ec
2 parents 791f6cd + 1c134ad
commit c9034ec
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 24 deletions.
diff --git a/inji-web/.env b/inji-web/.env
@@ -1,3 +1,2 @@
-REACT_APP_ESIGNET_UI_URL=https://esignet-injiweb.dev1.mosip.net
-REACT_APP_ESIGNET_REDIRECT_URL=https://inji.dev1.mosip.net
-REACT_APP_MIMOTO_URL=https://inji.dev1.mosip.net/v1/mimoto
+#REACT_APP_ESIGNET_UI_URL=
+#REACT_APP_MIMOTO_URL=/v1/mimoto
diff --git a/inji-web/.env.production b/inji-web/.env.production
@@ -1,3 +1,2 @@
-REACT_APP_ESIGNET_UI_URL=https://esignet-injiweb.dev1.mosip.net
-REACT_APP_ESIGNET_REDIRECT_URL=https://inji.dev1.mosip.net
-REACT_APP_MIMOTO_URL=https://inji.dev1.mosip.net/v1/mimoto
+#REACT_APP_ESIGNET_UI_URL=
+#REACT_APP_MIMOTO_URL=/v1/mimoto
diff --git a/inji-web/src/pages/Certificate/index.js b/inji-web/src/pages/Certificate/index.js
@@ -29,11 +29,15 @@ const SuccessComponent = () => {
     );
 }
 
-const ResultBackButton = ({issuerId}) => {
+const ResultBackButton = ({issuerId, issuerDisplayName}) => {
     const navigate = useNavigate();
     return (
         <Button
-            onClick={() => {navigate(`/issuers/${issuerId}`)}}
+            onClick={() => {navigate(`/issuers/${issuerId}`, {
+                state: {
+                    issuerDisplayName
+                }
+            })}}
             style={{margin: '12px auto', color: 'black', border: '1px solid #E86E04', borderRadius: '12px', padding: '8px 12px'}}>
             <ArrowBackIcon style={{fontSize: '16px', marginRight: '12px'}}/>Back
         </Button>
@@ -52,6 +56,7 @@ const ResultBackButton = ({issuerId}) => {
 
 const DisplayComponent = ({message, inProgress}) => {
     const {issuerId} = useParams();
+    const issuerDisplayName = useLocation().state?.issuerDisplayName;
     switch (message) {
         case 'Invalid user credentials':
         case 'Failed to verify the user credentials':
@@ -64,7 +69,7 @@ const DisplayComponent = ({message, inProgress}) => {
                     <Typography variant='h6' style={{margin: '12px auto'}}>{message}</Typography>
                 </Grid>
                 <Grid item xs={12}>
-                    <ResultBackButton issuerId={issuerId}/>
+                    <ResultBackButton issuerId={issuerId} issuerDisplayName={issuerDisplayName}/>
                 </Grid>
             </>);
         case 'Verifying credentials':
@@ -92,7 +97,7 @@ const DisplayComponent = ({message, inProgress}) => {
                         <Typography variant='h6' style={{margin: '12px auto'}}>{message}</Typography>
                     </Grid>
                     <Grid item xs={12}>
-                        <ResultBackButton issuerId={issuerId}/>
+                        <ResultBackButton issuerId={issuerId} issuerDisplayName={issuerDisplayName}/>
                     </Grid>
                 </>
             );
@@ -106,7 +111,6 @@ function Certificate(props) {
     const { issuerId, certificateId } = useParams();
 
     useEffect(() => {
-        console.log(location);
         const searchParams = location.search?.replace("?", "")
             .split('&');
         const searchParamsMap = {};

diff --git a/inji-web/src/pages/IssuerPage/CertificateList.js b/inji-web/src/pages/IssuerPage/CertificateList.js
@@ -22,7 +22,7 @@ const Title = styled(Typography)`
     margin-bottom: 10px;
 `;
 
-const getCardsData = (issuerId, credentialList, clientId) => {
+const getCardsData = (issuerId, issuerDisplayName, credentialList, clientId) => {
     return credentialList.map(cred => {
         return {
             imageUrl: cred.display[0].logo.url,
@@ -32,16 +32,23 @@ const getCardsData = (issuerId, credentialList, clientId) => {
                 let {codeVerifier, codeChallenge} = generateCodeChallenge();
                 let state = generateRandomString();
                 localStorage.setItem(DATA_KEY_IN_LOCAL_STORAGE,
-                    JSON.stringify({issuerId: issuerId, certificateId: cred.id, codeVerifier: codeVerifier, state: state, clientId: clientId}));
+                    JSON.stringify({
+                        issuerId,
+                        issuerDisplayName,
+                        certificateId: cred.id,
+                        codeVerifier: codeVerifier,
+                        state: state,
+                        clientId: clientId
+                    }));
                 window.location.replace(getESignetRedirectURL(cred.scope, clientId, codeChallenge, state));
             },
             clickable: true
         }
     });
 }
 
-function CertificateList({issuerId, credentialList, clientId}) {
-    const cards = getCardsData(issuerId, credentialList, clientId);
+function CertificateList({issuerId, issuerDisplayName, credentialList, clientId}) {
+    const cards = getCardsData(issuerId, issuerDisplayName, credentialList, clientId);
     return (
         <CertificatesBox>
             <Title variant='h6'>

diff --git a/inji-web/src/pages/IssuerPage/index.js b/inji-web/src/pages/IssuerPage/index.js
@@ -4,7 +4,7 @@ import Header from "./Header";
 import CertificateList from "./CertificateList";
 import _axios from 'axios';
 import {getCredentialsSupportedUrl, getSearchIssuersUrl} from "../../utils/config";
-import { useParams, useLocation } from 'react-router-dom';
+import {useParams, useLocation, useNavigate} from 'react-router-dom';
 import LoadingScreen from '../../utils/LoadingScreen';
 
 function Issuer() {
@@ -14,10 +14,11 @@ function Issuer() {
 
     const location = useLocation();
     const [issuerClientId, setIssuerClientId] = useState(location.state ? location.state['clientId'] : undefined);
-    const [issuerDisplayName, setIssuerDisplayName] = useState(location.state ? location.state['issuerDisplayName'] : undefined);
+    const issuerDisplayName = location.state?.issuerDisplayName;
     const [loading, setLoading] = useState(true);
     const [errorMessage, setErrorMessage] = useState();
 
+    const navigate = useNavigate();
 
     useEffect(() => {
         _axios.get(getCredentialsSupportedUrl(issuerId))
@@ -37,12 +38,12 @@ function Issuer() {
     useEffect(() => {
         // make an api call only when the state is not available
         if (issuerClientId && issuerDisplayName) return;
-        _axios.get(getSearchIssuersUrl(issuerDisplayName? issuerDisplayName : issuerId))
+        if (!issuerClientId && !issuerDisplayName) navigate("/issuers");// We need Display name to fetch the client id
+        _axios.get(getSearchIssuersUrl(issuerDisplayName))
             .then((response) => {
                 let issuers =  response.data.response.issuers;
                 if (issuers.length !== 0) {
                     setIssuerClientId(issuers[0].client_id);
-                    setIssuerDisplayName(issuers[0].display[0].name);
                 }
             })
             .catch((error) => {
@@ -58,7 +59,8 @@ function Issuer() {
                     loading={loading} updateCredentialsList={setCredentialsList} defaultList={defaultList}/>
             {loading 
                 ? <LoadingScreen />
-                : <CertificateList credentialList={credentialsList} issuerId={issuerId} clientId={issuerClientId}/>
+                : <CertificateList credentialList={credentialsList} issuerId={issuerId}
+                                   issuerDisplayName={issuerDisplayName} clientId={issuerClientId}/>
             }
         </PageTemplate>
     );

diff --git a/inji-web/src/pages/PageTemplate/index.jsx b/inji-web/src/pages/PageTemplate/index.jsx
@@ -21,7 +21,11 @@ function PageTemplate({children}) {
                 return;
             }
             if (vcRedirectionDetails) {
-                navigate(`issuers/${vcRedirectionDetails.issuerId}/certificate/${vcRedirectionDetails.certificateId}` + location.search);
+                navigate(`issuers/${vcRedirectionDetails.issuerId}/certificate/${vcRedirectionDetails.certificateId}` + location.search, {
+                    state: {
+                        issuerDisplayName: vcRedirectionDetails.issuerDisplayName
+                    }
+                });
             }
         }
     }, []);

diff --git a/inji-web/src/utils/config.js b/inji-web/src/utils/config.js
@@ -1,6 +1,8 @@
 /* ESIGNET CONFIG */
-export const ESIGNET_UI_URL = process.env.REACT_APP_ESIGNET_UI_URL || "http://192.168.2.186:3001";
-export const ESIGNET_REDIRECT_URI = process.env.REACT_APP_ESIGNET_REDIRECT_URL || "http://localhost:81";
+// nginx config redirects the request to esignet running in the same namespace
+export const ESIGNET_UI_URL = process.env.REACT_APP_ESIGNET_UI_URL || "";
+// Since it is to be redirected to the same application again
+export const ESIGNET_REDIRECT_URI = window.location.origin;
 
 export const getESignetRedirectURL = (scope, clientId, codeChallenge, state) => {
     return `${ESIGNET_UI_URL}/authorize` +
@@ -15,7 +17,7 @@ export const getESignetRedirectURL = (scope, clientId, codeChallenge, state) =>
 
 
 /* MIMOTO CONFIG */
-export const MIMOTO_URL = process.env.REACT_APP_MIMOTO_URL || "/mimoto";
+export const MIMOTO_URL = process.env.REACT_APP_MIMOTO_URL || "/v1/mimoto";
 export const FETCH_ISSUERS_URL = `${MIMOTO_URL}/v2/issuers`;
 export const getSearchIssuersUrl = (issuer) => `${MIMOTO_URL}/v2/issuers?search=${issuer}`;
 export const getCredentialsSupportedUrl = (issuerId) => `${MIMOTO_URL}/v2/issuers/${issuerId}/credentials-supported`;