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

View File

@ -2,4 +2,12 @@ const {i18n} = require('./next-i18next.config');
module.exports = {
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={
<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>

View File

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

View File

@ -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
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

@ -25,4 +25,5 @@ privacyPolicy: Privacy Policy
createdOnDevice: Created on your device
openSourceTransparent: Open source and transparent
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",
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",