Merge pull request #128 from covidpass-org/dev

Swedish translation and layout improvements
covidpass-org · Dec 2, 2021 · 4f80dcf · 4f80dcf
2 parents 50d3830 + 8746d3c
commit 4f80dcf
Show file tree

Hide file tree

Showing 27 changed files with 274 additions and 100 deletions.
diff --git 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 (
-        <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 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">
-            <title>{t('index:errorClose')}</title>
-            <path
-                d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/>
-        </svg>
-      </span>
+        <div className={`${props.isWarning ? "bg-yellow-100 border border-yellow-400 text-yellow-700" : "bg-red-100 border border-red-400 text-red-700"} px-4 py-3 mt-5 rounded-md relative flex justify-between items-center`} role="alert">
+            <span className={`${props.isWarning ? "" : "pr-7"} block sm:inline text-lg`} id="message">{props.message}</span>
+            {
+                !props.isWarning && 
+                <span className="absolute top-0 right-0 p-1 m-2" onClick={props.onClose}>
+                    <svg className="text-red-500 fill-current h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path fill="currentColor"
+                            d="M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108 4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858 12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114 19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12 13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889 19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142 12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189 4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12 10.5858L6.2253 4.81108Z" />
+                    </svg>
+                </span>
+            }
         </div>
     )
 }

diff --git a/components/Button.tsx b/components/Button.tsx
@@ -0,0 +1,21 @@
+interface ButtonProps {
+  text?: string,
+  icon?: string,
+  onClick: () => void,
+}
+
+function Button(props: ButtonProps): JSX.Element {
+    return (
+        <button
+            type="button"
+            onClick={props.onClick}
+            className="focus:outline-none h-20 bg-gray-400 dark:bg-gray-600 hover:bg-gray-500 text-white font-semibold rounded-md items-center flex justify-center">
+            {
+                props.icon && <img src={props.icon} className="w-12 h-12 mr-2 -ml-4" />
+            }
+            {props.text}
+        </button>
+    )
+}
+
+export default Button;
diff --git 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 (
-    <li className="flex flex-row space-x-4 items-center">
-      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mx-2 fill-current text-green-500" viewBox="0 0 20 20" fill="currentColor">
-        <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
-      </svg>
-      {props.text}
-      </li>
-  )
+    return (
+        <li className="flex flex-row space-x-4 items-center">
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 mx-2 fill-current text-green-500" viewBox="0 0 20 20" fill="currentColor">
+                <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+            </svg>
+            {props.text}
+        </li>
+    )
 }
 
 export default Check;
diff --git a/components/Form.tsx b/components/Form.tsx
@@ -13,6 +13,7 @@ import {getPayloadBodyFromFile, getPayloadBodyFromQR} from "../src/process";
 import {PassData} from "../src/pass";
 import {COLORS} from "../src/colors";
 import Colors from './Colors';
+import Button from './Button';
 
 function Form(): JSX.Element {
     const {t} = useTranslation(['index', 'errors', 'common']);
@@ -59,6 +60,44 @@ function Form(): JSX.Element {
             });
         }
     }, [inputFile])
+
+    // Whether Safari is used or not
+    let [isSafari, setIsSafari] = useState<boolean>(true);
+
+    // 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
+        )
+    }, []);
+
+    // Whether Safari is used or not
+    let [isShareDialogAvailable, setIsShareDialogAvailable] = useState<boolean>(false);
+
+    // Check if share dialog is available
+    useEffect(() => {
+        setIsShareDialogAvailable(window.navigator && window.navigator.share !== undefined);
+    }, []);
+
+    // Open share dialog
+    async function showShareDialog() {
+        const shareData = {
+            title: document.title,
+            text: t('common:title') + ' – ' + t('common:subtitle'),
+            url: window.location.protocol + "//" + window.location.host,
+        };
+
+        try {
+            await window.navigator.share(shareData);
+        } catch(error) {
+            console.log(error);
+        }
+    }
 
     // Show file Dialog
     async function showFileDialog() {
@@ -102,7 +141,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 +152,6 @@ function Form(): JSX.Element {
                         setGlobalControls(undefined);
                         setIsCameraOpen(false);
                     }
-                    if (error !== undefined) {
-                        setErrorMessage(error.message);
-                    }
                 }
             )
         );
