@serve.zone/dcrouter 13.4.2 → 13.7.0

package/ts_web/appstate.ts

@@ -117,7 +117,7 @@ export const configStatePart = await appState.getStatePart<IConfigState>(
 // Determine initial view from URL path
 const getInitialView = (): string => {
   const path = typeof window !== 'undefined' ? window.location.pathname : '/';
-  const validViews = ['overview', 'network', 'email', 'logs', 'access', 'security', 'certificates'];
+  const validViews = ['overview', 'network', 'email', 'logs', 'access', 'security', 'domains'];
   const segments = path.split('/').filter(Boolean);
   const view = segments[0];
   return validViews.includes(view) ? view : 'overview';
@@ -251,6 +251,34 @@ export const routeManagementStatePart = await appState.getStatePart<IRouteManage
   'soft'
 );
 
+// ============================================================================
+// Users State (read-only list of OpsServer user accounts)
+// ============================================================================
+
+export interface IUser {
+  id: string;
+  username: string;
+  role: string;
+}
+
+export interface IUsersState {
+  users: IUser[];
+  isLoading: boolean;
+  error: string | null;
+  lastUpdated: number;
+}
+
+export const usersStatePart = await appState.getStatePart<IUsersState>(
+  'users',
+  {
+    users: [],
+    isLoading: false,
+    error: null,
+    lastUpdated: 0,
+  },
+  'soft',
+);
+
 // Actions for state management
 interface IActionContext {
   identity: interfaces.data.IIdentity | null;
@@ -437,8 +465,9 @@ export const setActiveViewAction = uiStatePart.createAction<string>(async (state
     }, 100);
   }
 
-  // If switching to certificates view, ensure we fetch certificate data
-  if (viewName === 'certificates' && currentState.activeView !== 'certificates') {
+  // If switching to the Domains group, ensure we fetch certificate data
+  // (Certificates is a subview of Domains).
+  if (viewName === 'domains' && currentState.activeView !== 'domains') {
     setTimeout(() => {
       certificateStatePart.dispatchAction(fetchCertificateOverviewAction, null);
     }, 100);
@@ -1527,6 +1556,403 @@ export const deleteTargetAction = profilesTargetsStatePart.createAction<{
   }
 });
 
+// ============================================================================
+// Domains State (DNS providers + domains + records)
+// ============================================================================
+
+export interface IDomainsState {
+  providers: interfaces.data.IDnsProviderPublic[];
+  domains: interfaces.data.IDomain[];
+  records: interfaces.data.IDnsRecord[];
+  /** id of the currently-selected domain in the DNS records subview. */
+  selectedDomainId: string | null;
+  isLoading: boolean;
+  error: string | null;
+  lastUpdated: number;
+}
+
+export const domainsStatePart = await appState.getStatePart<IDomainsState>(
+  'domains',
+  {
+    providers: [],
+    domains: [],
+    records: [],
+    selectedDomainId: null,
+    isLoading: false,
+    error: null,
+    lastUpdated: 0,
+  },
+  'soft',
+);
+
+export const fetchDomainsAndProvidersAction = domainsStatePart.createAction(
+  async (statePartArg): Promise<IDomainsState> => {
+    const context = getActionContext();
+    const currentState = statePartArg.getState()!;
+    if (!context.identity) return currentState;
+
+    try {
+      const providersRequest = new plugins.domtools.plugins.typedrequest.TypedRequest<
+        interfaces.requests.IReq_GetDnsProviders
+      >('/typedrequest', 'getDnsProviders');
+      const domainsRequest = new plugins.domtools.plugins.typedrequest.TypedRequest<
+        interfaces.requests.IReq_GetDomains
+      >('/typedrequest', 'getDomains');
+
+      const [providersResponse, domainsResponse] = await Promise.all([
+        providersRequest.fire({ identity: context.identity }),
+        domainsRequest.fire({ identity: context.identity }),
+      ]);
+
+      return {
+        ...currentState,
+        providers: providersResponse.providers,
+        domains: domainsResponse.domains,
+        isLoading: false,
+        error: null,
+        lastUpdated: Date.now(),
+      };
+    } catch (error: unknown) {
+      return {
+        ...currentState,
+        isLoading: false,
+        error: error instanceof Error ? error.message : 'Failed to fetch domains/providers',
+      };
+    }
+  },
+);
+
+export const fetchDnsRecordsForDomainAction = domainsStatePart.createAction<{ domainId: string }>(
+  async (statePartArg, dataArg): Promise<IDomainsState> => {
+    const context = getActionContext();
+    const currentState = statePartArg.getState()!;
+    if (!context.identity) return currentState;
+
+    try {
+      const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+        interfaces.requests.IReq_GetDnsRecords
+      >('/typedrequest', 'getDnsRecords');
+      const response = await request.fire({
+        identity: context.identity,
+        domainId: dataArg.domainId,
+      });
+      return {
+        ...currentState,
+        records: response.records,
+        selectedDomainId: dataArg.domainId,
+        error: null,
+      };
+    } catch (error: unknown) {
+      return {
+        ...currentState,
+        error: error instanceof Error ? error.message : 'Failed to fetch DNS records',
+      };
+    }
+  },
+);
+
+export const createDnsProviderAction = domainsStatePart.createAction<{
+  name: string;
+  type: interfaces.data.TDnsProviderType;
+  credentials: interfaces.data.TDnsProviderCredentials;
+}>(async (statePartArg, dataArg, actionContext): Promise<IDomainsState> => {
+  const context = getActionContext();
+  try {
+    const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+      interfaces.requests.IReq_CreateDnsProvider
+    >('/typedrequest', 'createDnsProvider');
+    const response = await request.fire({
+      identity: context.identity!,
+      name: dataArg.name,
+      type: dataArg.type,
+      credentials: dataArg.credentials,
+    });
+    if (!response.success) {
+      return {
+        ...statePartArg.getState()!,
+        error: response.message || 'Failed to create provider',
+      };
+    }
+    return await actionContext!.dispatch(fetchDomainsAndProvidersAction, null);
+  } catch (error: unknown) {
+    return {
+      ...statePartArg.getState()!,
+      error: error instanceof Error ? error.message : 'Failed to create provider',
+    };
+  }
+});
+
+export const updateDnsProviderAction = domainsStatePart.createAction<{
+  id: string;
+  name?: string;
+  credentials?: interfaces.data.TDnsProviderCredentials;
+}>(async (statePartArg, dataArg, actionContext): Promise<IDomainsState> => {
+  const context = getActionContext();
+  try {
+    const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+      interfaces.requests.IReq_UpdateDnsProvider
+    >('/typedrequest', 'updateDnsProvider');
+    const response = await request.fire({
+      identity: context.identity!,
+      id: dataArg.id,
+      name: dataArg.name,
+      credentials: dataArg.credentials,
+    });
+    if (!response.success) {
+      return {
+        ...statePartArg.getState()!,
+        error: response.message || 'Failed to update provider',
+      };
+    }
+    return await actionContext!.dispatch(fetchDomainsAndProvidersAction, null);
+  } catch (error: unknown) {
+    return {
+      ...statePartArg.getState()!,
+      error: error instanceof Error ? error.message : 'Failed to update provider',
+    };
+  }
+});
+
+export const deleteDnsProviderAction = domainsStatePart.createAction<{ id: string; force?: boolean }>(
+  async (statePartArg, dataArg, actionContext): Promise<IDomainsState> => {
+    const context = getActionContext();
+    try {
+      const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+        interfaces.requests.IReq_DeleteDnsProvider
+      >('/typedrequest', 'deleteDnsProvider');
+      const response = await request.fire({
+        identity: context.identity!,
+        id: dataArg.id,
+        force: dataArg.force,
+      });
+      if (!response.success) {
+        return {
+          ...statePartArg.getState()!,
+          error: response.message || 'Failed to delete provider',
+        };
+      }
+      return await actionContext!.dispatch(fetchDomainsAndProvidersAction, null);
+    } catch (error: unknown) {
+      return {
+        ...statePartArg.getState()!,
+        error: error instanceof Error ? error.message : 'Failed to delete provider',
+      };
+    }
+  },
+);
+
+export const testDnsProviderAction = domainsStatePart.createAction<{ id: string }>(
+  async (statePartArg, dataArg, actionContext): Promise<IDomainsState> => {
+    const context = getActionContext();
+    try {
+      const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+        interfaces.requests.IReq_TestDnsProvider
+      >('/typedrequest', 'testDnsProvider');
+      await request.fire({ identity: context.identity!, id: dataArg.id });
+      return await actionContext!.dispatch(fetchDomainsAndProvidersAction, null);
+    } catch (error: unknown) {
+      return {
+        ...statePartArg.getState()!,
+        error: error instanceof Error ? error.message : 'Failed to test provider',
+      };
+    }
+  },
+);
+
+/** One-shot fetch for the import-domain modal. Does NOT modify state. */
+export async function fetchProviderDomains(
+  providerId: string,
+): Promise<{ success: boolean; domains?: interfaces.data.IProviderDomainListing[]; message?: string }> {
+  const context = getActionContext();
+  if (!context.identity) return { success: false, message: 'Not authenticated' };
+  const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+    interfaces.requests.IReq_ListProviderDomains
+  >('/typedrequest', 'listProviderDomains');
+  return await request.fire({ identity: context.identity, providerId });
+}
+
+export const createManualDomainAction = domainsStatePart.createAction<{
+  name: string;
+  description?: string;
+}>(async (statePartArg, dataArg, actionContext): Promise<IDomainsState> => {
+  const context = getActionContext();
+  try {
+    const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+      interfaces.requests.IReq_CreateDomain
+    >('/typedrequest', 'createDomain');
+    const response = await request.fire({
+      identity: context.identity!,
+      name: dataArg.name,
+      description: dataArg.description,
+    });
+    if (!response.success) {
+      return { ...statePartArg.getState()!, error: response.message || 'Failed to create domain' };
+    }
+    return await actionContext!.dispatch(fetchDomainsAndProvidersAction, null);
+  } catch (error: unknown) {
+    return {
+      ...statePartArg.getState()!,
+      error: error instanceof Error ? error.message : 'Failed to create domain',
+    };
+  }
+});
+
+export const importDomainsFromProviderAction = domainsStatePart.createAction<{
+  providerId: string;
+  domainNames: string[];
+}>(async (statePartArg, dataArg, actionContext): Promise<IDomainsState> => {
+  const context = getActionContext();
+  try {
+    const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+      interfaces.requests.IReq_ImportDomain
+    >('/typedrequest', 'importDomain');
+    const response = await request.fire({
+      identity: context.identity!,
+      providerId: dataArg.providerId,
+      domainNames: dataArg.domainNames,
+    });
+    if (!response.success) {
+      return { ...statePartArg.getState()!, error: response.message || 'Failed to import domains' };
+    }
+    return await actionContext!.dispatch(fetchDomainsAndProvidersAction, null);
+  } catch (error: unknown) {
+    return {
+      ...statePartArg.getState()!,
+      error: error instanceof Error ? error.message : 'Failed to import domains',
+    };
+  }
+});
+
+export const deleteDomainAction = domainsStatePart.createAction<{ id: string }>(
+  async (statePartArg, dataArg, actionContext): Promise<IDomainsState> => {
+    const context = getActionContext();
+    try {
+      const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+        interfaces.requests.IReq_DeleteDomain
+      >('/typedrequest', 'deleteDomain');
+      const response = await request.fire({ identity: context.identity!, id: dataArg.id });
+      if (!response.success) {
+        return { ...statePartArg.getState()!, error: response.message || 'Failed to delete domain' };
+      }
+      return await actionContext!.dispatch(fetchDomainsAndProvidersAction, null);
+    } catch (error: unknown) {
+      return {
+        ...statePartArg.getState()!,
+        error: error instanceof Error ? error.message : 'Failed to delete domain',
+      };
+    }
+  },
+);
+
+export const syncDomainAction = domainsStatePart.createAction<{ id: string }>(
+  async (statePartArg, dataArg, actionContext): Promise<IDomainsState> => {
+    const context = getActionContext();
+    try {
+      const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+        interfaces.requests.IReq_SyncDomain
+      >('/typedrequest', 'syncDomain');
+      const response = await request.fire({ identity: context.identity!, id: dataArg.id });
+      if (!response.success) {
+        return { ...statePartArg.getState()!, error: response.message || 'Failed to sync domain' };
+      }
+      return await actionContext!.dispatch(fetchDomainsAndProvidersAction, null);
+    } catch (error: unknown) {
+      return {
+        ...statePartArg.getState()!,
+        error: error instanceof Error ? error.message : 'Failed to sync domain',
+      };
+    }
+  },
+);
+
+export const createDnsRecordAction = domainsStatePart.createAction<{
+  domainId: string;
+  name: string;
+  type: interfaces.data.TDnsRecordType;
+  value: string;
+  ttl?: number;
+  proxied?: boolean;
+}>(async (statePartArg, dataArg, actionContext): Promise<IDomainsState> => {
+  const context = getActionContext();
+  try {
+    const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+      interfaces.requests.IReq_CreateDnsRecord
+    >('/typedrequest', 'createDnsRecord');
+    const response = await request.fire({
+      identity: context.identity!,
+      domainId: dataArg.domainId,
+      name: dataArg.name,
+      type: dataArg.type,
+      value: dataArg.value,
+      ttl: dataArg.ttl,
+      proxied: dataArg.proxied,
+    });
+    if (!response.success) {
+      return { ...statePartArg.getState()!, error: response.message || 'Failed to create record' };
+    }
+    return await actionContext!.dispatch(fetchDnsRecordsForDomainAction, { domainId: dataArg.domainId });
+  } catch (error: unknown) {
+    return {
+      ...statePartArg.getState()!,
+      error: error instanceof Error ? error.message : 'Failed to create record',
+    };
+  }
+});
+
+export const updateDnsRecordAction = domainsStatePart.createAction<{
+  id: string;
+  domainId: string;
+  name?: string;
+  value?: string;
+  ttl?: number;
+  proxied?: boolean;
+}>(async (statePartArg, dataArg, actionContext): Promise<IDomainsState> => {
+  const context = getActionContext();
+  try {
+    const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+      interfaces.requests.IReq_UpdateDnsRecord
+    >('/typedrequest', 'updateDnsRecord');
+    const response = await request.fire({
+      identity: context.identity!,
+      id: dataArg.id,
+      name: dataArg.name,
+      value: dataArg.value,
+      ttl: dataArg.ttl,
+      proxied: dataArg.proxied,
+    });
+    if (!response.success) {
+      return { ...statePartArg.getState()!, error: response.message || 'Failed to update record' };
+    }
+    return await actionContext!.dispatch(fetchDnsRecordsForDomainAction, { domainId: dataArg.domainId });
+  } catch (error: unknown) {
+    return {
+      ...statePartArg.getState()!,
+      error: error instanceof Error ? error.message : 'Failed to update record',
+    };
+  }
+});
+
+export const deleteDnsRecordAction = domainsStatePart.createAction<{ id: string; domainId: string }>(
+  async (statePartArg, dataArg, actionContext): Promise<IDomainsState> => {
+    const context = getActionContext();
+    try {
+      const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+        interfaces.requests.IReq_DeleteDnsRecord
+      >('/typedrequest', 'deleteDnsRecord');
+      const response = await request.fire({ identity: context.identity!, id: dataArg.id });
+      if (!response.success) {
+        return { ...statePartArg.getState()!, error: response.message || 'Failed to delete record' };
+      }
+      return await actionContext!.dispatch(fetchDnsRecordsForDomainAction, { domainId: dataArg.domainId });
+    } catch (error: unknown) {
+      return {
+        ...statePartArg.getState()!,
+        error: error instanceof Error ? error.message : 'Failed to delete record',
+      };
+    }
+  },
+);
+
 // ============================================================================
 // Route Management Actions
 // ============================================================================
@@ -1756,6 +2182,35 @@ export const fetchApiTokensAction = routeManagementStatePart.createAction(async
   }
 });
 
