Catch up with head repo

Dockerfile

@@ -1,20 +1,20 @@
 # Install dependencies only when needed
-FROM node:14-alpine AS deps
+FROM node:16-alpine AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
 COPY package.json ./
 RUN yarn install --frozen-lockfile
 
 # Rebuild the source code only when needed
-FROM node:14-alpine AS builder
+FROM node:16-alpine AS builder
 WORKDIR /app
 COPY . .
 COPY --from=deps /app/node_modules ./node_modules
 RUN yarn build
 
 # Production image, copy all the files and run next
-FROM node:14-alpine AS runner
+FROM node:16-alpine AS runner
 WORKDIR /app
 
 ENV NODE_ENV production

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>
     )
 }

components/Button.tsx

@@ -0,0 +1,31 @@
+interface ButtonProps {
+  text?: string,
+  icon?: string,
+  loading?: boolean,
+  onClick: () => void,
+}
+
+function Button(props: ButtonProps): JSX.Element {
+
+    function handleTouchEnd(event: React.TouchEvent<HTMLButtonElement>) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        props.onClick();
+    }
+
+    return (
+        <button
+            type="button"
+            onClick={props.onClick}
+            onTouchEnd={handleTouchEnd}
+            className="bg-gray-400 dark:bg-gray-600 hover:bg-gray-500 relative focus:outline-none h-20 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;

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;

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
+        )
+    }, [isSafari]);
+
+    // 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);
+    }, [isShareDialogAvailable]);
+
+    // 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);
-                    }
                 }
             )
         );
@@ -155,6 +191,9 @@ function Form(): JSX.Element {
             const passBlob = new Blob([pass], {type: "application/vnd.apple.pkpass"});
             saveAs(passBlob, 'covid.pkpass');
             setLoading(false);
+
+            var scrollingElement = (document.scrollingElement || document.body);
+            scrollingElement.scrollTop = scrollingElement.scrollHeight;
         } catch (e) {
             setErrorMessage(e.message);
             setLoading(false);
@@ -164,22 +203,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 +227,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">
                                 {
@@ -245,27 +277,38 @@ function Form(): JSX.Element {
                                 </Link>.
                             </p>
                         </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">
+                        <div className="grid grid-cols-1">
+                            <button 
+                                type="submit"
+                                className="bg-green-600 hover:bg-green-700 relative focus:outline-none h-20 text-white font-semibold rounded-md items-center flex justify-center">
+                                <div id="spin" className={`${loading ? undefined : "hidden"} absolute left-2`}>
+                                    <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-80" fill="currentColor"
+                                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
+                                    </svg>
+                                </div>
                                 {t('index:addToWallet')}
                             </button>
-                            <div id="spin" className={loading ? undefined : "hidden"}>
-                                <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"
-                                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
-                                </svg>
-                            </div>
                         </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>
     )
 }

components/Page.tsx

@@ -12,7 +12,7 @@ function Page(props: PageProps): JSX.Element {
     const { t } = useTranslation('common');
 
     return (
-        <div className="md:w-2/3 xl:w-2/5 md:mx-auto flex flex-col min-h-screen justify-center px-5 py-12">
+        <div className="md:w-2/3 xl:w-2/5 md:mx-auto flex flex-col min-h-screen justify-center px-5 pt-12 pb-16">
             <Head>
                 <title>{t('common:title')}</title>
                 <link rel="icon" href="/favicon.ico"/>
@@ -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>

next-i18next.config.js

@@ -11,7 +11,9 @@ module.exports = {
       'it', 'it-IT', 'it-CH',
       'es', 'es-ES',
       'no', 'no-NO',
-      'nb', 'nb-NO'
+      'nb', 'nb-NO',
+      'sv', 'sv-SE', 'sv-FI',
+      'ro', 'ro-RO', 'ro-MD'
     ],
     localeExtension: 'yml',
   },

next.config.js

@@ -2,4 +2,12 @@ const {i18n} = require('./next-i18next.config');
 
 module.exports = {
   i18n,
+  async rewrites() {
+    return [
+        {
+            source: '/pass/note',
+            destination: '/pass'
+        }
+    ];
+  }
 };

package.json

@@ -24,6 +24,7 @@
     "pdfjs-dist": "^2.5.207",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-qr-code": "^2.0.3",
     "uuid": "^8.3.2",
     "webpack": "^5.0.0",
     "worker-loader": "^3.0.7"

pages/imprint.tsx

@@ -14,12 +14,12 @@ function Imprint(): JSX.Element {
                     <p className="font-bold">{t('imprint:heading')}</p>
                     <p>
                         Marvin Sextro<br />
-                        Wilhelm-Busch-Str. 8A<br />
-                        30167 Hannover<br />
+                        Kopenhagener Straße 45<br />
+                        10437 Berlin
                     </p>
                     <p className="font-bold">{t('imprint:contact')}</p>
                     <p>
-                        <a href="mailto:marvin.sextro@gmail.com" className="underline">marvin.sextro@gmail.com</a>
+                        <a href="mailto:covidpass@marvinsextro.de" className="underline">covidpass@marvinsextro.de</a>
                     </p>
                     <p className="font-bold">{t('imprint:euDisputeResolution')}</p>
                     <p>{t('imprint:euDisputeResolutionParagraph')}</p>

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>
             }/>