chore: refactor install and setup wizards (#2561)

* chore: refactor install and setup wizards

* chore: return tui-root

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

@@ -0,0 +1,108 @@
+import { Component, inject } from '@angular/core'
+import { Router } from '@angular/router'
+import {
+  DiskInfo,
+  DriveComponent,
+  ErrorService,
+  LoadingService,
+  toGuid,
+} from '@start9labs/shared'
+import { TuiDialogService, TuiLoaderModule } from '@taiga-ui/core'
+import {
+  TuiButtonModule,
+  TuiCardModule,
+  TuiCellModule,
+} from '@taiga-ui/experimental'
+import { PASSWORD } from 'src/app/components/password.component'
+import { ApiService } from 'src/app/services/api.service'
+import { StateService } from 'src/app/services/state.service'
+
+@Component({
+  standalone: true,
+  template: `
+    <section tuiCardLarge>
+      <header>Use existing drive</header>
+      <div>Select the physical drive containing your StartOS data</div>
+
+      @if (loading) {
+        <tui-loader />
+      } @else {
+        @for (drive of drives; track drive) {
+          <button tuiCell [drive]="drive" (click)="select(drive)"></button>
+        } @empty {
+          No valid StartOS data drives found. Please make sure the drive is a
+          valid StartOS data drive (not a backup) and is firmly connected, then
+          refresh the page.
+        }
+        <button tuiButton iconLeft="tuiIconRotateCwLarge" (click)="refresh()">
+          Refresh
+        </button>
+      }
+    </section>
+  `,
+  imports: [
+    TuiButtonModule,
+    TuiCardModule,
+    TuiCellModule,
+    TuiLoaderModule,
+    DriveComponent,
+  ],
+})
+export default class AttachPage {
+  private readonly apiService = inject(ApiService)
+  private readonly router = inject(Router)
+  private readonly errorService = inject(ErrorService)
+  private readonly stateService = inject(StateService)
+  private readonly dialogs = inject(TuiDialogService)
+  private readonly loader = inject(LoadingService)
+
+  loading = true
+  drives: DiskInfo[] = []
+
+  async ngOnInit() {
+    this.stateService.setupType = 'attach'
+    await this.getDrives()
+  }
+
+  async refresh() {
+    this.loading = true
+    await this.getDrives()
+  }
+
+  async getDrives() {
+    try {
+      this.drives = await this.apiService
+        .getDrives()
+        .then(drives => drives.filter(toGuid))
+    } catch (e: any) {
+      this.errorService.handleError(e)
+    } finally {
+      this.loading = false
+    }
+  }
+
+  select(disk: DiskInfo) {
+    this.dialogs
+      .open<string>(PASSWORD, {
+        label: 'Set Password',
+        size: 's',
+        data: { storageDrive: true },
+      })
+      .subscribe(password => {
+        this.attachDrive(toGuid(disk) || '', password)
+      })
+  }
+
+  private async attachDrive(guid: string, password: string) {
+    const loader = this.loader.open('Connecting to drive...').subscribe()
+
+    try {
+      await this.stateService.importDrive(guid, password)
+      await this.router.navigate([`loading`])
+    } catch (e: any) {
+      this.errorService.handleError(e)
+    } finally {
+      loader.unsubscribe()
+    }
+  }
+}