@ibgib/web-gib 0.0.52 → 0.0.56

package/dist/ui/component/identity/keystone-details/keystone-details.d.mts

@@ -0,0 +1,98 @@
+import { IbGibAddr } from "@ibgib/ts-gib/dist/types.mjs";
+import { IbGib_V1 } from "@ibgib/ts-gib/dist/V1/types.mjs";
+import { KeystoneIbGib_V1 } from "@ibgib/core-gib/dist/keystone/keystone-types.mjs";
+import { IbGibDynamicComponentMetaBase, IbGibDynamicComponentInstanceBase } from "../../ibgib-dynamic-component-bases.mjs";
+import { ElementsBase, IbGibDynamicComponentInstance, IbGibDynamicComponentInstanceInitOpts } from "../../component-types.mjs";
+export declare const KEYSTONE_DETAILS_COMPONENT_NAME = "ibgib-keystone-details";
+export declare class KeystoneDetailsComponentMeta extends IbGibDynamicComponentMetaBase {
+    protected lc: string;
+    routeRegExp?: RegExp;
+    componentName: string;
+    constructor();
+    createInstance({ path, ibGibAddr }: {
+        path: string;
+        ibGibAddr: IbGibAddr;
+    }): Promise<IbGibDynamicComponentInstance>;
+}
+interface KeystoneDetailsElements extends ElementsBase {
+    identityDetailsViewEl: HTMLDivElement;
+    identityAddrEl: HTMLElement;
+    identityGenEl: HTMLElement;
+    identityTimestampEl: HTMLElement;
+    identityUuidEl: HTMLElement;
+    identityNameEl: HTMLElement;
+    identityDescriptionEl: HTMLElement;
+    identityFrameDetailsEl: HTMLPreElement;
+    identityAggrDetailsEl: HTMLPreElement;
+    poolsContainerEl: HTMLDivElement;
+    btnVerifyChainEl: HTMLButtonElement;
+    btnSetActiveEl: HTMLButtonElement;
+    btnCheckUpdatesEl: HTMLButtonElement;
+    btnUpdateIdentityEl: HTMLButtonElement;
+    syncStatusMsgEl: HTMLDivElement;
+    verificationStatusEl: HTMLDivElement;
+    rawAccordionHeaderEl: HTMLDivElement;
+    rawAccordionContentEl: HTMLDivElement;
+    rawKeystoneJsonEl: HTMLPreElement;
+    delegatesCardEl: HTMLDivElement;
+    delegatesListEl: HTMLTableSectionElement;
+    historicalWarningBannerEl: HTMLDivElement;
+    containerEl: HTMLDivElement;
+    ssoLinkCardEl: HTMLDivElement;
+    btnLinkGoogleEl: HTMLDivElement;
+    btnLinkGithubEl: HTMLDivElement;
+    ssoStatusMsgEl: HTMLDivElement;
+    inputCurrentPassphraseEl: HTMLInputElement;
+    inputNewPassphraseEl: HTMLInputElement;
+    inputConfirmPassphraseEl: HTMLInputElement;
+    btnChangePassphraseEl: HTMLButtonElement;
+    changePassphraseStatusEl: HTMLDivElement;
+    changePassphraseCardEl: HTMLDivElement;
+}
+export declare class KeystoneDetailsComponentInstance extends IbGibDynamicComponentInstanceBase<KeystoneIbGib_V1, KeystoneDetailsElements> implements IbGibDynamicComponentInstance<KeystoneIbGib_V1, KeystoneDetailsElements> {
+    protected lc: string;
+    private staticIbGib;
+    get ibGib(): KeystoneIbGib_V1 | undefined;
+    private globalActiveAddr;
+    private isHistoricalFrame;
+    private _onIdentityChanged;
+    private keystoneCache;
+    constructor();
+    initialize(opts: IbGibDynamicComponentInstanceInitOpts): Promise<void>;
+    private getKeystoneDetails;
+    created(): Promise<void>;
+    disconnected(): Promise<void>;
+    private initHandlers;
+    private toggleAccordion;
+    private setSyncStatus;
+    protected handleCheckForUpdates(): Promise<void>;
+    protected handleUpdateIdentity(): Promise<void>;
+    protected handleVerifyIdentityChain(): Promise<void>;
+    protected handleSetActiveIdentity(): Promise<void>;
+    private setVerificationStatus;
+    private resolveActiveIdentity;
+    loadIbGib(opts?: {
+        getLatest?: boolean;
+    }): Promise<void>;
+    protected renderUI(): Promise<void>;
+    private updateActiveButtonState;
+    private updateFrameDetailsView;
+    private clearActiveDetails;
+    private renderChallengePools;
+    private showRemoteDelegateModal;
+    private renderDelegates;
+    protected handleRevokeDelegate(delegateTjpAddr: string, deviceName: string): Promise<void>;
+    handleContextUpdated(): Promise<void>;
+    protected handleNewContextChild({ childIbGib }: {
+        childIbGib: IbGib_V1;
+    }): Promise<void>;
+    protected handleSSOLink(providerId: 'google' | 'github'): Promise<void>;
+    private setSSOStatus;
+    protected handleSSOLinkCallback(code: string, stateObj: any, redirectUri: string): Promise<void>;
+    protected handleSSOClick(providerId: 'google' | 'github'): Promise<void>;
+    protected handleSSOUnlink(providerId: 'google' | 'github'): Promise<void>;
+    private setChangePassphraseStatus;
+    protected handleChangePassphrase(): Promise<void>;
+}
+export {};
+//# sourceMappingURL=keystone-details.d.mts.map

