Improve QR code viewer and try to fix buttons

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

next.config.js

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

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>

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'])),
         },
     };
 }

public/locales/de/index.yml

@@ -26,3 +26,4 @@ createdOnDevice: Auf Deinem Gerät erstellt
 openSourceTransparent: Open Source und transparent
 hostedInEU: In der EU gehostet
 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.

public/locales/en/index.yml

@@ -26,3 +26,4 @@ createdOnDevice: Created on your device
 openSourceTransparent: Open source and transparent
 hostedInEU: Hosted in the EU
 share: Share
+viewerNote: Please press and hold the link on the back of the pass in order to enlarge the QR code on iOS.

public/robots.txt

@@ -0,0 +1,3 @@
+User-agent: *
+Disallow: /pass
+Disallow: /pass/note

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",