From 8e38eb3550cb3b17a59e6bccd20c0ccfcf67d90c Mon Sep 17 00:00:00 2001
From: Marvin Sextro <marvin.sextro@gmail.com>
Date: Sat, 24 Jul 2021 22:56:42 +0200
Subject: [PATCH] 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 (
         <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 mt-5 rounded relative" role="alert">
-            <span className="block sm:inline" id="message">{props.errorMessage}</span>
+            <span className="block sm:inline pr-6" id="message">{props.errorMessage}</span>
             <span className="absolute top-0 bottom-0 right-0 px-4 py-3" onClick={props.onClose}>
         <svg className="fill-current h-6 w-6 text-red-500" role="button" xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 20 20">
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