Code updated to use crypt

static/css/style.css

@@ -0,0 +1,65 @@
+body {
+    font-family: system-ui, Segoe UI, Roboto, Arial;
+    max-width: 800px;
+    margin: 40px auto;
+    padding: 0 16px;
+    background: #494949;
+    color: #ececec;
+}
+
+.container {
+    padding: 12px
+}
+
+label {
+    display: block;
+    margin-top: 12px
+}
+
+input[type=text],
+input[type=password],
+textarea,
+select {
+    width: 100%;
+    padding: 8px;
+    margin-top: 6px;
+    border-radius: 6px;
+    border: 1px solid #ececec
+}
+
+button {
+    margin-top: 12px;
+    padding: 8px 12px;
+    border-radius: 8px;
+    border: 0;
+    background: #1f7be0;
+    color: white
+}
+
+button:hover {
+   cursor: pointer;
+}
+
+.row {
+    display: flex;
+    gap: 8px
+}
+
+.row>* {
+    flex: 1
+}
+
+.small {
+    width: 140px
+}
+
+.note {
+    font-size: 0.9em;
+    color: #ffffff
+}
+
+.controls {
+    display: flex;
+    gap: 8px;
+    margin-top: 12px
+}

static/js/main.js

@@ -0,0 +1,56 @@
+const gensaltBtn = document.getElementById('gensaltBtn');
+const algorithm = document.getElementById('algorithm');
+const password = document.getElementById('password');
+const salt = document.getElementById('salt');
+const hashBtn = document.getElementById('hashBtn');
+const result = document.getElementById('result');
+const clearBtn = document.getElementById('clearBtn');
+
+const MIN_PASS_LEN = 16;
+const MIN_SALT_LEN = 8;
+const MAX_SALT_LEN = 16;
+
+gensaltBtn.addEventListener('click', async () => {
+    const len = MAX_SALT_LEN; // can be adjusted or user-defined
+    const res = await fetch('/gensalt?length=' + len);
+    if (!res.ok) { alert('Could not generate salt'); return; }
+    const data = await res.json();
+    salt.value = data.salt;
+});
+
+hashBtn.addEventListener('click', async () => {
+    const pass = password.value || '';
+    const s = salt.value || '';
+    const alg = algorithm.value;
+
+    if (pass.length < MIN_PASS_LEN) { 
+        alert('Password must be at least ' + MIN_PASS_LEN + ' characters');
+        return; 
+    }
+
+    if (s.length < MIN_SALT_LEN || s.length > MAX_SALT_LEN) { 
+        alert('Salt must be between ' + MIN_SALT_LEN + ' and ' + MAX_SALT_LEN + ' characters');
+        return; 
+    }
+
+    const payload = { password: pass, salt: s, algorithm: alg };
+    const res = await fetch('/hash', {
+        method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload)
+    });
+
+    if (!res.ok) {
+        const txt = await res.text();
+        alert('Error: ' + txt);
+        return;
+    }
+
+    const data = await res.json();
+    result.value = data.hash;
+});
+
+clearBtn.addEventListener('click', () => {
+    password.value = '';
+    salt.value = '';
+    result.value = '';
+});
+