@ibgib/web-gib 0.0.61 → 0.0.63

package/src/ui/component/identity/keystone-details/keystone-details.html

@@ -78,6 +78,41 @@
             </div>
         </div>
 
+        <!-- Passkeys & Hardware Authenticators Card -->
+        <div id="passkeys-card" class="card hidden">
+            <h3>Passkeys & Hardware Authenticators</h3>
+            <p class="description">Secure Touch ID, Windows Hello, and YubiKey credentials bound to this identity.</p>
+            <div id="passkeys-container" class="delegates-container">
+                <table class="delegates-table">
+                    <thead>
+                        <tr>
+                            <th>Name / Device</th>
+                            <th>Transport</th>
+                            <th>Created</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody id="passkeys-list">
+                        <!-- Dynamic list of passkeys gets injected here -->
+                    </tbody>
+                </table>
+            </div>
+            <div class="form-group" style="margin-top: 1rem; max-width: 360px;">
+                <label for="select-passkey-attachment" style="font-size: 0.85rem; color: var(--clr-text-secondary, #b3b3b3);">Authenticator Device Target</label>
+                <select id="select-passkey-attachment" class="form-control" style="width: 100%; padding: 0.4rem 0.6rem; margin-top: 0.25rem; border-radius: 4px; background: rgba(0,0,0,0.3); color: inherit; border: 1px solid rgba(255,255,255,0.2);">
+                    <option value="">Any (Default / Auto-Detect)</option>
+                    <option value="cross-platform">🔑 Hardware Security Key (USB / NFC)</option>
+                    <option value="platform">💻 Built-in Biometrics (Fingerprint / Touch ID)</option>
+                </select>
+            </div>
+            <div class="action-row" style="margin-top: 0.5rem;">
+                <button id="btn-add-passkey" class="action-btn">
+                    🛡️ Register New Passkey / Security Key
+                </button>
+            </div>
+            <div id="passkey-status-msg" class="status-msg hidden"></div>
+        </div>
+
         <!-- SSO Identity Linking Card -->
         <div id="sso-link-card" class="card hidden">
             <h3>Identity Providers</h3>
@@ -143,6 +178,17 @@
                     <input type="password" id="input-confirm-password" placeholder="••••••••" class="form-input">
                 </div>
             </div>
+
+            <!-- Embedded OTP Verification Section for Email Custodial Identities -->
+            <div id="section-add-password-otp" class="input-group hidden" style="margin-top: 1rem; padding: 1rem; border: 1px dashed #89b4fa; border-radius: 8px; background: rgba(137, 180, 250, 0.05);">
+                <label for="input-add-password-otp" style="font-weight: bold; color: #89b4fa;">✉️ Enter 6-Digit Email Verification Code</label>
+                <p id="desc-add-password-otp" style="font-size: 0.82rem; color: #a6adc8; margin-top: 0.25rem; margin-bottom: 0.75rem;">A 6-digit code was sent to your email to verify ownership before setting your Master Password:</p>
+                <div style="display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
+                    <input type="text" id="input-add-password-otp" maxlength="6" placeholder="123456" class="form-input" style="font-family: monospace; font-size: 1.2rem; letter-spacing: 4px; text-align: center; max-width: 160px;">
+                    <button id="btn-resend-add-password-otp" class="action-btn secondary" type="button" style="white-space: nowrap; width: auto; font-size: 0.85rem; padding: 0.4rem 0.8rem;">Resend Code</button>
+                </div>
+            </div>
+
             <div class="action-row">
                 <button id="btn-change-password" class="action-btn">Update Password</button>
             </div>