From ea803403522eb852a5234347bdb71e024eeaf447 Mon Sep 17 00:00:00 2001 From: gkatrakazas Date: Wed, 4 Sep 2024 13:19:41 +0200 Subject: [PATCH 1/7] Improve the selection of vc icons style --- src/components/Popups/SelectCredentials.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/Popups/SelectCredentials.js b/src/components/Popups/SelectCredentials.js index 02b397ab..d00b3d3e 100644 --- a/src/components/Popups/SelectCredentials.js +++ b/src/components/Popups/SelectCredentials.js @@ -1,8 +1,7 @@ import React, { useEffect, useMemo, useState, useContext } from 'react'; import Modal from 'react-modal'; import { useNavigate } from 'react-router-dom'; -import { FaShare } from 'react-icons/fa'; -import { MdOutlineCheckBox, MdOutlineCheckBoxOutlineBlank } from "react-icons/md"; +import { FaShare, FaRegCircle, FaCheckCircle } from 'react-icons/fa'; import { useTranslation, Trans } from 'react-i18next'; import { useApi } from '../../api'; import { CredentialImage } from '../Credentials/CredentialImage'; @@ -225,7 +224,7 @@ function SelectCredentials({ showPopup, setShowPopup, setSelectionMap, conforman <>
From 5080c0e0bbd91d9408d6abce002dd7e5d32897c9 Mon Sep 17 00:00:00 2001 From: gkatrakazas Date: Sun, 8 Sep 2024 15:19:59 +0300 Subject: [PATCH 2/7] Clean errors when click useOtherAccount --- src/pages/Login/Login.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/pages/Login/Login.js b/src/pages/Login/Login.js index 8c245b14..fecdd3ba 100644 --- a/src/pages/Login/Login.js +++ b/src/pages/Login/Login.js @@ -109,6 +109,8 @@ const WebauthnSignupLogin = ({ setIsSubmitting, isLoginCache, setIsLoginCache, + error, + setError, }) => { const { isOnline } = useContext(OnlineStatusContext); const { keystore } = useContext(SessionContext); @@ -116,7 +118,6 @@ const WebauthnSignupLogin = ({ const api = useApi(isOnline); const [inProgress, setInProgress] = useState(false); const [name, setName] = useState(""); - const [error, setError] = useState(''); const [needPrfRetry, setNeedPrfRetry] = useState(false); const [resolvePrfRetryPrompt, setResolvePrfRetryPrompt] = useState(null); const [prfRetryAccepted, setPrfRetryAccepted] = useState(false); @@ -487,6 +488,7 @@ const Login = () => { confirmPassword: '', }); const [error, setError] = useState(''); + const [webauthnError, setWebauthnError] = useState(''); const [isLogin, setIsLogin] = useState(true); const [isSubmitting, setIsSubmitting] = useState(false); const [isContentVisible, setIsContentVisible] = useState(false); @@ -580,6 +582,12 @@ const Login = () => { }; } + const useOtherAccount = () => { + setIsLoginCache(false); + setError(''); + setWebauthnError(''); + } + const getPasswordStrength = (password) => { const lengthScore = password.length >= 8 ? 25 : 0; const capitalScore = /[A-Z]/.test(password) ? 25 : 0; @@ -747,6 +755,8 @@ const Login = () => { setIsSubmitting={setIsSubmitting} isLoginCache={isLoginCache} setIsLoginCache={setIsLoginCache} + error={webauthnError} + setError={setWebauthnError} /> {!isLoginCache ? ( @@ -765,7 +775,7 @@ const Login = () => {

setIsLoginCache(false)} + onClick={useOtherAccount} > {t('loginSignup.useOtherAccount')} From 3130e2af7c4761874e91110c5cb15a421d3d06d4 Mon Sep 17 00:00:00 2001 From: kkmanos Date: Mon, 9 Sep 2024 11:08:52 +0300 Subject: [PATCH 3/7] replaced all credential info attributes with new. also handled a case of thrown error --- src/components/Credentials/CredentialInfo.js | 41 +++++++++----------- src/components/Credentials/StatusRibbon.js | 2 +- 2 files changed, 20 insertions(+), 23 deletions(-) diff --git a/src/components/Credentials/CredentialInfo.js b/src/components/Credentials/CredentialInfo.js index 9be6cd48..0da04e39 100644 --- a/src/components/Credentials/CredentialInfo.js +++ b/src/components/Credentials/CredentialInfo.js @@ -77,33 +77,30 @@ const CredentialInfo = ({ credential, mainClassName = "text-xs sm:text-sm md:tex {parsedCredential && ( <> - {renderRow('expdate', 'Valid From', parsedCredential.credentialSubject?.validityPeriod?.startingDate && formatDate(parsedCredential.credentialSubject?.validityPeriod?.startingDate))} - {renderRow('expdate', 'Expiration', parsedCredential.credentialSubject?.validityPeriod?.endingDate && formatDate(parsedCredential.credentialSubject?.validityPeriod?.endingDate))} + {renderRow('expdate', 'Valid From', parsedCredential.validFrom && formatDate(parsedCredential.validFrom))} + {renderRow('expdate', 'Expiration', parsedCredential.expirationDate && formatDate(parsedCredential.expirationDate))} - {renderRow('expdate', 'Valid From', parsedCredential.credentialSubject?.decisionOnApplicableLegislation?.validityPeriod?.startingDate && formatDate(parsedCredential.credentialSubject?.decisionOnApplicableLegislation?.validityPeriod?.startingDate))} - {renderRow('expdate', 'Expiration', parsedCredential.credentialSubject?.decisionOnApplicableLegislation?.validityPeriod?.endingDate && formatDate(parsedCredential.credentialSubject?.decisionOnApplicableLegislation?.validityPeriod?.endingDate))} - - - {renderRow('familyName', 'Family Name', parsedCredential.credentialSubject.familyName)} - {renderRow('firstName', 'First Name', parsedCredential.credentialSubject.firstName)} - {renderRow('id', 'Personal ID', parsedCredential.type.includes('urn:credential:vid') && parsedCredential.credentialSubject.personalIdentifier)} + {renderRow('familyName', 'Family Name', parsedCredential.credentialSubject.family_name)} + {renderRow('firstName', 'Given Name', parsedCredential.credentialSubject.given_name)} + {renderRow('id', 'Personal ID', parsedCredential.type.includes('urn:credential:vid') && parsedCredential.credentialSubject.personal_identifier)} {renderRow('dateOfBirth', 'Birthday', parsedCredential.credentialSubject.dateOfBirth)} - {renderRow('dateOfBirth', 'Birthday', parsedCredential.credentialSubject.birthdate)} + {renderRow('dateOfBirth', 'Birthday', parsedCredential.credentialSubject?.birth_date && new Date(parsedCredential.credentialSubject?.birth_date).toDateString())} + + {renderRow('id', 'SSN', parsedCredential.credentialSubject.social_security_pin)} + {renderRow('id', 'Document ID', parsedCredential.credentialSubject?.pda1_document_id ?? parsedCredential.credentialSubject?.ehic_card_identification_number ?? undefined )} - {renderRow('id', 'SSN', parsedCredential.credentialSubject.socialSecurityIdentification?.ssn)} - {renderRow('id', 'Document ID', parsedCredential.credentialSubject.documentId)} - {renderRow('id', 'ID Competent Institution', parsedCredential.credentialSubject.competentInstitution?.competentInstitutionId)} - {renderRow('institution', 'Name Competent Institution', parsedCredential.credentialSubject.competentInstitution?.competentInstitutionName)} - {renderRow('country', 'Country Competent Institution', parsedCredential.credentialSubject.competentInstitution?.competentInstitutionCountryCode)} + {renderRow('id', 'ID Competent Institution', parsedCredential.credentialSubject.ehic_institution_id)} + {renderRow('institution', 'Name Competent Institution', parsedCredential.credentialSubject.ehic_institution_name)} + {renderRow('country', 'Country Competent Institution', parsedCredential.credentialSubject.ehic_institution_country_code)} - {renderRow('id', 'MS Legislation', parsedCredential.credentialSubject.decisionOnApplicableLegislation?.decisionOnMSWhoseLegislationApplies.memberStateWhoseLegislationIsToBeApplied)} - {renderRow('familyName', 'Employer Name', parsedCredential.credentialSubject.employer?.name)} - {renderRow('country', 'Employer Country', parsedCredential.credentialSubject.employer?.countryCode)} - {renderRow('place', 'Place of Work', parsedCredential.credentialSubject.placeOfWork?.companyName)} - {renderRow('place', 'Town', parsedCredential.credentialSubject.placeOfWork?.town)} - {renderRow('place', 'Postal Code', parsedCredential.credentialSubject.placeOfWork?.postalCode)} - {renderRow('country', 'Country', parsedCredential.credentialSubject.placeOfWork?.countryCode)} + {renderRow('id', 'MS Legislation', parsedCredential.pda1_member_state)} + {renderRow('familyName', 'Employer Name', parsedCredential.credentialSubject.pda1_name)} + {renderRow('country', 'Employer Country', parsedCredential.credentialSubject.pda1_employer_country_code)} + {renderRow('place', 'Place of Work', parsedCredential.credentialSubject.pda1_pow_company_name)} + {renderRow('place', 'Town', parsedCredential.credentialSubject.pda1_pow_employer_town)} + {renderRow('place', 'Postal Code', parsedCredential.credentialSubject.pda1_pow_employer_postal_code)} + {renderRow('country', 'Country', parsedCredential.credentialSubject.pda1_pow_employer_country_code)} {renderRow('id', 'Revocation ID', parsedCredential.credentialStatus && parsedCredential?.credentialStatus?.id?.split('#')[1])} diff --git a/src/components/Credentials/StatusRibbon.js b/src/components/Credentials/StatusRibbon.js index 8b665e6c..e7994d23 100644 --- a/src/components/Credentials/StatusRibbon.js +++ b/src/components/Credentials/StatusRibbon.js @@ -53,7 +53,7 @@ const StatusRibbon = ({ credential }) => { else if (CheckExpired(parsedCredential.expirationDate)) { setCredentialStatus('expired'); } - }); + }).catch(() => null); } }, [parsedCredential]); From de9936f38a3a681b4541571402f15e31fc0115b3 Mon Sep 17 00:00:00 2001 From: gkatrakazas Date: Mon, 9 Sep 2024 13:32:24 +0300 Subject: [PATCH 4/7] Fix camera view not displaying correctly --- src/components/QRCodeScanner/QRCodeScanner.js | 57 ++++++++++--------- 1 file changed, 31 insertions(+), 26 deletions(-) diff --git a/src/components/QRCodeScanner/QRCodeScanner.js b/src/components/QRCodeScanner/QRCodeScanner.js index 0b7a019c..07c91d97 100644 --- a/src/components/QRCodeScanner/QRCodeScanner.js +++ b/src/components/QRCodeScanner/QRCodeScanner.js @@ -164,7 +164,7 @@ const QRScanner = ({ onClose }) => { const currentCameraType = devices[currentDeviceIndex]?.label.toLowerCase().includes('back') ? 'back' : 'front'; const maxResolution = bestCameraResolutions[currentCameraType]; - let idealWidth, idealHeight; + let idealHeight; if (maxResolution) { console.log(maxResolution); @@ -173,11 +173,9 @@ const QRScanner = ({ onClose }) => { // Cap the dimension at 1920 if it exceeds this value if (smallerDimension > 1920) { - idealWidth = 1920; - idealHeight = 1920; + idealHeight = 1080; } else { - idealWidth = smallerDimension; - idealHeight = smallerDimension; + idealHeight = maxResolution.height; } } @@ -189,7 +187,7 @@ const QRScanner = ({ onClose }) => { overlayClassName="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" > {hasCameraPermission === false ? ( -

+

@@ -216,7 +214,7 @@ const QRScanner = ({ onClose }) => {

) : ( -
+

@@ -237,25 +235,32 @@ const QRScanner = ({ onClose }) => {

{t('qrCodeScanner.description')}

-
- - {qrDetected && ( -
- -
- )} +
+
+ + {qrDetected && ( +
+ +
+ )} +
From b5d4cd715e2f06cc7f0dcc00a0aeec972cb471a5 Mon Sep 17 00:00:00 2001 From: Georgios Anastasiou Date: Tue, 6 Aug 2024 18:55:49 +0300 Subject: [PATCH 5/7] hotfix for token request not starting until an App rerender occurs --- src/App.js | 14 +++++++++----- src/index.js | 3 ++- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/App.js b/src/App.js index f1caa958..17c45843 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,6 @@ // Import Libraries -import React, { useEffect, Suspense } from 'react'; -import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; +import React, { useEffect, Suspense, useState } from 'react'; +import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom'; import Spinner from './components/Spinner'; // Make sure this Spinner component exists and renders the spinner you want // Import i18next and set up translations import { I18nextProvider } from 'react-i18next'; @@ -31,7 +31,9 @@ const VerificationResult = React.lazy(() => import('./pages/VerificationResult/V function App() { - const url = window.location.href; + // const url = useLocation(); + const location = useLocation(); + const [url, setUrl] = useState(window.location.href); const { showSelectCredentialsPopup, setShowSelectCredentialsPopup, @@ -46,6 +48,10 @@ function App() { typeMessagePopup, } = useCheckURL(url); + useEffect(() => { + setUrl(window.location.href); + }, [location]) + useEffect(() => { if (navigator?.serviceWorker) { navigator.serviceWorker.addEventListener('message', handleMessage); @@ -70,7 +76,6 @@ function App() { - }> @@ -96,7 +101,6 @@ function App() { setMessagePopup(false)} /> } - ); diff --git a/src/index.js b/src/index.js index 6a040a92..2ec91ec1 100644 --- a/src/index.js +++ b/src/index.js @@ -8,6 +8,7 @@ import * as offlineSW from './offlineRegistrationSW'; import * as firebaseSW from './firebase'; import Modal from 'react-modal'; import './index.css'; +import { BrowserRouter } from "react-router-dom"; ConsoleBehavior(); @@ -26,7 +27,7 @@ const RootComponent = () => { initDB(); }, []); - return ; + return ; }; const root = createRoot(document.getElementById('root')); From 17517e16be60deda8f804338089eb776a8b7547a Mon Sep 17 00:00:00 2001 From: Georgios Anastasiou Date: Wed, 7 Aug 2024 10:56:20 +0300 Subject: [PATCH 6/7] cleanup --- src/App.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/App.js b/src/App.js index 17c45843..96b04b44 100644 --- a/src/App.js +++ b/src/App.js @@ -31,7 +31,6 @@ const VerificationResult = React.lazy(() => import('./pages/VerificationResult/V function App() { - // const url = useLocation(); const location = useLocation(); const [url, setUrl] = useState(window.location.href); const { From aeba3c05f006eb5221f0fa38f6c36b2a9595ecdf Mon Sep 17 00:00:00 2001 From: Georgios Anastasiou Date: Wed, 7 Aug 2024 10:57:49 +0300 Subject: [PATCH 7/7] App.js: Removed unused Router import --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 96b04b44..ab0fea0c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,6 @@ // Import Libraries import React, { useEffect, Suspense, useState } from 'react'; -import { BrowserRouter as Router, Routes, Route, useLocation } from 'react-router-dom'; +import { Routes, Route, useLocation } from 'react-router-dom'; import Spinner from './components/Spinner'; // Make sure this Spinner component exists and renders the spinner you want // Import i18next and set up translations import { I18nextProvider } from 'react-i18next';