frontend: Make advanced options details/summary

This commit is contained in:
Simon Bruder 2022-07-16 17:57:58 +02:00
parent 1380511626
commit 3212cdeb50
Signed by: simon
GPG key ID: 8D3C82F9F309F8EC
3 changed files with 3 additions and 20 deletions

8
app.js
View file

@ -42,14 +42,6 @@ function getHasher(hashType) {
(async () => { (async () => {
await init() await init()
document.getElementById("advanced-options").addEventListener("change", e => {
if (e.target.checked) {
document.body.classList.add("advanced")
} else {
document.body.classList.remove("advanced")
}
})
document.getElementById("generate").addEventListener("click", e => { document.getElementById("generate").addEventListener("click", e => {
e.target.disabled = true e.target.disabled = true
const buttonText = e.target.innerText const buttonText = e.target.innerText

View file

@ -18,14 +18,13 @@
<input name="hash-type" type="radio" value="bcrypt" checked>bcrypt</input> <input name="hash-type" type="radio" value="bcrypt" checked>bcrypt</input>
<input name="hash-type" type="radio" value="sha512crypt">SHA512-crypt</input><br> <input name="hash-type" type="radio" value="sha512crypt">SHA512-crypt</input><br>
<input id="advanced-options" name="advanced" type="checkbox">Advanced options</input><br> <details>
<summary>Advanced options</summary>
<div class="advanced">
<label for="bcrypt-cost">bcrpyt cost factor</label> <label for="bcrypt-cost">bcrpyt cost factor</label>
<input name="bcrypt-cost" type="number" value="12" min="4" max="31"></input><br> <input name="bcrypt-cost" type="number" value="12" min="4" max="31"></input><br>
<label for="sha512crypt-rounds">SHA512-crypt rounds</label> <label for="sha512crypt-rounds">SHA512-crypt rounds</label>
<input name="sha512crypt-rounds" type="number" value="100000" min="1000" max="999999999"></input><br> <input name="sha512crypt-rounds" type="number" value="100000" min="1000" max="999999999"></input><br>
</div> </details>
<button type="button" id="generate">Generate</button> <button type="button" id="generate">Generate</button>
</form> </form>

View file

@ -18,11 +18,3 @@
font-family: monospace; font-family: monospace;
line-break: anywhere; line-break: anywhere;
} }
body .advanced {
display: none;
}
body.advanced .advanced {
display: initial;
}