chore: refactor install and setup wizards (#2561)

* chore: refactor install and setup wizards

* chore: return tui-root

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

@@ -0,0 +1,175 @@
+import { DOCUMENT } from '@angular/common'
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  inject,
+  ViewChild,
+} from '@angular/core'
+import { DownloadHTMLService, ErrorService } from '@start9labs/shared'
+import {
+  TuiButtonModule,
+  TuiCardModule,
+  TuiIconModule,
+  TuiSurfaceModule,
+} from '@taiga-ui/experimental'
+import { DocumentationComponent } from 'src/app/components/documentation.component'
+import { MatrixComponent } from 'src/app/components/matrix.component'
+import { ApiService } from 'src/app/services/api.service'
+import { StateService } from 'src/app/services/state.service'
+
+@Component({
+  standalone: true,
+  template: `
+    <canvas matrix></canvas>
+    @if (isKiosk) {
+      <section tuiCardLarge>
+        <h1 class="heading">
+          <tui-icon icon="tuiIconCheckSquare" class="g-success" />
+          Setup Complete!
+        </h1>
+        <button tuiButton (click)="exitKiosk()" iconRight="tuiIconLogInLarge">
+          Continue to Login
+        </button>
+      </section>
+    } @else if (lanAddress) {
+      <section tuiCardLarge>
+        <h1 class="heading">
+          <tui-icon icon="tuiIconCheckSquare" class="g-success" />
+          Setup Complete!
+        </h1>
+        @if (stateService.setupType === 'restore') {
+          <h3>You can now safely unplug your backup drive</h3>
+        } @else if (stateService.setupType === 'transfer') {
+          <h3>You can now safely unplug your old StartOS data drive</h3>
+        }
+
+        <button tuiCardLarge tuiSurface="elevated" (click)="download()">
+          <strong class="caps">Download address info</strong>
+          <span>
+            start.local was for setup purposes only. It will no longer work.
+          </span>
+          <strong class="caps">
+            Download
+            <tui-icon icon="tuiIconDownload" />
+          </strong>
+        </button>
+
+        <a
+          tuiCardLarge
+          tuiSurface="elevated"
+          target="_blank"
+          [attr.href]="disableLogin ? null : lanAddress"
+        >
+          <strong class="caps">Trust your Root CA</strong>
+          <span>
+            In the new tab, follow instructions to trust your server's Root CA
+            and log in.
+          </span>
+          <strong class="caps">
+            Open
+            <tui-icon icon="tuiIconExternalLink" />
+          </strong>
+        </a>
+        <app-documentation hidden [lanAddress]="lanAddress" />
+      </section>
+    }
+  `,
+  styles: `
+    .heading {
+      display: flex;
+      gap: 1rem;
+      align-items: center;
+      margin: 0;
+      font: var(--tui-font-heading-4);
+    }
+
+    .caps {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 0.5rem;
+      text-transform: uppercase;
+    }
+
+    [tuiCardLarge] {
+      color: var(--tui-text-01);
+      text-decoration: none;
+      text-align: center;
+    }
+
+    a[tuiCardLarge]:not([href]) {
+      opacity: var(--tui-disabled-opacity);
+      pointer-events: none;
+    }
+  `,
+  imports: [
+    TuiCardModule,
+    TuiIconModule,
+    TuiButtonModule,
+    TuiSurfaceModule,
+    MatrixComponent,
+    DocumentationComponent,
+  ],
+})
+export default class SuccessPage implements AfterViewInit {
+  @ViewChild(DocumentationComponent, { read: ElementRef })
+  private readonly documentation?: ElementRef<HTMLElement>
+
+  private readonly document = inject(DOCUMENT)
+  private readonly errorService = inject(ErrorService)
+  private readonly api = inject(ApiService)
+  private readonly downloadHtml = inject(DownloadHTMLService)
+
+  readonly stateService = inject(StateService)
+  readonly isKiosk = ['localhost', '127.0.0.1'].includes(
+    this.document.location.hostname,
+  )
+
+  torAddress?: string
+  lanAddress?: string
+  cert?: string
+  disableLogin = this.stateService.setupType === 'fresh'
+
+  ngAfterViewInit() {
+    setTimeout(() => this.complete(), 1000)
+  }
+
+  download() {
+    const torAddress = this.document.getElementById('tor-addr')
+    const lanAddress = this.document.getElementById('lan-addr')
+    const html = this.documentation?.nativeElement.innerHTML || ''
+
+    if (torAddress) torAddress.innerHTML = this.torAddress!
+    if (lanAddress) lanAddress.innerHTML = this.lanAddress!
+
+    this.document
+      .getElementById('cert')
+      ?.setAttribute(
+        'href',
+        `data:application/x-x509-ca-cert;base64,${encodeURIComponent(this.cert!)}`,
+      )
+    this.downloadHtml.download('StartOS-info.html', html).then(_ => {
+      this.disableLogin = false
+    })
+  }
+
+  exitKiosk() {
+    this.api.exit()
+  }
+
+  private async complete() {
+    try {
+      const ret = await this.api.complete()
+      if (!this.isKiosk) {
+        this.torAddress = ret['tor-address'].replace(/^https:/, 'http:')
+        this.lanAddress = ret['lan-address'].replace(/^https:/, 'http:')
+        this.cert = ret['root-ca']
+
+        await this.api.exit()
+      }
+    } catch (e: any) {
+      this.errorService.handleError(e)
+    }
+  }
+}