From 8e38eb3550cb3b17a59e6bccd20c0ccfcf67d90c Mon Sep 17 00:00:00 2001 From: Marvin Sextro Date: Sat, 24 Jul 2021 22:56:42 +0200 Subject: [PATCH 01/10] Add camera access error message --- components/Alert.tsx | 2 +- components/Form.tsx | 13 ++++++++++++- public/locales/de/errors.yml | 3 ++- public/locales/en/errors.yml | 3 ++- public/locales/fi/errors.yml | 3 ++- public/locales/fr/errors.yml | 3 ++- public/locales/nl/errors.yml | 3 ++- 7 files changed, 23 insertions(+), 7 deletions(-) diff --git a/components/Alert.tsx b/components/Alert.tsx index 7ee7465..4fffdfb 100644 --- a/components/Alert.tsx +++ b/components/Alert.tsx @@ -10,7 +10,7 @@ function Alert(props: AlertProps): JSX.Element { return (
- {props.errorMessage} + {props.errorMessage} diff --git a/components/Form.tsx b/components/Form.tsx index fee3978..65b8b91 100644 --- a/components/Form.tsx +++ b/components/Form.tsx @@ -29,6 +29,11 @@ function Form(): JSX.Element { // Check if there is a translation and replace message accordingly const setErrorMessage = (message: string) => { + if (message == undefined) { + _setErrorMessage(undefined); + return; + } + const translation = t('errors:'.concat(message)); _setErrorMessage(translation !== message ? translation : message); }; @@ -68,7 +73,13 @@ function Form(): JSX.Element { const codeReader = new BrowserQRCodeReader(); // Needs to be called before any camera can be accessed - await BrowserQRCodeReader.listVideoInputDevices(); + const deviceList = await BrowserQRCodeReader.listVideoInputDevices(); + + // Check access to camera device + if (deviceList.length == 0) { + setErrorMessage("noCameraAccess"); + return; + } // Get preview Element to show camera stream const previewElem: HTMLVideoElement = document.querySelector('#cameraPreview'); diff --git a/public/locales/de/errors.yml b/public/locales/de/errors.yml index 671a679..7760906 100644 --- a/public/locales/de/errors.yml +++ b/public/locales/de/errors.yml @@ -14,4 +14,5 @@ couldNotFindQrCode: QR-Code konnte in der ausgewählten Datei nicht gefunden wer invalidQrCode: Ungültiger QR-Code certificateType: Kein gültiger Zertifikatstyp gefunden invalidTestResult: Ungültiges Testergebnis -invalidTestType: Ungültiger Testtyp \ No newline at end of file +invalidTestType: Ungültiger Testtyp +noCameraAccess: Kein Zugriff auf die Kamera möglich. Überprüfe die Berechtigungen unter Einstellungen > Safari > Kamera. \ No newline at end of file diff --git a/public/locales/en/errors.yml b/public/locales/en/errors.yml index 828ec38..fa84e11 100644 --- a/public/locales/en/errors.yml +++ b/public/locales/en/errors.yml @@ -14,4 +14,5 @@ couldNotFindQrCode: Could not find QR Code in provided file invalidQrCode: Invalid QR code certificateType: No valid certificate type found invalidTestResult: Invalid test result -invalidTestType: Invalid test type \ No newline at end of file +invalidTestType: Invalid test type +noCameraAccess: Could not access camera. Check permissions under Settings > Safari > Camera. \ No newline at end of file diff --git a/public/locales/fi/errors.yml b/public/locales/fi/errors.yml index 8e7bbe2..2ea9638 100644 --- a/public/locales/fi/errors.yml +++ b/public/locales/fi/errors.yml @@ -14,4 +14,5 @@ couldNotFindQrCode: QR-koodia ei löytynyt annetusta tiedostosta invalidQrCode: Virheellinen QR-koodi certificateType: Kelvollista varmennetyyppiä ei löytynyt invalidTestResult: Virheellinen testitulos -invalidTestType: Virheellinen testityyppi \ No newline at end of file +invalidTestType: Virheellinen testityyppi +noCameraAccess: Kameraan ei päässyt käsiksi. Tarkista käyttöoikeudet kohdasta Asetukset > Safari > Kamera. \ No newline at end of file diff --git a/public/locales/fr/errors.yml b/public/locales/fr/errors.yml index 680e039..cdf690e 100644 --- a/public/locales/fr/errors.yml +++ b/public/locales/fr/errors.yml @@ -14,4 +14,5 @@ couldNotFindQrCode: Impossible de trouver le QR Code dans le fichier fourni invalidQrCode: QR Code non valide certificateType: Aucun type de certificat valide n'a été trouvé invalidTestResult: Résultat du test non valide -invalidTestType: Type de test non valide \ No newline at end of file +invalidTestType: Type de test non valide +noCameraAccess: Impossible d'accéder à la caméra. Vérifiez les autorisations sous Paramètres > Safari > Appareil photo. \ No newline at end of file diff --git a/public/locales/nl/errors.yml b/public/locales/nl/errors.yml index 1614c80..5b92d4a 100644 --- a/public/locales/nl/errors.yml +++ b/public/locales/nl/errors.yml @@ -14,4 +14,5 @@ couldNotFindQrCode: Kon de QR-code niet vinden in het verstrekte bestand invalidQrCode: Ongeldige QR-code certificateType: Geen geldig certificaattype gevonden invalidTestResult: Ongeldig testresultaat -invalidTestType: Ongeldig testtype \ No newline at end of file +invalidTestType: Ongeldig testtype +noCameraAccess: Kon geen toegang krijgen tot de camera. Controleer de machtigingen onder Instellingen > Safari > Camera. \ No newline at end of file From af77280202eeb78c0eca965e0e7e205717c6b5f1 Mon Sep 17 00:00:00 2001 From: Marvin Sextro Date: Sun, 25 Jul 2021 01:19:10 +0200 Subject: [PATCH 02/10] Improve pass fields and add fallback romanization --- components/Form.tsx | 2 +- src/payload.ts | 115 ++++++++++++++++++++++++-------------------- tsconfig.json | 2 +- 3 files changed, 65 insertions(+), 54 deletions(-) diff --git a/components/Form.tsx b/components/Form.tsx index 65b8b91..f7aa891 100644 --- a/components/Form.tsx +++ b/components/Form.tsx @@ -239,7 +239,7 @@ function Form(): JSX.Element { {t('index:addToWallet')}
- + Date: Sun, 25 Jul 2021 01:23:12 +0200 Subject: [PATCH 03/10] Use es5 --- tsconfig.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tsconfig.json b/tsconfig.json index 60cf981..35d51ea 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,6 @@ { "compilerOptions": { - "target": "ES2018", + "target": "es5", "lib": [ "dom", "dom.iterable", From f291dcb76648eeec2ec3051c7d43f19f56cf3728 Mon Sep 17 00:00:00 2001 From: Marvin Sextro Date: Sun, 25 Jul 2021 01:37:58 +0200 Subject: [PATCH 04/10] Differentiate camera access and permissions --- components/Form.tsx | 8 ++++++++ public/locales/en/errors.yml | 3 ++- public/locales/fi/errors.yml | 3 ++- public/locales/fr/errors.yml | 3 ++- public/locales/nl/errors.yml | 3 ++- 5 files changed, 16 insertions(+), 4 deletions(-) diff --git a/components/Form.tsx b/components/Form.tsx index f7aa891..9e2932e 100644 --- a/components/Form.tsx +++ b/components/Form.tsx @@ -77,6 +77,14 @@ function Form(): JSX.Element { // Check access to camera device if (deviceList.length == 0) { + setErrorMessage("noCameraFound"); + return; + } + + // Check permissions to camera device + try { + navigator.mediaDevices.getUserMedia({video: true}); + } catch (e) { setErrorMessage("noCameraAccess"); return; } diff --git a/public/locales/en/errors.yml b/public/locales/en/errors.yml index fa84e11..cfea084 100644 --- a/public/locales/en/errors.yml +++ b/public/locales/en/errors.yml @@ -15,4 +15,5 @@ invalidQrCode: Invalid QR code certificateType: No valid certificate type found invalidTestResult: Invalid test result invalidTestType: Invalid test type -noCameraAccess: Could not access camera. Check permissions under Settings > Safari > Camera. \ No newline at end of file +noCameraAccess: Could not access camera. Check permissions under Settings > Safari > Camera. +noCameraFound: Could not find camera. \ No newline at end of file diff --git a/public/locales/fi/errors.yml b/public/locales/fi/errors.yml index 2ea9638..7159ffe 100644 --- a/public/locales/fi/errors.yml +++ b/public/locales/fi/errors.yml @@ -15,4 +15,5 @@ invalidQrCode: Virheellinen QR-koodi certificateType: Kelvollista varmennetyyppiä ei löytynyt invalidTestResult: Virheellinen testitulos invalidTestType: Virheellinen testityyppi -noCameraAccess: Kameraan ei päässyt käsiksi. Tarkista käyttöoikeudet kohdasta Asetukset > Safari > Kamera. \ No newline at end of file +noCameraAccess: Kameraan ei päässyt käsiksi. Tarkista käyttöoikeudet kohdasta Asetukset > Safari > Kamera. +noCameraFound: En löytänyt kameraa. \ No newline at end of file diff --git a/public/locales/fr/errors.yml b/public/locales/fr/errors.yml index cdf690e..4b6e6fc 100644 --- a/public/locales/fr/errors.yml +++ b/public/locales/fr/errors.yml @@ -15,4 +15,5 @@ invalidQrCode: QR Code non valide certificateType: Aucun type de certificat valide n'a été trouvé invalidTestResult: Résultat du test non valide invalidTestType: Type de test non valide -noCameraAccess: Impossible d'accéder à la caméra. Vérifiez les autorisations sous Paramètres > Safari > Appareil photo. \ No newline at end of file +noCameraAccess: Impossible d'accéder à la caméra. Vérifiez les autorisations sous Paramètres > Safari > Appareil photo. +noCameraFound: Impossible de trouver la caméra. \ No newline at end of file diff --git a/public/locales/nl/errors.yml b/public/locales/nl/errors.yml index 5b92d4a..cf7f86e 100644 --- a/public/locales/nl/errors.yml +++ b/public/locales/nl/errors.yml @@ -15,4 +15,5 @@ invalidQrCode: Ongeldige QR-code certificateType: Geen geldig certificaattype gevonden invalidTestResult: Ongeldig testresultaat invalidTestType: Ongeldig testtype -noCameraAccess: Kon geen toegang krijgen tot de camera. Controleer de machtigingen onder Instellingen > Safari > Camera. \ No newline at end of file +noCameraAccess: Kon geen toegang krijgen tot de camera. Controleer de machtigingen onder Instellingen > Safari > Camera. +noCameraFound: Ik kon de camera niet vinden. \ No newline at end of file From dbd076ae2112e641e9e5a8cabd5c1ddae718dbb8 Mon Sep 17 00:00:00 2001 From: Marvin Sextro Date: Sun, 25 Jul 2021 01:39:31 +0200 Subject: [PATCH 05/10] Fix German error description --- public/locales/de/errors.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/public/locales/de/errors.yml b/public/locales/de/errors.yml index 7760906..84f374f 100644 --- a/public/locales/de/errors.yml +++ b/public/locales/de/errors.yml @@ -15,4 +15,5 @@ invalidQrCode: Ungültiger QR-Code certificateType: Kein gültiger Zertifikatstyp gefunden invalidTestResult: Ungültiges Testergebnis invalidTestType: Ungültiger Testtyp -noCameraAccess: Kein Zugriff auf die Kamera möglich. Überprüfe die Berechtigungen unter Einstellungen > Safari > Kamera. \ No newline at end of file +noCameraAccess: Kein Zugriff auf die Kamera möglich. Überprüfe die Berechtigungen unter Einstellungen > Safari > Kamera. +noCameraFound: Keine Kamera gefunden. \ No newline at end of file From 36e080cb3504cbcc685b35cd42a927e61fe00c80 Mon Sep 17 00:00:00 2001 From: Marvin Sextro Date: Sun, 25 Jul 2021 01:53:02 +0200 Subject: [PATCH 06/10] Handle camera errors --- components/Form.tsx | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/components/Form.tsx b/components/Form.tsx index 9e2932e..6115285 100644 --- a/components/Form.tsx +++ b/components/Form.tsx @@ -81,14 +81,6 @@ function Form(): JSX.Element { return; } - // Check permissions to camera device - try { - navigator.mediaDevices.getUserMedia({video: true}); - } catch (e) { - setErrorMessage("noCameraAccess"); - return; - } - // Get preview Element to show camera stream const previewElem: HTMLVideoElement = document.querySelector('#cameraPreview'); @@ -108,6 +100,9 @@ function Form(): JSX.Element { setGlobalControls(undefined); setIsCameraOpen(false); } + if (error !== undefined) { + setErrorMessage("noCameraAccess"); + } } ) ); From d93801501e31f68b01aca87f40477cbb22d7068d Mon Sep 17 00:00:00 2001 From: Marvin Sextro Date: Sun, 25 Jul 2021 02:14:09 +0200 Subject: [PATCH 07/10] Error to enforce Safari --- components/Form.tsx | 17 +++++++++++++++-- public/locales/de/errors.yml | 3 ++- public/locales/en/errors.yml | 3 ++- public/locales/fi/errors.yml | 3 ++- public/locales/fr/errors.yml | 3 ++- public/locales/nl/errors.yml | 3 ++- 6 files changed, 25 insertions(+), 7 deletions(-) diff --git a/components/Form.tsx b/components/Form.tsx index 6115285..05e6b47 100644 --- a/components/Form.tsx +++ b/components/Form.tsx @@ -73,7 +73,14 @@ function Form(): JSX.Element { const codeReader = new BrowserQRCodeReader(); // Needs to be called before any camera can be accessed - const deviceList = await BrowserQRCodeReader.listVideoInputDevices(); + let deviceList: MediaDeviceInfo[]; + + try { + deviceList = await BrowserQRCodeReader.listVideoInputDevices(); + } catch (e) { + setErrorMessage('noCameraAccess'); + return; + } // Check access to camera device if (deviceList.length == 0) { @@ -101,7 +108,7 @@ function Form(): JSX.Element { setIsCameraOpen(false); } if (error !== undefined) { - setErrorMessage("noCameraAccess"); + setErrorMessage(error.message); } } ) @@ -115,6 +122,12 @@ function Form(): JSX.Element { event.preventDefault(); setLoading(true); + if(navigator.userAgent.match('CriOS')) { + setErrorMessage('safariSupportOnly'); + setLoading(false); + return; + } + if (!file && !qrCode) { setErrorMessage('noFileOrQrCode') setLoading(false); diff --git a/public/locales/de/errors.yml b/public/locales/de/errors.yml index 84f374f..6933e7a 100644 --- a/public/locales/de/errors.yml +++ b/public/locales/de/errors.yml @@ -16,4 +16,5 @@ certificateType: Kein gültiger Zertifikatstyp gefunden invalidTestResult: Ungültiges Testergebnis invalidTestType: Ungültiger Testtyp noCameraAccess: Kein Zugriff auf die Kamera möglich. Überprüfe die Berechtigungen unter Einstellungen > Safari > Kamera. -noCameraFound: Keine Kamera gefunden. \ No newline at end of file +noCameraFound: Keine Kamera gefunden. +safariSupportOnly: Bitte verwende unter iOS den Safari Browser. \ No newline at end of file diff --git a/public/locales/en/errors.yml b/public/locales/en/errors.yml index cfea084..0dcc155 100644 --- a/public/locales/en/errors.yml +++ b/public/locales/en/errors.yml @@ -16,4 +16,5 @@ certificateType: No valid certificate type found invalidTestResult: Invalid test result invalidTestType: Invalid test type noCameraAccess: Could not access camera. Check permissions under Settings > Safari > Camera. -noCameraFound: Could not find camera. \ No newline at end of file +noCameraFound: Could not find camera. +safariSupportOnly: On iOS, please use the Safari Browser. \ No newline at end of file diff --git a/public/locales/fi/errors.yml b/public/locales/fi/errors.yml index 7159ffe..35ab1fd 100644 --- a/public/locales/fi/errors.yml +++ b/public/locales/fi/errors.yml @@ -16,4 +16,5 @@ certificateType: Kelvollista varmennetyyppiä ei löytynyt invalidTestResult: Virheellinen testitulos invalidTestType: Virheellinen testityyppi noCameraAccess: Kameraan ei päässyt käsiksi. Tarkista käyttöoikeudet kohdasta Asetukset > Safari > Kamera. -noCameraFound: En löytänyt kameraa. \ No newline at end of file +noCameraFound: En löytänyt kameraa. +safariSupportOnly: Käytä iOS:ssä Safari-selainta. \ No newline at end of file diff --git a/public/locales/fr/errors.yml b/public/locales/fr/errors.yml index 4b6e6fc..dc3119e 100644 --- a/public/locales/fr/errors.yml +++ b/public/locales/fr/errors.yml @@ -16,4 +16,5 @@ certificateType: Aucun type de certificat valide n'a été trouvé invalidTestResult: Résultat du test non valide invalidTestType: Type de test non valide noCameraAccess: Impossible d'accéder à la caméra. Vérifiez les autorisations sous Paramètres > Safari > Appareil photo. -noCameraFound: Impossible de trouver la caméra. \ No newline at end of file +noCameraFound: Impossible de trouver la caméra. +safariSupportOnly: Sur iOS, veuillez utiliser le navigateur Safari. \ No newline at end of file diff --git a/public/locales/nl/errors.yml b/public/locales/nl/errors.yml index cf7f86e..1677032 100644 --- a/public/locales/nl/errors.yml +++ b/public/locales/nl/errors.yml @@ -16,4 +16,5 @@ certificateType: Geen geldig certificaattype gevonden invalidTestResult: Ongeldig testresultaat invalidTestType: Ongeldig testtype noCameraAccess: Kon geen toegang krijgen tot de camera. Controleer de machtigingen onder Instellingen > Safari > Camera. -noCameraFound: Ik kon de camera niet vinden. \ No newline at end of file +noCameraFound: Ik kon de camera niet vinden. +safariSupportOnly: Gebruik op iOS de Safari-browser. \ No newline at end of file From dc01566096de3d05aa83b82381ab888503c5abe2 Mon Sep 17 00:00:00 2001 From: Marvin Sextro Date: Sun, 25 Jul 2021 02:25:39 +0200 Subject: [PATCH 08/10] Try other option for camera error --- components/Form.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/components/Form.tsx b/components/Form.tsx index 05e6b47..66549c5 100644 --- a/components/Form.tsx +++ b/components/Form.tsx @@ -70,7 +70,14 @@ function Form(): JSX.Element { // Show camera view async function showCameraView() { // Create new QR Code Reader - const codeReader = new BrowserQRCodeReader(); + let codeReader: BrowserQRCodeReader; + + try { + codeReader = new BrowserQRCodeReader(); + } catch (e) { + setErrorMessage('noCameraAccess'); + return; + } // Needs to be called before any camera can be accessed let deviceList: MediaDeviceInfo[]; From 4eb2dda807b05cccae03475828e7dc724e41cb23 Mon Sep 17 00:00:00 2001 From: Marvin Sextro Date: Sun, 25 Jul 2021 02:32:28 +0200 Subject: [PATCH 09/10] Simplify error handling --- components/Form.tsx | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/components/Form.tsx b/components/Form.tsx index 66549c5..e053b42 100644 --- a/components/Form.tsx +++ b/components/Form.tsx @@ -70,14 +70,7 @@ function Form(): JSX.Element { // Show camera view async function showCameraView() { // Create new QR Code Reader - let codeReader: BrowserQRCodeReader; - - try { - codeReader = new BrowserQRCodeReader(); - } catch (e) { - setErrorMessage('noCameraAccess'); - return; - } + const codeReader = new BrowserQRCodeReader(); // Needs to be called before any camera can be accessed let deviceList: MediaDeviceInfo[]; @@ -89,7 +82,7 @@ function Form(): JSX.Element { return; } - // Check access to camera device + // Check if camera device is present if (deviceList.length == 0) { setErrorMessage("noCameraFound"); return; From 535a4aed14c59c760b7aac47848170601afc6756 Mon Sep 17 00:00:00 2001 From: Marvin Sextro Date: Sun, 25 Jul 2021 12:51:48 +0200 Subject: [PATCH 10/10] Fix name regex --- src/payload.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/payload.ts b/src/payload.ts index 6e7f6b7..38f651a 100644 --- a/src/payload.ts +++ b/src/payload.ts @@ -73,11 +73,11 @@ export class Payload { const firstName = nameInformation['gn']; const lastName = nameInformation['fn']; - const transliteratedFirstName = nameInformation['gnt']; - const transliteratedLastName = nameInformation['fnt']; + const transliteratedFirstName = nameInformation['gnt'].replaceAll('<', ' '); + const transliteratedLastName = nameInformation['fnt'].replaceAll('<', ' '); // Check if name contains non-latin characters - const nameRegex = new RegExp('^(\\p{Script=Latin}|[ -\'`´])+$', 'u'); + const nameRegex = new RegExp('^[\\p{Script=Latin}\\p{P}\\p{M}\\p{Z}]+$', 'u'); let name: string;