From 637a0a5f5c693b79a6a7e777c6c90ab29a6a101a Mon Sep 17 00:00:00 2001
From: Yarmo Mackenbach <yarmo@yarmo.eu>
Date: Tue, 4 May 2021 10:01:04 +0200
Subject: [PATCH] Add search, improve all forms

---
 static/scripts.js | 121 ++++++++++++++++++++++++++++------------------
 views/index.pug   |  20 ++++++--
 views/profile.pug |  13 ++---
 3 files changed, 99 insertions(+), 55 deletions(-)

diff --git a/static/scripts.js b/static/scripts.js
index 6d4fb99..41a4731 100644
--- a/static/scripts.js
+++ b/static/scripts.js
@@ -30,6 +30,9 @@ more information on this, and how to apply and follow the GNU AGPL, see <https:/
 // Verify all claims
 const claims = document.querySelectorAll('kx-claim');
 claims.forEach(function(claim) {
+    if (claim.hasAttribute('data-skip') && claim.getAttribute('data-skip')) {
+        return;
+    }
     claim.verify();
 });
 
@@ -46,64 +49,90 @@ document.querySelectorAll('dialog').forEach(function(d) {
 
 // Register form listeners
 const elFormEncrypt = document.body.querySelector("#dialog--encryptMessage form");
-elFormEncrypt.onsubmit = async function (evt) {
-    evt.preventDefault();
+if (elFormEncrypt) {
+    elFormEncrypt.onsubmit = async function (evt) {
+        evt.preventDefault();
 
-    try {
-        // Fetch a key if needed
-        await fetchProfileKey();
+        try {
+            // Fetch a key if needed
+            await fetchProfileKey();
 
-        // Encrypt the message
-        encrypted = await openpgp.encrypt({
-            message: openpgp.message.fromText(elFormEncrypt.querySelector('.input').value),
-            publicKeys: window.kx.key.object
-        });
-        elFormEncrypt.querySelector('.output').value = encrypted.data;
-    } catch (e) {
-        console.error(e);
-        elFormEncrypt.querySelector('.output').value = `Could not encrypt message!\n==========================\n${e.message ? e.message : e}`;
+            // Encrypt the message
+            encrypted = await openpgp.encrypt({
+                message: openpgp.message.fromText(elFormEncrypt.querySelector('.input').value),
+                publicKeys: window.kx.key.object
+            });
+            elFormEncrypt.querySelector('.output').value = encrypted.data;
+        } catch (e) {
+            console.error(e);
+            elFormEncrypt.querySelector('.output').value = `Could not encrypt message!\n==========================\n${e.message ? e.message : e}`;
+        }
     }
-};
+}
 
 const elFormVerify = document.body.querySelector("#dialog--verifySignature form");
-elFormVerify.onsubmit = async function (evt) {
-    evt.preventDefault();
+if (elFormVerify) {
+    elFormVerify.onsubmit = async function (evt) {
+        evt.preventDefault();
 
-    try {
-        // Fetch a key if needed
-        await fetchProfileKey();
-
-        // Try two different methods of signature reading
-        let signature = null, verified = null, readError = null;
         try {
-            signature = await openpgp.message.readArmored(elFormVerify.querySelector('.input').value);
-        } catch(e) {
-            readError = e;
-        }
-        try {
-            signature = await openpgp.cleartext.readArmored(elFormVerify.querySelector('.input').value);
-        } catch(e) {
-            readError = e;
-        }
-        if (signature == null) { throw(readError) };
+            // Fetch a key if needed
+            await fetchProfileKey();
 
-        // Verify the signature
-        verified = await openpgp.verify({
-            message: signature,
-            publicKeys: window.kx.key.object
-        });
+            // Try two different methods of signature reading
+            let signature = null, verified = null, readError = null;
+            try {
+                signature = await openpgp.message.readArmored(elFormVerify.querySelector('.input').value);
+            } catch(e) {
+                readError = e;
+            }
+            try {
+                signature = await openpgp.cleartext.readArmored(elFormVerify.querySelector('.input').value);
+            } catch(e) {
+                readError = e;
+            }
+            if (signature == null) { throw(readError) };
 
-        if (verified.signatures[0].valid) {
-            elFormVerify.querySelector('.output').value = `The message was signed by the profile's key.`;
-        } else {
-            elFormVerify.querySelector('.output').value = `The message was NOT signed by the profile's key.`;
+            // Verify the signature
+            verified = await openpgp.verify({
+                message: signature,
+                publicKeys: window.kx.key.object
+            });
+
+            if (verified.signatures[0].valid) {
+                elFormVerify.querySelector('.output').value = `The message was signed by the profile's key.`;
+            } else {
+                elFormVerify.querySelector('.output').value = `The message was NOT signed by the profile's key.`;
+            }
+        } catch (e) {
+            console.error(e);
+            elFormVerify.querySelector('.output').value = `Could not verify signature!\n===========================\n${e.message ? e.message : e}`;
         }
-    } catch (e) {
-        console.error(e);
-        elFormVerify.querySelector('.output').value = `Could not verify signature!\n===========================\n${e.message ? e.message : e}`;
     }
-};
+}
 
+const elFormSearch = document.body.querySelector("#search");
+if (elFormSearch) {
+    elFormSearch.onsubmit = function (evt) {
+        evt.preventDefault();
+    }
+
+    const elSearchRadio = elFormSearch.querySelectorAll("input[type='radio']");
+    elSearchRadio.forEach(function (el) {
+        el.oninput = function (evt) {
+            evt.preventDefault();
+
+            if (evt.target.getAttribute('id') === 'protocol-sig') {
+                elFormSearch.querySelector("input[type='search']").setAttribute('disabled', true);
+            } else {
+                elFormSearch.querySelector("input[type='search']").removeAttribute('disabled');
+            }
+        }
+    });
+    elFormSearch.querySelector("input[type='radio']:checked").dispatchEvent(new Event('input'));
+}
+
+// Functions
 const fetchProfileKey = async function() {
     if (window.kx.key.object && window.kx.key.object instanceof openpgp.key.Key) {
         return;
diff --git a/views/index.pug b/views/index.pug
index 789641f..2479856 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -1,14 +1,28 @@
 extends templates/base.pug
 
 block js
-  //- script(type='application/javascript' src='/static/dialog-polyfill.js' charset='utf-8')
   script(type='application/javascript' src='/static/openpgp.min.js' charset='utf-8')
   script(type='application/javascript' src='/static/doip.js' charset='utf-8')
   script(type='application/javascript' src='/static/kx-claim.js' charset='utf-8')
+  script(type='application/javascript' src='/static/scripts.js' charset='utf-8')
 
 block content
   .demo.narrow
-    kx-claim(data-claim= demoData)
+    kx-claim(data-claim= demoData data-skip="true")
+
+  .narrow
+    #search.form-wrapper.card
+      h2 Generate a profile
+      form(action="post")
+        input(type="search" name="query" placeholder="3637202523e7c1309ab79e99ef2dc5827b445f4b, test@doip.rocks")
+        div.radio-wrapper
+          input#protocol-hkp(type="radio" name="protocol" value="hkp" checked="true")
+          label(for="protocol-hkp") HKP
+          input#protocol-wkd(type="radio" name="protocol" value="wkd")
+          label(for="protocol-wkd") WKD
+          input#protocol-sig(type="radio" name="protocol" value="sig")
+          label(for="protocol-sig") Signature
+        input(type="submit" value="Generate profile")
 
   if highlights.length > 0
     h2 Highlights
@@ -22,7 +36,7 @@ block content
             span.details= hl.description
           .spacer
           p
-            a(href=`/${hl.fingerprint}`) View profile
+            a(href=`/${hl.fingerprint}`).button.full-width View profile
       - var n = 0
       while n < 3-highlights.length
         .card.card--small-profile-dummy
diff --git a/views/profile.pug b/views/profile.pug
index 2fad42a..f6624e0 100644
--- a/views/profile.pug
+++ b/views/profile.pug
@@ -37,7 +37,7 @@ block content
       div
         form(method='post')
           textarea.input(name='message' placeholder='Message')
-          input(type='submit' name='submit' value='ENCRYPT MESSAGE')
+          input.no-margin(type='submit' name='submit' value='ENCRYPT MESSAGE')
           textarea.output(name='message' placeholder='Waiting for input' readonly)
         form(method="dialog")
           input(type="submit" value="Close")
@@ -46,7 +46,7 @@ block content
       div
         form(method='post')
           textarea.input(name='signature' placeholder='Signature')
-          input(type='submit' name='submit' value='VERIFY SIGNATURE')
+          input.no-margin(type='submit' name='submit' value='VERIFY SIGNATURE')
           textarea.output(name='message' placeholder='Waiting for input' readonly)
         form(method="dialog")
           input(type="submit" value="Close")
@@ -58,7 +58,8 @@ block content
           a#qr--altLink
 
     if (isSignature)
-      #profileSigInput.card.card--form
+      #profileSigInput.form-wrapper.card
+        h2 Signature profile
         form#formGenerateSignatureProfile(method='post')
           label(for="signature")  Please enter the raw profile signature below and press "Generate profile".
           textarea#signature(name='signature')= signature
@@ -72,16 +73,16 @@ block content
         li= error
     else
       unless (isSignature && !signature)
-        #profileHeader.card.card--profileHeader
+        #profileHeader.card.card--transparent.card--profileHeader
           a.avatar(href="#")
             img#profileAvatar(src=data.extra.avatarURL alt="avatar")
 
           p#profileName= data.keyData.users[data.keyData.primaryUserIndex].userData.name
-          .buttons
+          .button-wrapper
             button(onClick="document.querySelector('#dialog--encryptMessage').showModal();") Encrypt message
             button(onClick="document.querySelector('#dialog--verifySignature').showModal();") Verify signature
 
-        #profileProofs.card
+        #profileProofs.card.card--transparent
           h2 Key
           kx-key(data-keydata=data.keyData)