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

feat: update client code

Browse source
This commit is contained in:
Yarmo Mackenbach 2023-07-13 11:11:16 +02:00
parent 59fc51c407
commit 9864a5fb66
No known key found for this signature in database
GPG key ID: 3C57D093219103A3
3 changed files with 34 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
static-src/kx-claim.js
View file

@ -45,7 +45,7 @@ export class Claim extends HTMLElement {
}
async verify() {
const claim = new doipjs.Claim(JSON.parse(this.getAttribute('data-claim')));
const claim = doipjs.Claim.fromJson(JSON.parse(this.getAttribute('data-claim')));
await claim.verify({
proxy: {
policy: 'adaptive',
@ -57,24 +57,14 @@ export class Claim extends HTMLElement {
updateContent(value) {
const root = this;
const claim = new doipjs.Claim(JSON.parse(value));
const claim = doipjs.Claim.fromJson(JSON.parse(value));
switch (claim.matches[0].serviceprovider.name) {
case 'dns':
case 'xmpp':
case 'irc':
root.querySelector('.info .subtitle').innerText = claim.matches[0].serviceprovider.name.toUpperCase();
break;
default:
root.querySelector('.info .subtitle').innerText = claim.matches[0].serviceprovider.name;
break;
}
root.querySelector('.info .subtitle').innerText = claim.matches[0].about.name;
root.querySelector('.info .title').innerText = claim.matches[0].profile.display;
try {
if (claim.status === 'verified') {
root.querySelector('.icons .verificationStatus').setAttribute('data-value', claim.verification.result ? 'success' : 'failed');
if (claim.status >= 200) {
root.querySelector('.icons .verificationStatus').setAttribute('data-value', claim.status < 300 ? 'success' : 'failed');
} else {
root.querySelector('.icons .verificationStatus').setAttribute('data-value', 'running');
}
@ -86,7 +76,7 @@ export class Claim extends HTMLElement {
elContent.innerHTML = ``;
// Handle failed ambiguous claim
if (claim.status === 'verified' && !claim.verification.result && claim.isAmbiguous()) {
if (claim.status >= 300 && claim.isAmbiguous()) {
root.querySelector('.info .subtitle').innerText = '---';
const subsection_alert = elContent.appendChild(document.createElement('div'));
@ -119,8 +109,8 @@ export class Claim extends HTMLElement {
}
const proof_link = subsection_links_text.appendChild(document.createElement('p'));
if (claim.matches[0].proof.uri) {
proof_link.innerHTML = `Proof link: <a href="${claim.matches[0].proof.uri}" aria-label="link to profile">${claim.matches[0].proof.uri}</a>`;
if (claim.matches[0].proof.request.uri) {
proof_link.innerHTML = `Proof link: <a href="${claim.matches[0].proof.request.uri}" aria-label="link to profile">${claim.matches[0].proof.request.uri}</a>`;
} else {
proof_link.innerHTML = `Proof link: not accessible from browser`;
}
@ -155,7 +145,7 @@ export class Claim extends HTMLElement {
const subsection_status_text = subsection_status.appendChild(document.createElement('div'));
const verification = subsection_status_text.appendChild(document.createElement('p'));
if (claim.status === 'verified') {
if (claim.status >= 200) {
verification.innerHTML = `Claim verification has completed.`;
subsection_status_icon.setAttribute('src', '/static/img/check-decagram.svg');
subsection_status_icon.setAttribute('alt', '');
@ -177,10 +167,10 @@ export class Claim extends HTMLElement {
const subsection_result_text = subsection_result.appendChild(document.createElement('div'));
const result = subsection_result_text.appendChild(document.createElement('p'));
result.innerHTML = `The claim <strong>${claim.verification.result ? 'HAS BEEN' : 'COULD NOT BE'}</strong> verified by the proof.`;
result.innerHTML = `The claim <strong>${claim.status >= 200 && claim.status < 300 ? 'HAS BEEN' : 'COULD NOT BE'}</strong> verified by the proof.`;
// Additional info
if (claim.verification.proof.viaProxy) {
if (claim.status === 201) {
elContent.appendChild(document.createElement('hr'));
const subsection_info = elContent.appendChild(document.createElement('div'));

36
static-src/kx-key.js
View file

@ -46,7 +46,7 @@ export class Key extends HTMLElement {
const root = this;
const data = JSON.parse(value);
root.querySelector('.info .subtitle').innerText = data.key.fetchMethod;
root.querySelector('.info .subtitle').innerText = `${data.keyType} / ${data.fetch.method}`;
root.querySelector('.info .title').innerText = data.fingerprint;
const elContent = root.querySelector('.content');
@ -62,22 +62,24 @@ export class Key extends HTMLElement {
const subsection_links_text = subsection_links.appendChild(document.createElement('div'));
const profile_link = subsection_links_text.appendChild(document.createElement('p'));
profile_link.innerHTML = `Key link: <a class="u-key" rel="pgpkey" href="${data.key.uri}" aria-label="Link to cryptographic key">${data.key.uri}</a>`;
profile_link.innerHTML = `Key link: <a class="u-key" rel="pgpkey" href="${data.fetch.resolvedUrl}" aria-label="Link to cryptographic key">${data.fetch.resolvedUrl}</a>`;
elContent.appendChild(document.createElement('hr'));
// QR Code
const subsection_qr = elContent.appendChild(document.createElement('div'));
subsection_qr.setAttribute('class', 'subsection');
const subsection_qr_icon = subsection_qr.appendChild(document.createElement('img'));
subsection_qr_icon.setAttribute('src', '/static/img/qrcode.svg');
subsection_qr_icon.setAttribute('alt', '');
subsection_qr_icon.setAttribute('aria-hidden', 'true');
const subsection_qr_text = subsection_qr.appendChild(document.createElement('div'));
const button_fingerprintQR = subsection_qr_text.appendChild(document.createElement('button'));
button_fingerprintQR.innerText = `Show OpenPGP fingerprint QR`;
button_fingerprintQR.setAttribute('onClick', `window.showQR('${data.fingerprint}', 'fingerprint')`);
button_fingerprintQR.setAttribute('aria-label', `Show QR code for cryptographic fingerprint`);
if (data.keyType === 'openpgp') {
elContent.appendChild(document.createElement('hr'));
// QR Code
const subsection_qr = elContent.appendChild(document.createElement('div'));
subsection_qr.setAttribute('class', 'subsection');
const subsection_qr_icon = subsection_qr.appendChild(document.createElement('img'));
subsection_qr_icon.setAttribute('src', '/static/img/qrcode.svg');
subsection_qr_icon.setAttribute('alt', '');
subsection_qr_icon.setAttribute('aria-hidden', 'true');
const subsection_qr_text = subsection_qr.appendChild(document.createElement('div'));
const button_fingerprintQR = subsection_qr_text.appendChild(document.createElement('button'));
button_fingerprintQR.innerText = `Show OpenPGP fingerprint QR`;
button_fingerprintQR.setAttribute('onClick', `window.showQR('${data.fingerprint}', 'fingerprint')`);
button_fingerprintQR.setAttribute('aria-label', `Show QR code for cryptographic fingerprint`);
}
}
}

19
static-src/utils.js
View file

@ -74,33 +74,22 @@ export async function generateProfileURL(data) {
// Fetch OpenPGP key based on information stored in window
export async function fetchProfileKey() {
if (window.kx.key.object && window.kx.key.object instanceof openpgp.PublicKey) {
if (window.kx.publicKey.key && window.kx.publicKey.key instanceof openpgp.PublicKey) {
return;
}
const rawKeyData = await fetch(window.kx.key.url)
let key, errorMsg
try {
key = (await openpgp.readKey({
binaryKey: new Uint8Array(await rawKeyData.clone().arrayBuffer())
armoredKey: window.kx.publicKey.encodedKey
}))
} catch(error) {
} catch (error) {
errorMsg = error.message
}
if (!key) {
try {
key = (await openpgp.readKey({
armoredKey: await rawKeyData.clone().text()
}))
} catch (error) {
errorMsg = error.message
}
}
if (key) {
window.kx.key.object = key
window.kx.publicKey.key = key
return
} else {
throw new Error(`Public key could not be fetched (${errorMsg})`)