Add passphrase keypasses

src/static/admin.html

@@ -302,7 +302,23 @@
           <label for="kp-code">Code <span style="color:var(--text-muted);font-weight:400">(leave empty to auto-generate)</span></label>
           <input id="kp-code" type="text" autocomplete="off" autocorrect="off" autocapitalize="characters"
                  spellcheck="false" placeholder="Auto-generated"
-                 style="font-family:monospace;letter-spacing:.1em;text-transform:uppercase" maxlength="32" />
+                 style="font-family:monospace;letter-spacing:.1em;text-transform:uppercase" maxlength="40" />
+        </div>
+        <!-- Auto-generation options — hidden when a manual code is typed -->
+        <div id="kp-autogen-options" class="field" style="background:var(--surface2);border-radius:8px;padding:.75rem;border:1px solid var(--border);display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end">
+          <div style="display:flex;flex-direction:column;gap:.3rem">
+            <label for="kp-charset" style="font-size:.8rem;font-weight:600;color:var(--text-muted)">Character set</label>
+            <select id="kp-charset" style="width:auto;font-size:.9rem">
+              <option value="alphanumeric">A–Z + 0–9</option>
+              <option value="alpha">A–Z only</option>
+              <option value="numeric">0–9 only</option>
+              <option value="passphrase" selected>Passphrase (4 words)</option>
+            </select>
+          </div>
+          <div id="kp-length-wrap" style="display:flex;flex-direction:column;gap:.3rem">
+            <label for="kp-length" style="font-size:.8rem;font-weight:600;color:var(--text-muted)">Length <span id="kp-length-val" style="font-weight:700;color:var(--text)">12</span></label>
+            <input id="kp-length" type="range" min="6" max="32" value="12" style="width:100%;cursor:pointer" />
+          </div>
         </div>
         <div class="field" id="kp-expires-field">
           <label for="kp-expires">Expiry date &amp; time</label>

src/static/admin.js

@@ -236,6 +236,12 @@ let _allGates = [];
 document.getElementById("btn-new-keypass").addEventListener("click", () => {
   document.getElementById("kp-desc").value = "";
   document.getElementById("kp-code").value = "";
+  // Reset complexity — default to passphrase
+  document.getElementById("kp-charset").value = "passphrase";
+  document.getElementById("kp-length").value = 12;
+  document.getElementById("kp-length-val").textContent = "12";
+  document.getElementById("kp-length-wrap").style.display = "none";
+  document.getElementById("kp-autogen-options").style.display = "";
   // Reset never-expires
   const neverCb = document.getElementById("kp-never-expires");
   neverCb.checked = false;
@@ -263,6 +269,17 @@ document.getElementById("btn-new-keypass").addEventListener("click", () => {
   document.getElementById("keypass-modal").classList.remove("hidden");
 });
 
+// Auto-generation options — hide when a manual code is typed, hide length for passphrase
+document.getElementById("kp-code").addEventListener("input", e => {
+  document.getElementById("kp-autogen-options").style.display = e.target.value.trim() ? "none" : "";
+});
+document.getElementById("kp-charset").addEventListener("change", e => {
+  document.getElementById("kp-length-wrap").style.display = e.target.value === "passphrase" ? "none" : "";
+});
+document.getElementById("kp-length").addEventListener("input", e => {
+  document.getElementById("kp-length-val").textContent = e.target.value;
+});
+
 // Never expires toggle
 document.getElementById("kp-never-expires").addEventListener("change", e => {
   const kpExpInput = document.getElementById("kp-expires");
@@ -345,6 +362,8 @@ document.getElementById("keypass-form").addEventListener("submit", async e => {
   e.preventDefault();
   const desc = document.getElementById("kp-desc").value.trim();
   const code = document.getElementById("kp-code").value.trim() || null;
+  const charset = document.getElementById("kp-charset").value;
+  const length = parseInt(document.getElementById("kp-length").value, 10);
   const neverExpires = document.getElementById("kp-never-expires").checked;
   const expires_at = neverExpires ? null : new Date(document.getElementById("kp-expires").value).toISOString();
   const allGates = document.getElementById("kp-all-gates").checked;
@@ -352,7 +371,7 @@ document.getElementById("keypass-form").addEventListener("submit", async e => {
   const errEl = document.getElementById("kp-error");
   errEl.classList.add("hidden");
   try {
-    await api("POST", "/api/admin/keypasses", { description: desc, expires_at, gate_ids, code });
+    await api("POST", "/api/admin/keypasses", { description: desc, expires_at, gate_ids, code, charset, length });
     document.getElementById("keypass-modal").classList.add("hidden");
     showToast("Keypass created");
     loadKeypasses();

src/static/index.html

@@ -110,7 +110,7 @@
             autocapitalize="characters"
             spellcheck="false"
             placeholder="Enter keypass…"
-            maxlength="20"
+            maxlength="40"
           />
         </div>
         <p id="login-error" class="error-msg hidden"></p>