From 484b2cb95e2624f948ba86019acfea5bd9d29085 Mon Sep 17 00:00:00 2001
From: Yarmo Mackenbach <yarmo@yarmo.eu>
Date: Mon, 3 May 2021 12:06:37 +0200
Subject: [PATCH] Improve QR, add QR for fingerprint

---
 static/kx-claim.js |  2 +-
 static/kx-key.js   | 13 +++++++++++++
 static/scripts.js  |  9 +++++++--
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/static/kx-claim.js b/static/kx-claim.js
index 378242a..1919596 100644
--- a/static/kx-claim.js
+++ b/static/kx-claim.js
@@ -146,7 +146,7 @@ class Claim extends HTMLElement {
 
             const button_profileQR = subsection_qr_text.appendChild(document.createElement('button'));
             button_profileQR.innerText = `Show profile QR`;
-            button_profileQR.setAttribute('onClick', `showQR('${claim.matches[0].profile.qr}')`);
+            button_profileQR.setAttribute('onClick', `showQR('${claim.matches[0].profile.qr}', 'url')`);
         }
 
         elContent.appendChild(document.createElement('hr'));
diff --git a/static/kx-key.js b/static/kx-key.js
index f9e671b..78c821e 100644
--- a/static/kx-key.js
+++ b/static/kx-key.js
@@ -66,6 +66,19 @@ class Key extends HTMLElement {
 
         const profile_link = subsection1_text.appendChild(document.createElement('p'));
         profile_link.innerHTML = `Key link: <a href="${data.key.uri}">${data.key.uri}</a>`;
+
+        elContent.appendChild(document.createElement('hr'));
+
+        // QR Code
+        const subsection_qr = elContent.appendChild(document.createElement('div'));
+        subsection_qr.setAttribute('class', 'subsection');
+        const subsection_qr_icon = subsection_qr.appendChild(document.createElement('img'));
+        subsection_qr_icon.setAttribute('src', '/static/img/qrcode.png');
+        const subsection_qr_text = subsection_qr.appendChild(document.createElement('div'));
+
+        const button_profileQR = subsection_qr_text.appendChild(document.createElement('button'));
+        button_profileQR.innerText = `Show OpenPGP fingerprint QR`;
+        button_profileQR.setAttribute('onClick', `showQR('${data.fingerprint}', 'fingerprint')`);
     }
 }
 
diff --git a/static/scripts.js b/static/scripts.js
index 14af431..e9fd9be 100644
--- a/static/scripts.js
+++ b/static/scripts.js
@@ -132,7 +132,7 @@ const fetchProfileKey = async function() {
 }
 
 // Enable QR modal
-const showQR = function(input) {
+const showQR = function(input, type) {
     const qrTarget = document.getElementById('qr');
     const qrContext = qrTarget.getContext('2d');
     const qrOpts = {
@@ -143,7 +143,12 @@ const showQR = function(input) {
     };
 
     if (input) {
-        input = decodeURIComponent(input);
+        if (type === 'url') {
+            input = decodeURIComponent(input);
+        }
+        if (type === 'fingerprint') {
+            input = `OPENPGP4FPR:${input.toUpperCase()}`
+        }
 
         QRCode.toCanvas(qrTarget, input, qrOpts, function(error) {
             if (error) {