Improve QR code viewer and try to fix buttons

This commit is contained in:
Marvin Sextro 2022-01-10 03:10:40 +01:00
parent b8eae1fb54
commit 2a9bdd86d7
8 changed files with 48 additions and 22 deletions

View File

@ -20,7 +20,8 @@ function Button(props: ButtonProps): JSX.Element {
return ( return (
<button <button
type={props.type} 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`}> 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" /> props.icon && <img src={props.icon} className="w-12 h-12 mr-2 -ml-4" />

View File

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

View File

@ -12,7 +12,11 @@ function Imprint(): JSX.Element {
<Card step="§" heading={t('common:imprint')} content={ <Card step="§" heading={t('common:imprint')} content={
<div className="space-y-3"> <div className="space-y-3">
<p className="font-bold">{t('imprint:heading')}</p> <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 className="font-bold">{t('imprint:contact')}</p>
<p> <p>
<a href="mailto:covidpass@marvinsextro.de" className="underline">covidpass@marvinsextro.de</a> <a href="mailto:covidpass@marvinsextro.de" className="underline">covidpass@marvinsextro.de</a>

View File

@ -1,37 +1,41 @@
import {useTranslation} from 'next-i18next';
import {serverSideTranslations} from 'next-i18next/serverSideTranslations'; import {serverSideTranslations} from 'next-i18next/serverSideTranslations';
import React, {useEffect, useState} from "react"; import React, {useEffect, useState} from "react";
import QRCode from "react-qr-code"; import QRCode from "react-qr-code";
import Alert from '../components/Alert';
import Card from '../components/Card'; import Card from '../components/Card';
import Logo from "../components/Logo"; import Logo from "../components/Logo";
function Pass(): JSX.Element { function Pass(): JSX.Element {
const [fragment, setFragment] = useState<string>(undefined); const { t } = useTranslation(['common', 'index']);
function closeViewer() { const [fragment, setFragment] = useState<string>(undefined);
setFragment(undefined); const [view, setView] = useState<boolean>(true);
window.location.replace('/');
}
useEffect(() => { useEffect(() => {
const rawFragment = window.location.hash.substring(1); const rawFragment = window.location.hash.substring(1);
if (!rawFragment) {
setView(false);
}
const resizeTimeout = window.setTimeout(() => {
if (rawFragment) {
window.location.replace('/pass/note');
}
}, 100);
window.addEventListener('resize', () => {
clearTimeout(resizeTimeout);
const decodedFragment = Buffer.from(rawFragment, 'base64').toString(); const decodedFragment = Buffer.from(rawFragment, 'base64').toString();
setFragment(decodedFragment); setFragment(decodedFragment);
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
closeViewer();
}
}); });
window.addEventListener('blur', closeViewer);
window.addEventListener('beforeunload', closeViewer);
window.addEventListener('pagehide', closeViewer);
}, []); }, []);
return ( 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/> <Logo/>
<div className="flex flex-row items-center"> <div className="flex flex-row items-center">
{ {
@ -42,6 +46,10 @@ function Pass(): JSX.Element {
</div> </div>
} /> } />
} }
{
!view &&
<Alert isWarning={true} message={t('index:viewerNote')} onClose={undefined} />
}
</div> </div>
</div> </div>
) )
@ -50,7 +58,7 @@ function Pass(): JSX.Element {
export async function getStaticProps({ locale }) { export async function getStaticProps({ locale }) {
return { return {
props: { props: {
...(await serverSideTranslations(locale, ['common'])), ...(await serverSideTranslations(locale, ['index', 'common'])),
}, },
}; };
} }

View File

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

View File

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

3
public/robots.txt Normal file
View File

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

View File

@ -142,7 +142,7 @@ export class Payload {
{ {
key: "enlarge", key: "enlarge",
label: "Enlarging the QR Code", 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", key: "uvci",