forked from Mirrors/keyoxide-web
85 lines
3.2 KiB
JavaScript
85 lines
3.2 KiB
JavaScript
class Key extends HTMLElement {
|
|
// Specify the attributes to observe
|
|
static get observedAttributes() {
|
|
return ['data-keydata'];
|
|
}
|
|
|
|
constructor() {
|
|
// Call super
|
|
super();
|
|
|
|
// Shadow root
|
|
this.attachShadow({mode: 'open'});
|
|
|
|
// Details element
|
|
const details = document.createElement('details');
|
|
details.setAttribute('class', 'kx-item');
|
|
|
|
// Summary element
|
|
const summary = details.appendChild(document.createElement('summary'));
|
|
|
|
// Info
|
|
const info = summary.appendChild(document.createElement('div'));
|
|
info.setAttribute('class', 'info');
|
|
|
|
// Info > Protocol
|
|
const serviceProvider = info.appendChild(document.createElement('p'));
|
|
serviceProvider.setAttribute('class', 'subtitle');
|
|
|
|
// Info > Fingerprint
|
|
const profile = info.appendChild(document.createElement('p'));
|
|
profile.setAttribute('class', 'title');
|
|
|
|
// Details content
|
|
const content = details.appendChild(document.createElement('div'));
|
|
content.setAttribute('class', 'content');
|
|
|
|
// Load CSS stylesheet
|
|
const linkCSS = document.createElement('link');
|
|
linkCSS.setAttribute('rel', 'stylesheet');
|
|
linkCSS.setAttribute('href', '/static/kx-styles.css');
|
|
|
|
// Attach the elements to the shadow DOM
|
|
this.shadowRoot.append(linkCSS, details);
|
|
}
|
|
|
|
attributeChangedCallback(name, oldValue, newValue) {
|
|
this.updateContent(newValue);
|
|
}
|
|
|
|
updateContent(value) {
|
|
const shadow = this.shadowRoot;
|
|
const data = JSON.parse(value);
|
|
|
|
shadow.querySelector('.info .subtitle').innerText = data.key.fetchMethod;
|
|
shadow.querySelector('.info .title').innerText = data.fingerprint;
|
|
|
|
const elContent = shadow.querySelector('.content');
|
|
elContent.innerHTML = ``;
|
|
|
|
// Link to key
|
|
const subsection1 = elContent.appendChild(document.createElement('div'));
|
|
subsection1.setAttribute('class', 'subsection');
|
|
const subsection1_icon = subsection1.appendChild(document.createElement('img'));
|
|
subsection1_icon.setAttribute('src', '/static/img/link.png');
|
|
const subsection1_text = subsection1.appendChild(document.createElement('div'));
|
|
|
|
const profile_link = subsection1_text.appendChild(document.createElement('p'));
|
|
profile_link.innerHTML = `Key link: <a href="${data.key.uri}">${data.key.uri}</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.png');
|
|
const subsection_qr_text = subsection_qr.appendChild(document.createElement('div'));
|
|
|
|
const button_profileQR = subsection_qr_text.appendChild(document.createElement('button'));
|
|
button_profileQR.innerText = `Show OpenPGP fingerprint QR`;
|
|
button_profileQR.setAttribute('onClick', `showQR('${data.fingerprint}', 'fingerprint')`);
|
|
}
|
|
}
|
|
|
|
customElements.define('kx-key', Key);
|