From 2a9bdd86d7da1b6529218eb64e84615b5b26df76 Mon Sep 17 00:00:00 2001
From: Marvin Sextro <marvin.sextro@gmail.com>
Date: Mon, 10 Jan 2022 03:10:40 +0100
Subject: [PATCH] Improve QR code viewer and try to fix buttons

---
 components/Button.tsx       |  3 ++-
 next.config.js              |  8 +++++++
 pages/imprint.tsx           |  6 +++++-
 pages/pass.tsx              | 42 ++++++++++++++++++++++---------------
 public/locales/de/index.yml |  3 ++-
 public/locales/en/index.yml |  3 ++-
 public/robots.txt           |  3 +++
 src/payload.ts              |  2 +-
 8 files changed, 48 insertions(+), 22 deletions(-)
 create mode 100644 public/robots.txt

diff --git a/components/Button.tsx b/components/Button.tsx
index b8326d4..2520186 100644
--- a/components/Button.tsx
+++ b/components/Button.tsx
@@ -20,7 +20,8 @@ function Button(props: ButtonProps): JSX.Element {
     return (
         <button
             type={props.type}
-            onClick={props.onClick}
+            onMouseUp={props.onClick}
+            onTouchEnd={props.onClick}
             className={`${props.type == ButtonType.submit ? "bg-green-600 hover:bg-green-700" : "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" />
diff --git a/next.config.js b/next.config.js
index 63a0bc9..ddf6dfb 100644
--- a/next.config.js
+++ b/next.config.js
@@ -2,4 +2,12 @@ const {i18n} = require('./next-i18next.config');
 
 module.exports = {
   i18n,
+  async rewrites() {
+    return [
+        {
+            source: '/pass/note',
+            destination: '/pass'
+        }
+    ];
+  }
 };
\ No newline at end of file
diff --git a/pages/imprint.tsx b/pages/imprint.tsx
index 6592cef..8de5537 100644
--- a/pages/imprint.tsx
+++ b/pages/imprint.tsx
@@ -12,7 +12,11 @@ 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</p>
+                    <p>
+                        Marvin Sextro<br />
+                        Kopenhagener Straße 45<br />
+                        10437 Berlin
+                    </p>
                     <p className="font-bold">{t('imprint:contact')}</p>
                     <p>
                         <a href="mailto:covidpass@marvinsextro.de" className="underline">covidpass@marvinsextro.de</a>
diff --git a/pages/pass.tsx b/pages/pass.tsx
index 1af5b0a..4da4de4 100644
--- a/pages/pass.tsx
+++ b/pages/pass.tsx
@@ -1,47 +1,55 @@
+import {useTranslation} from 'next-i18next';
 import {serverSideTranslations} from 'next-i18next/serverSideTranslations';
 
 import React, {useEffect, useState} from "react";
 import QRCode from "react-qr-code";
 
+import Alert from '../components/Alert';
 import Card from '../components/Card';
 import Logo from "../components/Logo";
 
 function Pass(): JSX.Element {
-    const [fragment, setFragment] = useState<string>(undefined);
+    const { t } = useTranslation(['common', 'index']);
 
-    function closeViewer() {
-        setFragment(undefined);
-        window.location.replace('/');
-    }
+    const [fragment, setFragment] = useState<string>(undefined);
+    const [view, setView] = useState<boolean>(true);
 
     useEffect(() => {
         const rawFragment = window.location.hash.substring(1);
-        const decodedFragment = Buffer.from(rawFragment, 'base64').toString();
-        setFragment(decodedFragment);
 
-        document.addEventListener('visibilitychange', () => {
-            if (document.hidden) {
-                closeViewer();
+        if (!rawFragment) {
+            setView(false);
+        }
+        
+        const resizeTimeout = window.setTimeout(() => {
+            if (rawFragment) {
+                window.location.replace('/pass/note');
             }
-        });
+        }, 100);
 
-        window.addEventListener('blur', closeViewer);
-        window.addEventListener('beforeunload', closeViewer);
-        window.addEventListener('pagehide', closeViewer);
+        window.addEventListener('resize', () => {
+            clearTimeout(resizeTimeout);
+            const decodedFragment = Buffer.from(rawFragment, 'base64').toString();
+            setFragment(decodedFragment);
+        });
     }, []);
 
     return (
-        <div className="py-6 flex flex-col space-y-5 items-center">
+        <div className="py-5 flex flex-col space-y-5 md:w-2/3 xl:w-2/5 md:mx-auto items-center justify-center px-5">
             <Logo/>
             <div className="flex flex-row items-center">
                 {
                     fragment && 
                     <Card content={
                         <div className="p-2 bg-white rounded-md">
-                        <QRCode value={fragment} size={280} level="L" />
+                            <QRCode value={fragment} size={280} level="L" />
                         </div>
                     } />
                 }
+                {
+                    !view && 
+                    <Alert isWarning={true} message={t('index:viewerNote')} onClose={undefined} />
+                }
             </div>
         </div>
     )
@@ -50,7 +58,7 @@ function Pass(): JSX.Element {
 export async function getStaticProps({ locale }) {
     return {
         props: {
-            ...(await serverSideTranslations(locale, ['common'])),
+            ...(await serverSideTranslations(locale, ['index', 'common'])),
         },
     };
 }
diff --git a/public/locales/de/index.yml b/public/locales/de/index.yml
index f2ff103..b821e23 100644
--- a/public/locales/de/index.yml
+++ b/public/locales/de/index.yml
@@ -25,4 +25,5 @@ privacyPolicy: Datenschutzerklärung
 createdOnDevice: Auf Deinem Gerät erstellt
 openSourceTransparent: Open Source und transparent
 hostedInEU: In der EU gehostet
-share: Weiterempfehlen
\ No newline at end of file
+share: Weiterempfehlen
+viewerNote: Bitte drücke und halte den Link auf der Rückseite des Passes, um den QR Code unter iOS vergrößert anzuzeigen.
\ No newline at end of file
diff --git a/public/locales/en/index.yml b/public/locales/en/index.yml
index f579821..9279691 100644
--- a/public/locales/en/index.yml
+++ b/public/locales/en/index.yml
@@ -25,4 +25,5 @@ privacyPolicy: Privacy Policy
 createdOnDevice: Created on your device
 openSourceTransparent: Open source and transparent
 hostedInEU: Hosted in the EU
-share: Share
\ No newline at end of file
+share: Share
+viewerNote: Please press and hold the link on the back of the pass in order to enlarge the QR code on iOS.
\ No newline at end of file
diff --git a/public/robots.txt b/public/robots.txt
new file mode 100644
index 0000000..51ff80b
--- /dev/null
+++ b/public/robots.txt
@@ -0,0 +1,3 @@
+User-agent: *
+Disallow: /pass
+Disallow: /pass/note
\ No newline at end of file
diff --git a/src/payload.ts b/src/payload.ts
index 7500bbc..5eedbe7 100644
--- a/src/payload.ts
+++ b/src/payload.ts
@@ -142,7 +142,7 @@ export class Payload {
                 {
                     key: "enlarge",
                     label: "Enlarging the QR Code",
-                    value: `Inside the Wallet app on iOS, press and hold or open the link below. This does not work when accessing the Wallet by double-clicking the side button.\n<a href='${url}/pass#${encodedData}'>Enlarge QR Code</a>`
+                    value: `Inside the Wallet app on iOS, press and hold the link below. This does not work when accessing the Wallet by double-clicking the side button.\n<a href='${url}/pass#${encodedData}'>Enlarge QR Code</a>`
                 },
                 {
                     key: "uvci",