@ibgib/web-gib 0.0.61 → 0.0.63

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,58 @@
                 <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="input-group">
+                <label for="select-passkey-attachment">Authenticator Device Target</label>
+                <select id="select-passkey-attachment" class="text-input" style="cursor: pointer;">
+                    <option value="any" selected>Any / Smart Chooser (All Options, No Forced Windows PIN)</option>
+                    <option value="cross-platform">Hardware Security Key (USB / NFC YubiKey Directly)</option>
+                    <option value="platform">Built-in Biometrics (Windows Hello, Touch ID, Fingerprint)</option>
+                </select>
+            </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 +147,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>
 
@@ -111,13 +159,21 @@
             <p class="warning">⚠️ Store this address safely. It is your root identity for this space.</p>
         </div>
 
+        <!-- Public Directory Notice Callout -->
+        <div class="public-directory-notice">
+            <span class="notice-icon">ℹ️</span>
+            <div class="notice-body">
+                <strong>Public Directory Notice:</strong> Your username and registered email address are associated with your public identity keystone and can be queried on the network (similar to a public PGP key or public DNS record).
+            </div>
+        </div>
+
         <div class="switch-workflow" style="margin-top: 1.2rem; text-align: center; font-size: 0.9rem; color: #a6adc8;">
             Already have a device paired? <button id="btn-switch-sign-in" class="link-btn" style="background: none; border: none; color: #89b4fa; font-weight: 600; cursor: pointer; text-decoration: underline; padding: 0; font-size: 0.9rem;">Pair New Device</button>
         </div>
 
         <!-- Privacy Footer Note -->
         <div class="privacy-footer" style="margin-top: 1rem; text-align: center; font-size: 0.78rem; color: #a6adc8; line-height: 1.4;">
-            ℹ️ Primary email addresses and identity keystones form part of the public graph for account discovery. Business data requires authorized sync delegates. Learn more in our <a id="link-privacy-policy" href="#privacy" style="color: #89b4fa; text-decoration: underline;">Privacy Policy</a>.
+            Identity keystones form part of the public graph for account discovery. Learn more in our <a id="link-privacy-policy" href="/privacy" target="_blank" rel="noopener" style="color: #89b4fa; text-decoration: underline;">Privacy Policy</a>.
         </div>
     </div>
 </div>