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

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

@@ -289,41 +289,56 @@ 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="tel" maxlength="1" inputmode="numeric" autocomplete="off" 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">' +
-    '<input class="fcp-digit" type="tel" maxlength="1" inputmode="numeric" autocomplete="off" 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">' +
-    '<input class="fcp-digit" type="tel" maxlength="1" inputmode="numeric" autocomplete="off" 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">' +
-    '<input class="fcp-digit" type="tel" maxlength="1" inputmode="numeric" autocomplete="off" 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">' +
-    '<input class="fcp-digit" type="tel" maxlength="1" inputmode="numeric" autocomplete="off" 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">' +
-    '<input class="fcp-digit" type="tel" maxlength="1" inputmode="numeric" autocomplete="off" 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">' +
+    '<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");
-  var pinValues = ["", "", "", "", "", ""];
-  var _settingDigit = false;
+  // 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) {
-    pinValues[idx] = v;
-    _settingDigit = true;
+    digits[idx] = v;
     boxes[idx].value = v ? "\u2022" : "";
-    _settingDigit = false;
     boxes[idx].classList.toggle("filled", v.length > 0);
   }
 
   function getPin() {
-    return pinValues.join("");
+    return digits.join("");
   }
 
   function updateBtn() {
@@ -335,7 +350,6 @@ export function showForceChangePinOverlay() {
   for (var i = 0; i < boxes.length; i++) {
     (function (idx) {
       boxes[idx].addEventListener("input", function () {
-        if (_settingDigit) return;
         var raw = this.value.replace(/[^0-9]/g, "");
         if (!raw) { setDigit(idx, ""); updateBtn(); return; }
         var v = raw.charAt(raw.length - 1);
@@ -345,13 +359,14 @@ export function showForceChangePinOverlay() {
       });
       boxes[idx].addEventListener("keydown", function (e) {
         if (e.key === "Backspace") {
-          if (!pinValues[idx] && idx > 0) {
+          if (!digits[idx] && idx > 0) {
             setDigit(idx - 1, "");
             boxes[idx - 1].focus();
           } else {
             setDigit(idx, "");
           }
           updateBtn();
+          return;
         }
         if (e.key === "ArrowLeft" && idx > 0) boxes[idx - 1].focus();
         if (e.key === "ArrowRight" && idx < 5) boxes[idx + 1].focus();
@@ -362,7 +377,7 @@ 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++) {
           setDigit(idx + j, text.charAt(j));
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-server",
-  "version": "2.36.2-beta.2",
+  "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",