port labels and move logout to settings

web/projects/start-tunnel/src/app/routes/home/components/nav.ts

@@ -1,10 +1,7 @@
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
-import { Router, RouterLink, RouterLinkActive } from '@angular/router'
-import { ErrorService, LoadingService } from '@start9labs/shared'
+import { RouterLink, RouterLinkActive } from '@angular/router'
 import { TuiButton } from '@taiga-ui/core'
 import { TuiBadgeNotification } from '@taiga-ui/kit'
-import { ApiService } from 'src/app/services/api/api.service'
-import { AuthService } from 'src/app/services/auth.service'
 import { SidebarService } from 'src/app/services/sidebar.service'
 import { UpdateService } from 'src/app/services/update.service'
 
@@ -38,15 +35,6 @@ import { UpdateService } from 'src/app/services/update.service'
         }
       </a>
     </div>
-    <button
-      tuiButton
-      iconStart="@tui.log-out"
-      appearance="neutral"
-      size="s"
-      (click)="logout()"
-    >
-      Logout
-    </button>
   `,
   styles: `
     :host {
@@ -79,12 +67,6 @@ import { UpdateService } from 'src/app/services/update.service'
       }
     }
 
-    button {
-      width: 100%;
-      border-radius: 0;
-      justify-content: flex-start;
-    }
-
     :host-context(tui-root._mobile) {
       position: absolute;
       top: 3.5rem;
@@ -106,12 +88,7 @@ import { UpdateService } from 'src/app/services/update.service'
   },
 })
 export class Nav {
-  private readonly service = inject(AuthService)
-  private readonly router = inject(Router)
   protected readonly sidebars = inject(SidebarService)
-  protected readonly api = inject(ApiService)
-  private readonly loader = inject(LoadingService)
-  private readonly errorService = inject(ErrorService)
   protected readonly update = inject(UpdateService)
 
   protected readonly routes = [
@@ -131,18 +108,4 @@ export class Nav {
       link: 'port-forwards',
     },
   ] as const
-
-  protected async logout() {
-    const loader = this.loader.open().subscribe()
-    try {
-      await this.api.logout()
-      this.service.authenticated.set(false)
-      this.router.navigate(['.'])
-    } catch (e: any) {
-      console.error(e)
-      this.errorService.handleError(e)
-    } finally {
-      loader.unsubscribe()
-    }
-  }
 }

web/projects/start-tunnel/src/app/routes/home/routes/port-forwards/add.ts

@@ -36,6 +36,11 @@ import { MappedDevice, PortForwardsData } from './utils'
 @Component({
   template: `
     <form tuiForm [formGroup]="form">
+      <tui-textfield>
+        <label tuiLabel>Label</label>
+        <input tuiTextfield formControlName="label" />
+      </tui-textfield>
+      <tui-error formControlName="label" [error]="[] | tuiFieldError | async" />
       <tui-textfield tuiChevron>
         <label tuiLabel>External IP</label>
         @if (mobile) {
@@ -161,6 +166,7 @@ export class PortForwardsAdd {
     injectContext<TuiDialogContext<void, PortForwardsData>>()
 
   protected readonly form = inject(NonNullableFormBuilder).group({
+    label: ['', Validators.required],
     externalip: ['', Validators.required],
     externalport: [null as number | null, Validators.required],
     device: [null as MappedDevice | null, Validators.required],
@@ -185,19 +191,21 @@ export class PortForwardsAdd {
 
     const loader = this.loading.open().subscribe()
 
-    const { externalip, externalport, device, internalport, also80 } =
+    const { label, externalip, externalport, device, internalport, also80 } =
       this.form.getRawValue()
 
     try {
       await this.api.addForward({
         source: `${externalip}:${externalport}`,
         target: `${device!.ip}:${internalport}`,
+        label,
       })
 
       if (externalport === 443 && internalport === 443 && also80) {
         await this.api.addForward({
           source: `${externalip}:80`,
           target: `${device!.ip}:443`,
+          label: `${label} (HTTP redirect)`,
         })
       }
     } catch (e: any) {

web/projects/start-tunnel/src/app/routes/home/routes/port-forwards/edit-label.ts

@@ -0,0 +1,83 @@
+import { AsyncPipe } from '@angular/common'
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core'
+import {
+  NonNullableFormBuilder,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms'
+import { ErrorService, LoadingService } from '@start9labs/shared'
+import {
+  TuiButton,
+  TuiDialogContext,
+  TuiError,
+  TuiTextfield,
+} from '@taiga-ui/core'
+import { TuiFieldErrorPipe } from '@taiga-ui/kit'
+import { TuiForm } from '@taiga-ui/layout'
+import { injectContext, PolymorpheusComponent } from '@taiga-ui/polymorpheus'
+import { ApiService } from 'src/app/services/api/api.service'
+
+export interface EditLabelData {
+  readonly source: string
+  readonly label: string
+}
+
+@Component({
+  template: `
+    <form tuiForm [formGroup]="form">
+      <tui-textfield>
+        <label tuiLabel>Label</label>
+        <input tuiTextfield formControlName="label" />
+      </tui-textfield>
+      <tui-error formControlName="label" [error]="[] | tuiFieldError | async" />
+      <footer>
+        <button tuiButton [disabled]="form.invalid" (click)="onSave()">
+          Save
+        </button>
+      </footer>
+    </form>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    AsyncPipe,
+    ReactiveFormsModule,
+    TuiButton,
+    TuiError,
+    TuiFieldErrorPipe,
+    TuiTextfield,
+    TuiForm,
+  ],
+})
+export class PortForwardsEditLabel {
+  private readonly api = inject(ApiService)
+  private readonly loading = inject(LoadingService)
+  private readonly errorService = inject(ErrorService)
+
+  protected readonly context =
+    injectContext<TuiDialogContext<void, EditLabelData>>()
+
+  protected readonly form = inject(NonNullableFormBuilder).group({
+    label: [this.context.data.label, Validators.required],
+  })
+
+  protected async onSave() {
+    const loader = this.loading.open().subscribe()
+
+    try {
+      await this.api.updateForwardLabel({
+        source: this.context.data.source,
+        label: this.form.getRawValue().label,
+      })
+    } catch (e: any) {
+      console.error(e)
+      this.errorService.handleError(e)
+    } finally {
+      loader.unsubscribe()
+      this.context.$implicit.complete()
+    }
+  }
+}
+
+export const PORT_FORWARDS_EDIT_LABEL = new PolymorpheusComponent(
+  PortForwardsEditLabel,
+)

