From 22c00b405251033ce703834c10f4df2ba62ac43b Mon Sep 17 00:00:00 2001 From: Marvin Sextro Date: Thu, 2 Dec 2021 01:02:20 +0100 Subject: [PATCH] Added browser warning and minor layout and content improvements --- components/Alert.tsx | 28 +++++++++++++--------------- components/Check.tsx | 20 ++++++++------------ components/Form.tsx | 31 +++++++++++++++++++++++-------- components/Page.tsx | 2 +- pages/imprint.tsx | 8 ++------ pages/index.tsx | 3 +-- pages/privacy.tsx | 11 +++++------ public/locales/de/index.yml | 4 +--- public/locales/el/index.yml | 4 +--- public/locales/en/index.yml | 4 +--- public/locales/es/index.yml | 4 +--- public/locales/fi/index.yml | 4 +--- public/locales/fr/index.yml | 4 +--- public/locales/it/index.yml | 4 +--- public/locales/nb/index.yml | 4 +--- public/locales/nl/index.yml | 4 +--- 16 files changed, 62 insertions(+), 77 deletions(-) diff --git a/components/Alert.tsx b/components/Alert.tsx index 4fffdfb..bfe1333 100644 --- a/components/Alert.tsx +++ b/components/Alert.tsx @@ -1,24 +1,22 @@ -import {useTranslation} from 'next-i18next'; - interface AlertProps { onClose: () => void; - errorMessage: string; + message: string; + isWarning: boolean; } function Alert(props: AlertProps): JSX.Element { - const { t } = useTranslation(['index', 'errors']); - return ( -
- {props.errorMessage} - - - {t('index:errorClose')} - - - +
+ {props.message} + { + !props.isWarning && + + + + + + }
) } diff --git a/components/Check.tsx b/components/Check.tsx index cd7a3f3..d8f8847 100644 --- a/components/Check.tsx +++ b/components/Check.tsx @@ -1,20 +1,16 @@ -import {useTranslation} from 'next-i18next'; - interface CheckProps { text: string; } function Check(props: CheckProps): JSX.Element { - const { t } = useTranslation(["index"]); - - return ( -
  • - - - - {props.text} -
    • - ) + return ( +
  • + + + + {props.text} +
    • + ) } export default Check; \ No newline at end of file diff --git a/components/Form.tsx b/components/Form.tsx index 5f30517..75b5505 100644 --- a/components/Form.tsx +++ b/components/Form.tsx @@ -59,6 +59,21 @@ function Form(): JSX.Element { }); } }, [inputFile]) + + // Whether Safari is used or not + let [isSafari, setIsSafari] = useState(false); + + // Check if Safari is used + useEffect(() => { + const navigator = window.navigator; + setIsSafari( + navigator.vendor && + navigator.vendor.indexOf('Apple') > -1 && + navigator.userAgent && + navigator.userAgent.indexOf('CriOS') == -1 && + navigator.userAgent.indexOf('FxiOS') == -1 + ) + }, []); // Show file Dialog async function showFileDialog() { @@ -102,7 +117,7 @@ function Form(): JSX.Element { // Start decoding from video device await codeReader.decodeFromVideoDevice(undefined, previewElem, - (result, error, controls) => { + (result, _error, controls) => { if (result !== undefined) { setQrCode(result); setFile(undefined); @@ -113,9 +128,6 @@ function Form(): JSX.Element { setGlobalControls(undefined); setIsCameraOpen(false); } - if (error !== undefined) { - setErrorMessage(error.message); - } } ) ); @@ -164,6 +176,9 @@ function Form(): JSX.Element { return (
    + { + !isSafari && {}}/> + }

    {t('index:selectCertificateDescription')}

    @@ -171,13 +186,13 @@ function Form(): JSX.Element {
    @@ -195,7 +210,7 @@ function Form(): JSX.Element {
    - + { @@ -264,7 +279,7 @@ function Form(): JSX.Element { { - errorMessage && setErrorMessage(undefined)}/> + errorMessage && setErrorMessage(undefined)}/> }
    ) diff --git a/components/Page.tsx b/components/Page.tsx index 8b591ee..3c39b8c 100644 --- a/components/Page.tsx +++ b/components/Page.tsx @@ -24,7 +24,7 @@ function Page(props: PageProps): JSX.Element { {props.content}
    -
    }/> diff --git a/pages/privacy.tsx b/pages/privacy.tsx index 2168058..13bd2f0 100644 --- a/pages/privacy.tsx +++ b/pages/privacy.tsx @@ -49,12 +49,11 @@ function Privacy(): JSX.Element {

    {t('privacy:contact')}

    - Marvin Sextro
    - Wilhelm-Busch-Str. 8A
    - 30167 Hannover
    + Marvin Sextro +
    {t('privacy:email')}:   - marvin.sextro@gmail.com + covidpass@marvinsextro.de
    {t('privacy:website')}:   @@ -137,9 +136,9 @@ function Privacy(): JSX.Element {

  • - PayPal: + Ko-fi:   - + {t('common:privacyPolicy')}
    • diff --git a/public/locales/de/index.yml b/public/locales/de/index.yml index e4c8771..0891e3d 100644 --- a/public/locales/de/index.yml +++ b/public/locales/de/index.yml @@ -1,9 +1,7 @@ iosHint: Bitte verwende unter iOS den Safari Browser. errorClose: Schließen selectCertificate: Zertifikat auswählen -selectCertificateDescription: | - Scanne den QR-Code auf Deinem Zertifikat oder wähle einen Screenshot oder eine PDF-Datei mit dem QR-Code. - Bitte beachte, dass die Auswahl einer Datei direkt von der Kamera nicht unterstützt wird. +selectCertificateDescription: Scanne den QR-Code auf Deinem Zertifikat oder wähle einen Screenshot oder eine PDF-Datei mit dem QR-Code. stopCamera: Kamera stoppen startCamera: Kamera starten openFile: Datei auswählen diff --git a/public/locales/el/index.yml b/public/locales/el/index.yml index 003304f..dba1235 100644 --- a/public/locales/el/index.yml +++ b/public/locales/el/index.yml @@ -1,9 +1,7 @@ iosHint: Στο iOS, παρακαλώ χρησιμοποιήστε τον περιηγητή Safari. errorClose: Κλείσιμο selectCertificate: Επιλογή Πιστοποιητικού -selectCertificateDescription: | - Παρακαλώ σαρώστε τον κωδικό QR του πιστοποιητικού σας ή επιλέξτε ένα στιγμιότυπο οθόνης ή την σελίδα PDF με τον κωδικό QR. - Λάβετε υπόψη πως η απευθείας επιλογή κάποιου αρχείου μέσω της κάμερας, δεν υποστηρίζεται. +selectCertificateDescription: Παρακαλώ σαρώστε τον κωδικό QR του πιστοποιητικού σας ή επιλέξτε ένα στιγμιότυπο οθόνης ή την σελίδα PDF με τον κωδικό QR. stopCamera: Τερματισμός Κάμερας startCamera: Εκκίνηση Κάμερας openFile: Επιλογή Αρχείου diff --git a/public/locales/en/index.yml b/public/locales/en/index.yml index b50d79c..f515f7b 100644 --- a/public/locales/en/index.yml +++ b/public/locales/en/index.yml @@ -1,9 +1,7 @@ iosHint: On iOS, please use the Safari Browser. errorClose: Close selectCertificate: Select Certificate -selectCertificateDescription: | - Please scan the QR code on your certificate or select a screenshot or PDF page with the QR code. - Note that selecting a file directly from camera is not supported. +selectCertificateDescription: Please scan the QR code on your certificate or select a screenshot or PDF page with the QR code. stopCamera: Stop Camera startCamera: Start Camera openFile: Select File diff --git a/public/locales/es/index.yml b/public/locales/es/index.yml index 267cde3..04e95ba 100644 --- a/public/locales/es/index.yml +++ b/public/locales/es/index.yml @@ -1,9 +1,7 @@ iosHint: En iOS, Por favor use el navegador Safari. errorClose: Cerrar selectCertificate: Seleccione Certificado -selectCertificateDescription: | - Escanee el código QR de su certificado, o seleccione una captura de pantalla o un PDF que contenga el código QR. - Tenga en cuenta que no se admite la selección de un archivo directamente desde la cámara. +selectCertificateDescription: Escanee el código QR de su certificado, o seleccione una captura de pantalla o un PDF que contenga el código QR. stopCamera: Detener Cámara startCamera: Iniciar Cámara openFile: Seleccione archivo diff --git a/public/locales/fi/index.yml b/public/locales/fi/index.yml index 2bd4e02..47431c2 100644 --- a/public/locales/fi/index.yml +++ b/public/locales/fi/index.yml @@ -1,9 +1,7 @@ iosHint: Käytä iOS:ssä Safari-selainta. errorClose: Sulje selectCertificate: Valitse todistus -selectCertificateDescription: | - Skannaa todistuksessa oleva QR-koodi tai valitse kuvakaappaus tai PDF-sivu, jossa on QR-koodi. - Huomaa, että tiedoston valitsemista suoraan kamerasta ei tueta. +selectCertificateDescription: Skannaa todistuksessa oleva QR-koodi tai valitse kuvakaappaus tai PDF-sivu, jossa on QR-koodi. stopCamera: Lopeta Kamera startCamera: Käynnistä Kamera openFile: Valitse Tiedosto diff --git a/public/locales/fr/index.yml b/public/locales/fr/index.yml index 2a8000d..ac0118a 100644 --- a/public/locales/fr/index.yml +++ b/public/locales/fr/index.yml @@ -1,9 +1,7 @@ iosHint: Sur iOS, veuillez utiliser le navigateur Safari. errorClose: Fermez selectCertificate: Sélectionner le certificat -selectCertificateDescription: | - Veuillez scanner le QR Code de votre certificat ou sélectionner une capture d'écran ou une page PDF avec le QR Code. - Notez que la sélection d'un fichier directement à partir de l'appareil photo n'est pas prise en charge. +selectCertificateDescription: Veuillez scanner le QR Code de votre certificat ou sélectionner une capture d'écran ou une page PDF avec le QR Code. stopCamera: Arrêter l'appareil photo startCamera: Démarrer l'appareil photo openFile: Sélectionner un fichier diff --git a/public/locales/it/index.yml b/public/locales/it/index.yml index e41acbe..961c315 100644 --- a/public/locales/it/index.yml +++ b/public/locales/it/index.yml @@ -1,9 +1,7 @@ iosHint: Su iOS, si prega di utilizzare il browser Safari. errorClose: Chiudi selectCertificate: Seleziona il certificato -selectCertificateDescription: | - Scannerizza il codice QR sul tuo certificato o seleziona uno screenshot o una pagina PDF con il codice QR. - Nota che la selezione di un file direttamente dalla fotocamera non è supportata. +selectCertificateDescription: Scannerizza il codice QR sul tuo certificato o seleziona uno screenshot o una pagina PDF con il codice QR. stopCamera: Blocca Fotocamera startCamera: Avvia Fotocamera openFile: Seleziona un File diff --git a/public/locales/nb/index.yml b/public/locales/nb/index.yml index b0245c3..c01ea1f 100644 --- a/public/locales/nb/index.yml +++ b/public/locales/nb/index.yml @@ -1,9 +1,7 @@ iosHint: På iOS, vennligst bruk Safari nettleseren. errorClose: Lukk selectCertificate: Velg Sertifikat -selectCertificateDescription: | - Skann QR-koden på sertifikatet ditt, eller velg et skjermbilde eller en PDF med QR-koden. - Vær oppmerksom på at det ikke støttes å velge en fil direkte fra kameraet. +selectCertificateDescription: Skann QR-koden på sertifikatet ditt, eller velg et skjermbilde eller en PDF med QR-koden. stopCamera: Stopp Kamera startCamera: Start Kamera openFile: Velg Fil diff --git a/public/locales/nl/index.yml b/public/locales/nl/index.yml index e0fcb85..02ca682 100644 --- a/public/locales/nl/index.yml +++ b/public/locales/nl/index.yml @@ -1,9 +1,7 @@ iosHint: Gebruik op iOS de Safari-browser. errorClose: Sluiten selectCertificate: Selecteer Certificaat -selectCertificateDescription: | - Scan de QR-code op uw certificaat of selecteer een screenshot of pdf-pagina met de QR-code. - Merk op dat het rechtstreeks vanaf de camera selecteren van een bestand niet wordt ondersteund. +selectCertificateDescription: Scan de QR-code op uw certificaat of selecteer een screenshot of pdf-pagina met de QR-code. stopCamera: Stop Camera startCamera: Start Camera openFile: Selecteer Bestand