From 931505ff08d71d3d221c15a7fd6344f14b00e660 Mon Sep 17 00:00:00 2001
From: Alex Inkin <alexander@inkin.ru>
Date: Tue, 19 Aug 2025 21:13:36 +0700
Subject: [PATCH] fix: refactor legacy components (#3010)

* fix: comments

* fix: refactor legacy components

* remove default again

---------

Co-authored-by: Matt Hill <mattnine@protonmail.com>
---
 .../src/app/components/cifs.component.ts      | 62 +++++++++------
 .../shared/src/components/prompt.component.ts | 77 ++++++++-----------
 .../src/app/routes/login/login.component.html | 20 +++--
 .../ui/src/app/routes/login/login.module.ts   | 16 ++--
 .../ui/src/app/routes/login/login.page.scss   |  4 +
 .../routes/backups/modals/edit.component.ts   | 42 ++++++----
 .../action-success-member.component.ts        | 45 +++++------
 .../action-success-single.component.ts        | 33 +++-----
 .../system/routes/email/email.component.ts    | 21 ++---
 9 files changed, 160 insertions(+), 160 deletions(-)

diff --git a/web/projects/setup-wizard/src/app/components/cifs.component.ts b/web/projects/setup-wizard/src/app/components/cifs.component.ts
index b5b01bbba..e59d6052a 100644
--- 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,
   ],
diff --git a/web/projects/shared/src/components/prompt.component.ts b/web/projects/shared/src/components/prompt.component.ts
index 54c4c57a1..e594865e0 100644
--- 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
   }
diff --git a/web/projects/ui/src/app/routes/login/login.component.html b/web/projects/ui/src/app/routes/login/login.component.html
index 51d7b3dd5..fbf5f958d 100644
--- 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>
diff --git a/web/projects/ui/src/app/routes/login/login.module.ts b/web/projects/ui/src/app/routes/login/login.module.ts
index 862402cc8..40e6d9a72 100644
--- 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,
diff --git a/web/projects/ui/src/app/routes/login/login.page.scss b/web/projects/ui/src/app/routes/login/login.page.scss
index e4c3b5f91..c44ce786b 100644
--- 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;
+}
diff --git 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
index 840eca2c4..fc55acf35 100644
--- 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,
diff --git 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
index a08265c66..6f923eb88 100644
--- 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)
 
diff --git 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
index c22f2a15c..24e1f7a32 100644
--- 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()
diff --git 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
index 5c5c9d7d2..d1f020ca9 100644
--- 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,