web/projects/start-tunnel/src/app/routes/home/routes/port-forwards/index.ts

@@ -6,15 +6,20 @@ import {
   Signal,
 } from '@angular/core'
 import { toSignal } from '@angular/core/rxjs-interop'
-import { ReactiveFormsModule } from '@angular/forms'
 import { ErrorService, LoadingService } from '@start9labs/shared'
 import { utils } from '@start9labs/start-sdk'
-import { TuiButton } from '@taiga-ui/core'
+import {
+  TuiButton,
+  TuiDataList,
+  TuiDropdown,
+  TuiTextfield,
+} from '@taiga-ui/core'
 import { TuiDialogService } from '@taiga-ui/experimental'
 import { TUI_CONFIRM } from '@taiga-ui/kit'
 import { PatchDB } from 'patch-db-client'
 import { filter, map } from 'rxjs'
 import { PORT_FORWARDS_ADD } from 'src/app/routes/home/routes/port-forwards/add'
+import { PORT_FORWARDS_EDIT_LABEL } from 'src/app/routes/home/routes/port-forwards/edit-label'
 import { ApiService } from 'src/app/services/api/api.service'
 import { TunnelData } from 'src/app/services/patch-db/data-model'
 
@@ -25,6 +30,7 @@ import { MappedDevice, MappedForward } from './utils'
     <table class="g-table">
       <thead>
         <tr>
+          <th>Label</th>
           <th>External IP</th>
           <th>External Port</th>
           <th>Device</th>
