Merge pull request #70 from covidpass-org/dev

Color selector and translation fixes

Author: marvinsxtr

components/Colors.tsx

@@ -0,0 +1,45 @@
+import React, {useState} from 'react'
+import {RadioGroup} from '@headlessui/react'
+import {COLORS, rgbToHex} from "../src/colors";
+
+interface ColorsProps {
+    initialValue: COLORS,
+    onChange(value: COLORS): void;
+}
+
+function Colors(props: ColorsProps): JSX.Element {
+    let [color, setColor] = useState(props.initialValue)
+
+    return (
+        <RadioGroup<"div", COLORS> 
+            className="flex flex-wrap" value={color}
+            onChange={function (value) {
+                setColor(value);
+                props.onChange(value);
+            }
+        }>
+            {Object.values(COLORS).map((color) => {
+                return (
+                    <RadioGroup.Option value={color} key={color} className="outline-none">
+                        {({checked}) => (
+                            <div
+                                key={color}
+                                className={`${color !== COLORS.WHITE ? 'ring-white' : 'ring-black'} ring-2 shadow-xl cursor-pointer rounded-md w-10 h-10 flex items-center justify-center m-2`}
+                                style={{backgroundColor: rgbToHex(color), WebkitAppearance: 'none'}}
+                            >
+                                {checked &&
+                                    <svg className={`${color !== COLORS.WHITE ? 'text-white' : 'text-black'} h-6 w-6`} fill="none"
+                                        viewBox="0 0 24 24" stroke="currentColor">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.5" d="M5 13l4 4L19 7"/>
+                                    </svg>
+                                }
+                            </div>
+                        )}
+                    </RadioGroup.Option>
+                )
+            })}
+        </RadioGroup>
+    )
+}
+
+export default Colors;

components/Form.tsx

@@ -1,6 +1,6 @@
 import {saveAs} from 'file-saver';
 import React, {FormEvent, useEffect, useRef, useState} from "react";
-import {BrowserQRCodeReader} from "@zxing/browser";
+import {BrowserQRCodeReader, IScannerControls} from "@zxing/browser";
 import {Result} from "@zxing/library";
 import {useTranslation} from 'next-i18next';
 import Link from 'next/link';
@@ -11,15 +11,20 @@ import Check from './Check';
 import {PayloadBody} from "../src/payload";
 import {getPayloadBodyFromFile, getPayloadBodyFromQR} from "../src/process";
 import {PassData} from "../src/pass";
