Add XMPP QR codes

assets/scripts.js

@@ -338,6 +338,9 @@ async function displayProfile(opts) {
             } else {
                 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 += `</div>`;
             feedback += `</div>`;
         }
@@ -354,7 +357,7 @@ async function displayProfile(opts) {
 
 async function verifyProof(url, fingerprint) {
     // Init
-    let reVerify, match, output = {url: url, type: null, proofUrl: url, proofUrlFetch: null, isVerified: false, display: null};
+    let reVerify, match, output = {url: url, type: null, proofUrl: url, proofUrlFetch: null, isVerified: false, display: null, qr: null};
 
     // DNS
     if (/^dns:/.test(url)) {
@@ -389,11 +392,11 @@ async function verifyProof(url, fingerprint) {
     // XMPP
     if (/^xmpp:/.test(url)) {
         output.type = "xmpp";
-        console.log(url);
         match = url.match(/xmpp:([a-zA-Z0-9\.\-\_]*)@([a-zA-Z0-9\.\-\_]*)(?:\?(.*))?/);
-        console.log(match);
         output.display = `${match[1]}@${match[2]}`;
         output.proofUrl = `https://xmpp-vcard.keyoxide.org/api/vcard/${output.display}/DESC`;
+        output.qr = url;
+
         try {
             response = await fetch(output.proofUrl);
             if (!response.ok) {
@@ -1044,20 +1047,17 @@ if (elUtilQR) {
         height: 256,
         colorDark : "#000000",
         colorLight : "#ffffff",
-        correctLevel : QRCode.CorrectLevel.H
+        correctLevel : QRCode.CorrectLevel.L
     });
 
     const elInput = document.body.querySelector("#input");
 
-    elInput.addEventListener("input", async function(evt) {
-        if (evt.target.value) {
-            qrcode.makeCode(`${evt.target.value.toUpperCase()}`);
-        } else {
-            qrcode.clear();
-        }
-    });
-
-    elInput.dispatchEvent(new Event("input"));
+    if (elInput.value) {
+        elInput.value = decodeURIComponent(elInput.value);
+        qrcode.makeCode(`${elInput.value}`);
+    } else {
+        qrcode.clear();
+    }
 }
 
 if (elUtilProfileURL) {

assets/styles.css

@@ -83,6 +83,9 @@ footer a {
     background-color: #72bde6;
     background: linear-gradient(0deg, #4da4d2 0%, #82c5ea 100%);
 }
+.full-width {
+    width: 100%;
+}
 
 h1 {
     margin: 0 0 24px 0;
@@ -256,22 +259,17 @@ select {
 .profileDataItem__value a {
     display: inline-block;
     max-width: 100%;
+    margin-right: 8px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
-a.proofDisplay {
-    margin-right: 8px;
-}
 a.proofUrl {
     color: #777;
 }
-a.proofUrl.proofUrl--verified {
+a.proofUrl.proofUrl--verified, a.proofQR {
     color: #499539;
 }
-a.proofUrl:hover {
-    text-decoration: underline;
-}
 
 #qrcode img {
     max-width: 100%;

index.php

@@ -15,7 +15,7 @@ $router->map('GET', '/', function() {}, 'index');
 $router->map('GET', '/guides', function() {}, 'guides');
 $router->map('GET', '/guides/[:id]', function() {}, 'guideId');
 $router->map('GET', '/util/qrfp/[:fp]', function() {}, 'util_qrfp');
-$router->map('GET', '/util/qr/[:txt]', function() {}, 'util_qr');
+$router->map('GET', '/util/qr/[**:uri]', function() {}, 'util_qr');
 $router->map('GET', '/util/[:id]', function() {}, 'util');
 $router->map('GET', '/faq', function() {}, 'faq');
 $router->map('GET', '/verify', function() {}, 'verify');
@@ -143,7 +143,7 @@ if(is_array($match) && is_callable($match['target'])) {
             break;
 
         case 'util_qr':
-            $uri = htmlspecialchars($match['params']['fp']);
+            $uri = htmlspecialchars($match['params']['uri']);
             echo $templates->render("util/qr", ['input' => $uri]);
             break;
 

views/util/qr.php

@@ -3,7 +3,7 @@
 <div class="content">
     <h1>QR Code</h1>
     <form id="form-util-qr" method="post">
-        <input type="hidden" name="input" id="input" placeholder="Fingerprint" value="<?=$this->escape($input)?>">
+        <input type="txt" name="input" id="input" class="full-width" readonly placeholder="Fingerprint" value="<?=$this->escape($input)?>">
     </form>
     <div id="qrcode"></div>
 </div>