From ca24267e3fabd2f2250133713516bf018f6150e0 Mon Sep 17 00:00:00 2001
From: Yarmo Mackenbach <yarmo@yarmo.eu>
Date: Thu, 23 Jul 2020 10:36:42 +0200
Subject: [PATCH] Improve QR code display

---
 assets/img/qrcode.png       | Bin 0 -> 445 bytes
 assets/img/qrcode_green.png | Bin 0 -> 456 bytes
 assets/scripts.js           |  29 +++++++++++++++++------------
 assets/styles.css           |  13 +++++++++----
 views/util/qr.php           |   4 +++-
 5 files changed, 29 insertions(+), 17 deletions(-)
 create mode 100644 assets/img/qrcode.png
 create mode 100644 assets/img/qrcode_green.png

diff --git a/assets/img/qrcode.png b/assets/img/qrcode.png
new file mode 100644
index 0000000000000000000000000000000000000000..f3ff58bb283f0854d4e27f84378e1760a534df8b
GIT binary patch
literal 445
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTCmUKs7M+SzC{oH>NS%G|oWRD<U
z28Jp%28M<f28Lfip@tU>45dJguM!v-tY$DUh!@P+6=(yLU`z6LcLCBs@Y8vBJ&@uo
z@Q5sCVBk9f!i-b3`J{n@vpiiKLo)8Yy>XhaL4n65Fze6%_+wM07iGG)-g+`mcge{U
z&I?Q#PNbCc?)|POYGl0hfB4t!Gvm`)nNn^qmOXCy;_SnXccYcF{s#XPRB+h#K`P*T
z?$yh`p1L<MFch`EXTBGC?Dp}!oBM9nY3=70RG3}TAG#;j`J#0hSo!@u+#lsvtg2~9
zeebk+iaaAzO7u6qBat0Ie{r)5y$`TVpIUYr=t|WR*NBpo#FA92<f2p{#b9J$WT0zc
zu4`l*VqjrqXkcY*s%>CkWnl0p=WQyAhTQy=%(P0}8hQ;wZvr()f@}!RPb(=;EJ|f4
jFE7{2%*!rLPAo{(%P&fw{mw=TsEEPS)z4*}Q$iB}tG1PW

literal 0
HcmV?d00001

diff --git a/assets/img/qrcode_green.png b/assets/img/qrcode_green.png
new file mode 100644
index 0000000000000000000000000000000000000000..be487b64ae80162e949b84cab8f8b995f8e87b78
GIT binary patch
literal 456
zcmeAS@N?(olHy`uVBq!ia0vp^1|ZDA1|-9oezpTCmUKs7M+SzC{oH>NS%G|oWRD<U
z28Jp%28M<f28Lfip@tU>45dJguM!v-tY$DUh!@P+6=(yLU`z6LcLCBs@Y8vBJ&@uo
z@Q5sCVBk9f!i-b3`J{n@OFdm2Lo)8Yy>XVeL4l_&(LnDh$GJx~=N@tNEmhZZxg6Gd
z>q+gp32O8Ia4cbAnD;66@E*VRr5Conxq0dT>R-;M*I#C4+|zrj@2kv|X9ail)(U3-
zRr<praA0;7Z^ZZ9)yuyg?q^_R_z`rUeaYsYE&bl<vf0&wb>d15=9g`+J$fs3>E1?=
ziamdy#diF62zkg{QZ1gP3Nj&jd%5B{Cl&^V7z;)tTd(#d3q?hM4puF3jVMV;EJ?LW
zE=mPb3`Pb<2D%33x<<w!1{PKZmR2Sf+6D$z1_rC17H&h)kei>9nO2Eg!|fd>LD3-z
uvLQG>t)x7$D3zhSyj(9cFS|H7u^?41zbJk7I~ysWA_h-aKbLh*2~7Y^=9^Uj

literal 0
HcmV?d00001

diff --git a/assets/scripts.js b/assets/scripts.js
index 13e4aac..a2e5f3e 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -193,6 +193,8 @@ async function verifyProofs(opts) {
 
 async function displayProfile(opts) {
     let keyData, keyLink, feedback = "", notation, isVerified, verifications = [];
+    let icon_qr = '<svg style="width:24px;height:24px" viewBox="0 0 24 24"><path fill="#ffffff" d="M3,11H5V13H3V11M11,5H13V9H11V5M9,11H13V15H11V13H9V11M15,11H17V13H19V11H21V13H19V15H21V19H19V21H17V19H13V21H11V17H15V15H17V13H15V11M19,19V15H17V19H19M15,3H21V9H15V3M17,5V7H19V5H17M3,3H9V9H3V3M5,5V7H7V5H5M3,15H9V21H3V15M5,17V19H7V17H5Z" /></svg>';
+
     try {
         keyData = await fetchKeys(opts);
     } catch (e) {
@@ -267,15 +269,18 @@ async function displayProfile(opts) {
     }
     feedback += `<div class="profileDataItem">`;
     feedback += `<div class="profileDataItem__label">fingerprint</div>`;
-    feedback += `<div class="profileDataItem__value"><a href="${keyLink}">${keyData.fingerprint}</a></div>`;
-    feedback += `</div>`;
-
+    feedback += `<div class="profileDataItem__value"><a href="${keyLink}">${keyData.fingerprint}</a>`;
     if (opts.mode == "hkp") {
-        feedback += `<div class="profileDataItem">`;
-        feedback += `<div class="profileDataItem__label">qrcode</div>`;
-        feedback += `<div class="profileDataItem__value"><a href="/util/qr/${encodeURIComponent(`OPENPGP4FPR:${keyData.fingerprint.toUpperCase()}`)}" target="_blank">fingerprint</a></div>`;
-        feedback += `</div>`;
+        feedback += `<a class="proofQR green" href="/util/qr/${encodeURIComponent(`OPENPGP4FPR:${keyData.fingerprint.toUpperCase()}`)}" target="_blank" title="QR Code">${icon_qr}</a>`;
     }
+    feedback += `</div></div>`;
+
+    // if (opts.mode == "hkp") {
+    //     feedback += `<div class="profileDataItem">`;
+    //     feedback += `<div class="profileDataItem__label">qrcode</div>`;
+    //     feedback += `<div class="profileDataItem__value"><a class="green" href="/util/qr/${encodeURIComponent(`OPENPGP4FPR:${keyData.fingerprint.toUpperCase()}`)}" target="_blank">fingerprint</a></div>`;
+    //     feedback += `</div>`;
+    // }
 
     if (keyData.notations.length > 0) {
         feedback += `<div class="profileDataItem profileDataItem--separator profileDataItem--noLabel">`;
@@ -339,7 +344,7 @@ async function displayProfile(opts) {
                 feedback += `<a class="proofUrl" href="${verifications[i].proofUrl}">unverified</a>`;
             }
             if (verifications[i].isVerified && verifications[i].qr) {
-                feedback += `<a class="proofQR proofUrl--verified" href="/util/qr/${encodeURIComponent(verifications[i].qr)}" target="_blank">QR</a>`;
+                feedback += `<a class="proofQR green" href="/util/qr/${encodeURIComponent(verifications[i].qr)}" target="_blank" title="QR Code">${icon_qr}</a>`;
             }
             feedback += `</div>`;
             feedback += `</div>`;
@@ -1052,10 +1057,10 @@ if (elUtilQR) {
 
     const elInput = document.body.querySelector("#input");
 
-    if (elInput.value) {
-        elInput.value = decodeURIComponent(elInput.value);
-        qrcode.makeCode(`${elInput.value}`);
-        document.body.querySelector("#qrcode--altLink").href = elInput.value;
+    if (elInput.innerText) {
+        elInput.innerText = decodeURIComponent(elInput.innerText);
+        qrcode.makeCode(`${elInput.innerText}`);
+        document.body.querySelector("#qrcode--altLink").href = elInput.innerText;
     } else {
         qrcode.clear();
     }
diff --git a/assets/styles.css b/assets/styles.css
index ff645d3..082a825 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -166,8 +166,8 @@ input[type="submit"][disabled="true"] {
 select {
     margin: 0 0 16px 0;
 }
-.green {
-    color: green;
+.green, a.proofUrl.proofUrl--verified {
+    color: #499539;
 }
 .red {
     color: red;
@@ -267,8 +267,13 @@ select {
 a.proofUrl {
     color: #777;
 }
-a.proofUrl.proofUrl--verified, a.proofQR {
-    color: #499539;
+a.proofQR {
+    line-height: 0;
+    background-color: #499539;
+    border-radius: 2px;
+}
+a.proofQR:hover {
+    background-color: #6abb5a;
 }
 
 #qrcode {
diff --git a/views/util/qr.php b/views/util/qr.php
index 4bf66eb..8b5a2af 100644
--- a/views/util/qr.php
+++ b/views/util/qr.php
@@ -3,7 +3,9 @@
 <div class="content">
     <h1>QR Code</h1>
     <form id="form-util-qr" method="post">
-        <input type="txt" name="input" id="input" class="full-width" readonly placeholder="Fingerprint" value="<?=$this->escape($input)?>">
+        <!-- <input type="txt" name="input" id="input" class="full-width" readonly value="<?=$this->escape($input)?>"> -->
+        <!-- <textarea name="input" id="input" class="full-width" readonly><?=$this->escape($input)?></textarea> -->
+        <code id="input" class="full-width"><?=$this->escape($input)?></code>
     </form>
     <div id="qrcode"></div>
     <a id="qrcode--altLink" href="#">Press this link to directly open the URI</a>