clay-server 2.36.2-beta.3 → 2.36.2-beta.4

package/lib/public/modules/app-misc.js

@@ -289,79 +289,84 @@ export function hideConfirm() {
 }
 
 export function showForceChangePinOverlay() {
+  // Inject the same .pin-digit / .pin-wrap CSS the login page uses, so this
+  // overlay behaves identically: visible focus ring, filled state, etc.
+  // The login page (lib/pages.js) loads this CSS inline; the main app
+  // doesn't, so we add it once here.
+  if (!document.getElementById("fcp-style")) {
+    var st = document.createElement("style");
+    st.id = "fcp-style";
+    st.textContent =
+      "#force-change-pin-overlay .pin-wrap{display:flex;gap:8px;justify-content:center;margin-bottom:16px}" +
+      "#force-change-pin-overlay .pin-digit{width:44px;height:56px;background:var(--input-bg);border:1.5px solid var(--border);border-radius:8px;color:var(--text);font-family:'Courier New',Courier,'Roboto Mono',monospace;font-size:28px;font-weight:700;text-align:center;line-height:56px;outline:none;caret-color:transparent;transition:border-color 0.15s,box-shadow 0.15s}" +
+      "#force-change-pin-overlay .pin-digit:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-20,rgba(124,58,237,0.25))}" +
+      "#force-change-pin-overlay .pin-digit.filled{color:var(--text)}";
+    document.head.appendChild(st);
+  }
+
   var ov = document.createElement("div");
   ov.id = "force-change-pin-overlay";
   ov.style.cssText = "position:fixed;inset:0;background:var(--bg,#0e0e10);z-index:99999;display:flex;align-items:center;justify-content:center;flex-direction:column";
   ov.innerHTML = '<div style="width:100%;max-width:380px;padding:24px;text-align:center">' +
     '<h2 style="margin:0 0 8px;color:var(--text,#fff);font-size:22px">Set your new PIN</h2>' +
     '<p style="margin:0 0 24px;color:var(--text-secondary,#aaa);font-size:14px">Your temporary PIN has expired. Please set a new 6-digit PIN to continue.</p>' +
-    '<div style="display:flex;gap:8px;justify-content:center;margin-bottom:16px" id="fcp-boxes">' +
-    '<input class="fcp-digit" type="password" maxlength="1" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" style="width:44px;height:52px;text-align:center;font-size:22px;font-weight:600;border:2px solid var(--border,#333);border-radius:10px;background:var(--bg-alt,#f5f5f5);color:var(--text,#fff);outline:none;caret-color:var(--accent,#7c3aed)">' +
-    '<input class="fcp-digit" type="password" maxlength="1" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" style="width:44px;height:52px;text-align:center;font-size:22px;font-weight:600;border:2px solid var(--border,#333);border-radius:10px;background:var(--bg-alt,#f5f5f5);color:var(--text,#fff);outline:none;caret-color:var(--accent,#7c3aed)">' +
-    '<input class="fcp-digit" type="password" maxlength="1" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" style="width:44px;height:52px;text-align:center;font-size:22px;font-weight:600;border:2px solid var(--border,#333);border-radius:10px;background:var(--bg-alt,#f5f5f5);color:var(--text,#fff);outline:none;caret-color:var(--accent,#7c3aed)">' +
-    '<input class="fcp-digit" type="password" maxlength="1" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" style="width:44px;height:52px;text-align:center;font-size:22px;font-weight:600;border:2px solid var(--border,#333);border-radius:10px;background:var(--bg-alt,#f5f5f5);color:var(--text,#fff);outline:none;caret-color:var(--accent,#7c3aed)">' +
-    '<input class="fcp-digit" type="password" maxlength="1" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" style="width:44px;height:52px;text-align:center;font-size:22px;font-weight:600;border:2px solid var(--border,#333);border-radius:10px;background:var(--bg-alt,#f5f5f5);color:var(--text,#fff);outline:none;caret-color:var(--accent,#7c3aed)">' +
-    '<input class="fcp-digit" type="password" maxlength="1" inputmode="numeric" pattern="[0-9]*" autocomplete="one-time-code" style="width:44px;height:52px;text-align:center;font-size:22px;font-weight:600;border:2px solid var(--border,#333);border-radius:10px;background:var(--bg-alt,#f5f5f5);color:var(--text,#fff);outline:none;caret-color:var(--accent,#7c3aed)">' +
+    '<div class="pin-wrap" id="fcp-boxes">' +
+    '<input class="pin-digit" type="tel" maxlength="1" inputmode="numeric" autocomplete="off">' +
+    '<input class="pin-digit" type="tel" maxlength="1" inputmode="numeric" autocomplete="off">' +
+    '<input class="pin-digit" type="tel" maxlength="1" inputmode="numeric" autocomplete="off">' +
+    '<input class="pin-digit" type="tel" maxlength="1" inputmode="numeric" autocomplete="off">' +
+    '<input class="pin-digit" type="tel" maxlength="1" inputmode="numeric" autocomplete="off">' +
+    '<input class="pin-digit" type="tel" maxlength="1" inputmode="numeric" autocomplete="off">' +
     '</div>' +
-    '<button id="fcp-save" disabled style="width:100%;padding:12px;border:none;border-radius:10px;background:var(--accent,#7c3aed);color:#fff;font-size:15px;font-weight:600;cursor:pointer;opacity:0.5">Save PIN</button>' +
-    '<div id="fcp-err" style="margin-top:12px;color:#ef4444;font-size:13px"></div>' +
+    '<button id="fcp-save" disabled style="width:100%;padding:12px;border:none;border-radius:10px;background:var(--accent);color:#fff;font-size:15px;font-weight:600;cursor:pointer;opacity:0.5;transition:opacity 0.15s">Save PIN</button>' +
+    '<div id="fcp-err" style="margin-top:12px;color:var(--error,#ef4444);font-size:13px;min-height:1.3em"></div>' +
     '</div>';
   document.body.appendChild(ov);
 
-  var boxes = ov.querySelectorAll(".fcp-digit");
+  var boxes = ov.querySelectorAll(".pin-digit");
   var saveBtn = ov.querySelector("#fcp-save");
   var errEl = ov.querySelector("#fcp-err");
-
-  // Inject focus styling. Without this the inputs use outline:none with no
-  // replacement, so users cannot tell which box is focused. Caret is also
-  // forced via caret-color on the input style.
-  if (!document.getElementById("fcp-style")) {
-    var st = document.createElement("style");
-    st.id = "fcp-style";
-    st.textContent =
-      ".fcp-digit:focus{border-color:var(--accent,#7c3aed)!important;box-shadow:0 0 0 3px rgba(124,58,237,0.25)}" +
-      ".fcp-digit.filled{border-color:var(--accent,#7c3aed)}";
-    document.head.appendChild(st);
+  // Mirror the login screen's pattern (lib/pages.js pinBoxScript): keep an
+  // explicit digits[] array as the source of truth, render bullets visually,
+  // enable the button when length === 6.
+  var digits = ["", "", "", "", "", ""];
+
+  function setDigit(idx, v) {
+    digits[idx] = v;
+    boxes[idx].value = v ? "\u2022" : "";
+    boxes[idx].classList.toggle("filled", v.length > 0);
   }
 
   function getPin() {
-    var pin = "";
-    for (var i = 0; i < boxes.length; i++) pin += boxes[i].value;
-    return pin;
+    return digits.join("");
   }
 
   function updateBtn() {
-    var pin = getPin();
-    var ready = pin.length === 6 && /^[0-9]{6}$/.test(pin);
+    var ready = getPin().length === 6;
     saveBtn.disabled = !ready;
     saveBtn.style.opacity = ready ? "1" : "0.5";
   }
 
-  function refreshFilled(idx) {
-    boxes[idx].classList.toggle("filled", boxes[idx].value.length > 0);
-  }
-
   for (var i = 0; i < boxes.length; i++) {
     (function (idx) {
       boxes[idx].addEventListener("input", function () {
-        // Coerce to a single digit. If user types non-numeric, drop it.
         var raw = this.value.replace(/[^0-9]/g, "");
-        this.value = raw.length > 0 ? raw.charAt(raw.length - 1) : "";
-        refreshFilled(idx);
-        if (this.value && idx < 5) boxes[idx + 1].focus();
+        if (!raw) { setDigit(idx, ""); updateBtn(); return; }
+        var v = raw.charAt(raw.length - 1);
+        setDigit(idx, v);
+        if (v && idx < 5) boxes[idx + 1].focus();
         updateBtn();
       });
       boxes[idx].addEventListener("keydown", function (e) {
         if (e.key === "Backspace") {
-          if (!boxes[idx].value && idx > 0) {
-            boxes[idx - 1].value = "";
-            refreshFilled(idx - 1);
+          if (!digits[idx] && idx > 0) {
+            setDigit(idx - 1, "");
             boxes[idx - 1].focus();
           } else {
-            boxes[idx].value = "";
-            refreshFilled(idx);
+            setDigit(idx, "");
           }
           updateBtn();
+          return;
         }
         if (e.key === "ArrowLeft" && idx > 0) boxes[idx - 1].focus();
         if (e.key === "ArrowRight" && idx < 5) boxes[idx + 1].focus();
@@ -372,10 +377,9 @@ export function showForceChangePinOverlay() {
       boxes[idx].addEventListener("keypress", function (e) { e.stopPropagation(); });
       boxes[idx].addEventListener("paste", function (e) {
         e.preventDefault();
-        var text = (e.clipboardData || window.clipboardData).getData("text").replace(/[^0-9]/g, "").substring(0, 6);
+        var text = (e.clipboardData || window.clipboardData).getData("text").replace(/[^0-9]/g, "").slice(0, 6);
         for (var j = 0; j < text.length && (idx + j) < 6; j++) {
-          boxes[idx + j].value = text.charAt(j);
-          refreshFilled(idx + j);
+          setDigit(idx + j, text.charAt(j));
         }
         if (text.length > 0) {
           var focusIdx = Math.min(idx + text.length, 5);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-server",
-  "version": "2.36.2-beta.3",
+  "version": "2.36.2-beta.4",
   "description": "Self-hosted team workspace for Claude Code and Codex. Multi-user, browser-based, with persistent AI mates.",
   "bin": {
     "clay-server": "./bin/cli.js",