package/dist/ui/component/identity/keystone-details/keystone-details.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keystone-details.d.mts","sourceRoot":"","sources":["../../../../../src/ui/component/identity/keystone-details/keystone-details.mts"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,154 @@
+<div id="container" class="component-container">
+    <div id="historical-warning-banner" class="warning-banner hidden">
+        <span>⚠️ Viewing Historical Frame (Past State)</span>
+    </div>
+    <div id="identity-details-view" class="details-view">
+        <!-- Details for the active Domain Identity -->
+        <div class="card">
+            <h3>Domain Identity Details</h3>
+
+            <!-- Key-Value Grid -->
+            <div class="kv-grid">
+                <div class="kv-label">Username</div>
+                <div id="identity-name" class="kv-value">-</div>
+
+                <div class="kv-label">Description</div>
+                <div id="identity-description" class="kv-value">-</div>
+
+                <div class="kv-label">Verifiable Address</div>
+                <code id="identity-addr" class="address-code"></code>
+
+                <div class="kv-label">Generation (n)</div>
+                <div id="identity-gen" class="kv-value">-</div>
+
+                <div class="kv-label">Timestamp</div>
+                <div id="identity-timestamp" class="kv-value">-</div>
+
+                <div class="kv-label">UUID</div>
+                <div id="identity-uuid" class="kv-value">-</div>
+
+                <div class="kv-label">Frame Details</div>
+                <div class="kv-value">
+                    <pre id="identity-frame-details" class="kv-pre">-</pre>
+                </div>
+
+                <div class="kv-label">Aggr. Details</div>
+                <div class="kv-value">
+                    <pre id="identity-aggr-details" class="kv-pre">-</pre>
+                </div>
+            </div>
+
+            <div class="action-row">
+                <button id="btn-set-active" class="action-btn">Set as Active Identity</button>
+                <button id="btn-check-updates" class="action-btn secondary">Check for Updates</button>
+                <button id="btn-update-identity" class="action-btn secondary">Update Identity</button>
+                <button id="btn-verify-chain" class="action-btn secondary">Verify Identity Chain</button>
+            </div>
+            <div id="sync-status-msg" class="status-msg hidden"></div>
+            <div id="verification-status" class="status-msg hidden"></div>
+        </div>
+
+        <!-- Challenge Pools Card -->
+        <div class="card">
+            <h3>Challenge Pools</h3>
+            <div id="pools-container" class="pools-container">
+                <!-- Dynamic pools list gets injected here -->
+            </div>
+        </div>
+
+        <!-- Delegates Card -->
+        <div id="delegates-card" class="card">
+            <h3>Registered Delegates</h3>
+            <div id="delegates-container" class="delegates-container">
+                <p class="description">Active sub-keystones authorized to perform sync and operations on behalf of this Domain Identity.</p>
+                <table class="delegates-table">
+                    <thead>
+                        <tr>
+                            <th>Name / Description</th>
+                            <th>TJP Address</th>
+                            <th>Allowed Verbs</th>
+                            <th>Actions</th>
+                        </tr>
+                    </thead>
+                    <tbody id="delegates-list">
+                        <!-- Dynamic list of delegates gets injected here -->
+                    </tbody>
+                </table>
+            </div>
+        </div>
+
+        <!-- SSO Identity Linking Card -->
+        <div id="sso-link-card" class="card hidden">
+            <h3>Identity Providers</h3>
+            <p class="description">Securely link or unlink external OAuth2 providers to delegate sync access to this identity.</p>
+            <div class="sso-toggle-group">
+                <!-- Google Card Toggle -->
+                <div id="btn-link-google" class="sso-toggle-card google" role="button" tabindex="0">
+                    <div class="toggle-status-indicator top"></div>
+                    <div class="toggle-content">
+                        <!-- Custom Google SVG Icon -->
+                        <svg class="sso-icon" viewBox="0 0 24 24">
+                            <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+                            <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+                            <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.06H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.94l2.85-2.22.81-.63z"/>
+                            <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z"/>
+                        </svg>
+                        <span class="provider-label">Google</span>
+                        <span class="toggle-state-text">Unlinked</span>
+                    </div>
+                    <div class="toggle-status-indicator bottom"></div>
+                </div>
+
+                <!-- GitHub Card Toggle -->
+                <div id="btn-link-github" class="sso-toggle-card github" role="button" tabindex="0">
+                    <div class="toggle-status-indicator top"></div>
+                    <div class="toggle-content">
+                        <!-- Custom GitHub SVG Icon -->
+                        <svg class="sso-icon" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                        </svg>
+                        <span class="provider-label">GitHub</span>
+                        <span class="toggle-state-text">Unlinked</span>
+                    </div>
+                    <div class="toggle-status-indicator bottom"></div>
+                </div>
+            </div>
+            <div id="sso-status-msg" class="status-msg hidden"></div>
+        </div>
+
+        <!-- Change Passphrase Card -->
+        <div id="change-passphrase-card" class="card">
+            <h3>Change Master Passphrase</h3>
+            <p class="description">Rotate your local master passphrase. This will cryptographically evolve your primary identity and all registered user-owned delegate keystones to the new passphrase.</p>
+            <div class="form-row">
+                <div class="form-group">
+                    <label for="input-current-passphrase">Current Passphrase</label>
+                    <input type="password" id="input-current-passphrase" placeholder="••••••••" class="form-input">
+                </div>
+                <div class="form-group">
+                    <label for="input-new-passphrase">New Passphrase</label>
+                    <input type="password" id="input-new-passphrase" placeholder="••••••••" class="form-input">
+                </div>
+                <div class="form-group">
+                    <label for="input-confirm-passphrase">Confirm New Passphrase</label>
+                    <input type="password" id="input-confirm-passphrase" placeholder="••••••••" class="form-input">
+                </div>
+            </div>
+            <div class="action-row">
+                <button id="btn-change-passphrase" class="action-btn">Update Passphrase</button>
+            </div>
+            <div id="change-passphrase-status" class="status-msg hidden"></div>
+        </div>
+
+        <!-- Raw Keystone Timeline Explorer -->
+        <div class="card accordion">
+            <div id="raw-accordion-header" class="accordion-header">
+                <span>Raw Keystone Timeline (JSON)</span>
+                <span class="chevron">▼</span>
+            </div>
+            <div id="raw-accordion-content" class="accordion-content">
+                <pre id="raw-keystone-json" class="json-code"></pre>
+            </div>
+        </div>
+    </div>
+</div>