Improve QR code viewer

pages/pass.tsx

@@ -2,17 +2,37 @@ import {serverSideTranslations} from 'next-i18next/serverSideTranslations';
 
 import React, {useEffect, useState} from "react";
 import QRCode from "react-qr-code";
+
 import Card from '../components/Card';
 import Logo from "../components/Logo";
 
 function Pass(): JSX.Element {
     const [fragment, setFragment] = useState<string>(undefined);
 
+    function closeViewer() {
+        setFragment(undefined);
+        window.location.href = '/';
+    }
+
     useEffect(() => {
         const rawFragment = window.location.hash.substring(1);
         const decodedFragment = Buffer.from(rawFragment, 'base64').toString();
         setFragment(decodedFragment);
-    }, [fragment]);
+
+        window.location.replace('#');
+        if (typeof window.history.replaceState == 'function') {
+            const href = window.location.href;
+            history.replaceState({}, '', href.slice(0, href.lastIndexOf('/')));
+        }
+
+        document.addEventListener('visibilitychange', () => {
+            if (document.hidden) {
+                closeViewer();
+            }
+        });
+
+        window.addEventListener('blur', closeViewer);
+    }, []);
 
     return (
         <div className="py-6 flex flex-col space-y-5 items-center">