Mirrors/keyoxide-web
1
0
Fork 1
mirror of https://codeberg.org/keyoxide/keyoxide-web.git synced 2024-12-22 14:59:29 -07:00
Code Issues Projects Releases Packages Wiki 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) {
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 {
keyData = await fetchKeys(opts);
} catch (e) {
@ -267,15 +269,18 @@ async function displayProfile(opts) {
}
feedback += `<div class="profileDataItem">`;
feedback += `<div class="profileDataItem__label">fingerprint</div>`;
feedback += `<div class="profileDataItem__value"><a href="${keyLink}">${keyData.fingerprint}</a></div>`;
feedback += `</div>`;
feedback += `<div class="profileDataItem__value"><a href="${keyLink}">${keyData.fingerprint}</a>`;
if (opts.mode == "hkp") {
feedback += `<div class="profileDataItem">`;
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 += `<a class="proofQR green" href="/util/qr/${encodeURIComponent(`OPENPGP4FPR:${keyData.fingerprint.toUpperCase()}`)}" target="_blank" title="QR Code">${icon_qr}</a>`;
}
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) {
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>`;
}
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>`;
@ -1052,10 +1057,10 @@ if (elUtilQR) {
const elInput = document.body.querySelector("#input");
if (elInput.value) {
elInput.value = decodeURIComponent(elInput.value);
qrcode.makeCode(`${elInput.value}`);
document.body.querySelector("#qrcode--altLink").href = elInput.value;
if (elInput.innerText) {
elInput.innerText = decodeURIComponent(elInput.innerText);
qrcode.makeCode(`${elInput.innerText}`);
document.body.querySelector("#qrcode--altLink").href = elInput.innerText;
} else {
qrcode.clear();
}

13
assets/styles.css
View file

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

4
views/util/qr.php
View file

@ -3,7 +3,9 @@
<div class="content">
<h1>QR Code</h1>
<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>
<div id="qrcode"></div>
<a id="qrcode--altLink" href="#">Press this link to directly open the URI</a>