233 lines
10 KiB
TypeScript
233 lines
10 KiB
TypeScript
import Card from "./Card";
|
|
import {saveAs} from 'file-saver'
|
|
import React, {FormEvent, useEffect, useRef, useState} from "react";
|
|
import {BrowserQRCodeReader} from "@zxing/browser";
|
|
import {Result} from "@zxing/library";
|
|
import {PayloadBody} from "../src/payload";
|
|
import {getPayloadBodyFromFile, getPayloadBodyFromQR} from "../src/process";
|
|
import {PassData} from "../src/pass";
|
|
import Alert from "./Alert";
|
|
|
|
function Form(): JSX.Element {
|
|
|
|
// Whether camera is open or not
|
|
const [isCameraOpen, setIsCameraOpen] = useState<boolean>(false);
|
|
|
|
// Global camera controls
|
|
const [globalControls, setGlobalControls] = useState(undefined);
|
|
|
|
// Currently selected QR Code / File. Only one of them is set.
|
|
const [qrCode, setQrCode] = useState<Result>(undefined);
|
|
const [file, setFile] = useState<File>(undefined);
|
|
|
|
const [errorMessage, setErrorMessage] = useState<string>(undefined);
|
|
|
|
// File Input ref
|
|
const inputFile = useRef<HTMLInputElement>(undefined)
|
|
|
|
// Add event listener to listen for file change events
|
|
useEffect(() => {
|
|
if (inputFile && inputFile.current) {
|
|
inputFile.current.addEventListener('input', () => {
|
|
let selectedFile = inputFile.current.files[0];
|
|
if (selectedFile !== undefined) {
|
|
setQrCode(undefined);
|
|
setFile(selectedFile);
|
|
}
|
|
});
|
|
}
|
|
}, [inputFile])
|
|
|
|
// Show file Dialog
|
|
async function showFileDialog() {
|
|
inputFile.current.click();
|
|
}
|
|
|
|
// Hide camera view
|
|
async function hideCameraView() {
|
|
if (globalControls !== undefined) {
|
|
globalControls.stop();
|
|
}
|
|
setIsCameraOpen(false);
|
|
}
|
|
|
|
// Show camera view
|
|
async function showCameraView() {
|
|
// Create new QR Code Reader
|
|
const codeReader = new BrowserQRCodeReader();
|
|
|
|
// Needs to be called before any camera can be accessed
|
|
await BrowserQRCodeReader.listVideoInputDevices();
|
|
|
|
// Get preview Element to show camera stream
|
|
const previewElem: HTMLVideoElement = document.querySelector('#cameraPreview');
|
|
|
|
// Set Global controls
|
|
setGlobalControls(
|
|
// Start decoding from video device
|
|
await codeReader.decodeFromVideoDevice(undefined,
|
|
previewElem,
|
|
(result, error, controls) => {
|
|
if (result !== undefined) {
|
|
setQrCode(result);
|
|
setFile(undefined);
|
|
|
|
controls.stop();
|
|
|
|
// Reset
|
|
setGlobalControls(undefined);
|
|
setIsCameraOpen(false);
|
|
}
|
|
}
|
|
)
|
|
);
|
|
|
|
setIsCameraOpen(true);
|
|
}
|
|
|
|
// Add Pass to wallet
|
|
async function addToWallet(event: FormEvent<HTMLFormElement>) {
|
|
event.preventDefault();
|
|
|
|
if (!file && !qrCode) {
|
|
setErrorMessage("Please scan a QR Code, or select a file to scan")
|
|
return;
|
|
}
|
|
|
|
const color = (document.getElementById('color') as HTMLSelectElement).value;
|
|
let payloadBody: PayloadBody;
|
|
|
|
try {
|
|
if (file) {
|
|
payloadBody = await getPayloadBodyFromFile(file, color);
|
|
} else {
|
|
payloadBody = await getPayloadBodyFromQR(qrCode, color);
|
|
}
|
|
|
|
let pass = await PassData.generatePass(payloadBody);
|
|
|
|
const passBlob = new Blob([pass], {type: "application/vnd.apple.pkpass"});
|
|
saveAs(passBlob, 'covid.pkpass');
|
|
} catch (e) {
|
|
setErrorMessage(e.toString());
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<form className="space-y-5" id="form" onSubmit={addToWallet}>
|
|
<Card step="1" heading="Select Certificate" content={
|
|
<div className="space-y-5">
|
|
<p>
|
|
Please select the certificate screenshot or (scanned) PDF page, which you received from your
|
|
doctor, pharmacy, vaccination centre or online. Note that taking a picture does not work on
|
|
most devices yet.
|
|
</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 ? "Stop Camera" : "Start Camera"}
|
|
</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">
|
|
Open File (PDF, PNG)
|
|
</button>
|
|
</div>
|
|
|
|
<video id="cameraPreview"
|
|
className={`${isCameraOpen ? undefined : "hidden"} rounded-md w-full`}/>
|
|
<input type='file'
|
|
id='file'
|
|
accept="application/pdf,image/png"
|
|
ref={inputFile}
|
|
style={{display: 'none'}}
|
|
/>
|
|
|
|
{(qrCode || file) &&
|
|
<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"/>
|
|
</svg>
|
|
<span className="w-full truncate">
|
|
{
|
|
qrCode && 'Found QR Code!'
|
|
}
|
|
{
|
|
file && file.name
|
|
}
|
|
</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
}/>
|
|
<Card step="2" heading="Pick a Color" content={
|
|
<div className="space-y-5">
|
|
<p>
|
|
Pick a background color for your pass.
|
|
</p>
|
|
<div className="relative inline-block w-full">
|
|
<select name="color" id="color"
|
|
className="bg-gray-200 dark:bg-gray-900 focus:outline-none w-full h-10 pl-3 pr-6 text-base rounded-md appearance-none cursor-pointer">
|
|
<option value="white">white</option>
|
|
<option value="black">black</option>
|
|
<option value="grey">grey</option>
|
|
<option value="green">green</option>
|
|
<option value="indigo">indigo</option>
|
|
<option value="blue">blue</option>
|
|
<option value="purple">purple</option>
|
|
<option value="teal">teal</option>
|
|
</select>
|
|
<div className="absolute inset-y-0 right-0 flex items-center px-2 pointer-events-none">
|
|
<svg className="w-5 h-5 fill-current" viewBox="0 0 20 20">
|
|
<path
|
|
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
|
clipRule="evenodd" fillRule="evenodd"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}/>
|
|
<Card step="3" heading="Add to Wallet" content={
|
|
<div className="space-y-5">
|
|
<p>
|
|
Data privacy is of special importance when processing health-related data.
|
|
In order for you to make an informed decision, please read the <a href="/privacy">Privacy
|
|
Policy</a>.
|
|
</p>
|
|
<label htmlFor="privacy" className="flex flex-row space-x-4 items-center">
|
|
<input type="checkbox" id="privacy" value="privacy" required className="h-4 w-4"/>
|
|
<p>
|
|
I accept the <a href="/privacy" className="underline">Privacy Policy</a>
|
|
</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">
|
|
Add to Wallet
|
|
</button>
|
|
<div id="spin" style={{"display": "none"}}>
|
|
<svg className="animate-spin h-5 w-5 ml-2" 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>
|
|
}/>
|
|
</form>
|
|
<canvas id="canvas" style={{display: "none"}}/>
|
|
{
|
|
errorMessage && <Alert errorMessage={errorMessage} onClose={() => setErrorMessage(undefined)}/>
|
|
}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Form; |