From 6f6ecf012ee6233c543d83e5bb3a6d35b395d764 Mon Sep 17 00:00:00 2001
From: Yarmo Mackenbach <yarmo@yarmo.eu>
Date: Wed, 22 Jul 2020 14:58:11 +0200
Subject: [PATCH] Updates to qr and qrfp

---
 assets/scripts.js   | 30 +++++++++++++++++++++++++++++-
 views/util/qr.php   |  6 ++----
 views/util/qrfp.php |  4 ++--
 3 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index 12d0d82..9e8fa65 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -807,6 +807,7 @@ let elFormVerify = document.body.querySelector("#form-verify"),
     elProfileMode = document.body.querySelector("#profileMode"),
     elModeSelect = document.body.querySelector("#modeSelect"),
     elUtilWKD = document.body.querySelector("#form-util-wkd"),
+    elUtilQRFP = document.body.querySelector("#form-util-qrfp"),
     elUtilQR = document.body.querySelector("#form-util-qr"),
     elUtilProfileURL = document.body.querySelector("#form-util-profile-url");
 
@@ -1005,6 +1006,33 @@ if (elUtilWKD) {
     });
 }
 
+if (elUtilQRFP) {
+    elUtilQRFP.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(`OPENPGP4FPR:${evt.target.value.toUpperCase()}`);
+        } else {
+            qrcode.clear();
+        }
+    });
+
+    elInput.dispatchEvent(new Event("input"));
+}
+
 if (elUtilQR) {
     elUtilQR.onsubmit = function (evt) {
         evt.preventDefault();
@@ -1023,7 +1051,7 @@ if (elUtilQR) {
 
     elInput.addEventListener("input", async function(evt) {
         if (evt.target.value) {
-            qrcode.makeCode(`OPENPGP4FPR:${evt.target.value.toUpperCase()}`);
+            qrcode.makeCode(`${evt.target.value.toUpperCase()}`);
         } else {
             qrcode.clear();
         }
diff --git a/views/util/qr.php b/views/util/qr.php
index a01507c..f6af7d4 100644
--- a/views/util/qr.php
+++ b/views/util/qr.php
@@ -3,9 +3,7 @@
 <div class="content">
     <h1>QR Code</h1>
     <form id="form-util-qr" method="post">
-        <p>This tool generates a QR code containing the fingerprint of your public key (<a href="https://github.com/open-keychain/open-keychain/wiki/QR-Codes">format</a>). This QR code can be scanned by apps like <a href="https://www.openkeychain.org/">OpenKeyChain</a>.</p>
-        <h3>Fingerprint</h3>
-        <input type="text" name="input" id="input" placeholder="Fingerprint" value="<?=$this->escape($input)?>">
-        <div id="qrcode"></div>
+        <input type="hidden" name="input" id="input" placeholder="Fingerprint" value="<?=$this->escape($input)?>">
     </form>
+    <div id="qrcode"></div>
 </div>
diff --git a/views/util/qrfp.php b/views/util/qrfp.php
index a01507c..b542128 100644
--- a/views/util/qrfp.php
+++ b/views/util/qrfp.php
@@ -2,10 +2,10 @@
 
 <div class="content">
     <h1>QR Code</h1>
-    <form id="form-util-qr" method="post">
+    <form id="form-util-qrfp" method="post">
         <p>This tool generates a QR code containing the fingerprint of your public key (<a href="https://github.com/open-keychain/open-keychain/wiki/QR-Codes">format</a>). This QR code can be scanned by apps like <a href="https://www.openkeychain.org/">OpenKeyChain</a>.</p>
         <h3>Fingerprint</h3>
         <input type="text" name="input" id="input" placeholder="Fingerprint" value="<?=$this->escape($input)?>">
-        <div id="qrcode"></div>
     </form>
+    <div id="qrcode"></div>
 </div>