feat: expose dcrouter gateway settings

ts_web/elements/ob-view-settings.ts

@@ -46,7 +46,100 @@ export class ObViewSettings extends DeesElement {
   public static styles = [
     cssManager.defaultStyles,
     shared.viewHostCss,
-    css``,
+    css`
+      .gateway-card {
+        margin-bottom: 24px;
+        border: 1px solid var(--dees-color-border-subtle);
+        border-radius: 12px;
+        background: var(--dees-color-background, #ffffff);
+        overflow: hidden;
+      }
+
+      .gateway-header {
+        padding: 16px 20px;
+        border-bottom: 1px solid var(--dees-color-border-subtle);
+      }
+
+      .gateway-title {
+        font-size: 15px;
+        font-weight: 600;
+        color: var(--dees-color-text-primary);
+      }
+
+      .gateway-subtitle {
+        margin-top: 4px;
+        font-size: 13px;
+        color: var(--dees-color-text-muted);
+      }
+
+      .gateway-content {
+        padding: 20px;
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 16px;
+      }
+
+      .gateway-field.full {
+        grid-column: 1 / -1;
+      }
+
+      .field-label {
+        display: block;
+        margin-bottom: 6px;
+        font-size: 13px;
+        font-weight: 500;
+        color: var(--dees-color-text-secondary);
+      }
+
+      input {
+        width: 100%;
+        box-sizing: border-box;
+        padding: 10px 12px;
+        border: 1px solid var(--dees-color-border-subtle);
+        border-radius: 8px;
+        background: transparent;
+        color: var(--dees-color-text-primary);
+        font-size: 14px;
+      }
+
+      input:focus {
+        outline: none;
+        border-color: #3b82f6;
+      }
+
+      .field-hint {
+        margin-top: 5px;
+        font-size: 12px;
+        color: var(--dees-color-text-muted);
+      }
+
+      .gateway-footer {
+        display: flex;
+        justify-content: flex-end;
+        padding: 0 20px 20px;
+      }
+
+      .save-button {
+        border: none;
+        border-radius: 8px;
+        background: #2563eb;
+        color: white;
+        cursor: pointer;
+        font-size: 13px;
+        font-weight: 600;
+        padding: 9px 14px;
+      }
+
+      .save-button:hover {
+        background: #1d4ed8;
+      }
+
+      @media (max-width: 700px) {
+        .gateway-content {
+          grid-template-columns: 1fr;
+        }
+      }
+    `,
   ];
 
   async connectedCallback() {
@@ -57,6 +150,7 @@ export class ObViewSettings extends DeesElement {
   public render(): TemplateResult {
     return html`
       <ob-sectionheading>Settings</ob-sectionheading>
+      ${this.renderExternalGatewaySettings()}
       <sz-settings-view
         .settings=${this.settingsState.settings || {
           darkMode: true,
@@ -90,4 +184,78 @@ export class ObViewSettings extends DeesElement {
       ></sz-settings-view>
     `;
   }
+
+  private renderExternalGatewaySettings(): TemplateResult {
+    const settings = this.settingsState.settings;
+    return html`
+      <section class="gateway-card">
+        <div class="gateway-header">
+          <div class="gateway-title">External dcrouter Gateway</div>
+          <div class="gateway-subtitle">Delegate public WorkApp routing, DNS, and certificates to a dcrouter edge authority.</div>
+        </div>
+        <div class="gateway-content">
+          ${this.renderGatewayInput('dcrouterGatewayUrl', 'Gateway URL', settings?.dcrouterGatewayUrl || '', 'https://edge.example.com', 'Base URL of the dcrouter OpsServer.')}
+          ${this.renderGatewayInput('dcrouterGatewayApiToken', 'API Token', settings?.dcrouterGatewayApiToken || '', 'dcrouter API token', 'Requires workhosters and certificates scopes.', 'password')}
+          ${this.renderGatewayInput('dcrouterWorkHosterId', 'WorkHoster ID', settings?.dcrouterWorkHosterId || '', 'optional stable owner ID', 'Leave empty to let Onebox create a stable ID.')}
+          ${this.renderGatewayInput('dcrouterTargetHost', 'Target Host', settings?.dcrouterTargetHost || '', 'public or private host/IP', 'Defaults to the configured server IP when empty.')}
+          ${this.renderGatewayInput('dcrouterTargetPort', 'Target Port', String(settings?.dcrouterTargetPort || 80), '80', 'Internal HTTP port dcrouter forwards to.', 'number')}
+        </div>
+        <div class="gateway-footer">
+          <button class="save-button" @click=${() => this.saveExternalGatewaySettings()}>Save Gateway Settings</button>
+        </div>
+      </section>
+    `;
+  }
+
+  private renderGatewayInput(
+    key: keyof NonNullable<appstate.ISettingsState['settings']>,
+    label: string,
+    value: string,
+    placeholder: string,
+    hint: string,
+    type: 'text' | 'password' | 'number' = 'text',
+  ): TemplateResult {
+    return html`
+      <label class="gateway-field ${key === 'dcrouterGatewayUrl' ? 'full' : ''}">
+        <span class="field-label">${label}</span>
+        <input
+          type=${type}
+          .value=${value}
+          placeholder=${placeholder}
+          @input=${(event: Event) => this.updateGatewayDraft(key, (event.target as HTMLInputElement).value)}
+        />
+        <span class="field-hint">${hint}</span>
+      </label>
+    `;
+  }
+
+  private updateGatewayDraft(
+    key: keyof NonNullable<appstate.ISettingsState['settings']>,
+    value: string,
+  ): void {
+    const currentSettings = this.settingsState.settings || {} as NonNullable<appstate.ISettingsState['settings']>;
+    const nextValue = key === 'dcrouterTargetPort' ? Number(value) || 0 : value;
+    this.settingsState = {
+      ...this.settingsState,
+      settings: {
+        ...currentSettings,
+        [key]: nextValue,
+      },
+    };
+  }
+
+  private async saveExternalGatewaySettings(): Promise<void> {
+    const settings = this.settingsState.settings;
+    if (!settings) return;
+
+    await appstate.settingsStatePart.dispatchAction(appstate.updateSettingsAction, {
+      settings: {
+        dcrouterGatewayUrl: settings.dcrouterGatewayUrl || '',
+        dcrouterGatewayApiToken: settings.dcrouterGatewayApiToken || '',
+        dcrouterWorkHosterId: settings.dcrouterWorkHosterId || '',
+        dcrouterTargetHost: settings.dcrouterTargetHost || '',
+        dcrouterTargetPort: Number(settings.dcrouterTargetPort) || 80,
+      },
+    });
+  }
 }