Add QR code support

assets/scripts.js

@@ -621,7 +621,8 @@ let elFormVerify = document.body.querySelector("#form-verify"),
     elProfileUid = document.body.querySelector("#profileUid"),
     elProfileMode = document.body.querySelector("#profileMode"),
     elModeSelect = document.body.querySelector("#modeSelect"),
-    elUtilWKD = document.body.querySelector("#form-util-wkd");
+    elUtilWKD = document.body.querySelector("#form-util-wkd"),
+    elUtilQR = document.body.querySelector("#form-util-qr");
 
 if (elModeSelect) {
     elModeSelect.onchange = function (evt) {
@@ -798,3 +799,30 @@ if (elUtilWKD) {
         }
     });
 }
+
+if (elUtilQR) {
+    elUtilQR.onsubmit = function (evt) {
+        evt.preventDefault();
+    }
+
+    const qrcode = new QRCode("qrcode", {
+        text: "",
+        width: 256,
+        height: 256,
+        colorDark : "#000000",
+        colorLight : "#ffffff",
+        correctLevel : QRCode.CorrectLevel.H
+    });
+
+    const elInput = document.body.querySelector("#input");
+
+    elInput.addEventListener("input", async function(evt) {
+        if (evt.target.value) {
+            qrcode.makeCode(evt.target.value);
+        } else {
+            qrcode.clear();
+        }
+    });
+
+    elInput.dispatchEvent(new Event("input"));
+}

assets/styles.css

@@ -202,6 +202,12 @@ a.proofUrl.proofUrl--verified {
 a.proofUrl:hover {
     text-decoration: underline;
 }
+
+#qrcode img {
+    max-width: 100%;
+    margin: 32px auto 16px;
+}
+
 @media (max-width: 680px) {
     #profileHeader {
         flex-direction: column;

index.php

@@ -14,6 +14,7 @@ $templates = new League\Plates\Engine('views');
 $router->map('GET', '/', function() {}, 'index');
 $router->map('GET', '/guides', function() {}, 'guides');
 $router->map('GET', '/guides/[:id]', function() {}, 'guideId');
+$router->map('GET', '/util/qr/[:fp]', function() {}, 'util_qr');
 $router->map('GET', '/util/[:id]', function() {}, 'util');
 $router->map('GET', '/faq', function() {}, 'faq');
 $router->map('GET', '/verify', function() {}, 'verify');
@@ -122,6 +123,11 @@ if(is_array($match) && is_callable($match['target'])) {
             echo $templates->render("util/$id");
             break;
 
+        case 'util_qr':
+            $fp = htmlspecialchars($match['params']['fp']);
+            echo $templates->render("util/qr", ['input' => $fp]);
+            break;
+
         case 'faq':
             echo $templates->render("faq");
             break;

views/template.base.php

@@ -39,5 +39,6 @@
     </body>
     <script src="/assets/openpgp.min.js"></script>
     <script src="/assets/spark-md5.min.js"></script>
+    <script src="/assets/qrcode.min.js"></script>
     <script type="text/javascript" src="/assets/scripts.js" charset="utf-8"></script>
 </html>

views/util/qr.php

@@ -0,0 +1,10 @@
+<?php $this->layout('template.base', ['title' => $title]) ?>
+
+<h1>QR Code</h1>
+<div class="content">
+    <form id="form-util-qr" method="post">
+        <h3>Fingeprint</h3>
+        <input type="text" name="input" id="input" placeholder="Fingerprint" value="<?=$this->escape($input)?>">
+        <div id="qrcode"></div>
+    </form>
+</div>