setup wizard first draft

setup-wizard/src/app/pages/recover/recover-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { RecoverPage } from './recover.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: RecoverPage,
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class RecoverPageRoutingModule {}

setup-wizard/src/app/pages/recover/recover.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import { RecoverPage } from './recover.page';
+
+import { RecoverPageRoutingModule } from './recover-routing.module';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    RecoverPageRoutingModule
+  ],
+  declarations: [RecoverPage]
+})
+export class RecoverPageModule {}

setup-wizard/src/app/pages/recover/recover.page.html

@@ -0,0 +1,40 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>
+      Setup Wizard
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content [fullscreen]="true">
+  <div *ngIf="!stateService.recoveryDrive">
+    <h2 color="light">Select Data Drive</h2>
+    <ion-card 
+      *ngFor="let drive of dataDrives"
+      (click)="selectDrive(drive['logical-name'])"
+      button="true"
+      [class.selected]="selectedDrive === drive['logical-name']"
+      color="light"
+    >
+      <ion-card-header>
+        <ion-card-title>{{drive["logical-name"]}}</ion-card-title>
+        <ion-card-subtitle>{{drive.name}}</ion-card-subtitle>
+      </ion-card-header>
+
+      <ion-card-content>
+        Currently running {{drive.version}}
+      </ion-card-content>
+    </ion-card>
+    <ion-button (click)="warn()" color="primary" [disabled]="!selectedDrive">Next</ion-button>
+  </div>
+  <div *ngIf="stateService.recoveryDrive">
+    <h2>Progress: {{ 100 * stateService.dataProgress }}% <ion-spinner *ngIf="stateService.dataProgress != 1"></ion-spinner> </h2>
+    <ion-progress-bar value="{{stateService.dataProgress}}"></ion-progress-bar>
+    <ion-button 
+      [routerLink]="['/password']" 
+      color="primary" 
+      [disabled]="stateService.dataProgress != 1"
+    >
+      Next
+    </ion-button>
+  </div>
+</ion-content>

setup-wizard/src/app/pages/recover/recover.page.scss

@@ -0,0 +1,31 @@
+#container {
+  text-align: center;
+
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+#container strong {
+  font-size: 20px;
+  line-height: 26px;
+}
+
+#container p {
+  font-size: 16px;
+  line-height: 22px;
+
+  color: #8c8c8c;
+
+  margin: 0;
+}
+
+#container a {
+  text-decoration: none;
+}
+
+.selected {
+  border: 1px solid white;
+}

setup-wizard/src/app/pages/recover/recover.page.ts

@@ -0,0 +1,68 @@
+import { Component } from '@angular/core'
+import { AlertController, NavController } from '@ionic/angular'
+import { ApiService } from 'src/app/services/api/api.service'
+import { StateService } from 'src/app/services/state.sevice'
+
+@Component({
+  selector: 'recover-page',
+  templateUrl: 'recover.page.html',
+  styleUrls: ['recover.page.scss'],
+})
+export class RecoverPage {
+  dataDrives = []
+  selectedDrive = null
+
+  constructor(
+    private readonly apiService: ApiService,
+    private readonly stateService: StateService,
+    public alertController: AlertController,
+  ) {}
+
+  async ngOnInit() {
+    if(!this.stateService.recoveryDrive) {
+      this.dataDrives = await this.apiService.getEmbassyDrives()
+    } else {
+      this.stateService.pollDataTransferProgress()
+    }
+  }
+
+  selectDrive(name: string) {
+    if (name === this.selectedDrive) {
+      this.selectedDrive = null
+    } else {
+      this.selectedDrive = name
+    }
+  }
+
+  async warn() {
+    const alert = await this.alertController.create({
+      cssClass: 'my-custom-class',
+      header: 'Warning!',
+      message: 'Once you select this the recovery process will begin.',
+      buttons: [
+        {
+          text: 'Cancel',
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: () => {
+            this.selectedDrive = null
+          }
+        }, {
+          text: 'Okay',
+          handler: async () => {
+            await this.chooseDisk()
+          }
+        }
+      ]
+    });
+
+    await alert.present();
+  }
+
+  async chooseDisk() {
+    await this.apiService.selectEmbassyDrive({logicalName: this.selectedDrive})
+    this.stateService.recoveryDrive = this.selectedDrive
+    this.stateService.pollDataTransferProgress()
+  }
+
+}