public domain, max width, descriptions for dns

2026-03-30 04:01:58 +00:00 · 2025-08-11 10:03:35 -06:00
parent da9a1b99d9
commit e8b7a35d43
17 changed files with 83 additions and 42 deletions
--- a/web/projects/ui/src/app/routes/portal/routes/system/routes/authorities/authorities.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/routes/authorities/authorities.component.ts
@@ -42,6 +42,11 @@ import { AuthoritiesTableComponent } from './table.component'
      <authorities-table />
    </section>
  `,
+  styles: `
+    :host {
+      max-width: 64rem;
+    }
+  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
    TuiButton,
--- a/web/projects/ui/src/app/routes/portal/routes/system/routes/authorities/item.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/routes/authorities/item.component.ts
@@ -17,8 +17,8 @@ import { Authority, AuthorityService } from './authority.service'
  selector: 'tr[authority]',
  template: `
    @if (authority(); as authority) {
-      <td>{{ authority.name }}</td>
-      <td>{{ authority.url || '-' }}</td>
+      <td [style.width.rem]="14">{{ authority.name }}</td>
+      <td [style.width.rem]="21">{{ authority.url || '-' }}</td>
      <td class="hidden">{{ authority.contact?.join(', ') || '-' }}</td>
      <td>
        <button
--- a/web/projects/ui/src/app/routes/portal/routes/system/routes/domains/dns.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/routes/domains/dns.component.ts
@@ -7,12 +7,7 @@ import {
  signal,
 } from '@angular/core'
 import { FormsModule } from '@angular/forms'
-import {
-  DialogService,
-  ErrorService,
-  i18nKey,
-  i18nPipe,
-} from '@start9labs/shared'
+import { ErrorService, i18nKey, i18nPipe } from '@start9labs/shared'
 import { TuiButton, TuiDialogContext, TuiIcon } from '@taiga-ui/core'
 import {
  TuiButtonLoading,
@@ -35,13 +30,18 @@ import { MappedDomain } from './domain.service'
    @if (context.data.gateway.ipInfo?.deviceType !== 'wireguard') {
      <label>
        IP
-        <input type="checkbox" tuiSwitch [(ngModel)]="mode" />
+        <input
+          type="checkbox"
+          tuiSwitch
+          [(ngModel)]="ddns"
+          (ngModelChange)="reset()"
+        />
        Dynamic DNS
      </label>
    }

-    <table [appTable]="[$any('Record'), $any('Host'), 'Value', 'Purpose']">
-      @if (mode) {
+    <table [appTable]="['Type', $any('Host'), 'Value', 'Purpose']">
+      @if (ddns) {
        <tr>
          <td>
            @if (root() !== undefined; as $implicit) {
@@ -54,7 +54,7 @@ import { MappedDomain } from './domain.service'
          </td>
          <td>{{ subdomain() || '@' }}</td>
          <td>[DDNS Address]</td>
-          <td></td>
+          <td>{{ purpose().root }}</td>
        </tr>
        <tr>
          <td>
@@ -68,7 +68,7 @@ import { MappedDomain } from './domain.service'
          </td>
          <td>{{ subdomain() ? '*.' + subdomain() : '*' }}</td>
          <td>[DDNS Address]</td>
-          <td></td>
+          <td>{{ purpose().wildcard }}</td>
        </tr>
      } @else {
        <tr>
@@ -83,7 +83,7 @@ import { MappedDomain } from './domain.service'
          </td>
          <td>{{ subdomain() || '@' }}</td>
          <td>{{ wanIp }}</td>
-          <td></td>
+          <td>{{ purpose().root }}</td>
        </tr>
        <tr>
          <td>
@@ -97,7 +97,7 @@ import { MappedDomain } from './domain.service'
          </td>
          <td>{{ subdomain() ? '*.' + subdomain() : '*' }}</td>
          <td>{{ wanIp }}</td>
-          <td></td>
+          <td>{{ purpose().wildcard }}</td>
        </tr>
      }
    </table>
@@ -150,9 +150,8 @@ import { MappedDomain } from './domain.service'
 export class DnsComponent {
  private readonly errorService = inject(ErrorService)
  private readonly api = inject(ApiService)
-  private readonly dialog = inject(DialogService)

-  mode = false
+  ddns = false

  readonly context = injectContext<TuiDialogContext<void, MappedDomain>>()

@@ -161,7 +160,13 @@ export class DnsComponent {
  readonly root = signal<boolean | undefined>(undefined)
  readonly wildcard = signal<boolean | undefined>(undefined)

+  readonly purpose = computed(() => ({
+    root: this.context.data.fqdn,
+    wildcard: `subdomains of ${this.context.data.fqdn}`,
+  }))
+
  async testDns() {
+    this.reset()
    this.loading.set(true)

    try {
@@ -181,14 +186,9 @@ export class DnsComponent {
    }
  }

-  description(subdomain: boolean) {
-    const message = subdomain
-      ? `This DNS record routes ${this.context.data.fqdn} (no subdomain) to your server.`
-      : `This DNS record routes subdomains of ${this.context.data.fqdn} to your server.`
-
-    this.dialog
-      .openAlert(message as i18nKey, { label: 'Purpose' as i18nKey })
-      .subscribe()
+  reset() {
+    this.root.set(undefined)
+    this.wildcard.set(undefined)
  }
 }

--- a/web/projects/ui/src/app/routes/portal/routes/system/routes/domains/domain.service.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/routes/domains/domain.service.ts
@@ -142,7 +142,11 @@ export class DomainService {

  showDns(domain: MappedDomain) {
    this.dialog
-      .openComponent(DNS, { label: 'DNS Records' as i18nKey, data: domain })
+      .openComponent(DNS, {
+        label: 'DNS Records' as i18nKey,
+        size: 'l',
+        data: domain,
+      })
      .subscribe()
  }

--- a/web/projects/ui/src/app/routes/portal/routes/system/routes/domains/domains.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/routes/domains/domains.component.ts
@@ -12,12 +12,12 @@ import { DomainsTableComponent } from './table.component'
      <a routerLink=".." tuiIconButton iconStart="@tui.arrow-left">
        {{ 'Back' | i18n }}
      </a>
-      {{ 'Domains' | i18n }}
+      {{ 'Public Domains' | i18n }}
    </ng-container>

    <section class="g-card">
      <header>
-        {{ 'Domains' | i18n }}
+        {{ 'Public Domains' | i18n }}
        <a
          tuiIconButton
          size="xs"
@@ -45,7 +45,7 @@ import { DomainsTableComponent } from './table.component'
  `,
  styles: `
    :host {
-      max-width: 50rem;
+      max-width: 48rem;
    }
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
--- a/web/projects/ui/src/app/routes/portal/routes/system/routes/domains/table.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/routes/domains/table.component.ts
@@ -17,7 +17,7 @@ import { DomainService } from './domain.service'
          <td [attr.colspan]="3">
            @if (domainService.data()?.domains) {
              <app-placeholder icon="@tui.globe">
-                {{ 'No domains' | i18n }}
+                {{ 'No public domains' | i18n }}
              </app-placeholder>
            } @else {
              <div [tuiSkeleton]="true">{{ 'Loading' | i18n }}</div>
--- a/web/projects/ui/src/app/routes/portal/routes/system/routes/gateways/gateways.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/routes/gateways/gateways.component.ts
@@ -51,6 +51,11 @@ import { ISB } from '@start9labs/start-sdk'
      <gateways-table />
    </section>
  `,
