@ibgib/web-gib 0.0.60 → 0.0.62

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

@@ -9,8 +9,8 @@ import { getIbGibAddr } from "@ibgib/ts-gib/dist/helper.mjs";
 import { KeystoneService_V1 } from "@ibgib/core-gib/dist/keystone/keystone-service-v1.mjs";
 import { KeystoneProfileBuilder } from "@ibgib/core-gib/dist/keystone/policy/keystone-profile-builder.mjs";
 import { KeystoneIbGib_V1 } from "@ibgib/core-gib/dist/keystone/keystone-types.mjs";
-import { KEYSTONE_VERB_SYNC, KEYSTONE_VERB_CONNECT, KEYSTONE_USERNAME_REGEXP } from "@ibgib/core-gib/dist/keystone/keystone-constants.mjs";
-import { deriveDelegateSecret } from "@ibgib/core-gib/dist/keystone/strategy/hash-reveal-v1/hash-reveal-v1.mjs";
+import { KEYSTONE_USERNAME_REGEXP, KEYSTONE_VERB_SYNC, KEYSTONE_VERB_CONNECT } from "@ibgib/core-gib/dist/keystone/keystone-constants.mjs";
+import { deriveDelegateSecret, createSyncDelegateKeystone } from "@ibgib/core-gib/dist/keystone/delegate/delegate-helpers.mjs";
 import { getTimelinesGroupedByTjp, getTjpAddr, toDto } from "@ibgib/core-gib/dist/common/other/ibgib-helper.mjs";
 import { updateSpecialIndex } from "@ibgib/core-gib/dist/timeline/timeline-api.mjs";
 import { validateEmail } from "@ibgib/core-gib/dist/keystone/keystone-helpers.mjs";
@@ -29,7 +29,7 @@ import {
 } from "../../../ui-constants.mjs";
 import { generateDefaultDeviceTag } from "../../../../util/device-helper.mjs";
 import { executeSsoOAuthPopup } from "../../../../identity/sso-popup-helper.mjs";
-import { deriveLocalCustodianDelegateSecret } from "../../../../identity/custodian-delegate-helper.mjs";
+import { getOrCreateDeviceDelegateSecret, setDeviceDelegateSecret } from "../../../../identity/device-delegate-helper.mjs";
 
 export const ADD_DEVICE_COMPONENT_NAME = 'ibgib-add-device';
 
@@ -472,25 +472,6 @@ export class AddDeviceComponentInstance
             animationEmoji: '🔑'
         });
 
-        const delegateSecret = await deriveLocalCustodianDelegateSecret({ primaryTjpAddr });
-        const userAlias = username || (email ? email.split('@')[0] : 'user');
-        const custodianSyncProfileName = process.env.KEYSTONE_PROFILE_CUSTODIAN_SYNC;
-        if (!custodianSyncProfileName || !custodianSyncProfileName.trim()) {
-            throw new Error('KEYSTONE_PROFILE_CUSTODIAN_SYNC environment variable is missing. Expected valid profile name like "sync-profile.dev" or "sync-profile.prod". (E: 4d5e6f7890123456789abcdef4)');
-        }
-
-        const delegateBuilder = KeystoneProfileBuilder.buildKeystone(custodianSyncProfileName.trim() as any)
-            .withUsername(`${userAlias}-sync-${deviceTag}`)
-            .withDescription(`Sync Delegate for ${userAlias} on ${deviceTag}`)
-            .withDetails({
-                client: 'space-gib-web',
-                role: 'sync-delegate',
-                deviceTag,
-                primaryTjpAddr,
-                custodianReqs,
-            });
-
-        const configs = await delegateBuilder.compileConfigs();
         const metaspace = await getGlobalMetaspace_waitIfNeeded();
         const space = await metaspace.getLocalUserSpace({ lock: false });
         if (!space) {
@@ -498,14 +479,23 @@ export class AddDeviceComponentInstance
             return;
         }
 
