mirror of
https://codeberg.org/keyoxide/keyoxide-web.git
synced 2024-12-22 23:09:29 -07:00
Add feedback to hash utilities
This commit is contained in:
parent
04f4a65a09
commit
c869d38d0b
4 changed files with 50 additions and 3 deletions
|
@ -501,6 +501,11 @@ a.button.button--liberapay {
|
||||||
a.button.button--liberapay:hover {
|
a.button.button--liberapay:hover {
|
||||||
background-color: #fff463;
|
background-color: #fff463;
|
||||||
}
|
}
|
||||||
|
button.inline {
|
||||||
|
min-height: auto;
|
||||||
|
margin: 0;
|
||||||
|
padding: 2px 8px;
|
||||||
|
}
|
||||||
|
|
||||||
/* DIALOGS */
|
/* DIALOGS */
|
||||||
dialog {
|
dialog {
|
||||||
|
|
|
@ -345,10 +345,24 @@ const runArgon2GenerationUtility = () => {
|
||||||
}
|
}
|
||||||
|
|
||||||
const elInput = elUtilArgon2Generation.querySelector(".input"),
|
const elInput = elUtilArgon2Generation.querySelector(".input"),
|
||||||
elOutput = elUtilArgon2Generation.querySelector(".output");
|
elOutput = elUtilArgon2Generation.querySelector(".output"),
|
||||||
|
elFeedback = elUtilArgon2Generation.querySelector(".feedback");
|
||||||
|
|
||||||
elInput.addEventListener("input", async function(evt) {
|
elInput.addEventListener("input", async function(evt) {
|
||||||
elOutput.innerText = await utils.generateArgon2Hash(elInput.value);
|
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"));
|
elInput.dispatchEvent(new Event("input"));
|
||||||
|
@ -379,16 +393,36 @@ const runArgon2VerificationUtility = () => {
|
||||||
elInput.dispatchEvent(new Event("input"));
|
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 = () => {
|
const runBcryptGenerationUtility = () => {
|
||||||
elUtilBcryptGeneration.onsubmit = function (evt) {
|
elUtilBcryptGeneration.onsubmit = function (evt) {
|
||||||
evt.preventDefault();
|
evt.preventDefault();
|
||||||
}
|
}
|
||||||
|
|
||||||
const elInput = elUtilBcryptGeneration.querySelector(".input"),
|
const elInput = elUtilBcryptGeneration.querySelector(".input"),
|
||||||
elOutput = elUtilBcryptGeneration.querySelector(".output");
|
elOutput = elUtilBcryptGeneration.querySelector(".output"),
|
||||||
|
elFeedback = elUtilBcryptGeneration.querySelector(".feedback");
|
||||||
|
|
||||||
elInput.addEventListener("input", async function(evt) {
|
elInput.addEventListener("input", async function(evt) {
|
||||||
elOutput.innerText = await utils.generateBcryptHash(elInput.value);
|
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"));
|
elInput.dispatchEvent(new Event("input"));
|
||||||
|
@ -418,3 +452,9 @@ const runBcryptVerificationUtility = () => {
|
||||||
|
|
||||||
elInput.dispatchEvent(new Event("input"));
|
elInput.dispatchEvent(new Event("input"));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
window.kx__fixBcryptInput = () => {
|
||||||
|
const elInput = document.querySelector('#form-util-bcrypt-generate .input');
|
||||||
|
elInput.value = `openpgp4fpr:${elInput.value.toLowerCase()}`;
|
||||||
|
elInput.dispatchEvent(new Event("input"));
|
||||||
|
}
|
||||||
|
|
|
@ -17,6 +17,7 @@ block content
|
||||||
h3 Hash
|
h3 Hash
|
||||||
pre
|
pre
|
||||||
code.output.full-width.select-all Waiting for input…
|
code.output.full-width.select-all Waiting for input…
|
||||||
|
p.feedback
|
||||||
|
|
||||||
h2 Verify Argon2 hash
|
h2 Verify Argon2 hash
|
||||||
form#form-util-argon2-verify(method='post')
|
form#form-util-argon2-verify(method='post')
|
||||||
|
|
|
@ -17,6 +17,7 @@ block content
|
||||||
h3 Hash
|
h3 Hash
|
||||||
pre
|
pre
|
||||||
code.output.full-width.select-all Waiting for input…
|
code.output.full-width.select-all Waiting for input…
|
||||||
|
p.feedback
|
||||||
|
|
||||||
h2 Verify bcrypt hash
|
h2 Verify bcrypt hash
|
||||||
form#form-util-bcrypt-verify(method='post')
|
form#form-util-bcrypt-verify(method='post')
|
||||||
|
|
Loading…
Reference in a new issue