hd-wallet-ui 1.2.5 → 1.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hd-wallet-ui",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "HD Wallet modal UI — login, keys, identity, trust map, and security bond. Attach to any button in your app.",
   "type": "module",
   "main": "src/app.js",
@@ -35,7 +35,7 @@
     "buffer": "^6.0.3",
     "flatbuffers": "^25.9.23",
     "flatc-wasm": "^25.12.19-wasm.43",
-    "hd-wallet-wasm": "^1.2.5",
+    "hd-wallet-wasm": "^1.2.6",
     "qrcode": "^1.5.3",
     "spacedatastandards.org": "^23.3.3-0.3.4",
     "vcard-cryptoperson": "^1.1.11"

package/src/app.js

@@ -3643,6 +3643,19 @@ function setupLoginHandlers() {
     updatePasswordStrength(e.target.value);
   });
 
+  // Password show/hide toggle
+  $('toggle-password-vis')?.addEventListener('click', () => {
+    const pw = $('wallet-password');
+    const btn = $('toggle-password-vis');
+    if (!pw || !btn) return;
+    const showing = pw.type === 'text';
+    pw.type = showing ? 'password' : 'text';
+    btn.querySelector('.eye-open').style.display = showing ? '' : 'none';
+    btn.querySelector('.eye-closed').style.display = showing ? 'none' : '';
+    btn.title = showing ? 'Show password' : 'Hide password';
+    pw.focus();
+  });
+
   $('wallet-username')?.addEventListener('input', () => {
     const pw = $('wallet-password');
     if (pw) updatePasswordStrength(pw.value);

package/src/template.js

@@ -538,7 +538,7 @@ export function getModalHTML() {
         <form id="password-method" class="method-content active" onsubmit="return false;">
           <div class="glass-input-group"><input type="text" id="wallet-username" class="glass-input" placeholder="Username" autocomplete="username"></div>
           <div class="glass-input-group">
-            <input type="password" id="wallet-password" class="glass-input" placeholder="Password (24+ chars)" autocomplete="new-password">
+            <div class="password-input-wrap"><input type="password" id="wallet-password" class="glass-input" placeholder="Password (24+ chars)" autocomplete="new-password"><button type="button" id="toggle-password-vis" class="password-toggle" title="Show password"><svg class="eye-open" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg><svg class="eye-closed" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display:none"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg></button></div>
             <div class="entropy-bar"><div class="entropy-fill" id="strength-fill"></div><div class="entropy-threshold"></div></div>
             <span class="entropy-label"><span id="entropy-bits">0</span> bits entropy</span>
           </div>

package/styles/main.css

@@ -450,6 +450,32 @@ body:has(.modal.active) .nav-bar {
   background: var(--white-10);
 }
 
+.password-input-wrap {
+  position: relative;
+}
+.password-input-wrap .glass-input {
+  padding-right: 48px;
+}
+.password-toggle {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: var(--white-40);
+  cursor: pointer;
+  padding: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  transition: color 0.15s;
+}
+.password-toggle:hover {
+  color: var(--white-80);
+}
+
 .glass-textarea {
   resize: vertical;
   min-height: 80px;