public domain, max width, descriptions for dns

web/projects/shared/src/i18n/dictionaries/de.ts

@@ -509,13 +509,13 @@ export default {
   535: 'Gateway hinzufügen',
   536: 'Umbenennen',
   537: 'Zugriff',
-  538: 'Domains',
+  538: '',
   539: 'Zertifizierungsstellen',
   540: 'Domain',
   541: 'Gateway',
   543: 'Zertifizierungsstelle',
   544: 'Domain bearbeiten',
-  545: 'Keine Domains',
+  545: '',
   546: 'Anbieter',
   547: '',
   548: '',

web/projects/shared/src/i18n/dictionaries/en.ts

@@ -508,13 +508,13 @@ export const ENGLISH = {
   'Add gateway': 535, // as in, add a new network gateway to StartOS
   'Rename': 536,
   'Access': 537, // as in, public or private access, almost "permission"
-  'Domains': 538, // as in, internet domains
+  'Public Domains': 538, // as in, internet domains
   'Certificate Authorities': 539,
   'Domain': 540, // as in, an internat domain name
   'Gateway': 541, // as in, a device or software that connects two different networks
   'Certificate Authority': 543,
   'Edit domain': 544,
-  'No domains': 545,
+  'No public domains': 545,
   'Provider': 546,
   'View DNS': 547,
   'Clearnet Domains': 548,

web/projects/shared/src/i18n/dictionaries/es.ts

@@ -509,13 +509,13 @@ export default {
   535: 'Agregar puerta de enlace',
   536: 'Renombrar',
   537: 'Acceso',
-  538: 'Dominios',
+  538: '',
   539: 'Autoridades certificadoras',
   540: 'Dominio',
   541: 'Puerta de enlace',
   543: 'Autoridad certificadora',
   544: 'Editar dominio',
-  545: 'Sin dominios',
+  545: '',
   546: 'Proveedor',
   547: '',
   548: '',

web/projects/shared/src/i18n/dictionaries/fr.ts

@@ -509,13 +509,13 @@ export default {
   535: 'Ajouter une passerelle',
   536: 'Renommer',
   537: 'Accès',
-  538: 'Domaines',
+  538: '',
   539: 'Autorités de certification',
   540: 'Domaine',
   541: 'Passerelle',
   543: 'Autorité de certification',
   544: 'Modifier le domaine',
-  545: 'Aucun domaine',
+  545: '',
   546: 'Fournisseur',
   547: '',
   548: '',

web/projects/shared/src/i18n/dictionaries/pl.ts

@@ -509,13 +509,13 @@ export default {
   535: 'Dodaj bramę',
   536: 'Zmień nazwę',
   537: 'Dostęp',
-  538: 'Domeny',
+  538: '',
   539: 'Urzędy certyfikacji',
   540: 'Domena',
   541: 'Brama',
   543: 'Urząd certyfikacji',
   544: 'Edytuj domenę',
-  545: 'Brak domen',
+  545: '',
   546: 'Dostawca',
   547: '',
   548: '',

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,

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

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)
   }
 }
 

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()
   }
 

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,

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>

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,

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;

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,

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;

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%;

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',
     },
   ],