Add XMPP QR codes

This commit is contained in:
Yarmo Mackenbach 2020-07-22 15:37:38 +02:00
parent 6f6ecf012e
commit df459e53f8
4 changed files with 21 additions and 23 deletions

View file

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

View file

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

View file

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

View file

@ -3,7 +3,7 @@
<div class="content"> <div class="content">
<h1>QR Code</h1> <h1>QR Code</h1>
<form id="form-util-qr" method="post"> <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> </form>
<div id="qrcode"></div> <div id="qrcode"></div>
</div> </div>