From 6847d2a285a3b2fa96f12c2df2178c6085d28e4e Mon Sep 17 00:00:00 2001 From: Yarmo Mackenbach Date: Sat, 27 Jun 2020 00:50:21 +0200 Subject: [PATCH] Improve profile page --- assets/scripts.js | 84 ++++++++++++++++++++++++++++++++-------------- assets/styles.css | 77 +++++++++++++++++++++++++++++++++++++++++- pages/profile.html | 31 ++++------------- 3 files changed, 141 insertions(+), 51 deletions(-) diff --git a/assets/scripts.js b/assets/scripts.js index 93c263a..cf95d4b 100644 --- a/assets/scripts.js +++ b/assets/scripts.js @@ -172,8 +172,7 @@ async function displayProfile(opts) { let userData = keyData.user.user.userId; let feedback = "", notation, isVerified, verifications = []; - document.body.querySelector('#profile--name').innerHTML = userData.name; - document.body.querySelector('#profile--email').innerHTML = userData.email; + document.body.querySelector('#profileName').innerHTML = userData.name; for (var i = 0; i < keyData.notations.length; i++) { notation = keyData.notations[i]; @@ -182,27 +181,55 @@ async function displayProfile(opts) { } // Generate feedback + feedback += `
`; + feedback += `
`; + feedback += `
general information
`; + feedback += `
`; + feedback += `
`; + feedback += `
email
`; + feedback += `
${userData.email}
`; + feedback += `
`; + feedback += `
`; + feedback += `
fingerprint
`; + feedback += `
${keyData.fingerprint}
`; + feedback += `
`; + + feedback += `
`; + feedback += `
`; + feedback += `
proofs
`; + feedback += `
`; for (var i = 0; i < verifications.length; i++) { - feedback += `${verifications[i].type}: ${verifications[i].display}: ${verifications[i].isVerified}
`; + // feedback += `${verifications[i].type}: ${verifications[i].display}: ${verifications[i].isVerified}
`; + feedback += `
`; + feedback += `
${verifications[i].type}
`; + feedback += `
`; + feedback += `${verifications[i].display}`; + if (verifications[i].isVerified) { + feedback += `verified ✔`; + } else { + feedback += `proof`; + } + feedback += `
`; + feedback += `
`; } // Display feedback - document.body.querySelector('#profile--proofs').innerHTML = feedback; + document.body.querySelector('#profileData').innerHTML = feedback; } async function verifyProof(url, fingerprint) { // Init - let reVerify, urlFetch, output = {url: url, type: null, isVerified: false, display: null}; + let reVerify, output = {url: url, type: null, proofUrl: url, proofUrlFetch: null, isVerified: false, display: null}; // DNS if (/^dns:/.test(url)) { - output.type = "dns"; - let domain = url.replace(/dns:/, '').replace(/\?type=TXT/, ''); - urlFetch = `https://dns.google.com/resolve?name=${domain}&type=TXT`; - output.display = domain; + output.type = "website"; + output.display = url.replace(/dns:/, '').replace(/\?type=TXT/, ''); + output.proofUrlFetch = `https://dns.google.com/resolve?name=${output.display}&type=TXT`; + output.url = `https://${output.display}`; try { - response = await fetch(urlFetch, { + response = await fetch(output.proofUrlFetch, { headers: { Accept: 'application/json' }, @@ -226,8 +253,10 @@ async function verifyProof(url, fingerprint) { // HN if (/^https:\/\/news.ycombinator.com/.test(url)) { output.type = "hn"; + output.display = url.replace(/https:\/\/news.ycombinator.com\/user\?id=/, ""); + output.proofUrlFetch = `https://hacker-news.firebaseio.com/v0/user/${output.display}.json`; try { - response = await fetch(urlFetch, { + response = await fetch(output.proofUrlFetch, { headers: { Accept: 'application/json' }, @@ -238,11 +267,9 @@ async function verifyProof(url, fingerprint) { } json = await response.json(); reVerify = new RegExp(`openpgp4fpr:${fingerprint}`); - json.Answer.forEach((item, i) => { - if (reVerify.test(item.data)) { - output.isVerified = true; - } - }); + if (reVerify.test(json.about)) { + output.isVerified = true; + } } catch (e) { } finally { return output; @@ -251,8 +278,11 @@ async function verifyProof(url, fingerprint) { // Reddit if (/^https:\/\/www.reddit.com\/user/.test(url)) { output.type = "reddit"; + output.display = url.replace(/^https:\/\/www.reddit.com\/user\//, "").replace(/\/comments\/.*/, ""); + output.url = `https://www.reddit.com/user/${output.display}`; + output.proofUrlFetch = url.replace(/\/[a-zA-Z0-9_]*\/$/, ".json"); try { - response = await fetch(urlFetch, { + response = await fetch(output.proofUrlFetch, { headers: { Accept: 'application/json' }, @@ -262,7 +292,8 @@ async function verifyProof(url, fingerprint) { throw new Error('Response failed: ' + response.status); } json = await response.json(); - reVerify = new RegExp(`openpgp4fpr:${fingerprint}`); + console.log(json); + reVerify = new RegExp(`Verifying my OpenPGP key: openpgp4fpr:${fingerprint}`); json.Answer.forEach((item, i) => { if (reVerify.test(item.data)) { output.isVerified = true; @@ -276,8 +307,12 @@ async function verifyProof(url, fingerprint) { // Github if (/^https:\/\/gist.github.com/.test(url)) { output.type = "github"; + output.display = url.replace(/^https:\/\/gist.github.com\//, "").replace(/\/[a-zA-Z0-9]*$/, ""); + output.url = `https://github.com/${output.display}`; + let gistId = url.replace(/^https:\/\/gist.github.com\/[a-zA-Z0-9_-]*\//, ""); + output.proofUrlFetch = `https://api.github.com/gists/${gistId}`; try { - response = await fetch(urlFetch, { + response = await fetch(output.proofUrlFetch, { headers: { Accept: 'application/json' }, @@ -287,12 +322,10 @@ async function verifyProof(url, fingerprint) { throw new Error('Response failed: ' + response.status); } json = await response.json(); - reVerify = new RegExp(`openpgp4fpr:${fingerprint}`); - json.Answer.forEach((item, i) => { - if (reVerify.test(item.data)) { - output.isVerified = true; - } - }); + reVerify = new RegExp(`[Verifying my OpenPGP key: openpgp4fpr:${fingerprint}]`); + if (reVerify.test(json.files["openpgp.md"].content)) { + output.isVerified = true; + } } catch (e) { } finally { return output; @@ -316,6 +349,7 @@ async function verifyProof(url, fingerprint) { if (item.value === fingerprint) { output.type = "mastodon"; output.display = json.url; + output.proofUrlFetch = json.url; output.isVerified = true; } }); diff --git a/assets/styles.css b/assets/styles.css index b637d66..05874bd 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -20,7 +20,7 @@ nav a { footer { color: #777; margin: 64px 0; - padding: 32px; + padding: 0 32px; } .container { max-width: 720px; @@ -91,3 +91,78 @@ input[type="submit"] { display: inline-block; margin: 0 0 8px; } + +.container--profile { + margin-top: 64px; +} +.container--profile .content { + padding-top: 32px; + font-size: 1.2em; +} +.container--profile footer { + text-align: center; +} + +.profileDataItem { + position: relative; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} +.profileDataItem--separator { + margin-top: 1em; + font-weight: bold; +} +.profileDataItem__label { + display: inline-block; + position: relative; + flex: 1; + min-height: 32px; + padding: 0 8px; + max-width: 20%; + color: #777; + text-align: right; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.profileDataItem__value { + display: inline-block; + flex: 1; + min-height: 32px; + max-width: 100%; + padding: 0 8px; +} +.profileDataItem__value a { + display: inline-block; + max-width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.profileDataItem__value a.proofDisplay { + margin-right: 16px; +} +.profileDataItem__value a.proofUrl { + color: #777; + /* text-decoration: none; */ +} +.profileDataItem__value a.proofUrl.proofUrl--verified { + color: #499539; +} +.profileDataItem__value a.proofUrl:hover { + text-decoration: underline; +} +@media (max-width: 680px) { + .profileDataItem { + flex-direction: column; + } + .profileDataItem__label { + max-width: 100%; + min-height: 28px; + text-align: left; + } + .profileDataItem__value { + min-height: 28px; + } +} diff --git a/pages/profile.html b/pages/profile.html index bad9642..f0fa4dd 100644 --- a/pages/profile.html +++ b/pages/profile.html @@ -3,41 +3,22 @@ - Encrypt - Keyoxide + Keyoxide -
-
- Keyoxide -
-
- -
-

Profile

+
+

-

-

Input: %UID%

-

Name:

-

Email address: /span>

-

Proofs: /span>

+ +