use dialogservice wrapper

web/projects/setup-wizard/src/app/components/cifs.component.ts

@@ -6,12 +6,11 @@ import {
   ReactiveFormsModule,
   Validators,
 } from '@angular/forms'
-import { i18nPipe } from '@start9labs/shared'
+import { DialogService, i18nPipe } from '@start9labs/shared'
 import { T } from '@start9labs/start-sdk'
 import {
   TuiButton,
   TuiDialogContext,
-  TuiDialogService,
   TuiError,
   TuiIcon,
   TuiTextfield,
@@ -125,10 +124,9 @@ export interface CifsResult {
   ],
 })
 export class CifsComponent {
-  private readonly dialogs = inject(TuiDialogService)
+  private readonly dialogs = inject(DialogService)
   private readonly api = inject(ApiService)
   private readonly context = injectContext<TuiDialogContext<CifsResult>>()
-  private readonly i18n = inject(i18nPipe)
 
   connecting = false
 
@@ -183,12 +181,10 @@ export class CifsComponent {
 
   private onFail() {
     this.dialogs
-      .open(
+      .openAlert(
-        this.i18n.transform(
+        'Unable to connect to network folder. Ensure (1) target computer is connected to LAN, (2) target folder is being shared, and (3) hostname, path, and credentials are accurate.',
-          'Unable to connect to network folder. Ensure (1) target computer is connected to LAN, (2) target folder is being shared, and (3) hostname, path, and credentials are accurate.',
-        ),
         {
-          label: this.i18n.transform('Connection Failed'),
+          label: 'Connection Failed',
           size: 's',
         },
       )

web/projects/setup-wizard/src/app/pages/drives.page.ts

@@ -2,8 +2,10 @@ import { ChangeDetectorRef, Component, inject } from '@angular/core'
 import { Router } from '@angular/router'
 import { FormsModule } from '@angular/forms'
 import {
+  DialogService,
   DiskInfo,
   ErrorService,
+  i18nKey,
   i18nPipe,
   LoadingService,
   toGuid,
@@ -11,18 +13,12 @@ import {
 import { TUI_IS_MOBILE } from '@taiga-ui/cdk'
 import {
   TuiButton,
-  TuiDialogService,
   TuiIcon,
   TuiLoader,
   TuiTextfield,
   TuiTitle,
 } from '@taiga-ui/core'
-import {
+import { TuiDataListWrapper, TuiSelect, TuiTooltip } from '@taiga-ui/kit'
-  TUI_CONFIRM,
-  TuiDataListWrapper,
-  TuiSelect,
-  TuiTooltip,
-} from '@taiga-ui/kit'
 import { TuiCardLarge, TuiHeader } from '@taiga-ui/layout'
 import { PolymorpheusComponent } from '@taiga-ui/polymorpheus'
 import { filter } from 'rxjs'
@@ -171,7 +167,7 @@ import { PreserveOverwriteDialog } from '../components/preserve-overwrite.dialog
 export default class DrivesPage {
   private readonly api = inject(ApiService)
   private readonly router = inject(Router)
-  private readonly dialogs = inject(TuiDialogService)
+  private readonly dialogs = inject(DialogService)
   private readonly loader = inject(LoadingService)
   private readonly errorService = inject(ErrorService)
   private readonly stateService = inject(StateService)
@@ -258,12 +254,15 @@ export default class DrivesPage {
     let selectionMade = false
 
     this.dialogs
-      .open<boolean>(new PolymorpheusComponent(PreserveOverwriteDialog), {
+      .openComponent<boolean>(
-        label: this.i18n.transform('StartOS Data Detected'),
+        new PolymorpheusComponent(PreserveOverwriteDialog),
-        size: 's',
+        {
-        dismissible: true,
+          label: 'StartOS Data Detected',
-        closeable: true,
+          size: 's',
-      })
+          dismissible: true,
+          closeable: true,
+        },
+      )
       .subscribe({
         next: preserve => {
           selectionMade = true
@@ -283,16 +282,16 @@ export default class DrivesPage {
 
   private showOsDriveWarning() {
     this.dialogs
-      .open<boolean>(TUI_CONFIRM, {
+      .openConfirm({
-        label: this.i18n.transform('Warning'),
+        label: 'Warning',
         size: 's',
         data: {
           content: `<ul>
 <li class="g-negative">${this.i18n.transform('Data on the OS drive may be overwritten.')}</li>
 <li class="g-positive">${this.i18n.transform('your StartOS data on the data drive will be preserved.')}</li>
-</ul>`,
+</ul>` as i18nKey,
-          yes: this.i18n.transform('Continue'),
+          yes: 'Continue',
-          no: this.i18n.transform('Cancel'),
+          no: 'Cancel',
         },
       })
       .pipe(filter(Boolean))
@@ -307,13 +306,13 @@ export default class DrivesPage {
       : `<p class="g-negative">${this.i18n.transform('Data on both drives will be overwritten.')}</p>`
 
     this.dialogs
-      .open<boolean>(TUI_CONFIRM, {
+      .openConfirm({
-        label: this.i18n.transform('Warning'),
+        label: 'Warning',
         size: 's',
         data: {
-          content: message,
+          content: message as i18nKey,
-          yes: this.i18n.transform('Continue'),
+          yes: 'Continue',
-          no: this.i18n.transform('Cancel'),
+          no: 'Cancel',
         },
       })
       .pipe(filter(Boolean))

web/projects/setup-wizard/src/app/pages/loading.page.ts

@@ -67,7 +67,6 @@ export default class LoadingPage {
   private readonly loader = inject(LoadingService)
   private readonly dialog = inject(DialogService)
   private readonly router = inject(Router)
-  private readonly i18n = inject(i18nPipe)
 
   readonly type = inject(StateService).setupType
   readonly progress = toSignal(

web/projects/setup-wizard/src/app/pages/restore.page.ts

@@ -1,11 +1,10 @@
 import { Component, inject } from '@angular/core'
 import { Router } from '@angular/router'
-import { ErrorService, i18nPipe } from '@start9labs/shared'
+import { DialogService, ErrorService, i18nPipe } from '@start9labs/shared'
 import { T } from '@start9labs/start-sdk'
 import {
   TuiButton,
   TuiDataList,
-  TuiDialogService,
   TuiDropdown,
   TuiIcon,
   TuiLoader,
@@ -123,10 +122,9 @@ import { UnlockPasswordDialog } from '../components/unlock-password.dialog'
 export default class RestorePage {
   private readonly api = inject(ApiService)
   private readonly router = inject(Router)
-  private readonly dialogs = inject(TuiDialogService)
+  private readonly dialogs = inject(DialogService)
   private readonly errorService = inject(ErrorService)
   private readonly stateService = inject(StateService)
-  private readonly i18n = inject(i18nPipe)
 
   loading = true
   open = false
@@ -144,8 +142,8 @@ export default class RestorePage {
   openCifs() {
     this.open = false
     this.dialogs
-      .open<CifsResult>(CIFS, {
+      .openComponent<CifsResult>(CIFS, {
-        label: this.i18n.transform('Connect Network Folder'),
+        label: 'Connect Network Folder',
         size: 's',
       })
       .subscribe(result => {
@@ -179,8 +177,8 @@ export default class RestorePage {
     servers: StartOSDiskInfoWithId[],
   ) {
     this.dialogs
-      .open<StartOSDiskInfoWithId | null>(SELECT_NETWORK_BACKUP, {
+      .openComponent<StartOSDiskInfoWithId | null>(SELECT_NETWORK_BACKUP, {
-        label: this.i18n.transform('Select Network Backup'),
+        label: 'Select Network Backup',
         size: 's',
         data: { servers },
       })
@@ -196,10 +194,13 @@ export default class RestorePage {
     target: { type: 'disk'; logicalname: string } | ({ type: 'cifs' } & T.Cifs),
   ) {
     this.dialogs
-      .open<string | null>(new PolymorpheusComponent(UnlockPasswordDialog), {
+      .openComponent<string | null>(
-        label: this.i18n.transform('Unlock Backup'),
+        new PolymorpheusComponent(UnlockPasswordDialog),
-        size: 's',
+        {
-      })
+          label: 'Unlock Backup',
+          size: 's',
+        },
+      )
       .subscribe(password => {
         if (password) {
           this.stateService.recoverySource = {

web/projects/setup-wizard/src/app/pages/transfer.page.ts

@@ -1,17 +1,20 @@
 import { Component, inject } from '@angular/core'
 import { Router } from '@angular/router'
-import { DiskInfo, ErrorService, i18nPipe, toGuid } from '@start9labs/shared'
+import {
+  DialogService,
+  DiskInfo,
+  ErrorService,
+  i18nPipe,
+  toGuid,
+} from '@start9labs/shared'
 import {
   TuiButton,
   TuiDataList,
-  TuiDialogOptions,
-  TuiDialogService,
   TuiDropdown,
   TuiIcon,
   TuiLoader,
   TuiTitle,
 } from '@taiga-ui/core'
-import { TUI_CONFIRM, TuiConfirmData } from '@taiga-ui/kit'
 import { TuiCardLarge, TuiHeader } from '@taiga-ui/layout'
 import { filter } from 'rxjs'
 import { ApiService } from '../services/api.service'
@@ -111,10 +114,9 @@ import { StateService } from '../services/state.service'
 export default class TransferPage {
   private readonly api = inject(ApiService)
   private readonly router = inject(Router)
-  private readonly dialogs = inject(TuiDialogService)
+  private readonly dialogs = inject(DialogService)
   private readonly errorService = inject(ErrorService)
   private readonly stateService = inject(StateService)
-  private readonly i18n = inject(i18nPipe)
 
   loading = true
   open = false
@@ -132,20 +134,17 @@ export default class TransferPage {
   select(drive: DiskInfo) {
     this.open = false
 
-    const WARNING_OPTIONS: Partial<TuiDialogOptions<TuiConfirmData>> = {
-      label: this.i18n.transform('Warning'),
-      size: 's',
-      data: {
-        content: this.i18n.transform(
-          'After transferring data from this drive, do not attempt to boot into it again as a Start9 Server. This may result in services malfunctioning, data corruption, or loss of funds.',
-        ),
-        yes: this.i18n.transform('Continue'),
-        no: this.i18n.transform('Cancel'),
-      },
-    }
-
     this.dialogs
-      .open(TUI_CONFIRM, WARNING_OPTIONS)
+      .openConfirm({
+        label: 'Warning',
+        size: 's',
+        data: {
+          content:
+            'After transferring data from this drive, do not attempt to boot into it again as a Start9 Server. This may result in services malfunctioning, data corruption, or loss of funds.',
+          yes: 'Continue',
+          no: 'Cancel',
+        },
+      })
       .pipe(filter(Boolean))
       .subscribe(() => {
         const guid = toGuid(drive)