-        const keystoneService = new KeystoneService_V1();
-        const delegateKeystone = await keystoneService.genesis({
-            masterSecret: delegateSecret,
-            configs,
+        const delegateSecret = await getOrCreateDeviceDelegateSecret({ primaryTjpAddr, deviceTag });
+        const userAlias = username || (email ? email.split('@')[0] : 'user');
+        const custodianSyncProfileName = process.env.KEYSTONE_PROFILE_CUSTODIAN_SYNC;
+        if (!custodianSyncProfileName || !custodianSyncProfileName.trim()) {
+            throw new Error('KEYSTONE_PROFILE_CUSTODIAN_SYNC environment variable is missing. Expected valid profile name like "sync-profile.dev" or "sync-profile.prod". (E: 4d5e6f7890123456789abcdef4)');
+        }
+
+        const delegateKeystone = await createSyncDelegateKeystone({
+            profileName: custodianSyncProfileName.trim() as any,
+            username: userAlias,
+            deviceTag,
+            primaryTjpAddr,
+            delegateSecret,
+            custodianReqs,
+            additionalFrameDetails: { client: 'space-gib-web' },
             metaspace,
             space,
-            frameDetails: delegateBuilder.getFrameDetails(),
-            isPrimary: false
         });
 
         this.setStatus('Registering device delegate with custodian server...', 'info');
@@ -590,34 +580,27 @@ export class AddDeviceComponentInstance
                 animationEmoji: '🔑'
             });
 
+            const metaspace = await getGlobalMetaspace_waitIfNeeded();
+            const space = await metaspace.getLocalUserSpace({});
+            if (!space) { throw new Error('No default space found in metaspace.'); }
+
             const delegateSecret = await deriveDelegateSecret({ masterSecret });
+            await setDeviceDelegateSecret({ primaryTjpAddr, delegateSecret });
+
             const sovereignSyncProfileName = process.env.KEYSTONE_PROFILE_SOVEREIGN_SYNC;
             if (!sovereignSyncProfileName || !sovereignSyncProfileName.trim()) {
                 throw new Error('KEYSTONE_PROFILE_SOVEREIGN_SYNC environment variable is missing. Expected valid profile name like "sync-profile.dev" or "sync-profile.prod". (E: 8f9e0a1b2c3d4e5f67890123456789ab)');
             }
 
