From c869d38d0b67169edded3d643956ec15f3b896a2 Mon Sep 17 00:00:00 2001
From: Yarmo Mackenbach <yarmo@yarmo.eu>
Date: Wed, 5 Oct 2022 10:52:30 +0200
Subject: [PATCH] Add feedback to hash utilities

---
 static-src/styles.css |  5 +++++
 static-src/ui.js      | 46 ++++++++++++++++++++++++++++++++++++++++---
 views/util/argon2.pug |  1 +
 views/util/bcrypt.pug |  1 +
 4 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/static-src/styles.css b/static-src/styles.css
index 6bc684e..8b61063 100644
--- a/static-src/styles.css
+++ b/static-src/styles.css
@@ -501,6 +501,11 @@ a.button.button--liberapay {
 a.button.button--liberapay:hover {
   background-color: #fff463;
 }
+button.inline {
+  min-height: auto;
+  margin: 0;
+  padding: 2px 8px;
+}
 
 /* DIALOGS */
 dialog {
diff --git a/static-src/ui.js b/static-src/ui.js
index f8652cd..e9c4246 100644
--- a/static-src/ui.js
+++ b/static-src/ui.js
@@ -345,10 +345,24 @@ const runArgon2GenerationUtility = () => {
     }
 
     const elInput = elUtilArgon2Generation.querySelector(".input"),
-        elOutput = elUtilArgon2Generation.querySelector(".output");
+        elOutput = elUtilArgon2Generation.querySelector(".output"),
+        elFeedback = elUtilArgon2Generation.querySelector(".feedback");
 
     elInput.addEventListener("input", async function(evt) {
         elOutput.innerText = await utils.generateArgon2Hash(elInput.value);
+
+        if (elInput.value == "") {
+            elFeedback.innerHTML = "";
+        } else {
+            let feedbackContent = "";
+            if (!(/openpgp4fpr:[0-9a-zA-Z]+/.test(elInput.value))) {
+                feedbackContent += "❗ Valid proofs must begin with <strong>openpgp4fpr:</strong>. <button class='inline' onclick='window.kx__fixArgon2Input();'>Fix now</button><br>";
+            }
+            if (!(elInput.value === elInput.value.toLowerCase())) {
+                feedbackContent += "❗ Valid proofs must be lowercase. <button class='inline' onclick='window.kx__fixArgon2Input();'>Fix now</button><br>";
+            }
+            elFeedback.innerHTML = feedbackContent;
+        }
     });
 
     elInput.dispatchEvent(new Event("input"));
@@ -379,16 +393,36 @@ const runArgon2VerificationUtility = () => {
     elInput.dispatchEvent(new Event("input"));
 }
 
+window.kx__fixArgon2Input = () => {
+    const elInput = document.querySelector('#form-util-argon2-generate .input');
+    elInput.value = `openpgp4fpr:${elInput.value.toLowerCase()}`;
+    elInput.dispatchEvent(new Event("input"));
+}
+
 const runBcryptGenerationUtility = () => {
     elUtilBcryptGeneration.onsubmit = function (evt) {
         evt.preventDefault();
     }
 
     const elInput = elUtilBcryptGeneration.querySelector(".input"),
-        elOutput = elUtilBcryptGeneration.querySelector(".output");
+        elOutput = elUtilBcryptGeneration.querySelector(".output"),
+        elFeedback = elUtilBcryptGeneration.querySelector(".feedback");
 
     elInput.addEventListener("input", async function(evt) {
         elOutput.innerText = await utils.generateBcryptHash(elInput.value);
+
+        if (elInput.value == "") {
+            elFeedback.innerHTML = "";
+        } else {
+            let feedbackContent = "";
+            if (!(/openpgp4fpr:[0-9a-zA-Z]+/.test(elInput.value))) {
+                feedbackContent += "❗ Valid proofs must begin with <strong>openpgp4fpr:</strong>. <button class='inline' onclick='window.kx__fixBcryptInput();'>Fix now</button><br>";
+            }
+            if (!(elInput.value === elInput.value.toLowerCase())) {
+                feedbackContent += "❗ Valid proofs must be lowercase. <button class='inline' onclick='window.kx__fixBcryptInput();'>Fix now</button><br>";
+            }
+            elFeedback.innerHTML = feedbackContent;
+        }
     });
 
     elInput.dispatchEvent(new Event("input"));
@@ -417,4 +451,10 @@ const runBcryptVerificationUtility = () => {
     elHash.addEventListener("input", onInput);
 
     elInput.dispatchEvent(new Event("input"));
-}
\ No newline at end of file
+}
+
+window.kx__fixBcryptInput = () => {
+    const elInput = document.querySelector('#form-util-bcrypt-generate .input');
+    elInput.value = `openpgp4fpr:${elInput.value.toLowerCase()}`;
+    elInput.dispatchEvent(new Event("input"));
+}
diff --git a/views/util/argon2.pug b/views/util/argon2.pug
index e799ce4..97b9177 100644
--- a/views/util/argon2.pug
+++ b/views/util/argon2.pug
@@ -17,6 +17,7 @@ block content
       h3 Hash
       pre
         code.output.full-width.select-all Waiting for input…
+      p.feedback
 
     h2 Verify Argon2 hash
     form#form-util-argon2-verify(method='post')
diff --git a/views/util/bcrypt.pug b/views/util/bcrypt.pug
index 050038a..2895c87 100644
--- a/views/util/bcrypt.pug
+++ b/views/util/bcrypt.pug
@@ -17,6 +17,7 @@ block content
       h3 Hash
       pre
         code.output.full-width.select-all Waiting for input…
+      p.feedback
 
     h2 Verify bcrypt hash
     form#form-util-bcrypt-verify(method='post')