fix: refactor legacy components (#3010)

* fix: comments * fix: refactor legacy components * remove default again --------- Co-authored-by: Matt Hill <mattnine@protonmail.com>
2026-03-26 10:21:52 +00:00 · 2025-08-19 21:13:36 +07:00
parent 0709ea65d7
commit 931505ff08
9 changed files with 160 additions and 160 deletions
--- a/web/projects/setup-wizard/src/app/components/cifs.component.ts
+++ b/web/projects/setup-wizard/src/app/components/cifs.component.ts
@@ -14,9 +14,13 @@ import {
  TuiDialogContext,
  TuiDialogService,
  TuiError,
+  TuiTextfield,
 } from '@taiga-ui/core'
-import { TUI_VALIDATION_ERRORS, TuiFieldErrorPipe } from '@taiga-ui/kit'
-import { TuiInputModule, TuiInputPasswordModule } from '@taiga-ui/legacy'
+import {
+  TUI_VALIDATION_ERRORS,
+  TuiFieldErrorPipe,
+  TuiPassword,
+} from '@taiga-ui/kit'
 import { injectContext, PolymorpheusComponent } from '@taiga-ui/polymorpheus'
 import { SERVERS, ServersResponse } from 'src/app/components/servers.component'
 import { ApiService } from 'src/app/services/api.service'
@@ -30,39 +34,47 @@ export interface CifsResponse {
@Component({
  template: `
    <form [formGroup]="form" (ngSubmit)="submit()">
-      <tui-input formControlName="hostname">
-        Hostname *
+      <tui-textfield>
+        <label tuiLabel>Hostname *</label>
        <input
-          tuiTextfieldLegacy
+          tuiTextfield
+          formControlName="hostname"
          placeholder="e.g. 'My Computer' OR 'my-computer.local'"
        />
-      </tui-input>
+      </tui-textfield>
      <tui-error
        formControlName="hostname"
        [error]="['required'] | tuiFieldError | async"
-      ></tui-error>
+      />

-      <tui-input formControlName="path" class="input">
-        Path *
-        <input tuiTextfieldLegacy placeholder="/Desktop/my-folder'" />
-      </tui-input>
-      <tui-error
-        formControlName="path"
-        [error]="[] | tuiFieldError | async"
-      ></tui-error>
+      <tui-textfield class="input">
+        <label tuiLabel>Path *</label>
+        <input
+          tuiTextfield
+          formControlName="path"
+          placeholder="/Desktop/my-folder'"
+        />
+      </tui-textfield>
+      <tui-error formControlName="path" [error]="[] | tuiFieldError | async" />

-      <tui-input formControlName="username" class="input">
-        Username *
-        <input tuiTextfieldLegacy placeholder="Enter username" />
-      </tui-input>
+      <tui-textfield class="input">
+        <label tuiLabel>Username *</label>
+        <input
+          tuiTextfield
+          formControlName="username"
+          placeholder="Enter username"
+        />
+      </tui-textfield>
      <tui-error
        formControlName="username"
        [error]="[] | tuiFieldError | async"
-      ></tui-error>
+      />

-      <tui-input-password formControlName="password" class="input">
-        Password
-      </tui-input-password>
+      <tui-textfield class="input">
+        <label tuiLabel>Password</label>
+        <input tuiTextfield type="password" formControlName="password" />
+        <tui-icon tuiPassword />
+      </tui-textfield>

      <footer>
        <button
@@ -93,8 +105,8 @@ export interface CifsResponse {
    FormsModule,
    ReactiveFormsModule,
    TuiButton,
-    TuiInputModule,
-    TuiInputPasswordModule,
+    TuiTextfield,
+    TuiPassword,
    TuiError,
    TuiFieldErrorPipe,
  ],
--- a/web/projects/shared/src/components/prompt.component.ts
+++ b/web/projects/shared/src/components/prompt.component.ts
@@ -1,12 +1,8 @@
-import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'
+import { ChangeDetectionStrategy, Component } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { TuiAutoFocus } from '@taiga-ui/cdk'
-import { TuiButton, TuiDialogContext } from '@taiga-ui/core'
-import { TuiInputModule, TuiTextfieldControllerModule } from '@taiga-ui/legacy'
-import {
-  POLYMORPHEUS_CONTEXT,
-  PolymorpheusComponent,
-} from '@taiga-ui/polymorpheus'
+import { TuiButton, TuiDialogContext, TuiTextfield } from '@taiga-ui/core'
+import { injectContext, PolymorpheusComponent } from '@taiga-ui/polymorpheus'
 import { i18nPipe } from '../i18n/i18n.pipe'
 import { i18nKey } from '../i18n/i18n.providers'

@@ -17,23 +13,36 @@ import { i18nKey } from '../i18n/i18n.providers'
      <p class="warning">{{ options.warning }}</p>
    }
    <form (ngSubmit)="submit(value.trim())">
-      <tui-input
-        tuiAutoFocus
-        [tuiTextfieldLabelOutside]="!options.label"
-        [tuiTextfieldCustomContent]="options.useMask ? toggle : ''"
-        [ngModelOptions]="{ standalone: true }"
-        [(ngModel)]="value"
-      >
-        {{ options.label }}
-        @if (options.required !== false && options.label) {
-          <span>*</span>
+      <tui-textfield>
+        @if (options.label) {
+          <label tuiLabel>
+            {{ options.label }}
+            @if (options.required !== false && options.label) {
+              <span>*</span>
+            }
+          </label>
        }
        <input
-          tuiTextfieldLegacy
+          tuiTextfield
+          tuiAutoFocus
+          [ngModelOptions]="{ standalone: true }"
+          [(ngModel)]="value"
          [class.masked]="options.useMask && masked && value"
          [placeholder]="options.placeholder || ''"
        />
-      </tui-input>
+        @if (options.useMask) {
+          <button
+            tuiIconButton
+            type="button"
+            appearance="icon"
+            title="Toggle masking"
+            size="xs"
+            class="button"
+            [iconStart]="masked ? '@tui.eye' : '@tui.eye-off'"
+            (click)="masked = !masked"
+          ></button>
+        }
+      </tui-textfield>
      <footer class="g-buttons">
        <button
          tuiButton
@@ -48,19 +57,6 @@ import { i18nKey } from '../i18n/i18n.providers'
        </button>
      </footer>
    </form>
-
-    <ng-template #toggle>
-      <button
-        tuiIconButton
-        type="button"
-        appearance="icon"
-        title="Toggle masking"
-        size="xs"
-        class="button"
-        [iconStart]="masked ? '@tui.eye' : '@tui.eye-off'"
-        (click)="masked = !masked"
-      ></button>
-    </ng-template>
  `,
  styles: `
    .warning {
@@ -76,25 +72,16 @@ import { i18nKey } from '../i18n/i18n.providers'
      -webkit-text-security: disc;
    }
  `,
-  imports: [
-    FormsModule,
-    TuiInputModule,
-    TuiButton,
-    TuiTextfieldControllerModule,
-    TuiAutoFocus,
-    i18nPipe,
-  ],
+  imports: [FormsModule, TuiButton, TuiTextfield, TuiAutoFocus, i18nPipe],
  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PromptModal {
+  private readonly context =
+    injectContext<TuiDialogContext<string, PromptOptions>>()
+
  masked = this.options.useMask
  value = this.options.initialValue || ''

-  constructor(
-    @Inject(POLYMORPHEUS_CONTEXT)
-    private readonly context: TuiDialogContext<string, PromptOptions>,
-  ) {}
-
  get options(): PromptOptions {
    return this.context.data
  }
--- a/web/projects/ui/src/app/routes/login/login.component.html
+++ b/web/projects/ui/src/app/routes/login/login.component.html
@@ -7,14 +7,18 @@
    <img alt="StartOS Icon" class="logo" src="assets/img/icon.png" />
    <h1 class="header">{{ 'Login to StartOS' | i18n }}</h1>
    <form (submit)="submit()">
-      <tui-input-password
-        tuiTextfieldIconLeft="@tui.key"
-        [ngModelOptions]="{ standalone: true }"
-        [(ngModel)]="password"
-        (ngModelChange)="error = null"
-      >
-        {{ 'Password' | i18n }}
-      </tui-input-password>
+      <tui-textfield iconStart="@tui.key">
+        <label tuiLabel>{{ 'Password' | i18n }}</label>
+        <input
+          tuiAutoFocus
+          tuiTextfield
+          type="password"
+          [ngModelOptions]="{ standalone: true }"
+          [(ngModel)]="password"
+          (ngModelChange)="error = null"
+        />
+        <tui-icon tuiPassword />
+      </tui-textfield>
      <tui-error class="error" [error]="error || null" />
      <button tuiButton class="button">{{ 'Login' | i18n }}</button>
    </form>
--- a/web/projects/ui/src/app/routes/login/login.module.ts
+++ b/web/projects/ui/src/app/routes/login/login.module.ts
@@ -2,15 +2,13 @@ import { CommonModule } from '@angular/common'
 import { NgModule } from '@angular/core'
 import { FormsModule } from '@angular/forms'
 import { RouterModule, Routes } from '@angular/router'
-import { TuiButton, TuiError } from '@taiga-ui/core'
+import { i18nPipe } from '@start9labs/shared'
+import { TuiAutoFocus } from '@taiga-ui/cdk'
+import { TuiButton, TuiError, TuiIcon, TuiTextfield } from '@taiga-ui/core'
+import { TuiPassword } from '@taiga-ui/kit'
 import { TuiCardLarge } from '@taiga-ui/layout'
-import {
-  TuiInputPasswordModule,
-  TuiTextfieldControllerModule,
-} from '@taiga-ui/legacy'
 import { CAWizardComponent } from './ca-wizard/ca-wizard.component'
 import { LoginPage } from './login.page'
-import { i18nPipe } from '@start9labs/shared'

 const routes: Routes = [
  {
@@ -26,8 +24,10 @@ const routes: Routes = [
    CAWizardComponent,
    TuiButton,
    TuiCardLarge,
-    TuiInputPasswordModule,
-    TuiTextfieldControllerModule,
+    ...TuiTextfield,
+    TuiIcon,
+    TuiPassword,
+    TuiAutoFocus,
    TuiError,
    RouterModule.forChild(routes),
    i18nPipe,
--- a/web/projects/ui/src/app/routes/login/login.page.scss
+++ b/web/projects/ui/src/app/routes/login/login.page.scss
@@ -31,3 +31,7 @@
  border-radius: 10rem;
  margin-bottom: 1rem;
 }
+
+[tuiLabel] {
+  text-align: start;
+}
--- a/web/projects/ui/src/app/routes/portal/routes/backups/modals/edit.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/backups/modals/edit.component.ts
@@ -2,13 +2,13 @@ import { Component, inject } from '@angular/core'
 import { toSignal } from '@angular/core/rxjs-interop'
 import { FormsModule } from '@angular/forms'
 import { ErrorService, LoadingService } from '@start9labs/shared'
-import { TuiButton, TuiDialogContext, TuiDialogService } from '@taiga-ui/core'
-import { TuiBadge, TuiSwitch } from '@taiga-ui/kit'
 import {
-  TuiInputModule,
-  TuiInputNumberModule,
-  TuiWrapperModule,
-} from '@taiga-ui/legacy'
+  TuiButton,
+  TuiDialogContext,
+  TuiDialogService,
+  TuiTextfield,
+} from '@taiga-ui/core'
+import { TuiBadge, TuiSwitch } from '@taiga-ui/kit'
 import { injectContext, PolymorpheusComponent } from '@taiga-ui/polymorpheus'
 import { from, map } from 'rxjs'
 import { BackupJob, BackupTarget } from 'src/app/services/api/api.types'
@@ -21,10 +21,15 @@ import { TARGET, TARGET_CREATE } from './target.component'
@Component({
  template: `
    <form class="form">
-      <tui-input name="name" [(ngModel)]="job.name">
-        Job Name
-        <input tuiTextfieldLegacy placeholder="My Backup Job" />
-      </tui-input>
+      <tui-textfield>
+        <label tuiLabel>Job Name</label>
+        <input
+          tuiTextfield
+          name="name"
+          [(ngModel)]="job.name"
+          placeholder="My Backup Job"
+        />
+      </tui-textfield>
      <button
        tuiButton
        appearance="secondary"
@@ -53,10 +58,15 @@ import { TARGET, TARGET_CREATE } from './target.component'
          {{ job.packageIds.length + ' selected' }}
        </tui-badge>
      </button>
-      <tui-input name="cron" [(ngModel)]="job.cron">
-        Schedule
-        <input tuiTextfieldLegacy placeholder="* * * * *" />
-      </tui-input>
+      <tui-textfield>
+        <label tuiLabel>Schedule</label>
+        <input
+          tuiTextfield
+          name="cron"
+          [(ngModel)]="job.cron"
+          placeholder="* * * * *"
+        />
+      </tui-textfield>
      @if (job.cron | toHumanCron; as human) {
        <div [style.color]="human.color">{{ human.message }}</div>
      }
@@ -98,10 +108,8 @@ import { TARGET, TARGET_CREATE } from './target.component'
  `,
  imports: [
    FormsModule,
-    TuiInputModule,
-    TuiInputNumberModule,
+    TuiTextfield,
    TuiSwitch,
-    TuiWrapperModule,
    TuiButton,
    TuiBadge,
    ToHumanCronPipe,
--- a/web/projects/ui/src/app/routes/portal/routes/services/modals/action-success/action-success-member.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/services/modals/action-success/action-success-member.component.ts
@@ -10,35 +10,26 @@ import {
 import { FormsModule } from '@angular/forms'
 import { DialogService, i18nPipe } from '@start9labs/shared'
 import { T } from '@start9labs/start-sdk'
-import { TuiButton, TuiTitle } from '@taiga-ui/core'
 import {
-  TuiInputModule,
-  TuiTextfieldComponent,
-  TuiTextfieldControllerModule,
-} from '@taiga-ui/legacy'
-import { QrCodeModule } from 'ng-qrcode'
+  TuiButton,
+  TuiTextfield,
+  TuiTextfieldDirective,
+  TuiTitle,
+} from '@taiga-ui/core'
+import { QrCodeComponent } from 'ng-qrcode'

@Component({
  selector: 'app-action-success-member',
  template: `
-    <tui-input
-      [readOnly]="true"
-      [ngModel]="member.value"
-      [tuiTextfieldCustomContent]="actions"
-    >
-      {{ member.name }}
+    <tui-textfield>
+      <label tuiLabel>{{ member.name }}</label>
      <input
-        tuiTextfieldLegacy
+        tuiTextfield
+        [readOnly]="true"
+        [ngModel]="member.value"
        [style.border-inline-end-width.rem]="border"
        [type]="member.masked && masked ? 'password' : 'text'"
      />
-    </tui-input>
-    @if (member.description) {
-      <label [style.padding-top.rem]="0.25" tuiTitle>
-        <span tuiSubtitle [style.opacity]="0.8">{{ member.description }}</span>
-      </label>
-    }
-    <ng-template #actions>
      @if (member.masked) {
        <button
          tuiIconButton
@@ -81,7 +72,12 @@ import { QrCodeModule } from 'ng-qrcode'
          {{ 'Show QR' | i18n }}
        </button>
      }
-    </ng-template>
+    </tui-textfield>
+    @if (member.description) {
+      <label [style.padding-top.rem]="0.25" tuiTitle>
+        <span tuiSubtitle [style.opacity]="0.8">{{ member.description }}</span>
+      </label>
+    }
    <ng-template #qr>
      <qr-code
        [value]="member.value"
@@ -116,16 +112,15 @@ import { QrCodeModule } from 'ng-qrcode'
  `,
  imports: [
    FormsModule,
-    TuiInputModule,
-    TuiTextfieldControllerModule,
+    TuiTextfield,
    TuiButton,
-    QrCodeModule,
+    QrCodeComponent,
    TuiTitle,
    i18nPipe,
  ],
 })
 export class ActionSuccessMemberComponent {
-  @ViewChild(TuiTextfieldComponent, { read: ElementRef })
+  @ViewChild(TuiTextfieldDirective, { read: ElementRef })
  private readonly input!: ElementRef<HTMLInputElement>
  private readonly dialog = inject(DialogService)

--- a/web/projects/ui/src/app/routes/portal/routes/services/modals/action-success/action-success-single.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/services/modals/action-success/action-success-single.component.ts
@@ -7,15 +7,10 @@ import {
  ViewChild,
 } from '@angular/core'
 import { FormsModule } from '@angular/forms'
-import { TuiButton } from '@taiga-ui/core'
-import {
-  TuiInputModule,
-  TuiTextfieldComponent,
-  TuiTextfieldControllerModule,
-} from '@taiga-ui/legacy'
-import { QrCodeModule } from 'ng-qrcode'
-import { SingleResult } from './types'
 import { i18nPipe } from '@start9labs/shared'
+import { TuiButton, TuiTextfield, TuiTextfieldDirective } from '@taiga-ui/core'
+import { QrCodeComponent } from 'ng-qrcode'
+import { SingleResult } from './types'

@Component({
  selector: 'app-action-success-single',
@@ -23,19 +18,14 @@ import { i18nPipe } from '@start9labs/shared'
    @if (single.qr) {
      <p class="qr"><ng-container *ngTemplateOutlet="qr" /></p>
    }
-    <tui-input
-      [readOnly]="true"
-      [ngModel]="single.value"
-      [tuiTextfieldLabelOutside]="true"
-      [tuiTextfieldCustomContent]="actions"
-    >
+    <tui-textfield>
      <input
-        tuiTextfieldLegacy
+        tuiTextfield
+        [readOnly]="true"
+        [ngModel]="single.value"
        [style.border-inline-end-width.rem]="border"
        [type]="single.masked && masked ? 'password' : 'text'"
      />
-    </tui-input>
-    <ng-template #actions>
      @if (single.masked) {
        <button
          tuiIconButton
@@ -64,7 +54,7 @@ import { i18nPipe } from '@start9labs/shared'
          {{ 'Copy' | i18n }}
        </button>
      }
-    </ng-template>
+    </tui-textfield>
    <ng-template #qr>
      <qr-code
        [value]="single.value"
@@ -100,15 +90,14 @@ import { i18nPipe } from '@start9labs/shared'
  imports: [
    CommonModule,
    FormsModule,
-    TuiInputModule,
-    TuiTextfieldControllerModule,
+    TuiTextfield,
    TuiButton,
-    QrCodeModule,
+    QrCodeComponent,
    i18nPipe,
  ],
 })
 export class ActionSuccessSingleComponent {
-  @ViewChild(TuiTextfieldComponent, { read: ElementRef })
+  @ViewChild(TuiTextfieldDirective, { read: ElementRef })
  private readonly input!: ElementRef<HTMLInputElement>

  @Input()
--- a/web/projects/ui/src/app/routes/portal/routes/system/routes/email/email.component.ts
+++ b/web/projects/ui/src/app/routes/portal/routes/system/routes/email/email.component.ts
@@ -11,9 +11,8 @@ import {
  LoadingService,
 } from '@start9labs/shared'
 import { inputSpec, IST } from '@start9labs/start-sdk'
-import { TuiButton, TuiTitle } from '@taiga-ui/core'
+import { TuiButton, TuiTextfield, TuiTitle } from '@taiga-ui/core'
 import { TuiHeader } from '@taiga-ui/layout'
-import { TuiInputModule } from '@taiga-ui/legacy'
 import { PatchDB } from 'patch-db-client'
 import { switchMap, tap } from 'rxjs'
 import { FormModule } from 'src/app/routes/portal/components/form/form.module'
@@ -80,13 +79,15 @@ import { configBuilderToSpec } from 'src/app/utils/configBuilderToSpec'
            <b>{{ 'Send test email' | i18n }}</b>
          </h3>
        </header>
-        <tui-input
-          [(ngModel)]="testAddress"
-          [ngModelOptions]="{ standalone: true }"
-        >
-          Name Lastname &lt;email&#64;example.com&gt;
-          <input tuiTextfieldLegacy inputmode="email" />
-        </tui-input>
+        <tui-textfield>
+          <label tuiLabel>Name Lastname &lt;email&#64;example.com&gt;</label>
+          <input
+            tuiTextfield
+            inputmode="email"
+            [(ngModel)]="testAddress"
+            [ngModelOptions]="{ standalone: true }"
+          />
+        </tui-textfield>
        <footer>
          <button
            tuiButton
@@ -123,7 +124,7 @@ import { configBuilderToSpec } from 'src/app/utils/configBuilderToSpec'
    ReactiveFormsModule,
    FormModule,
    TuiButton,
-    TuiInputModule,
+    TuiTextfield,
    TuiHeader,
    TuiTitle,
    RouterLink,