@@ -39,6 +45,7 @@ import { MappedDevice, MappedForward } from './utils'
       <tbody>
         @for (forward of forwards(); track $index) {
           <tr>
+            <td>{{ forward.label || '—' }}</td>
             <td>{{ forward.externalip }}</td>
             <td>{{ forward.externalport }}</td>
             <td>{{ forward.device.name }}</td>
@@ -47,11 +54,30 @@ import { MappedDevice, MappedForward } from './utils'
               <button
                 tuiIconButton
                 size="xs"
+                tuiDropdown
+                tuiDropdownOpen
                 appearance="flat-grayscale"
-                iconStart="@tui.trash"
-                (click)="onDelete(forward)"
+                iconStart="@tui.ellipsis-vertical"
               >
                 Actions
+                <tui-data-list *tuiTextfieldDropdown size="s">
+                  <button
+                    tuiOption
+                    iconStart="@tui.pencil"
+                    new
+                    (click)="onEditLabel(forward)"
+                  >
+                    {{ forward.label ? 'Rename' : 'Add label' }}
+                  </button>
+                  <button
+                    tuiOption
+                    iconStart="@tui.trash"
+                    new
+                    (click)="onDelete(forward)"
+                  >
+                    Delete
+                  </button>
+                </tui-data-list>
               </button>
             </td>
           </tr>
@@ -62,7 +88,7 @@ import { MappedDevice, MappedForward } from './utils'
     </table>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [ReactiveFormsModule, TuiButton],
+  imports: [TuiButton, TuiDropdown, TuiDataList, TuiTextfield],
 })
 export default class PortForwards {
   private readonly dialogs = inject(TuiDialogService)
@@ -100,15 +126,16 @@ export default class PortForwards {
   )
 
   protected readonly forwards = computed(() =>
-    Object.entries(this.portForwards() || {}).map(([source, target]) => {
+    Object.entries(this.portForwards() || {}).map(([source, entry]) => {
       const sourceSplit = source.split(':')
-      const targetSplit = target.split(':')
+      const targetSplit = entry.target.split(':')
 
       return {
         externalip: sourceSplit[0]!,
         externalport: sourceSplit[1]!,
         device: this.devices().find(d => d.ip === targetSplit[0])!,
         internalport: targetSplit[1]!,
+        label: entry.label,
       }
     }),
   )
@@ -122,6 +149,18 @@ export default class PortForwards {
       .subscribe()
   }
 
+  protected onEditLabel(forward: MappedForward): void {
+    this.dialogs
+      .open(PORT_FORWARDS_EDIT_LABEL, {
+        label: 'Edit label',
+        data: {
+          source: `${forward.externalip}:${forward.externalport}`,
+          label: forward.label,
+        },
+      })
+      .subscribe()
+  }
+
   protected onDelete({ externalip, externalport }: MappedForward): void {
     this.dialogs
       .open(TUI_CONFIRM, { label: 'Are you sure?' })

web/projects/start-tunnel/src/app/routes/home/routes/port-forwards/utils.ts

@@ -10,6 +10,7 @@ export interface MappedForward {
   readonly externalport: string
   readonly device: MappedDevice
   readonly internalport: string
+  readonly label: string
 }
 
 export interface PortForwardsData {

web/projects/start-tunnel/src/app/routes/home/routes/settings/index.ts

@@ -4,11 +4,14 @@ import {
   inject,
   signal,
 } from '@angular/core'
-import { ErrorService } from '@start9labs/shared'
+import { Router } from '@angular/router'
+import { ErrorService, LoadingService } from '@start9labs/shared'
 import { TuiAppearance, TuiButton, TuiTitle } from '@taiga-ui/core'
 import { TuiDialogService } from '@taiga-ui/experimental'
 import { TuiBadge, TuiButtonLoading } from '@taiga-ui/kit'
 import { TuiCard, TuiCell } from '@taiga-ui/layout'
+import { ApiService } from 'src/app/services/api/api.service'
+import { AuthService } from 'src/app/services/auth.service'
 import { UpdateService } from 'src/app/services/update.service'
 
 import { CHANGE_PASSWORD } from './change-password'
@@ -50,6 +53,20 @@ import { CHANGE_PASSWORD } from './change-password'
         </span>
         <button tuiButton size="s" (click)="onChangePassword()">Change</button>
       </div>
+      <div tuiCell>
+        <span tuiTitle>
+          <strong>Logout</strong>
+        </span>
+        <button
+          tuiButton
+          size="s"
+          appearance="secondary-destructive"
+          iconStart="@tui.log-out"
+          (click)="onLogout()"
+        >
+          Logout
+        </button>
+      </div>
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -66,6 +83,10 @@ import { CHANGE_PASSWORD } from './change-password'
 export default class Settings {
   private readonly dialogs = inject(TuiDialogService)
   private readonly errorService = inject(ErrorService)
+  private readonly api = inject(ApiService)
+  private readonly auth = inject(AuthService)
+  private readonly router = inject(Router)
+  private readonly loading = inject(LoadingService)
 
   protected readonly update = inject(UpdateService)
   protected readonly checking = signal(false)
@@ -98,4 +119,18 @@ export default class Settings {
       this.applying.set(false)
     }
   }
+
+  protected async onLogout() {
+    const loader = this.loading.open().subscribe()
+
+    try {
+      await this.api.logout()
+      this.auth.authenticated.set(false)
+      this.router.navigate(['/'])
+    } catch (e: any) {
+      this.errorService.handleError(e)
+    } finally {
+      loader.unsubscribe()
+    }
+  }
 }

web/projects/start-tunnel/src/app/services/api/api.service.ts

@@ -25,6 +25,7 @@ export abstract class ApiService {
   // forwards
   abstract addForward(params: AddForwardReq): Promise<null> // port-forward.add
   abstract deleteForward(params: DeleteForwardReq): Promise<null> // port-forward.remove
+  abstract updateForwardLabel(params: UpdateForwardLabelReq): Promise<null> // port-forward.update-label
   // update
   abstract checkUpdate(): Promise<TunnelUpdateResult> // update.check
   abstract applyUpdate(): Promise<TunnelUpdateResult> // update.apply
@@ -60,12 +61,18 @@ export type DeleteDeviceReq = {
 export type AddForwardReq = {
   source: string // externalip:port
   target: string // internalip:port
+  label: string
 }
 
 export type DeleteForwardReq = {
   source: string
 }
 
+export type UpdateForwardLabelReq = {
+  source: string
+  label: string
+}
+
 export type TunnelUpdateResult = {
   status: string
   installed: string

web/projects/start-tunnel/src/app/services/api/live-api.service.ts

@@ -17,6 +17,7 @@ import {
   LoginReq,
   SubscribeRes,
   TunnelUpdateResult,
+  UpdateForwardLabelReq,
   UpsertDeviceReq,
   UpsertSubnetReq,
 } from './api.service'
@@ -104,6 +105,10 @@ export class LiveApiService extends ApiService {
     return this.rpcRequest({ method: 'port-forward.remove', params })
   }
 
+  async updateForwardLabel(params: UpdateForwardLabelReq): Promise<null> {
+    return this.rpcRequest({ method: 'port-forward.update-label', params })
+  }
+
   // update
 
   async checkUpdate(): Promise<TunnelUpdateResult> {

web/projects/start-tunnel/src/app/services/api/mock-api.service.ts

@@ -10,6 +10,7 @@ import {
   LoginReq,
   SubscribeRes,
   TunnelUpdateResult,
+  UpdateForwardLabelReq,
   UpsertDeviceReq,
   UpsertSubnetReq,
 } from './api.service'
@@ -24,7 +25,12 @@ import {
   Revision,
 } from 'patch-db-client'
 import { toObservable } from '@angular/core/rxjs-interop'
-import { mockTunnelData, WgClient, WgSubnet } from '../patch-db/data-model'
+import {
+  mockTunnelData,
+  PortForwardEntry,
+  WgClient,
+  WgSubnet,
+} from '../patch-db/data-model'
 
 @Injectable({
   providedIn: 'root',
@@ -171,11 +177,26 @@ export class MockApiService extends ApiService {
   async addForward(params: AddForwardReq): Promise<null> {
     await pauseFor(1000)
 
-    const patch: AddOperation<string>[] = [
+    const patch: AddOperation<PortForwardEntry>[] = [
       {
         op: PatchOp.ADD,
         path: `/portForwards/${params.source}`,
-        value: params.target,
+        value: { target: params.target, label: params.label || '' },
+      },
+    ]
+    this.mockRevision(patch)
+
+    return null
+  }
+
+  async updateForwardLabel(params: UpdateForwardLabelReq): Promise<null> {
+    await pauseFor(1000)
+
+    const patch: ReplaceOperation<string>[] = [
+      {
+        op: PatchOp.REPLACE,
+        path: `/portForwards/${params.source}/label`,
+        value: params.label,
       },
     ]
     this.mockRevision(patch)

web/projects/start-tunnel/src/app/services/patch-db/data-model.ts

@@ -1,8 +1,13 @@
 import { T } from '@start9labs/start-sdk'
 
+export type PortForwardEntry = {
+  target: string
+  label: string
+}
+
 export type TunnelData = {
   wg: WgServer
-  portForwards: Record<string, string>
+  portForwards: Record<string, PortForwardEntry>
   gateways: Record<string, T.NetworkInterfaceInfo>
 }
 
@@ -39,8 +44,8 @@ export const mockTunnelData: TunnelData = {
     },
   },
   portForwards: {
-    '69.1.1.42:443': '10.59.0.2:443',
-    '69.1.1.42:3000': '10.59.0.2:3000',
+    '69.1.1.42:443': { target: '10.59.0.2:443', label: 'HTTPS' },
+    '69.1.1.42:3000': { target: '10.59.0.2:3000', label: 'Grafana' },
   },
   gateways: {
     eth0: {