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() { 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({ await claim.verify({
proxy: { proxy: {
policy: 'adaptive', policy: 'adaptive',
@ -57,24 +57,14 @@ export class Claim extends HTMLElement {
updateContent(value) { updateContent(value) {
const root = this; 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) { root.querySelector('.info .subtitle').innerText = claim.matches[0].about.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 .title').innerText = claim.matches[0].profile.display; root.querySelector('.info .title').innerText = claim.matches[0].profile.display;
try { try {
if (claim.status === 'verified') { if (claim.status >= 200) {
root.querySelector('.icons .verificationStatus').setAttribute('data-value', claim.verification.result ? 'success' : 'failed'); root.querySelector('.icons .verificationStatus').setAttribute('data-value', claim.status < 300 ? 'success' : 'failed');
} else { } else {
root.querySelector('.icons .verificationStatus').setAttribute('data-value', 'running'); root.querySelector('.icons .verificationStatus').setAttribute('data-value', 'running');
} }
@ -86,7 +76,7 @@ export class Claim extends HTMLElement {
elContent.innerHTML = ``; elContent.innerHTML = ``;
// Handle failed ambiguous claim // Handle failed ambiguous claim
if (claim.status === 'verified' && !claim.verification.result && claim.isAmbiguous()) { if (claim.status >= 300 && claim.isAmbiguous()) {
root.querySelector('.info .subtitle').innerText = '---'; root.querySelector('.info .subtitle').innerText = '---';
const subsection_alert = elContent.appendChild(document.createElement('div')); 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')); const proof_link = subsection_links_text.appendChild(document.createElement('p'));
if (claim.matches[0].proof.uri) { if (claim.matches[0].proof.request.uri) {
proof_link.innerHTML = `Proof link: <a href="${claim.matches[0].proof.uri}" aria-label="link to profile">${claim.matches[0].proof.uri}</a>`; 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 { } else {
proof_link.innerHTML = `Proof link: not accessible from browser`; 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 subsection_status_text = subsection_status.appendChild(document.createElement('div'));
const verification = subsection_status_text.appendChild(document.createElement('p')); const verification = subsection_status_text.appendChild(document.createElement('p'));
if (claim.status === 'verified') { if (claim.status >= 200) {
verification.innerHTML = `Claim verification has completed.`; verification.innerHTML = `Claim verification has completed.`;
subsection_status_icon.setAttribute('src', '/static/img/check-decagram.svg'); subsection_status_icon.setAttribute('src', '/static/img/check-decagram.svg');
subsection_status_icon.setAttribute('alt', ''); 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 subsection_result_text = subsection_result.appendChild(document.createElement('div'));
const result = subsection_result_text.appendChild(document.createElement('p')); 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 // Additional info
if (claim.verification.proof.viaProxy) { if (claim.status === 201) {
elContent.appendChild(document.createElement('hr')); elContent.appendChild(document.createElement('hr'));
const subsection_info = elContent.appendChild(document.createElement('div')); const subsection_info = elContent.appendChild(document.createElement('div'));

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

@ -46,7 +46,7 @@ export class Key extends HTMLElement {
const root = this; const root = this;
const data = JSON.parse(value); 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; root.querySelector('.info .title').innerText = data.fingerprint;
const elContent = root.querySelector('.content'); 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 subsection_links_text = subsection_links.appendChild(document.createElement('div'));
const profile_link = subsection_links_text.appendChild(document.createElement('p')); 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')); if (data.keyType === 'openpgp') {
elContent.appendChild(document.createElement('hr'));
// QR Code // QR Code
const subsection_qr = elContent.appendChild(document.createElement('div')); const subsection_qr = elContent.appendChild(document.createElement('div'));
subsection_qr.setAttribute('class', 'subsection'); subsection_qr.setAttribute('class', 'subsection');
const subsection_qr_icon = subsection_qr.appendChild(document.createElement('img')); const subsection_qr_icon = subsection_qr.appendChild(document.createElement('img'));
subsection_qr_icon.setAttribute('src', '/static/img/qrcode.svg'); subsection_qr_icon.setAttribute('src', '/static/img/qrcode.svg');
subsection_qr_icon.setAttribute('alt', ''); subsection_qr_icon.setAttribute('alt', '');
subsection_qr_icon.setAttribute('aria-hidden', 'true'); subsection_qr_icon.setAttribute('aria-hidden', 'true');
const subsection_qr_text = subsection_qr.appendChild(document.createElement('div')); const subsection_qr_text = subsection_qr.appendChild(document.createElement('div'));
const button_fingerprintQR = subsection_qr_text.appendChild(document.createElement('button')); const button_fingerprintQR = subsection_qr_text.appendChild(document.createElement('button'));
button_fingerprintQR.innerText = `Show OpenPGP fingerprint QR`; button_fingerprintQR.innerText = `Show OpenPGP fingerprint QR`;
button_fingerprintQR.setAttribute('onClick', `window.showQR('${data.fingerprint}', 'fingerprint')`); button_fingerprintQR.setAttribute('onClick', `window.showQR('${data.fingerprint}', 'fingerprint')`);
button_fingerprintQR.setAttribute('aria-label', `Show QR code for cryptographic 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 // Fetch OpenPGP key based on information stored in window
export async function fetchProfileKey() { 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; return;
} }
const rawKeyData = await fetch(window.kx.key.url)
let key, errorMsg let key, errorMsg
try { try {
key = (await openpgp.readKey({ key = (await openpgp.readKey({
binaryKey: new Uint8Array(await rawKeyData.clone().arrayBuffer()) armoredKey: window.kx.publicKey.encodedKey
})) }))
} catch(error) { } catch (error) {
errorMsg = error.message errorMsg = error.message
} }
if (!key) {
try {
key = (await openpgp.readKey({
armoredKey: await rawKeyData.clone().text()
}))
} catch (error) {
errorMsg = error.message
}
}
if (key) { if (key) {
window.kx.key.object = key window.kx.publicKey.key = key
return return
} else { } else {
throw new Error(`Public key could not be fetched (${errorMsg})`) throw new Error(`Public key could not be fetched (${errorMsg})`)