diff --git a/assets/scripts.js b/assets/scripts.js index 9e8fa65..16f72a3 100644 --- a/assets/scripts.js +++ b/assets/scripts.js @@ -338,6 +338,9 @@ async function displayProfile(opts) { } else { feedback += `unverified`; } + if (verifications[i].isVerified && verifications[i].qr) { + feedback += `QR`; + } feedback += ``; feedback += ``; } @@ -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) { diff --git a/assets/styles.css b/assets/styles.css index 2f11079..4d5236c 100644 --- a/assets/styles.css +++ b/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%; diff --git a/index.php b/index.php index 8dfc70b..90817b4 100644 --- a/index.php +++ b/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; diff --git a/views/util/qr.php b/views/util/qr.php index f6af7d4..8e4f59f 100644 --- a/views/util/qr.php +++ b/views/util/qr.php @@ -3,7 +3,7 @@

QR Code

- +