From c1cbefa9209dba0f53c45e68279f4b0b087c7f90 Mon Sep 17 00:00:00 2001
From: Yarmo Mackenbach <yarmo@qivro.xyz>
Date: Tue, 30 Jun 2020 08:44:12 +0200
Subject: [PATCH] Verify proofs after loading and displaying basic profile

---
 assets/scripts.js | 65 ++++++++++++++++++++++++++++++-----------------
 assets/styles.css | 17 ++++++++++++-
 2 files changed, 57 insertions(+), 25 deletions(-)

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 += `<div class="profileDataItem profileDataItem--separator profileDataItem--noLabel">`;
     feedback += `<div class="profileDataItem__label"></div>`;
@@ -223,25 +214,18 @@ async function displayProfile(opts) {
     feedback += `<div class="profileDataItem__value"><a href="https://keys.openpgp.org/pks/lookup?op=get&options=mr&search=0x${keyData.fingerprint}">${keyData.fingerprint}</a></div>`;
     feedback += `</div>`;
 
-    if (verifications.length > 0) {
+    if (keyData.notations.length > 0) {
         feedback += `<div class="profileDataItem profileDataItem--separator profileDataItem--noLabel">`;
         feedback += `<div class="profileDataItem__label"></div>`;
         feedback += `<div class="profileDataItem__value">proofs</div>`;
         feedback += `</div>`;
-        for (var i = 0; i < verifications.length; i++) {
-            if (!verifications[i].type) { continue; }
-            feedback += `<div class="profileDataItem">`;
-            feedback += `<div class="profileDataItem__label">${verifications[i].type}</div>`;
-            feedback += `<div class="profileDataItem__value">`;
-            feedback += `<a class="proofDisplay" href="${verifications[i].url}">${verifications[i].display}</a>`;
-            if (verifications[i].isVerified) {
-                feedback += `<a class="proofUrl proofUrl--verified" href="${verifications[i].proofUrl}">verified &#10004;</a>`;
-            } else {
-                feedback += `<a class="proofUrl" href="${verifications[i].proofUrl}">proof</a>`;
-            }
-            feedback += `</div>`;
-            feedback += `</div>`;
-        }
+
+        feedback += `<div id="profileProofs">`;
+        feedback += `<div class="profileDataItem">`;
+        feedback += `<div class="profileDataItem__label"></div>`;
+        feedback += `<div class="profileDataItem__value">Verifying proofs&hellip;</div>`;
+        feedback += `</div>`;
+        feedback += `</div>`;
     }
 
     feedback += `<div class="profileDataItem profileDataItem--separator profileDataItem--noLabel">`;
@@ -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 += `<div class="profileDataItem">`;
+            feedback += `<div class="profileDataItem__label">${verifications[i].type}</div>`;
+            feedback += `<div class="profileDataItem__value">`;
+            feedback += `<a class="proofDisplay" href="${verifications[i].url}">${verifications[i].display}</a>`;
+            if (verifications[i].isVerified) {
+                feedback += `<a class="proofUrl proofUrl--verified" href="${verifications[i].proofUrl}">verified &#10004;</a>`;
+            } else {
+                feedback += `<a class="proofUrl" href="${verifications[i].proofUrl}">proof</a>`;
+            }
+            feedback += `</div>`;
+            feedback += `</div>`;
+        }
+    } 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;