@ibgib/space-gib 0.0.3 → 0.0.5

package/src/client/components/keystone-creator/keystone-creator.css

@@ -5,16 +5,6 @@
     margin: 2rem auto;
 }
 
-.component-container {
-    padding: 2rem;
-    background: var(--clr-bg-glass);
-    backdrop-filter: blur(16px);
-    border-radius: var(--radius-lg);
-    border: 1px solid var(--clr-border);
-    color: var(--clr-text-primary);
-    box-shadow: var(--shadow-card);
-}
-
 h2 {
     margin-top: 0;
     font-size: 1.5rem;
@@ -28,28 +18,6 @@ h2 {
     gap: 1.5rem;
 }
 
-.action-row {
-    display: flex;
-    justify-content: center;
-}
-
-.action-btn {
-    padding: 0.75rem 1.5rem;
-    background: var(--clr-accent);
-    color: var(--clr-bg-deep);
-    border: none;
-    border-radius: var(--radius-md);
-    font-weight: 600;
-    cursor: pointer;
-    transition: all var(--t-fast);
-}
-
-.action-btn:hover {
-    background: #9fffa5;
-    transform: translateY(-1px);
-    box-shadow: 0 0 16px var(--clr-accent-glow);
-}
-
 .input-group {
     display: flex;
     flex-direction: column;
@@ -61,45 +29,14 @@ h2 {
     color: var(--clr-text-secondary);
 }
 
-.secret-input {
-    padding: 0.75rem;
-    background: rgba(0, 0, 0, 0.2);
-    border: 1px solid var(--clr-border);
-    border-radius: var(--radius-sm);
-    color: var(--clr-text-primary);
-    font-family: var(--font-mono);
-}
-
-.secret-input:focus {
-    outline: none;
-    border-color: var(--clr-accent);
-}
-
 .status-area {
-    padding: 1rem;
-    border-radius: var(--radius-md);
-    background: rgba(255, 255, 255, 0.03);
+    margin-top: 0.5rem;
 }
 
 .status-area.hidden {
     display: none;
 }
 
-.status-msg {
-    margin: 0;
-    font-size: 0.9rem;
-}
-
-.status-msg.info { color: var(--clr-text-secondary); }
-.status-msg.success { color: var(--clr-accent); }
-.status-msg.error { color: var(--clr-warn); }
-
-.action-btn:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    background: var(--clr-border);
-}
-
 .result-area {
     padding: 1.5rem;
     background: rgba(255, 255, 255, 0.03);
@@ -121,19 +58,8 @@ h2 {
     margin: 0;
 }
 
-.keystone-addr {
-    display: block;
-    padding: 0.75rem;
-    background: rgba(0, 0, 0, 0.3);
-    border-radius: var(--radius-sm);
-    font-family: var(--font-mono);
-    font-size: 0.85rem;
-    word-break: break-all;
-    color: var(--clr-accent);
-}
-
 .warning {
     font-size: 0.8rem;
     color: var(--clr-warn);
     margin: 0.5rem 0 0;
-}
+}

package/src/client/components/keystone-creator/keystone-creator.html

@@ -1,26 +1,41 @@
-<div id="container" class="component-container">
-    <h2 id="title">Keystone Creator</h2>
-    <div class="content">
-        <p>This will generate a new root keystone (identity) for your space.</p>
-        
-        <div class="input-group">
-            <label for="input-secret">Master Secret (Keep this private!)</label>
-            <input type="password" id="input-secret" placeholder="Enter your master secret..." class="secret-input">
-        </div>
-
-        <div class="action-row">
-            <button id="btn-generate" class="action-btn">Generate Identity Keystone</button>
-        </div>
-
-        <div id="status-area" class="status-area hidden">
-            <p id="status-text" class="status-msg"></p>
-        </div>
-
-        <div id="result-area" class="result-area collapsed">
-            <h3>New Keystone Generated!</h3>
-            <p class="address-label">Address:</p>
-            <code id="keystone-addr" class="keystone-addr"></code>
-            <p class="warning">⚠️ Store this address safely. It is your root identity for this space.</p>
-        </div>
-    </div>
-</div>
+<div id="container" class="component-container">
+    <h2 id="title">Keystone Creator</h2>
+    <div class="content">
+        <p>This will generate a new root keystone (identity) for your space.</p>
+
+        <div class="input-group">
+            <label for="input-username">Username</label>
+            <input type="text" id="input-username" placeholder="Enter your username..." class="text-input">
+        </div>
+
+        <div class="input-group">
+            <label for="input-description">Description (Optional)</label>
+            <input type="text" id="input-description" placeholder="Enter an optional description..." class="text-input">
+        </div>
+
+        <div class="input-group">
+            <label for="input-secret">Master Secret (Keep this private!)</label>
+            <input type="password" id="input-secret" placeholder="Enter your master secret..." class="secret-input">
+        </div>
+
+        <div class="checkbox-group" style="margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem;">
+            <input type="checkbox" id="checkbox-make-active" checked style="cursor: pointer; width: 1rem; height: 1rem;">
+            <label for="checkbox-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" class="action-btn">Generate Identity Keystone</button>
+        </div>
+
+        <div id="status-area" class="status-area hidden">
+            <p id="status-text" class="status-msg"></p>
+        </div>
+
+        <div id="result-area" class="result-area collapsed">
+            <h3>New Keystone Generated!</h3>
+            <p class="address-label">Address:</p>
+            <code id="keystone-addr" class="keystone-addr"></code>
+            <p class="warning">⚠️ Store this address safely. It is your root identity for this space.</p>
+        </div>
+    </div>
+</div>

package/src/client/components/keystone-creator/keystone-creator.mts

@@ -1,7 +1,8 @@
 import thisCss from "./keystone-creator.css";
 import thisHtml from "./keystone-creator.html";
+import styleCss from "../../style.css";
 
-import { extractErrorMsg } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
+import { delay, extractErrorMsg } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
 import { HashAlgorithm } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
 import { IbGibAddr } from "@ibgib/ts-gib/dist/types.mjs";
 import { IbGib_V1 } from "@ibgib/ts-gib/dist/V1/types.mjs";
@@ -10,9 +11,10 @@ import { KeystoneService_V1 } from "@ibgib/core-gib/dist/keystone/keystone-servi
 import {
     KeystonePoolConfig, KeystoneChallengeType, KeystoneReplenishStrategy
 } from "@ibgib/core-gib/dist/keystone/keystone-types.mjs";
-import { getGlobalMetaspace_waitIfNeeded } from "@ibgib/web-gib/dist/helpers.mjs";
+import { KeystoneProfileBuilder } from "@ibgib/core-gib/dist/keystone/policy/keystone-profile-builder.mjs";
+import { getGlobalMetaspace_waitIfNeeded, getLocalCoupledIbGibForDomainIbGib } from "@ibgib/web-gib/dist/helpers.mjs";
 import {
-    IbGibDynamicComponentMetaBase, IbGibDynamicComponentInstanceBase,
+    IbGibDynamicComponentMetaBase, IbGibFormInstanceBase,
 } from "@ibgib/web-gib/dist/ui/component/ibgib-dynamic-component-bases.mjs";
 import {
     ElementsBase, IbGibDynamicComponentInstance,
@@ -23,7 +25,17 @@ import { getComponentCtorArg } from "../../helpers.web.mjs";
 import { spaceGibApiBridge } from "../../api/space-gib-api-bridge.mjs";
 import { devLog } from "../../dev-tools.mjs";
 
-export const KEYSTONE_CREATOR_COMPONENT_NAME = 'space-gib-keystone-creator';
+import {
+    createSettings, getSectionName, getSettingsScope
+} from "@ibgib/web-gib/dist/common/settings/settings-helpers.mjs";
+import { SettingsType } from "@ibgib/web-gib/dist/common/settings/settings-constants.mjs";
+import { SettingsIbGib_V1 } from "@ibgib/web-gib/dist/common/settings/settings-types.mjs";
+import { updateSpecialIndex, mut8Timeline } from "@ibgib/core-gib/dist/timeline/timeline-api.mjs";
+import { toDto } from "@ibgib/core-gib/dist/common/other/ibgib-helper.mjs";
+import { KEYSTONE_USERNAME_REGEXP, KEYSTONE_DESCRIPTION_REGEXP } from "@ibgib/core-gib/dist/keystone/keystone-constants.mjs";
+import { EVENT_IBGIB_IDENTITY_REQUEST_CHANGE } from "@ibgib/web-gib/dist/ui/ui-constants.mjs";
+
+export const KEYSTONE_CREATOR_COMPONENT_NAME = 'ibgib-keystone-creator';
 
 /**
  * Metadata for the Keystone Creator component.
@@ -54,7 +66,7 @@ export class KeystoneCreatorComponentMeta extends IbGibDynamicComponentMetaBase
             ibGibAddr,
             meta: this,
             html: thisHtml,
-            css: [thisCss],
+            css: [styleCss, thisCss],
         });
         return component;
     }
@@ -69,7 +81,10 @@ interface KeystoneCreatorElements extends ElementsBase {
     btnGenerateEl: HTMLButtonElement;
     resultAreaEl: HTMLDivElement;
     keystoneAddrEl: HTMLElement;
+    inputUsername: HTMLInputElement;
+    inputDescription: HTMLInputElement;
     inputSecret: HTMLInputElement;
+    checkboxMakeActive: HTMLInputElement;
     statusArea: HTMLDivElement;
     statusText: HTMLParagraphElement;
 }
@@ -78,10 +93,11 @@ interface KeystoneCreatorElements extends ElementsBase {
  * Concrete implementation of the Keystone Creator component.
  */
 export class KeystoneCreatorComponentInstance
-    extends IbGibDynamicComponentInstanceBase<IbGib_V1, KeystoneCreatorElements>
+    extends IbGibFormInstanceBase<IbGib_V1, KeystoneCreatorElements>
     implements IbGibDynamicComponentInstance<IbGib_V1, KeystoneCreatorElements> {
 
     protected lc: string = `[KeystoneCreatorComponentInstance]`;
+    private hasExistingIdentities = false;
 
     constructor() {
         super();
@@ -99,7 +115,10 @@ export class KeystoneCreatorComponentInstance
         this.elements.btnGenerateEl = this.shadowRoot!.getElementById('btn-generate') as HTMLButtonElement;
         this.elements.resultAreaEl = this.shadowRoot!.getElementById('result-area') as HTMLDivElement;
         this.elements.keystoneAddrEl = this.shadowRoot!.getElementById('keystone-addr') as HTMLElement;
+        this.elements.inputUsername = this.shadowRoot!.getElementById('input-username') as HTMLInputElement;
+        this.elements.inputDescription = this.shadowRoot!.getElementById('input-description') as HTMLInputElement;
         this.elements.inputSecret = this.shadowRoot!.getElementById('input-secret') as HTMLInputElement;
+        this.elements.checkboxMakeActive = this.shadowRoot!.getElementById('checkbox-make-active') as HTMLInputElement;
         this.elements.statusArea = this.shadowRoot!.getElementById('status-area') as HTMLDivElement;
         this.elements.statusText = this.shadowRoot!.getElementById('status-text') as HTMLParagraphElement;
 
@@ -111,15 +130,59 @@ export class KeystoneCreatorComponentInstance
         if (this.ibGibAddr && !this.ibGib) {
             await this.loadIbGib();
         }
+        await this.checkExistingIdentities();
         await this.renderUI();
     }
 
+    private async checkExistingIdentities() {
+        const lc = `${this.lc}[checkExistingIdentities]`;
+        try {
+            const metaspace = await getGlobalMetaspace_waitIfNeeded();
+            const space = await metaspace.getLocalUserSpace({});
+            if (space) {
+                const keystonesIndex = await metaspace.getSpecialIbGib({
+                    type: "keystones",
+                    space,
+                    initialize: true,
+                });
+                const registeredKeystones = keystonesIndex?.rel8ns?.keystone ?? [];
+                this.hasExistingIdentities = registeredKeystones.length > 0;
+            }
+        } catch (error) {
+            console.warn(`${lc} Error checking existing identities: ${extractErrorMsg(error)}`);
+            this.hasExistingIdentities = false;
+        }
+
+        const checkbox = this.elements!.checkboxMakeActive;
+        if (checkbox) {
+            if (!this.hasExistingIdentities) {
+                checkbox.checked = true;
+                checkbox.disabled = true;
+                checkbox.title = "At least one active identity is required.";
+            } else {
+                checkbox.disabled = false;
+                checkbox.title = "";
+            }
+        }
+    }
+
     override async disconnected(): Promise<void> {
         // cleanup if needed
     }
 
     private initHandlers() {
         this.elements!.btnGenerateEl.addEventListener('click', () => this.handleGenerate());
+
+        // Clear invalid styling when user inputs text
+        this.elements!.inputUsername.addEventListener('input', () => {
+            this.elements!.inputUsername.classList.remove('invalid');
+        });
+        this.elements!.inputDescription.addEventListener('input', () => {
+            this.elements!.inputDescription.classList.remove('invalid');
+        });
+        this.elements!.inputSecret.addEventListener('input', () => {
+            this.elements!.inputSecret.classList.remove('invalid');
+        });
     }
 
     /**
@@ -130,35 +193,68 @@ export class KeystoneCreatorComponentInstance
         const lc = `${this.lc}[${this.handleGenerate.name}]`;
         try {
             console.log(`${lc} [NAG][ibgib-paradigm] starting genesis orchestration...`);
-            this.setLoading(true);
+            /**
+             * Delay update messages so the human eye has a chance to comprehend
+             * progress.
+             */
+            const humanEyeDelay = 500;
             this.setStatus("Initializing genesis...", "info");
 
             devLog('Starting local genesis orchestration...');
+
+            // Validate Username using base class validation plumbing
+            if (!this.validateInputPattern({
+                input: this.elements!.inputUsername,
+                pattern: KEYSTONE_USERNAME_REGEXP,
+                errorMessage: "Username must be 1-63 characters (alphanumeric, underscores, hyphens, dots).",
+                required: true
+            })) {
+                this.setStatus("Invalid username. Must be 1-63 characters (alphanumeric, _, -, .).", "error");
+                devLog('✗ Invalid username.');
+                return; /* <<<< returns early */
+            }
+            const username = this.elements!.inputUsername.value.trim();
+
+            // Validate Description using base class validation plumbing
+            if (!this.validateInputPattern({
+                input: this.elements!.inputDescription,
+                pattern: KEYSTONE_DESCRIPTION_REGEXP,
+                errorMessage: "Description must be 0-128 characters and consist of English characters and common punctuation.",
+                required: false
+            })) {
+                this.setStatus("Invalid description. Alphanumeric + common punctuation, max 128 chars.", "error");
+                devLog('✗ Invalid description.');
+                return; /* <<<< returns early */
+            }
+            const description = this.elements!.inputDescription.value.trim();
+
             const masterSecret = this.elements!.inputSecret.value;
             if (!masterSecret) {
+                this.elements!.inputSecret.classList.add('invalid');
                 this.setStatus("Please enter a master secret.", "error");
                 devLog('✗ Please enter a master secret.');
-                return;
+                return; /* <<<< returns early */
+            } else {
+                this.elements!.inputSecret.classList.remove('invalid');
             }
 
-            // 1. Prepare Keystone Configs (Standard Phase 1 config)
-            const configs: KeystonePoolConfig[] = [
-                {
-                    id: 'primary',
-                    type: KeystoneChallengeType.hash_reveal_v1,
-                    salt: 'primary_pool_salt',
-                    algo: HashAlgorithm.sha_256,
-                    rounds: 1,
-                    behavior: {
-                        size: 3,
-                        replenish: KeystoneReplenishStrategy.topUp,
-                        selectSequentially: 1,
-                        selectRandomly: 0,
-                        targetBindingChars: 0,
-                    },
-                    allowedVerbs: [], // General purpose
-                }
-            ];
+            this.showBusy({
+                isBusy: true,
+                title: 'Generating Identity...',
+                msg: 'Preparing configuration and policy options...',
+                animationEmoji: '⚙️',
+                submitBtnSelector: '#btn-generate',
+                loadingText: 'Generating...'
+            });
+
+            // 1. Prepare Keystone Configs using the test behavior profile (with username and description)
+            const builder = KeystoneProfileBuilder.buildKeystone('test')
+                .withUsername(username)
+                .withDescription(description)
+                .withDetails({
+                    client: 'space-gib-web',
+                });
+            const configs = await builder.compileConfigs();
 
             // 2. Get local services
             const metaspace = await getGlobalMetaspace_waitIfNeeded();
@@ -166,37 +262,85 @@ export class KeystoneCreatorComponentInstance
             if (!space) { throw new Error("No default space found in metaspace."); }
 
             // 3. Perform Genesis (Local)
+            this.showBusy({
+                isBusy: true,
+                title: 'Generating Identity...',
+                msg: 'Performing cryptographic local genesis...\n(This runs compute-heavy Key Derivation Functions)',
+                animationEmoji: '🗝️'
+            });
             const keystoneService = new KeystoneService_V1();
             const keystoneIbGib = await keystoneService.genesis({
                 masterSecret,
                 configs,
                 metaspace,
                 space,
-                frameDetails: { client: 'space-gib-web', timestamp: Date.now() }
+                frameDetails: builder.getFrameDetails()
             });
 
             const addr = getIbGibAddr({ ibGib: keystoneIbGib });
             console.log(`${lc} [NAG][ibgib-paradigm] local genesis complete: ${addr}`);
+            await delay(humanEyeDelay); // for human eyes, not needed for functionality
             this.setStatus("Local genesis complete. Syncing to server...", "info");
             devLog(`✓ Local genesis complete: ${addr}`);
-            
+
             // Expose for dev tools
             (window as any).dev_domainI = keystoneIbGib;
             (window as any).dev_domainIMasterSecret = masterSecret;
 
             // 4. Post to Server
             devLog(`Posting genesis keystone to server...`);
+            this.showBusy({
+                isBusy: true,
+                title: 'Syncing to Server...',
+                msg: [
+                    'Local genesis complete!',
+                    'Posting genesis keystone to server sync node...',
+                    '(may take awhile, depending on strength of keystone...)',
+                ].join('\n'),
+                animationEmoji: '🔄'
+            });
             const resSync = await spaceGibApiBridge.postGenesisKeystone(keystoneIbGib);
             if (!resSync.success) {
                 this.setStatus(`Sync failed: ${resSync.message}`, "error");
                 devLog(`✗ Server rejected genesis keystone: ${resSync.message}`);
-                return;
+                return; /* <<<< returns early */
+            }
+
+            // 5. Register with the keystones special index
+            this.showBusy({
+                isBusy: true,
+                title: 'Registering Identity...',
+                msg: 'Server sync succeeded!\nUpdating local identity indexes and scope settings...',
+                animationEmoji: '💾'
+            });
+            await delay(humanEyeDelay); // for human eyes, not needed for functionality
+            await updateSpecialIndex({
+                type: "keystones",
+                rel8nInfos: [
+                    {
+                        rel8nName: "keystone",
+                        ibGibs: [toDto({ ibGib: keystoneIbGib })],
+                    },
+                ],
+                metaspace,
+                space,
+            });
+
+            // 6. Request to make the new identity active if the checkbox is checked
+            const makeActive = this.elements!.checkboxMakeActive?.checked;
+            if (makeActive) {
+                window.dispatchEvent(new CustomEvent(EVENT_IBGIB_IDENTITY_REQUEST_CHANGE, {
+                    detail: { activeIdentityAddr: addr },
+                    bubbles: true,
+                    composed: true
+                }));
             }
 
-            // 5. Success
+            // 7. Success
             this.elements!.keystoneAddrEl.textContent = addr;
             this.elements!.statusArea.classList.remove('hidden');
             this.setStatus("Keystone successfully created and synced!", "success");
+            await delay(humanEyeDelay); // for human eyes, not needed for functionality
             devLog(`✓ Keystone successfully created and synced!`);
 
         } catch (error) {
@@ -205,20 +349,13 @@ export class KeystoneCreatorComponentInstance
             this.setStatus(`Error: ${emsg}`, "error");
             devLog(`✗ Error: ${emsg}`);
         } finally {
-            this.setLoading(false);
+            this.showBusy({
+                isBusy: false,
+                submitBtnSelector: '#btn-generate'
+            });
         }
     }
 
-    private setLoading(loading: boolean) {
-        this.elements!.btnGenerateEl.disabled = loading;
-        this.elements!.btnGenerateEl.textContent = loading ? "Generating..." : "Generate Identity Keystone";
-    }
-
-    private setStatus(msg: string, type: 'info' | 'success' | 'error') {
-        this.elements!.statusText.textContent = msg;
-        this.elements!.statusText.className = `status-msg ${type}`;
-    }
-
     protected override async renderUI(): Promise<void> {
         // No complex rendering needed for this simple creator component yet
     }