+  styles: `
+    :host {
+      max-width: 64rem;
+    }
+  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
    CommonModule,
--- a/web/projects/ui/src/app/routes/portal/routes/system/routes/gateways/item.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/routes/gateways/item.component.ts
@@ -29,7 +29,9 @@ import { GatewayPlus } from 'src/app/services/gateway.service'
  selector: 'tr[gateway]',
  template: `
    @if (gateway(); as gateway) {
-      <td [style.grid-column]="'span 2'">{{ gateway.ipInfo.name }}</td>
+      <td class="name">
+        {{ gateway.ipInfo.name }}
+      </td>
      <td class="type">
        @if (gateway.ipInfo.deviceType; as type) {
          {{ type }} ({{
@@ -90,9 +92,21 @@ import { GatewayPlus } from 'src/app/services/gateway.service'
      text-align: right;
    }

+    .name {
+      width: 14rem;
+    }
+
+    .type {
+      width: 14rem;
+    }
+
    :host-context(tui-root._mobile) {
      grid-template-columns: min-content 1fr min-content;

+      .name {
+        grid-column: span 2;
+      }
+
      .type {
        grid-column: span 2;
        order: -1;
--- a/web/projects/ui/src/app/routes/portal/routes/system/routes/sessions/sessions.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/routes/sessions/sessions.component.ts
@@ -44,6 +44,11 @@ import { SessionsTableComponent } from './table.component'
      <div #table [sessions]="others"></div>
    </section>
  `,
+  styles: `
+    :host {
+      max-width: 80rem;
+    }
+  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [
    CommonModule,
--- a/web/projects/ui/src/app/routes/portal/routes/system/routes/ssh/ssh.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/routes/ssh/ssh.component.ts
@@ -70,6 +70,10 @@ import { SSHTableComponent } from './table.component'
    </section>
  `,
  styles: `
+    :host {
+      max-width: 70rem;
+    }
+
    :host-context(tui-root._mobile) {
      [tuiButton] {
        font-size: 0;
--- a/web/projects/ui/src/app/routes/portal/routes/system/routes/ssh/table.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/routes/ssh/table.component.ts
@@ -72,6 +72,10 @@ import { SSHKey } from 'src/app/services/api/api.types'
      }
    }

+    .date {
+      width: 12rem;
+    }
+
    input {
      position: absolute;
      top: 50%;
--- a/web/projects/ui/src/app/routes/portal/routes/system/system.const.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/system.const.ts
@@ -48,7 +48,7 @@ export const SYSTEM_MENU = [
    },
    {
      icon: '@tui.globe',
-      item: 'Domains',
+      item: 'Public Domains',
      link: 'domains',
    },
  ],