+import {COLORS} from "../src/colors";
+import Colors from './Colors';
 
 function Form(): JSX.Element {
-    const { t } = useTranslation(['index', 'errors', 'common']);
+    const {t} = useTranslation(['index', 'errors', 'common']);
 
     // Whether camera is open or not
     const [isCameraOpen, setIsCameraOpen] = useState<boolean>(false);
 
+    // Currently selected color
+    const [selectedColor, setSelectedColor] = useState<COLORS>(COLORS.WHITE);
+
     // Global camera controls
-    const [globalControls, setGlobalControls] = useState(undefined);
+    const [globalControls, setGlobalControls] = useState<IScannerControls>(undefined);
 
     // Currently selected QR Code / File. Only one of them is set.
     const [qrCode, setQrCode] = useState<Result>(undefined);
@@ -82,7 +87,7 @@ function Form(): JSX.Element {
             setErrorMessage('noCameraAccess');
             return;
         }
-        
+
         // Check if camera device is present
         if (deviceList.length == 0) {
             setErrorMessage("noCameraFound");
@@ -123,7 +128,7 @@ function Form(): JSX.Element {
         event.preventDefault();
         setLoading(true);
 
-        if(navigator.userAgent.match('CriOS')) {
+        if (navigator.userAgent.match('CriOS')) {
             setErrorMessage('safariSupportOnly');
             setLoading(false);
             return;
@@ -135,7 +140,7 @@ function Form(): JSX.Element {
             return;
         }
 
-        const color = (document.getElementById('color') as HTMLSelectElement).value;
+        const color = selectedColor;
         let payloadBody: PayloadBody;
 
         try {
@@ -208,24 +213,7 @@ function Form(): JSX.Element {
                     <div className="space-y-5">
                         <p>{t('index:pickColorDescription')}</p>
                         <div className="relative inline-block w-full">
-                            <select name="color" id="color"
-                                    className="bg-gray-200 dark:bg-gray-900 focus:outline-none w-full h-10 pl-3 pr-6 text-base rounded-md appearance-none cursor-pointer">
-                                <option value="white">{t('index:colorWhite')}</option>
-                                <option value="black">{t('index:colorBlack')}</option>
-                                <option value="grey">{t('index:colorGrey')}</option>
-                                <option value="green">{t('index:colorGreen')}</option>
-                                <option value="indigo">{t('index:colorIndigo')}</option>
-                                <option value="blue">{t('index:colorBlue')}</option>
-                                <option value="purple">{t('index:colorPurple')}</option>
-                                <option value="teal">{t('index:colorTeal')}</option>
-                            </select>
-                            <div className="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
-                                <svg className="w-5 h-5 fill-current" viewBox="0 0 20 20">
-                                    <path
-                                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                                        clipRule="evenodd" fillRule="evenodd"/>
-                                </svg>
-                            </div>
+                            <Colors onChange={setSelectedColor} initialValue={selectedColor}/>
                         </div>
                     </div>
                 }/>
@@ -241,13 +229,13 @@ function Form(): JSX.Element {
                         </p>
                         <div>
                             <ul className="list-none">
-                                <Check text={t('createdOnDevice')}></Check>
-                                <Check text={t('openSourceTransparent')}></Check>
-                                <Check text={t('hostedInEU')}></Check>
+                                <Check text={t('createdOnDevice')}/>
+                                <Check text={t('openSourceTransparent')}/>
+                                <Check text={t('hostedInEU')}/>
                             </ul>
                         </div>
                         <label htmlFor="privacy" className="flex flex-row space-x-4 items-center">
-                            <input type="checkbox" id="privacy" value="privacy" required className="h-4 w-4"/>
+                            <input type="checkbox" id="privacy" value="privacy" required className="h-5 w-5 outline-none"/>
                             <p>
                                 {t('index:iAcceptThe')}&nbsp;
                                 <Link href="/privacy">
@@ -259,11 +247,11 @@ function Form(): JSX.Element {
                         </label>
                         <div className="flex flex-row items-center justify-start">
                             <button id="download" type="submit"
-                                    className="focus:outline-none bg-green-600 py-2 px-3 text-white font-semibold rounded-md disabled:bg-gray-400">
+                                    className="focus:outline-none bg-green-600 py-2 px-3 mt-2 text-white font-semibold rounded-md disabled:bg-gray-400">
                                 {t('index:addToWallet')}
                             </button>
                             <div id="spin" className={loading ? undefined : "hidden"}>
-                                <svg className="animate-spin h-5 w-5 ml-3" viewBox="0 0 24 24">
+                                <svg className="animate-spin h-5 w-5 ml-4" viewBox="0 0 24 24">
                                     <circle className="opacity-0" cx="12" cy="12" r="10" stroke="currentColor"
                                             strokeWidth="4"/>
                                     <path className="opacity-75" fill="currentColor"

package.json

@@ -9,6 +9,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@headlessui/react": "^1.3.0",
     "@zxing/browser": "^0.0.9",
     "@zxing/library": "^0.18.6",
     "base45": "^3.0.0",

public/locales/el/common.yml

@@ -1,5 +1,5 @@
 title: CovidPass
-subtitle: Προσθέστε το Ευρωπαϊκό ψηφιακό πιστοποιητικό COVID-19 στην αγαπημένη σας Wallet εφαρμογή.
+subtitle: Προσθέστε το Ευρωπαϊκό ψηφιακό πιστοποιητικό COVID-19 στην αγαπημένη σας εφαρμογή Wallet.
 privacyPolicy: Πολιτική Απορρήτου
 donate: Χορηγία
 gitHub: GitHub

public/locales/el/errors.yml

@@ -17,4 +17,4 @@ invalidTestResult: Μη έγκυρο αποτέλεσμα εξέτασης
 invalidTestType: Μη έγκυρος τύπος εξέτασης
 noCameraAccess: Δεν ήταν δυνατή η πρόσβαση στην κάμερα. Ελέγξτε τα δικαιώματα στις Ρυθμίσεις > Safari > Κάμερα.
 noCameraFound: Δεν μπόρεσε να βρει τη φωτογραφική μηχανή.
-safariSupportOnly: Στο iOS, χρησιμοποιήστε το πρόγραμμα περιήγησης Safari.
+safariSupportOnly: Στο iOS, χρησιμοποιήστε το πρόγραμμα περιήγησης Safari.

public/locales/el/imprint.yml

@@ -1,19 +1,19 @@
 heading: Πληροφορίες σχετικά με την § 5 του Γερμανικού Telemediengesetz (TMG)
 contact: Επικοινωνία
-euDisputeResolution: Επίλυση Διαφορών στην ΕΕ
+euDisputeResolution: Επίλυση διαφορών στην ΕΕ
 euDisputeResolutionParagraph: |
   Η Ευρωπαϊκή Επιτροπή παρέχει μια πλατφόρμα για διαδικτυακή επίλυση διαφορών (OS): https://ec.europa.eu/consumers/odr
   Μπορείτε να βρείτε την διεύθυνση e-mail μας στον παραπάνω σύνδεσμο.
 consumerDisputeResolution: Επίλυση διαφορών καταναλωτών / Γενική επιτροπή διαιτησίας
 consumerDisputeResolutionParagraph: Δεν είμαστε πρόθυμοι ή υποχρεωμένοι να συμμετάσχουμε σε διαδικασίες επίλυσης διαφορών ενώπιον κάποιας επιτροπής διαιτησίας για τον καταναλωτή.
-liabilityForContents: Ευθύνη για το Περιεχόμενο
+liabilityForContents: Ευθύνη για το περιεχόμενο
 liabilityForContentsParagraph: |
   Ως πάροχος μιας υπηρεσίας, είμαστε υπεύθυνοι για το δικό μας περιεχόμενο σε αυτές τις σελίδες, βάσει της § 7 παράγραφο 1 του TMG και σύμφωνα με τους γενικούς νόμους.
   Σύμφωνα με τις §§ 8 έως 10 του TMG, δεν είμαστε υποχρεωμένοι να παρακολουθούμε μεταδιδόμενες ή αποθηκευμένες πληροφορίες ή να διερευνούμε περιπτώσεις που υποδηλώνουν παράνομη δραστηριότητα.
   Οι υποχρεώσεις για κατάργηση ή αποκλεισμό της χρήσης πληροφοριών, σύμφωνα με τους γενικούς νόμους, παραμένουν ανεπηρέαστες.
   Ωστόσο, η ευθύνη στο θέμα αυτό είναι δυνατή μόνο από τη στιγμή κατά την οποία γίνεται γνωστή κάποια παγειωμένη παράβαση του νόμου.
   Αν αντιληφθούμε τέτοιες παραβάσεις, θα καταργήσουμε αμέσως το σχετικό περιεχόμενο.
-liabilityForLinks: Ευθύνη για Συνδέσμους
+liabilityForLinks: Ευθύνη για τους συνδέσμους
 liabilityForLinksParagraph: |
   Η υπηρεσία που παρέχουμε περιέχει συνδέσμους προς εξωτερικούς ιστότοπους τρίτων, στα περιεχόμενα των οποίων δεν έχουμε καμία επιρροή.
   Επομένως, δεν μπορούμε να αναλάβουμε καμία ευθύνη για αυτά τα περιεχόμενα τρίτων.

public/locales/el/index.yml

@@ -14,16 +14,16 @@ colorWhite: λευκό
 colorBlack: μαύρο
 colorGrey: γκρι
 colorGreen: πράσινο
-colorIndigo: σκούρο μωβ
-colorBlue: μπλε
-colorPurple: ανοικτό μωβ
+colorIndigo: μπλε
+colorBlue: γαλάζιο
+colorPurple: μωβ
 colorTeal: τιρκουάζ
 addToWallet: Προσθήκη στο Wallet
 dataPrivacyDescription: |
   Το απόρρητο των δεδομένων αποκτά ιδιαίτερη σημασία κατά την επεξεργασία εκείνων που σχετίζονται με την υγεία.
   Για να μπορέσετε να λάβετε μια τεκμηριωμένη απόφαση, παρακαλώ διαβάστε πρώτα την
 iAcceptThe: Αποδέχομαι την
 privacyPolicy: Πολιτική Απορρήτου
-createdOnDevice: Δημιουργήθηκε στη συσκευή σας
-OpenSourceTransparent: Ανοιχτού κώδικα και διαφανής
-hostedInEU: φιλοξενείται στην ΕΕ
+createdOnDevice: Δημιουργείται στη συσκευή σας
+openSourceTransparent: Ανοιχτού κώδικα και διαφανής
+hostedInEU: Φιλοξενείται στην ΕΕ

public/locales/el/privacy.yml

@@ -21,7 +21,7 @@ dataPrivacyFaq: συχνές ερωτήσεις (FAQ) για το απόρρητ
 contact: Επικοινωνία
 email: E-mail
 website: Ιστότοπος
-process: Απλοποιημένη εξήγηση της διαδικασίας
+process: Απλοποιημένη επεξήγηση της διαδικασίας
 processFirst: Αρχικά, τα ακόλουθα βήματα λαμβάνουν χώρα τοπικά στο πρόγραμμα περιήγησής σας
 processSecond: Δεύτερον, τα ακόλουθα βήματα λαμβάνουν χώρα στον διακομιστή μας
 processThird: Τέλος, τα ακόλουθα βήματα λαμβάνουν χώρα τοπικά στο πρόγραμμα περιήγησής σας
@@ -54,4 +54,4 @@ rightsErasure: Δικαίωμα διαγραφής - έχετε το δικαί
 rightsRectification: Δικαίωμα διόρθωσης - έχετε το δικαίωμα να διορθώσετε ανακριβή δεδομένα.
 rightsPortability: Δικαίωμα φορητότητας δεδομένων - έχετε το δικαίωμα να μεταφέρετε τα δεδομένα σας από ένα σύστημα επεξεργασίας σε άλλο.
 thirdParties: Συνδεδεμένοι πάροχοι τρίτων
-appleSync: Η Apple δύναται να συγχρονίσει το πάσο σας μέσω του iCloud
+appleSync: Η Apple ενδέχεται να συγχρονίσει το πάσο σας μέσω του iCloud

public/locales/it/common.yml

@@ -1,6 +1,6 @@
 title: CovidPass
-subtitle: Aggiungi i tuoi certificati digitali europei COVID alle tue app Wallet preferite.
-privacyPolicy: Politica sulla Riservatezza
+subtitle: Aggiungi i tuoi Certificati COVID Digitali UE alle tue wallet app preferite.
+privacyPolicy: Privacy Policy
 donate: Donazione
 gitHub: GitHub
-imprint: Menzioni legali
+imprint: Menzioni legali

public/locales/it/errors.yml

@@ -1,20 +1,20 @@
 noFileOrQrCode: Perfavore scannerizza un Codice QR, o seleziona un file
 signatureFailed: Errore durante la firma del pass sul server
-decodingFailed: Impossibile decodificare il payload del Codice QR
+decodingFailed: Impossibile decodificare il contenuto del codice QR
 invalidColor: Colore non valido
 certificateData: Impossibile leggere i dati del certificato
 nameMissing: Impossibile leggere il nome
 dobMissing: Impossibile leggere la data di nascita
 invalidMedicalProduct: Prodotto medico non valido
-invalidCountryCode: Codice paese non valido
+invalidCountryCode: Codice del paese non valido
 invalidManufacturer: Produttore non valido
 invalidFileType: Tipo di file non valido
 couldNotDecode: Impossibile decodificare il Codice QR dal file
-couldNotFindQrCode: Impossibile trovare il Codice QR nel Codice QR fornito dal file
+couldNotFindQrCode: Impossibile trovare il Codice QR nel file
 invalidQrCode: Codice QR non valido
 certificateType: Nessun tipo di certificato valido trovato
 invalidTestResult: Risultato del test non valido
 invalidTestType: Tipo di test non valido
 noCameraAccess: Impossibile accedere alla fotocamera. Controlla le autorizzazioni in Impostazioni > Safari > Fotocamera.
 noCameraFound: Impossibile trovare la fotocamera.
-safariSupportOnly: Su iOS, usa il browser Safari.
+safariSupportOnly: Su iOS, usa il browser Safari.