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 openpgp4fpr:.
"; + } + if (!(elInput.value === elInput.value.toLowerCase())) { + feedbackContent += "❗ Valid proofs must be lowercase.
"; + } + 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 openpgp4fpr:.
"; + } + if (!(elInput.value === elInput.value.toLowerCase())) { + feedbackContent += "❗ Valid proofs must be lowercase.
"; + } + 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')