+// Users (read-only list)
+export const fetchUsersAction = usersStatePart.createAction(async (statePartArg): Promise<IUsersState> => {
+  const context = getActionContext();
+  const currentState = statePartArg.getState()!;
+  if (!context.identity) return currentState;
+
+  try {
+    const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+      interfaces.requests.IReq_ListUsers
+    >('/typedrequest', 'listUsers');
+
+    const response = await request.fire({
+      identity: context.identity,
+    });
+
+    return {
+      ...currentState,
+      users: response.users,
+      error: null,
+      lastUpdated: Date.now(),
+    };
+  } catch (error) {
+    return {
+      ...currentState,
+      error: error instanceof Error ? error.message : 'Failed to fetch users',
+    };
+  }
+});
+
 export async function createApiToken(name: string, scopes: interfaces.data.TApiTokenScope[], expiresInDays?: number | null) {
   const context = getActionContext();
   const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
@@ -2019,8 +2474,8 @@ async function dispatchCombinedRefreshActionInner() {
       }
     }
 
-    // Refresh certificate data if on certificates view
-    if (currentView === 'certificates') {
+    // Refresh certificate data if on Domains > Certificates subview
+    if (currentView === 'domains' && currentSubview === 'certificates') {
       try {
         await certificateStatePart.dispatchAction(fetchCertificateOverviewAction, null);
       } catch (error) {

package/ts_web/elements/access/index.ts

@@ -1 +1,2 @@
 export * from './ops-view-apitokens.js';
+export * from './ops-view-users.js';

package/ts_web/elements/access/ops-view-apitokens.ts

@@ -100,7 +100,7 @@ export class OpsViewApiTokens extends DeesElement {
     const { apiTokens } = this.routeState;
 
     return html`
-      <dees-heading level="2">API Tokens</dees-heading>
+      <dees-heading level="3">API Tokens</dees-heading>
 
       <div class="apiTokensContainer">
         <dees-table

package/ts_web/elements/access/ops-view-users.ts

@@ -0,0 +1,140 @@
+import * as appstate from '../../appstate.js';
+import { viewHostCss } from '../shared/css.js';
+
+import {
+  DeesElement,
+  css,
+  cssManager,
+  customElement,
+  html,
+  state,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+@customElement('ops-view-users')
+export class OpsViewUsers extends DeesElement {
+  @state() accessor usersState: appstate.IUsersState = {
+    users: [],
+    isLoading: false,
+    error: null,
+    lastUpdated: 0,
+  };
+
+  @state() accessor loginState: appstate.ILoginState = {
+    identity: null,
+    isLoggedIn: false,
+  };
+
+  constructor() {
+    super();
+    const usersSub = appstate.usersStatePart
+      .select((s) => s)
+      .subscribe((usersState) => {
+        this.usersState = usersState;
+      });
+    this.rxSubscriptions.push(usersSub);
+
+    const loginSub = appstate.loginStatePart
+      .select((s) => s)
+      .subscribe((loginState) => {
+        this.loginState = loginState;
+        // Re-fetch users when user logs in (fixes race condition where
+        // the view is created before authentication completes)
+        if (loginState.isLoggedIn) {
+          appstate.usersStatePart.dispatchAction(appstate.fetchUsersAction, null);
+        }
+      });
+    this.rxSubscriptions.push(loginSub);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+    css`
+      .usersContainer {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+      }
+
+      .roleBadge {
+        display: inline-flex;
+        align-items: center;
+        padding: 3px 10px;
+        border-radius: 12px;
+        font-size: 12px;
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        text-transform: uppercase;
+      }
+
+      .roleBadge.admin {
+        background: ${cssManager.bdTheme('#fef3c7', '#451a03')};
+        color: ${cssManager.bdTheme('#92400e', '#fbbf24')};
+      }
+
+      .roleBadge.user {
+        background: ${cssManager.bdTheme('#e0f2fe', '#0c4a6e')};
+        color: ${cssManager.bdTheme('#075985', '#7dd3fc')};
+      }
+
+      .sessionBadge {
+        display: inline-flex;
+        align-items: center;
+        padding: 3px 10px;
+        border-radius: 12px;
+        font-size: 12px;
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        text-transform: uppercase;
+        background: ${cssManager.bdTheme('#dcfce7', '#14532d')};
+        color: ${cssManager.bdTheme('#166534', '#4ade80')};
+      }
+
+      .userIdCell {
+        font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
+        font-size: 11px;
+        color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const { users } = this.usersState;
+    const currentUserId = this.loginState.identity?.userId;
+
+    return html`
+      <dees-heading level="3">Users</dees-heading>
+
+      <div class="usersContainer">
+        <dees-table
+          .heading1=${'Users'}
+          .heading2=${'OpsServer user accounts'}
+          .data=${users}
+          .dataName=${'user'}
+          .searchable=${true}
+          .showColumnFilters=${true}
+          .displayFunction=${(user: appstate.IUser) => ({
+            ID: html`<span class="userIdCell">${user.id}</span>`,
+            Username: user.username,
+            Role: this.renderRoleBadge(user.role),
+            Session: user.id === currentUserId
+              ? html`<span class="sessionBadge">current</span>`
+              : '',
+          })}
+        ></dees-table>
+      </div>
+    `;
+  }
+
+  private renderRoleBadge(role: string): TemplateResult {
+    const cls = role === 'admin' ? 'admin' : 'user';
+    return html`<span class="roleBadge ${cls}">${role}</span>`;
+  }
+
+  async firstUpdated() {
+    if (this.loginState.isLoggedIn) {
+      await appstate.usersStatePart.dispatchAction(appstate.fetchUsersAction, null);
+    }
+  }
+}