@serve.zone/dcrouter 13.28.0 → 13.30.0

package/ts_web/elements/ops-dashboard.ts

@@ -66,6 +66,9 @@ export class OpsDashboard extends DeesElement {
     isLoggedIn: false,
   };
 
+  private bootstrapStepper?: any;
+  private bootstrapCheckPromise?: Promise<void>;
+
   @state() accessor uiState: appstate.IUiState = {
     activeView: 'overview',
     activeSubview: null,
@@ -336,6 +339,7 @@ export class OpsDashboard extends DeesElement {
             await (simpleLogin as any).switchToSlottedContent();
             await appstate.statsStatePart.dispatchAction(appstate.fetchAllStatsAction, null);
             await appstate.configStatePart.dispatchAction(appstate.fetchConfigurationAction, null);
+            await this.ensureAdminBootstrap();
           } else {
             // Server rejected the JWT — clear state, show login
             await appstate.loginStatePart.dispatchAction(appstate.logoutAction, null);
@@ -370,10 +374,106 @@ export class OpsDashboard extends DeesElement {
       await simpleLogin!.switchToSlottedContent();
       await appstate.statsStatePart.dispatchAction(appstate.fetchAllStatsAction, null);
       await appstate.configStatePart.dispatchAction(appstate.fetchConfigurationAction, null);
+      await this.ensureAdminBootstrap();
     } else {
       form!.setStatus('error', 'Login failed!');
       await domtools.convenience.smartdelay.delayFor(2000);
       form!.reset();
     }
   }
+
+  private async ensureAdminBootstrap(): Promise<void> {
+    if (!this.loginState.identity || this.bootstrapStepper?.isConnected) {
+      return;
+    }
+    if (this.bootstrapCheckPromise) {
+      return this.bootstrapCheckPromise;
+    }
+
+    this.bootstrapCheckPromise = (async () => {
+      try {
+        const status = await appstate.getAdminBootstrapStatus();
+        if (status.needsBootstrap) {
+          await this.showAdminBootstrapStepper(status);
+        }
+      } catch (error) {
+        console.error('Admin bootstrap status check failed:', error);
+      } finally {
+        this.bootstrapCheckPromise = undefined;
+      }
+    })();
+
+    return this.bootstrapCheckPromise;
+  }
+
+  private async showAdminBootstrapStepper(statusArg: appstate.IAdminBootstrapStatus): Promise<void> {
+    const { DeesStepper } = await import('@design.estate/dees-catalog');
+    this.bootstrapStepper = await DeesStepper.createAndShow({
+      cancelable: false,
+      steps: [
+        {
+          title: 'Create Persisted Admin',
+          content: html`
+            <div style="display: grid; gap: 16px; color: var(--dees-color-text-secondary); font-size: 14px; line-height: 1.5;">
+              <p style="margin: 0;">
+                This router is currently using the temporary bootstrap admin. Create the first persisted admin account to continue.
+              </p>
+              <dees-form>
+                <dees-input-text .key=${'email'} .label=${'Admin email'} .required=${true}></dees-input-text>
+                <dees-input-text .key=${'name'} .label=${'Display name'}></dees-input-text>
+                <dees-input-text .key=${'password'} .label=${'Password'} .required=${true} .isPasswordBool=${true}></dees-input-text>
+                <dees-input-text .key=${'passwordConfirm'} .label=${'Confirm password'} .required=${true} .isPasswordBool=${true}></dees-input-text>
+                <dees-input-checkbox
+                  .key=${'enableIdpGlobalAuth'}
+                  .label=${'Allow idp.global login for this email'}
+                  .description=${statusArg.idpGlobalConfigured
+                    ? 'The local account remains authoritative; idp.global only verifies identity.'
+                    : 'Requires DCROUTER_IDP_GLOBAL_URL before idp.global logins can work.'}
+                ></dees-input-checkbox>
+              </dees-form>
+            </div>
+          `,
+          menuOptions: [
+            {
+              name: 'Create admin',
+              action: async (stepperArg: any) => {
+                const form = stepperArg.shadowRoot?.querySelector('.selected dees-form') as any;
+                if (!form) return;
+                const formData = await form.collectFormData();
+                const email = String(formData.email || '').trim();
+                const name = String(formData.name || '').trim();
+                const password = String(formData.password || '');
+                const passwordConfirm = String(formData.passwordConfirm || '');
+
+                if (!email || !password) {
+                  form.setStatus?.('error', 'Email and password are required.');
+                  return;
+                }
+                if (password !== passwordConfirm) {
+                  form.setStatus?.('error', 'Passwords do not match.');
+                  return;
+                }
+
+                try {
+                  form.setStatus?.('pending', 'Creating persisted admin...');
+                  await appstate.createInitialAdminUser({
+                    email,
+                    name,
+                    password,
+                    enableIdpGlobalAuth: Boolean(formData.enableIdpGlobalAuth),
+                  });
+                  form.setStatus?.('success', 'Persisted admin created.');
+                  await stepperArg.destroy();
+                  this.bootstrapStepper = undefined;
+                  await appstate.usersStatePart.dispatchAction(appstate.fetchUsersAction, null);
+                } catch (error) {
+                  form.setStatus?.('error', error instanceof Error ? error.message : 'Failed to create admin.');
+                }
+              },
+            },
+          ],
+        },
+      ],
+    });
+  }
 }

package/ts_web/readme.md

@@ -12,8 +12,8 @@ For reporting bugs, issues, or security vulnerabilities, please visit [community
 | --- | --- |
 | `index.ts` | Initializes the app router and renders `<ops-dashboard>` into `document.body`. |
 | `router.ts` | Defines top-level dashboard routes, subviews, redirects, and URL/state synchronization. |
-| `appstate.ts` | Holds reactive login, UI, config, stats, route, DNS, email, remote ingress, VPN, and log state. |
-| `elements/` | Contains the dashboard shell and feature-specific Dees web components. |
+| `appstate.ts` | Holds reactive login, bootstrap, UI, config, stats, route, DNS, email, remote ingress, VPN, and log state. |
+| `elements/` | Contains the dashboard shell, first-admin bootstrap stepper, and feature-specific Dees web components. |
 
 ## View Map
 
@@ -37,6 +37,8 @@ The dashboard talks to the dcrouter OpsServer through:
 - Dees web components and app-state subscriptions for UI updates
 - QR code rendering for VPN client UX
 
+On a fresh DB-backed instance, the dashboard checks `getAdminBootstrapStatus` and shows a non-cancelable first-admin stepper before normal dashboard access.
+
 ## Usage
 
 This package is primarily consumed by the main dcrouter build and served by OpsServer. Install it directly only when you intentionally need the dashboard module boundary.
@@ -79,7 +81,7 @@ Use of these trademarks must comply with Task Venture Capital GmbH's Trademark G
 
 ### Company Information
 
-Task Venture Capital GmbH
+Task Venture Capital GmbH  
 Registered at District Court Bremen HRB 35230 HB, Germany
 
 For any legal inquiries or further information, please contact us via email at hello@task.vc.