setup wizard first draft

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

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

setup-wizard/src/app/pages/home/home.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 { HomePage } from './home.page';
+
+import { HomePageRoutingModule } from './home-routing.module';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    HomePageRoutingModule
+  ],
+  declarations: [HomePage]
+})
+export class HomePageModule {}

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

@@ -0,0 +1,52 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>
+      Setup Wizard
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content [fullscreen]="true">
+  <div *ngIf="!stateService.selectedDataDrive">
+    <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.labels}}</ion-card-subtitle>
+      </ion-card-header>
+    
+      <ion-card-content>
+        Currently using {{drive.used}} out of {{drive.capacity}} bytes.
+      </ion-card-content>
+    </ion-card>
+    <ion-button (click)="warn()" color="primary" [disabled]="!selectedDrive">Next</ion-button>
+  </div>
+  <div *ngIf="stateService.selectedDataDrive">
+    <ion-card
+      [routerLink]="['/password']"
+      button="true"
+      color="light"
+    >
+      <ion-card-header>
+        <ion-card-title>Start Fresh</ion-card-title>
+        <ion-card-subtitle>Get started with a brand new Embassy</ion-card-subtitle>
+      </ion-card-header>
+    </ion-card>
+
+    <ion-card
+      [routerLink]="['/recover']"
+      button="true"
+      color="light"
+    >
+      <ion-card-header>
+        <ion-card-title>Recover</ion-card-title>
+        <ion-card-subtitle>Recover the data from an old embassy</ion-card-subtitle>
+      </ion-card-header>
+    </ion-card>
+  </div>
+</ion-content>

setup-wizard/src/app/pages/home/home.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/home/home.page.ts

@@ -0,0 +1,66 @@
+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: 'app-home',
+  templateUrl: 'home.page.html',
+  styleUrls: ['home.page.scss'],
+})
+export class HomePage {
+  dataDrives = []
+  selectedDrive = null
+
+  constructor(
+    private readonly apiService: ApiService,
+    private readonly stateService: StateService,
+    public alertController: AlertController,
+    private readonly navCtrl: NavController,
+  ) {}
+
+  async ngOnInit() {
+    if(!this.stateService.selectedDataDrive) {
+      this.dataDrives = await this.apiService.getStorageDisks()
+    }
+  }
+
+  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: 'This disk will be entirely wiped of all memory.',
+      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.selectStorageDisk({logicalName: this.selectedDrive})
+    this.stateService.selectedDataDrive = this.selectedDrive
+  }
+
+}

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

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

setup-wizard/src/app/pages/password/password.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 { PasswordPage } from './password.page'
+
+import { PasswordPageRoutingModule } from './password-routing.module'
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    PasswordPageRoutingModule
+  ],
+  declarations: [PasswordPage]
+})
+export class PasswordPageModule {}

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

@@ -0,0 +1,20 @@
+<ion-header [translucent]="true">
+  <ion-toolbar>
+    <ion-title>
+      Setup Wizard
+    </ion-title>
+  </ion-toolbar>
+</ion-header>
+<ion-content [fullscreen]="true" color="light">
+  <div *ngIf="stateService.recoveryDrive">
+    <h2>Enter Password</h2>
+    <ion-input type="password" [(ngModel)]="password">Password:</ion-input>
+  </div>
+  <div *ngIf="!stateService.recoveryDrive">
+    <h2>Create Password</h2>
+    <ion-input type="password" [(ngModel)]="password">Password:</ion-input>
+    <ion-input type="password" [(ngModel)]="passwordVer">Verify Password:</ion-input>
+  </div>
+  <p>{{error}}</p>
+  <ion-button (click)="submitPassword()" [disabled]="!password">Submit</ion-button>
+</ion-content>

setup-wizard/src/app/pages/password/password.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/password/password.page.ts

@@ -0,0 +1,33 @@
+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: 'password-page',
+  templateUrl: 'password.page.html',
+  styleUrls: ['password.page.scss'],
+})
+export class PasswordPage {
+  error = ''
+  password = ''
+  passwordVer = ''
+
+  constructor(
+    private readonly apiService: ApiService,
+    private readonly stateService: StateService,
+    public alertController: AlertController,
+  ) {}
+
+  async submitPassword () {
+    if (!this.stateService.recoveryDrive && this.password !== this.passwordVer) {
+      console.log('here')
+      this.error="*passwords dont match"
+    } else {
+      console.log('submitting')
+      await this.apiService.submitPassword(this.password)
+      // @Todo navigate to embassy os
+    }
+  }
+
+}

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()
+  }
+
+}