From d2aa3f0c0ff016e199e052f2317846c3575e999d Mon Sep 17 00:00:00 2001
From: Yarmo Mackenbach <yarmo@yarmo.eu>
Date: Wed, 31 Mar 2021 15:11:12 +0200
Subject: [PATCH] Fix QR code

---
 static/scripts.js | 9 ++++++++-
 static/styles.css | 5 +++++
 views/util/qr.pug | 3 ++-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/static/scripts.js b/static/scripts.js
index 7dbe2ce..ad99df0 100644
--- a/static/scripts.js
+++ b/static/scripts.js
@@ -262,6 +262,7 @@ async function displayProfile(opts) {
 
         //  Generate output for each claim
         claims.forEach((claim, i) => {
+            console.log(claim);
             const claimData = claim.serviceproviderData;
             if (!claimData.serviceprovider.name) {
                 return;
@@ -278,6 +279,13 @@ async function displayProfile(opts) {
                                 <span>${capitalizeLetteredServices(claimData.serviceprovider.name)}</span>
                                 <a href="${claimData.profile.uri}">View&nbsp;account</a>
                                 <a href="${claimData.proof.uri}">View&nbsp;proof</a>
+                                `;
+            if (claimData.profile.qr) {
+                output += `
+                    <a href="/util/qr/${encodeURIComponent(claimData.profile.qr)}">View&nbsp;QR</a>
+                `;
+            }
+            output += `
                                 <button onClick="document.querySelector('#dialog--${dialogIds[i]}').showModal();">Details</button>
                             </p>
                         </div>
@@ -350,7 +358,6 @@ async function displayProfile(opts) {
     /// MAIN
     // Init variables
     let keyData, keyLink, sigVerification, sigKeyUri, fingerprint, feedback = "", 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>';
 
     const doipOpts = {
         proxyPolicy: 'adaptive',
diff --git a/static/styles.css b/static/styles.css
index 0f8b6de..924dfc2 100644
--- a/static/styles.css
+++ b/static/styles.css
@@ -531,3 +531,8 @@ dialog p {
 dialog p:first-of-type {
   margin-top: 0;
 }
+
+#qrcode {
+  display: block;
+  margin: 0 auto 16px;
+}
diff --git a/views/util/qr.pug b/views/util/qr.pug
index 2a813da..684ba03 100644
--- a/views/util/qr.pug
+++ b/views/util/qr.pug
@@ -8,6 +8,7 @@ block content
   section.narrow
     h1 QR Code
     form#form-util-qr(method='post')
-      code#input.full-width !{input}
+      pre
+        code#input.full-width !{input}
     canvas#qrcode
     a#qrcode--altLink(href='#') Press this link to directly open the URI