@@ -164,22 +200,15 @@ function Form(): JSX.Element {
     return (
         <div>
             <form className="space-y-5" id="form" onSubmit={addToWallet}>
+                {
+                    !isSafari && <Alert isWarning={true} message={t('iosHint')} onClose={() => {}}/>
+                }
                 <Card step="1" heading={t('index:selectCertificate')} content={
                     <div className="space-y-5">
                         <p>{t('index:selectCertificateDescription')}</p>
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
-                            <button
-                                type="button"
-                                onClick={isCameraOpen ? hideCameraView : showCameraView}
-                                className="focus:outline-none h-20 bg-gray-500 hover:bg-gray-700 text-white font-semibold rounded-md">
-                                {isCameraOpen ? t('index:stopCamera') : t('index:startCamera')}
-                            </button>
-                            <button
-                                type="button"
-                                onClick={showFileDialog}
-                                className="focus:outline-none h-20 bg-gray-500 hover:bg-gray-700 text-white font-semibold rounded-md">
-                                {t('index:openFile')}
-                            </button>
+                            <Button text={isCameraOpen ? t('index:stopCamera') : t('index:startCamera')} onClick={isCameraOpen ? hideCameraView : showCameraView} />
+                            <Button text={t('index:openFile')} onClick={showFileDialog} />
                         </div>
 
                         <video id="cameraPreview"
@@ -195,7 +224,7 @@ function Form(): JSX.Element {
                         <div className="flex items-center space-x-1">
                             <svg className="h-4 w-4 text-green-600" fill="none" viewBox="0 0 24 24"
                                  stroke="currentColor">
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7"/>
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="3" d="M9 5l7 7-7 7"/>
                             </svg>
                             <span className="w-full truncate">
                                 {
@@ -261,11 +290,21 @@ function Form(): JSX.Element {
                         </div>
                     </div>
                 }/>
+                {
+                    errorMessage && <Alert isWarning={false} message={errorMessage} onClose={() => setErrorMessage(undefined)}/>
+                }
+                <Card content={
+                    <div className={`${isShareDialogAvailable ? "md:grid-cols-2": ""} grid-cols-1 grid gap-5`}>
+                        {
+                            isShareDialogAvailable && <Button text={t('index:share')} onClick={showShareDialog} />
+                        }
+                        <Button icon="kofi.png" text={t('common:donate')} onClick={() => {
+                            window.open('https://ko-fi.com/marvinsxtr', '_blank');
+                        }} />
+                    </div>
+                }/>
             </form>
             <canvas id="canvas" style={{display: "none"}}/>
-            {
-                errorMessage && <Alert errorMessage={errorMessage} onClose={() => setErrorMessage(undefined)}/>
-            }
         </div>
     )
 }

diff --git a/components/Page.tsx b/components/Page.tsx
@@ -24,8 +24,7 @@ function Page(props: PageProps): JSX.Element {
                     {props.content}
 
                     <footer>
-                        <nav className="nav flex pt-4 flex-row space-x-4 justify-center text-md font-bold flex-wrap">
-                            <a href="https://ko-fi.com/marvinsxtr" className="hover:underline">{t('common:donate')}</a>
+                        <nav className="nav flex flex-row space-x-4 justify-center text-md font-bold flex-wrap">
                             <a href="https://github.com/marvinsxtr/covidpass" className="hover:underline">{t('common:gitHub')}</a>
                             <Link href="/privacy"><a className="hover:underline">{t('common:privacyPolicy')}</a></Link>
                             <Link href="/imprint"><a className="hover:underline">{t('common:imprint')}</a></Link>

diff --git a/next-env.d.ts b/next-env.d.ts
@@ -1,6 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
-
-// NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/next-i18next.config.js b/next-i18next.config.js
@@ -11,7 +11,8 @@ module.exports = {
       'it', 'it-IT', 'it-CH',
       'es', 'es-ES',
       'no', 'no-NO',
-      'nb', 'nb-NO'
+      'nb', 'nb-NO',
+      'sv', 'sv-SE', 'sv-FI'
     ],
     localeExtension: 'yml',
   },

diff --git a/pages/imprint.tsx b/pages/imprint.tsx
@@ -12,14 +12,10 @@ function Imprint(): JSX.Element {
             <Card step="§" heading={t('common:imprint')} content={
                 <div className="space-y-3">
                     <p className="font-bold">{t('imprint:heading')}</p>
-                    <p>
-                        Marvin Sextro<br />
-                        Wilhelm-Busch-Str. 8A<br />
-                        30167 Hannover<br />
-                    </p>
+                    <p>Marvin Sextro</p>
                     <p className="font-bold">{t('imprint:contact')}</p>
                     <p>
-                        <a href="mailto:[email protected]" className="underline">[email protected]</a>
+                        <a href="mailto:[email protected]" className="underline">[email protected]</a>
                     </p>
                     <p className="font-bold">{t('imprint:euDisputeResolution')}</p>
                     <p>{t('imprint:euDisputeResolutionParagraph')}</p>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -40,9 +40,8 @@ function Index(): JSX.Element {
             <Page content={
                 <div className="space-y-5">
                     <Card content={
-                        <p>{t('common:subtitle')}&nbsp;{t('index:iosHint')}</p>
+                        <p>{t('common:subtitle')}</p>
                     }/>
-
                     <Form/>
                 </div>
             }/>

diff --git a/pages/privacy.tsx b/pages/privacy.tsx
@@ -49,12 +49,11 @@ function Privacy(): JSX.Element {
                     </div>
                     <p className="font-bold">{t('privacy:contact')}</p>
                     <p>
-                        Marvin Sextro<br/>
-                        Wilhelm-Busch-Str. 8A<br/>
-                        30167 Hannover<br/>
+                        Marvin Sextro
+                        <br/>
                         {t('privacy:email')}:
                         &nbsp;
-                        <a href="mailto:[email protected]">[email protected]</a>
+                        <a href="mailto:[email protected]" className="underline">[email protected]</a>
                         <br/>
                         {t('privacy:website')}:
                         &nbsp;
@@ -137,9 +136,9 @@ function Privacy(): JSX.Element {
                                 </a>
                             </li>
                             <li>
-                                PayPal:
+                                Ko-fi:
                                 &nbsp;
-                                <a href="https://www.paypal.com/de/webapps/mpp/ua/privacy-full?locale.x=en_EN" className="underline">
+                                <a href="https://more.ko-fi.com/privacy" className="underline">
                                     {t('common:privacyPolicy')}
                                 </a>
                             </li>

diff --git a/public/kofi.png b/public/kofi.png
diff --git 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
@@ -26,4 +24,5 @@ iAcceptThe: Ich akzeptiere die
 privacyPolicy: Datenschutzerklärung
 createdOnDevice: Auf Deinem Gerät erstellt
 openSourceTransparent: Open Source und transparent
-hostedInEU: In der EU gehostet
+hostedInEU: In der EU gehostet
+share: Weiterempfehlen
diff --git 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: Επιλογή Αρχείου
@@ -27,3 +25,4 @@ privacyPolicy: Πολιτική Απορρήτου
 createdOnDevice: Δημιουργείται στη συσκευή σας
 openSourceTransparent: Ανοιχτού κώδικα και διαφανής
 hostedInEU: Φιλοξενείται στην ΕΕ
+share: Συστήσει
diff --git 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
@@ -26,4 +24,5 @@ iAcceptThe: I accept the
 privacyPolicy: Privacy Policy
 createdOnDevice: Created on your device
 openSourceTransparent: Open source and transparent
-hostedInEU: Hosted in the EU
+hostedInEU: Hosted in the EU
+share: Share
diff --git 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
@@ -26,4 +24,5 @@ iAcceptThe: Acepto la
 privacyPolicy: Política de Privacidad
 createdOnDevice: Creado en su dispositivo
 openSourceTransparent: Open source y transparente
-hostedInEU: Alojado en la UE
+hostedInEU: Alojado en la UE
+share: Recomendar