diff --git a/assets/scripts.js b/assets/scripts.js index 94ea7b9..4d39c05 100644 --- a/assets/scripts.js +++ b/assets/scripts.js @@ -198,15 +198,6 @@ async function displayProfile(opts) { document.body.querySelector('#profileAvatar').src = `https://www.gravatar.com/avatar/${SparkMD5.hash(userData.email)}?s=128&d=mm`; document.title = `${userData.name} - Keyoxide`; - for (var i = 0; i < keyData.notations.length; i++) { - notation = keyData.notations[i]; - if (notation[0] != "proof@metacode.biz") { continue; } - verifications.push(await verifyProof(notation[1], keyData.fingerprint)); - } - - // One-line sorting function (order verifications by type) - verifications = verifications.sort((a,b) => (a.type > b.type) ? 1 : ((b.type > a.type) ? -1 : 0)); - // Generate feedback feedback += `
`; feedback += `
`; @@ -223,25 +214,18 @@ async function displayProfile(opts) { feedback += `
${keyData.fingerprint}
`; feedback += `
`; - if (verifications.length > 0) { + if (keyData.notations.length > 0) { feedback += `
`; feedback += `
`; feedback += `
proofs
`; feedback += `
`; - for (var i = 0; i < verifications.length; i++) { - if (!verifications[i].type) { continue; } - feedback += `
`; - feedback += `
${verifications[i].type}
`; - feedback += `
`; - feedback += `${verifications[i].display}`; - if (verifications[i].isVerified) { - feedback += `verified ✔`; - } else { - feedback += `proof`; - } - feedback += `
`; - feedback += `
`; - } + + feedback += `
`; + feedback += `
`; + feedback += `
`; + feedback += `
Verifying proofs…
`; + feedback += `
`; + feedback += `
`; } feedback += `
`; @@ -259,6 +243,39 @@ async function displayProfile(opts) { // Display feedback document.body.querySelector('#profileData').innerHTML = feedback; + + // Verify identity proofs + for (var i = 0; i < keyData.notations.length; i++) { + notation = keyData.notations[i]; + if (notation[0] != "proof@metacode.biz") { continue; } + verifications.push(await verifyProof(notation[1], keyData.fingerprint)); + } + + // One-line sorting function (order verifications by type) + verifications = verifications.sort((a,b) => (a.type > b.type) ? 1 : ((b.type > a.type) ? -1 : 0)); + + feedback = ""; + if (verifications.length > 0) { + for (var i = 0; i < verifications.length; i++) { + if (!verifications[i].type) { continue; } + feedback += `
`; + feedback += `
${verifications[i].type}
`; + feedback += `
`; + feedback += `${verifications[i].display}`; + if (verifications[i].isVerified) { + feedback += `verified ✔`; + } else { + feedback += `proof`; + } + feedback += `
`; + feedback += `
`; + } + } else { + feedback = "No proofs could be displayed or verified" + } + + // Display feedback + document.body.querySelector('#profileProofs').innerHTML = feedback; } async function verifyProof(url, fingerprint) { diff --git a/assets/styles.css b/assets/styles.css index b2c205c..c1450f3 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -121,17 +121,23 @@ input[type="submit"] { #profileHeader { display: flex; flex-direction: row; - flex-wrap: wrap; align-items: center; margin-bottom: 32px; } #profileAvatar { + width: 100%; + max-width: 128px; border-radius: 100%; margin-right: 32px; } #profileName { font-size: 1.6em; font-weight: bold; + display: inline-block; + max-width: 100%; + white-space: wrap; + overflow: hidden; + text-overflow: ellipsis; } .profileDataItem { position: relative; @@ -183,6 +189,15 @@ a.proofUrl:hover { text-decoration: underline; } @media (max-width: 680px) { + #profileHeader { + flex-direction: column; + } + #profileAvatar { + margin: 0; + } + #profileName { + font-size: 1.2em; + } .profileDataItem { flex-direction: column; margin-bottom: 8px;