@ibgib/web-gib 0.0.61 → 0.0.62

package/src/ui/component/identity/remove-device/remove-device.mts

@@ -220,6 +220,7 @@ export class RemoveDeviceComponentInstance
                 parentKeystone: this.activePrimaryKeystone,
                 delegateTjpAddr,
                 masterSecret,
+                signingPoolId: 'manage',
                 metaspace,
                 space
             });

package/src/ui/ui-helpers.mts

@@ -49,6 +49,9 @@ export interface ShowFullscreenDialogOpts {
     isPassword?: boolean;
     isBusy?: boolean;
     animationEmoji?: string;
+    passkeys?: Record<string, any>;
+    passkeyButtonTitle?: string;
+    onPasskeyAuth?: (passkeyEntry?: any) => Promise<string | undefined>;
 }
 
 export async function showFullscreenDialog(opts: ShowFullscreenDialogOpts & { isBusy: true }): Promise<FullscreenDialogController>;
@@ -64,6 +67,9 @@ export async function showFullscreenDialog({
     isPassword,
     isBusy,
     animationEmoji,
+    passkeys,
+    passkeyButtonTitle,
+    onPasskeyAuth,
 }: ShowFullscreenDialogOpts): Promise<string | undefined | FullscreenDialogController> {
     const lc = `[${showFullscreenDialog.name}]`;
     try {
@@ -112,6 +118,75 @@ export async function showFullscreenDialog({
             messageElement.appendChild(animDiv);
         }
 
+        // Clean up any previous passkey container
+        let prevPasskeyContainer = document.getElementById('fullscreen-dialog-passkey-container');
+        if (prevPasskeyContainer) { prevPasskeyContainer.remove(); }
+
+        let passkeyContainer: HTMLDivElement | null = null;
+        let btnPasskey: HTMLButtonElement | null = null;
+        let selectPasskey: HTMLSelectElement | null = null;
+        const validPasskeys = Object.values(passkeys || {}).filter(p => p !== null && p !== undefined);
+
+        if (validPasskeys.length > 0 && onPasskeyAuth && !isBusy) {
+            passkeyContainer = document.createElement('div');
+            passkeyContainer.id = 'fullscreen-dialog-passkey-container';
+            passkeyContainer.style.margin = '1rem 0';
+            passkeyContainer.style.textAlign = 'center';
+
+            btnPasskey = document.createElement('button');
+            btnPasskey.id = 'fullscreen-dialog-btn-passkey';
+            btnPasskey.type = 'button';
+            btnPasskey.className = 'action-btn';
+            btnPasskey.style.width = '100%';
+            btnPasskey.style.padding = '0.75rem 1rem';
+            btnPasskey.style.background = 'linear-gradient(135deg, #1b5e20, #2e7d32)';
+            btnPasskey.style.color = '#ffffff';
+            btnPasskey.style.fontWeight = 'bold';
+            btnPasskey.style.borderRadius = '8px';
+            btnPasskey.style.border = '1px solid rgba(255,255,255,0.2)';
+            btnPasskey.style.cursor = 'pointer';
+            btnPasskey.style.fontSize = '0.95rem';
+            btnPasskey.style.marginBottom = '0.75rem';
+            btnPasskey.textContent = passkeyButtonTitle || '🛡️ Touch ID / Security Key';
+
+            if (validPasskeys.length > 1) {
+                selectPasskey = document.createElement('select');
+                selectPasskey.style.width = '100%';
+                selectPasskey.style.padding = '0.4rem';
+                selectPasskey.style.marginBottom = '0.5rem';
+                selectPasskey.style.borderRadius = '4px';
+                selectPasskey.style.background = 'rgba(0,0,0,0.3)';
+                selectPasskey.style.color = 'inherit';
+                selectPasskey.style.border = '1px solid rgba(255,255,255,0.2)';
+                validPasskeys.forEach((p: any, idx: number) => {
+                    const opt = document.createElement('option');
+                    opt.value = idx.toString();
+                    opt.textContent = `${p.name || 'Key'} (${p.credentialId?.substring(0, 8)}...)`;
+                    selectPasskey!.appendChild(opt);
+                });
+                passkeyContainer.appendChild(selectPasskey);
+            }
+
+            passkeyContainer.appendChild(btnPasskey);
+
+            const divider = document.createElement('div');
+            divider.style.display = 'flex';
+            divider.style.alignItems = 'center';
+            divider.style.justifyContent = 'center';
+            divider.style.gap = '0.5rem';
+            divider.style.fontSize = '0.8rem';
+            divider.style.color = 'var(--clr-text-secondary, #b3b3b3)';
+            divider.style.margin = '0.5rem 0';
+            divider.innerHTML = `
+                <span style="flex: 1; height: 1px; background: rgba(255,255,255,0.15);"></span>
+                <span>OR enter Password below</span>
+                <span style="flex: 1; height: 1px; background: rgba(255,255,255,0.15);"></span>
+            `;
+            passkeyContainer.appendChild(divider);
+
+            promptInput.parentElement?.insertBefore(passkeyContainer, promptInput);
+        }
+
         // reset the input classList and button displays
         promptInput.classList.remove('collapsed');
         cancelButton.classList.remove('collapsed');
@@ -241,6 +316,12 @@ export async function showFullscreenDialog({
                 if (prompt || showInput) {
                     promptInput.removeEventListener('keypress', onKeypress);
                 }
+                if (btnPasskey) {
+                    btnPasskey.removeEventListener('click', onPasskeyClick);
+                }
+                if (passkeyContainer) {
+                    passkeyContainer.remove();
+                }
                 okButton.removeEventListener('click', onOK);
                 cancelButton.removeEventListener('click', onCancel);
                 dialog.removeEventListener('close', onClose); // Remove dialog-level listener too
@@ -256,6 +337,38 @@ export async function showFullscreenDialog({
                 resolve(result);
             };
 
+            /** user clicks Passkey button */
+            const onPasskeyClick = async () => {
+                try {
+                    if (!onPasskeyAuth) return;
+                    btnPasskey!.disabled = true;
+                    btnPasskey!.textContent = 'Waiting for biometrics / security key...';
+                    let selectedPasskey = validPasskeys[0];
+                    if (selectPasskey) {
+                        const selectedIdx = parseInt(selectPasskey.value, 10);
+                        selectedPasskey = validPasskeys[selectedIdx] || validPasskeys[0];
+                    }
+                    const passkeySecret = await onPasskeyAuth(selectedPasskey);
+                    if (passkeySecret) {
+                        removeEventListeners();
+                        if (promptInput) { promptInput.value = ''; }
+                        dialog.close(passkeySecret);
+                        resolve(passkeySecret);
+                    } else {
+                        btnPasskey!.disabled = false;
+                        btnPasskey!.textContent = passkeyButtonTitle || '🛡️ Touch ID / Security Key';
+                    }
+                } catch (err) {
+                    console.warn('Passkey assertion in dialog failed/cancelled:', err);
+                    btnPasskey!.disabled = false;
+                    btnPasskey!.textContent = passkeyButtonTitle || '🛡️ Touch ID / Security Key';
+                }
+            };
+
+            if (btnPasskey) {
+                btnPasskey.addEventListener('click', onPasskeyClick);
+            }
+
             /** user actively clicks Cancel */
             const onCancel = () => {
                 removeEventListeners();
@@ -264,11 +377,11 @@ export async function showFullscreenDialog({
                 resolve(undefined);
             };
             /**
-             * Handle dialog.close() without button click (e.g., Esc key)
-             *
-             * NOTE: this does not trigger when dialog.close() is executed. This
-             * is only firing when esc is pressed.
-             */
+              * Handle dialog.close() without button click (e.g., Esc key)
+              *
+              * NOTE: this does not trigger when dialog.close() is executed. This
+              * is only firing when esc is pressed.
+              */
             const onClose = () => {
                 removeEventListeners();
                 if (promptInput) { promptInput.value = ''; } // Clear input for next time