From 9864a5fb6685fdd92ca044c491d3462365523c11 Mon Sep 17 00:00:00 2001 From: Yarmo Mackenbach Date: Thu, 13 Jul 2023 11:11:16 +0200 Subject: [PATCH] feat: update client code --- static-src/kx-claim.js | 32 +++++++++++--------------------- static-src/kx-key.js | 36 +++++++++++++++++++----------------- static-src/utils.js | 19 ++++--------------- 3 files changed, 34 insertions(+), 53 deletions(-) diff --git a/static-src/kx-claim.js b/static-src/kx-claim.js index fa4ab83..1e3d3b4 100644 --- a/static-src/kx-claim.js +++ b/static-src/kx-claim.js @@ -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: ${claim.matches[0].proof.uri}`; + if (claim.matches[0].proof.request.uri) { + proof_link.innerHTML = `Proof link: ${claim.matches[0].proof.request.uri}`; } 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 ${claim.verification.result ? 'HAS BEEN' : 'COULD NOT BE'} verified by the proof.`; + result.innerHTML = `The claim ${claim.status >= 200 && claim.status < 300 ? 'HAS BEEN' : 'COULD NOT BE'} 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')); diff --git a/static-src/kx-key.js b/static-src/kx-key.js index 42a67b9..442fbcc 100644 --- a/static-src/kx-key.js +++ b/static-src/kx-key.js @@ -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: ${data.key.uri}`; + profile_link.innerHTML = `Key link: ${data.fetch.resolvedUrl}`; - 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`); + } } } \ No newline at end of file diff --git a/static-src/utils.js b/static-src/utils.js index 50e21b5..b87f28e 100644 --- a/static-src/utils.js +++ b/static-src/utils.js @@ -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})`)