-            const delegateBuilder = KeystoneProfileBuilder.buildKeystone(sovereignSyncProfileName.trim() as any)
-                .withUsername(`${primaryUsername}-sync-${deviceTag}`)
-                .withDescription(`Sync Delegate for ${primaryUsername} on ${deviceTag}`)
-                .withDetails({
-                    client: 'space-gib-web',
-                    role: 'sync-delegate',
-                    deviceTag,
-                    primaryTjpAddr,
-                });
-
-            const delegateConfigs = await delegateBuilder.compileConfigs();
-            const metaspace = await getGlobalMetaspace_waitIfNeeded();
-            const space = await metaspace.getLocalUserSpace({});
-            if (!space) { throw new Error('No default space found in metaspace.'); }
-
-            const delegateKeystone = await keystoneService.genesis({
-                masterSecret: delegateSecret,
-                configs: delegateConfigs,
+            const delegateKeystone = await createSyncDelegateKeystone({
+                profileName: sovereignSyncProfileName.trim() as any,
+                username: primaryUsername,
+                deviceTag,
+                primaryTjpAddr,
+                delegateSecret,
+                additionalFrameDetails: { client: 'space-gib-web' },
                 metaspace,
                 space,
-                frameDetails: delegateBuilder.getFrameDetails(),
-                isPrimary: false
             });
 
             this.setStatus('Evolving primary identity to register delegate...', 'info');
@@ -632,6 +615,7 @@ export class AddDeviceComponentInstance
                 parentKeystone: primaryKeystone,
                 delegateKeystone,
                 masterSecret,
+                signingPoolId: 'manage',
                 allowedVerbs: [KEYSTONE_VERB_SYNC, KEYSTONE_VERB_CONNECT],
                 metaspace,
                 space,
@@ -765,6 +749,11 @@ export class AddDeviceComponentInstance
 
         await delay(humanEyeDelay);
 
+        // 4.5 Sanitize password input fields from DOM
+        if (this.elements?.inputPassword) {
+            this.elements.inputPassword.value = '';
+        }
+
         // 5. Navigate to identity manager
         window.dispatchEvent(new CustomEvent(EVENT_IBGIB_UI_MESSAGE, {
             detail: { action: 'show-identity-manager', addr: primaryTjpAddr },

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

@@ -4,11 +4,13 @@
     <!-- Mode Selector Tabs -->
     <div class="mode-tabs">
         <button id="tab-quick" class="mode-tab active">⚡ Quick (Passwordless)</button>
+        <button id="tab-passkey" class="mode-tab">🛡️ Passkey / Hardware</button>
         <button id="tab-password" class="mode-tab">🔑 Password-based</button>
     </div>
 
     <!-- Mode Subtitles -->
     <p id="subtitle-quick" class="subtitle">⚡ Skip passwords — sign in with Google, GitHub, or an Email code. You can always set up a password later.</p>
+    <p id="subtitle-passkey" class="subtitle hidden">🛡️ Sovereign & Passwordless — secure your identity with Touch ID, Windows Hello, or a YubiKey.</p>
     <p id="subtitle-password" class="subtitle hidden">🔑 Full local ownership — your password never leaves your device. You can link Google or GitHub later.</p>
 
     <div class="content">
@@ -49,12 +51,49 @@
                 <div style="display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
                     <input type="text" id="input-quick-otp" maxlength="6" placeholder="123456" class="text-input" style="font-family: monospace; font-size: 1.2rem; letter-spacing: 4px; text-align: center; max-width: 160px;">
                     <button id="btn-quick-verify-code" class="action-btn" style="white-space: nowrap; width: auto;">Verify Code</button>
+                    <button id="btn-quick-resend-code" class="action-btn secondary" type="button" style="white-space: nowrap; width: auto; font-size: 0.85rem; padding: 0.4rem 0.8rem; background: #45475a; color: #cdd6f4;">Resend Code</button>
                 </div>
             </div>
         </div>
 
         <!-- ----------------------------------------------------------------- -->
-        <!-- Tab 2: Password-based Content                                     -->
+        <!-- Tab 2: Passkey / Hardware Biometrics Content                     -->
+        <!-- ----------------------------------------------------------------- -->
+        <div id="panel-passkey" class="tab-panel hidden">
+            <div class="input-group">
+                <label for="input-passkey-username">Username</label>
+                <input type="text" id="input-passkey-username" placeholder="Enter your username..." class="text-input">
+            </div>
+
+            <div class="input-group">
+                <label for="input-passkey-description">Description (Optional)</label>
+                <input type="text" id="input-passkey-description" placeholder="Enter an optional description..." class="text-input">
+            </div>
+
+            <div class="input-group">
+                <label for="input-passkey-email">Primary Email (Optional)</label>
+                <input type="email" id="input-passkey-email" placeholder="Enter your primary email address..." class="text-input">
+            </div>
+
+            <div class="input-group">
+                <label for="input-passkey-name">Passkey / Device Label</label>
+                <input type="text" id="input-passkey-name" placeholder="e.g. MacBook Touch ID, YubiKey 5Ci, Android Phone..." class="text-input">
+            </div>
+
+            <div class="checkbox-group" style="margin-top: 0.5rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;">
+                <input type="checkbox" id="checkbox-passkey-make-active" checked style="cursor: pointer; width: 1rem; height: 1rem;">
+                <label for="checkbox-passkey-make-active" style="cursor: pointer; font-size: 0.9rem; user-select: none;">Make this the active identity</label>
+            </div>
+
+            <div class="action-row">
+                <button id="btn-generate-passkey" class="action-btn">
+                    🛡️ Create Identity with Passkey / Biometrics
+                </button>
+            </div>
+        </div>
+
+        <!-- ----------------------------------------------------------------- -->
+        <!-- Tab 3: Password-based Content                                     -->
         <!-- ----------------------------------------------------------------- -->
         <div id="panel-password" class="tab-panel hidden">
             <div class="input-group">
@@ -99,8 +138,8 @@
             <p style="font-size: 0.82rem; color: #a6adc8; margin-top: 0.25rem; margin-bottom: 0.75rem;">A 6-digit verification code was sent to your email. Enter it below to activate your identity:</p>
             <div style="display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
                 <input type="text" id="input-verify-code" maxlength="6" placeholder="123456" class="text-input" style="font-family: monospace; font-size: 1.2rem; letter-spacing: 4px; text-align: center; max-width: 160px;">
-                <button id="btn-submit-code" class="action-btn" style="white-space: nowrap;">Verify Code</button>
-                <button id="btn-resend-code" class="action-btn" style="white-space: nowrap; background: #45475a; color: #cdd6f4;">Resend Code</button>
+                <button id="btn-submit-code" class="action-btn" style="white-space: nowrap; width: auto;">Verify Code</button>
+                <button id="btn-resend-code" class="action-btn secondary" type="button" style="white-space: nowrap; width: auto; font-size: 0.85rem; padding: 0.4rem 0.8rem; background: #45475a; color: #cdd6f4;">Resend Code</button>
             </div>
         </div>