myriation/keyoxide-web
1
0
Fork 0
forked from Mirrors/keyoxide-web
Code Pull requests Activity

Improve QR code display

Browse source
This commit is contained in:
Yarmo Mackenbach 2020-07-23 10:36:42 +02:00
parent ff854881de
commit ca24267e3f
5 changed files with 29 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
assets/img/qrcode.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 445 B

BIN
assets/img/qrcode_green.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 456 B

29
assets/scripts.js
View file

@ -193,6 +193,8 @@ async function verifyProofs(opts) {
async function displayProfile(opts) { async function displayProfile(opts) {
let keyData, keyLink, feedback = "", notation, isVerified, verifications = []; let keyData, keyLink, feedback = "", notation, isVerified, 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>';
try { try {
keyData = await fetchKeys(opts); keyData = await fetchKeys(opts);
} catch (e) { } catch (e) {
@ -267,15 +269,18 @@ async function displayProfile(opts) {
} }
feedback += `<div class="profileDataItem">`; feedback += `<div class="profileDataItem">`;
feedback += `<div class="profileDataItem__label">fingerprint</div>`; feedback += `<div class="profileDataItem__label">fingerprint</div>`;
feedback += `<div class="profileDataItem__value"><a href="${keyLink}">${keyData.fingerprint}</a></div>`; feedback += `<div class="profileDataItem__value"><a href="${keyLink}">${keyData.fingerprint}</a>`;
feedback += `</div>`;
if (opts.mode == "hkp") { if (opts.mode == "hkp") {
feedback += `<div class="profileDataItem">`; feedback += `<a class="proofQR green" href="/util/qr/${encodeURIComponent(`OPENPGP4FPR:${keyData.fingerprint.toUpperCase()}`)}" target="_blank" title="QR Code">${icon_qr}</a>`;
feedback += `<div class="profileDataItem__label">qrcode</div>`;
feedback += `<div class="profileDataItem__value"><a href="/util/qr/${encodeURIComponent(`OPENPGP4FPR:${keyData.fingerprint.toUpperCase()}`)}" target="_blank">fingerprint</a></div>`;
feedback += `</div>`;
} }
feedback += `</div></div>`;
// if (opts.mode == "hkp") {
// feedback += `<div class="profileDataItem">`;
// feedback += `<div class="profileDataItem__label">qrcode</div>`;
// feedback += `<div class="profileDataItem__value"><a class="green" href="/util/qr/${encodeURIComponent(`OPENPGP4FPR:${keyData.fingerprint.toUpperCase()}`)}" target="_blank">fingerprint</a></div>`;
// feedback += `</div>`;
// }
if (keyData.notations.length > 0) { if (keyData.notations.length > 0) {
feedback += `<div class="profileDataItem profileDataItem--separator profileDataItem--noLabel">`; feedback += `<div class="profileDataItem profileDataItem--separator profileDataItem--noLabel">`;
@ -339,7 +344,7 @@ async function displayProfile(opts) {
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) { 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 += `<a class="proofQR green" href="/util/qr/${encodeURIComponent(verifications[i].qr)}" target="_blank" title="QR Code">${icon_qr}</a>`;
} }
feedback += `</div>`; feedback += `</div>`;
feedback += `</div>`; feedback += `</div>`;
@ -1052,10 +1057,10 @@ if (elUtilQR) {
const elInput = document.body.querySelector("#input"); const elInput = document.body.querySelector("#input");
if (elInput.value) { if (elInput.innerText) {
elInput.value = decodeURIComponent(elInput.value); elInput.innerText = decodeURIComponent(elInput.innerText);
qrcode.makeCode(`${elInput.value}`); qrcode.makeCode(`${elInput.innerText}`);
document.body.querySelector("#qrcode--altLink").href = elInput.value; document.body.querySelector("#qrcode--altLink").href = elInput.innerText;
} else { } else {
qrcode.clear(); qrcode.clear();
} }

13
assets/styles.css
View file

@ -166,8 +166,8 @@ input[type="submit"][disabled="true"] {
select { select {
margin: 0 0 16px 0; margin: 0 0 16px 0;
} }
.green { .green, a.proofUrl.proofUrl--verified {
color: green; color: #499539;
} }
.red { .red {
color: red; color: red;
@ -267,8 +267,13 @@ select {
a.proofUrl { a.proofUrl {
color: #777; color: #777;
} }
a.proofUrl.proofUrl--verified, a.proofQR { a.proofQR {
color: #499539; line-height: 0;
background-color: #499539;
border-radius: 2px;
}
a.proofQR:hover {
background-color: #6abb5a;
} }
#qrcode { #qrcode {

4
views/util/qr.php
View file

@ -3,7 +3,9 @@
<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="txt" name="input" id="input" class="full-width" readonly placeholder="Fingerprint" value="<?=$this->escape($input)?>"> <!-- <input type="txt" name="input" id="input" class="full-width" readonly value="<?=$this->escape($input)?>"> -->
<!-- <textarea name="input" id="input" class="full-width" readonly><?=$this->escape($input)?></textarea> -->
<code id="input" class="full-width"><?=$this->escape($input)?></code>
</form> </form>
<div id="qrcode"></div> <div id="qrcode"></div>
<a id="qrcode--altLink" href="#">Press this link to directly open the URI</a> <a id="qrcode--altLink" href="#">Press this link to directly open the URI</a>