working

setup-wizard/.eslintrc.json

@@ -5,37 +5,11 @@
     {
       "files": ["*.ts"],
       "parserOptions": {
-        "project": ["tsconfig.json", "e2e/tsconfig.json"],
+        "project": ["tsconfig.json"],
         "createDefaultProgram": true
       },
-      "extends": [
-        "plugin:@angular-eslint/ng-cli-compat",
-        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
-        "plugin:@angular-eslint/template/process-inline-templates"
-      ],
       "rules": {
-        "@angular-eslint/component-class-suffix": [
-          "error",
-          {
-            "suffixes": ["Page", "Component"]
-          }
-        ],
-        "@angular-eslint/component-selector": [
-          "error",
-          {
-            "type": "element",
-            "prefix": "app",
-            "style": "kebab-case"
-          }
-        ],
-        "@angular-eslint/directive-selector": [
-          "error",
-          {
-            "type": "attribute",
-            "prefix": "app",
-            "style": "camelCase"
-          }
-        ]
+        "semi": [1, "never"]
       }
     },
     {

setup-wizard/.gitignore

@@ -12,6 +12,7 @@
 Thumbs.db
 UserInterfaceState.xcuserstate
 $RECYCLE.BIN/
+/out-tsc
 
 *.log
 log.txt

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

@@ -10,15 +10,6 @@ const routes: Routes = [
     path: 'recover',
     loadChildren: () => import('./pages/recover/recover.module').then( m => m.RecoverPageModule)
   },
-  {
-    path: 'password',
-    loadChildren: () => import('./pages/password/password.module').then( m => m.PasswordPageModule)
-  },
-  {
-    path: '',
-    redirectTo: 'wizard',
-    pathMatch: 'full'
-  },
 ];
 
 @NgModule({

setup-wizard/src/app/app.component.html

@@ -3,9 +3,6 @@
     <h2 color="light">Connecting to Embassy</h2>
   </ion-content>
   <ng-template #loaded>
-    <ion-content *ngIf="error">
-      <h2 color="light">{{ error }}</h2>
-    </ion-content>
-    <ion-router-outlet *ngIf="!error"></ion-router-outlet>
+    <ion-router-outlet></ion-router-outlet>
   </ng-template>
 </ion-app>

setup-wizard/src/app/app.component.ts

@@ -1,20 +1,20 @@
-import { Component } from '@angular/core';
-import { NavController, ToastController } from '@ionic/angular';
-import { ApiService } from './services/api/api.service';
-import { StateService } from './services/state.service';
+import { Component, OnInit } from '@angular/core'
+import { NavController, ToastController } from '@ionic/angular'
+import { ApiService } from './services/api/api.service'
+import { StateService } from './services/state.service'
 
 @Component({
   selector: 'app-root',
   templateUrl: 'app.component.html',
   styleUrls: ['app.component.scss'],
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
 
   constructor(
     private readonly apiService: ApiService,
     private readonly stateService: StateService,
     private readonly navCtrl: NavController,
-    public toastController: ToastController
+    private readonly toastController: ToastController
   ) {
     this.apiService.watchError$.subscribe(error => {
       if(error) {
@@ -25,12 +25,10 @@ export class AppComponent {
 
   async ngOnInit() {
     await this.stateService.getState()
-    if (!this.stateService.selectedDataDrive) {
-      await this.navCtrl.navigateForward(`/wizard`)
-    } else if(this.stateService.hasPassword) {
-      //redirect to embassyOS
-    } else if (this.stateService.recoveryDrive) {
+    if (this.stateService.recoveryDrive) {
       await this.navCtrl.navigateForward(`/recover`)
+    } else {
+      await this.navCtrl.navigateForward(`/wizard`)
     }
   }
 
@@ -45,9 +43,9 @@ export class AppComponent {
           role: 'cancel',
         }
       ]
-    });
-    await toast.present();
+    })
+    await toast.present()
 
-    await toast.onDidDismiss();
+    await toast.onDidDismiss()
   }
 }

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

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { IonicModule } from '@ionic/angular';
 import { FormsModule } from '@angular/forms';
 import { HomePage } from './home.page';
+import { PasswordPageModule } from '../password/password.module';
 
 import { HomePageRoutingModule } from './home-routing.module';
 
@@ -12,7 +13,8 @@ import { HomePageRoutingModule } from './home-routing.module';
     CommonModule,
     FormsModule,
     IonicModule,
-    HomePageRoutingModule
+    HomePageRoutingModule,
+    PasswordPageModule,
   ],
   declarations: [HomePage]
 })

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

@@ -6,17 +6,17 @@
   </ion-toolbar>
 </ion-header>
 <ion-content>
-  <div *ngIf="!stateService.selectedDataDrive">
+  <div *ngIf="!stateService.dataDrive">
     <h2 color="light">Select Data Drive</h2>
     <ion-card 
       *ngFor="let drive of dataDrives"
       (click)="selectDrive(drive)"
       button="true"
-      [class.selected]="selectedDrive === drive['logical-name']"
+      [class.selected]="selectedDrive?.logicalname === drive.logicalname"
       color="light"
     >
       <ion-card-header>
-        <ion-card-title>{{drive["logical-name"]}}</ion-card-title>
+        <ion-card-title>{{drive.logicalname}}</ion-card-title>
         <ion-card-subtitle>{{drive.labels}}</ion-card-subtitle>
       </ion-card-header>
     
@@ -26,7 +26,7 @@
     </ion-card>
     <ion-button (click)="warn()" color="primary" [disabled]="!selectedDrive">Next</ion-button>
   </div>
-  <div *ngIf="stateService.selectedDataDrive">
+  <div *ngIf="stateService.dataDrive">
     <ion-card
       (click)="presentPasswordModal()"
       button="true"

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

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core'
-import { AlertController, ModalController } from '@ionic/angular'
-import { ApiService } from 'src/app/services/api/api.service'
+import { AlertController, ModalController, LoadingController } from '@ionic/angular'
+import { ApiService, DataDrive } from 'src/app/services/api/api.service'
 import { StateService } from 'src/app/services/state.service'
 import { PasswordPage } from '../password/password.page'
 
@@ -11,26 +11,27 @@ import { PasswordPage } from '../password/password.page'
 })
 export class HomePage {
   dataDrives = []
-  selectedDrive = null
+  selectedDrive: DataDrive = null
 
   constructor(
     private readonly apiService: ApiService,
     private readonly stateService: StateService,
     private readonly alertController: AlertController,
-    private modalController: ModalController,
+    private readonly modalController: ModalController,
+    private readonly loadingCtrl: LoadingController,
   ) {}
 
   async ngOnInit() {
-    if(!this.stateService.selectedDataDrive) {
-      this.dataDrives = await this.apiService.getStorageDisks()
+    if(!this.stateService.dataDrive) {
+      this.dataDrives = await this.apiService.getDataDrives()
     }
   }
 
-  selectDrive(name: string) {
-    if (name === this.selectedDrive) {
+  selectDrive(drive: DataDrive) {
+    if (drive.logicalname === this.selectedDrive?.logicalname) {
       this.selectedDrive = null
     } else {
-      this.selectedDrive = name
+      this.selectedDrive = drive
     }
   }
 
@@ -38,7 +39,7 @@ export class HomePage {
     const alert = await this.alertController.create({
       cssClass: 'my-custom-class',
       header: 'Warning!',
-      message: 'This disk will be entirely wiped of all memory.',
+      message: 'This drive will be entirely wiped of all memory.',
       buttons: [
         {
           text: 'Cancel',
@@ -50,7 +51,7 @@ export class HomePage {
         }, {
           text: 'Okay',
           handler: async () => {
-            await this.chooseDisk()
+            await this.chooseDrive()
           }
         }
       ]
@@ -59,30 +60,38 @@ export class HomePage {
     await alert.present();
   }
 
-  async chooseDisk() {
-    await this.apiService.selectStorageDisk({logicalName: this.selectedDrive})
-    this.stateService.selectedDataDrive = this.selectedDrive
+  async chooseDrive() {
+    await this.apiService.selectDataDrive(this.selectedDrive.logicalname)
+    this.stateService.dataDrive = this.selectedDrive
   }
 
   async presentPasswordModal() {
     const modal = await this.modalController.create({
       component: PasswordPage,
-      backdropDismiss: false,
-      componentProps: {
-        'version': null,
-      }
+      backdropDismiss: false
     })
     modal.onDidDismiss().then(ret => {
-      if(ret.data.pwValid) {
-        this.submitPassword(ret.data.password)
+      const pass = ret.data.password
+      if (pass) {
+        this.submitPassword(pass)
       }
     })
     await modal.present();
   }
 
   async submitPassword (pw: string) {
-    await this.apiService.submitPassword(pw)
-    // @TODO navigate to embassyOS
+    const loader = await this.loadingCtrl.create({
+      message: 'Setting up your Embassy'
+    })
+    await loader.present()
+
+    try {
+      await this.apiService.submitPassword(pw)
+      location.reload()
+    } catch (e) {
+    } finally {
+      loader.dismiss()
+    }
   }
 
 }

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

@@ -6,12 +6,12 @@
   </ion-toolbar>
 </ion-header>
 <ion-content>
-  <div *ngIf="!needsVer">
+  <div *ngIf="needsVer">
     <h2>Enter Password</h2>
     <ion-input type="password" [(ngModel)]="password">Password:</ion-input>
   </div>
 
-  <div *ngIf="needsVer">
+  <div *ngIf="!needsVer">
     <h2>Create Password</h2>
     <ion-input type="password" [(ngModel)]="password">Password:</ion-input>
     <ion-input type="password" [(ngModel)]="passwordVer">Verify Password:</ion-input>

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

@@ -1,5 +1,6 @@
 import { Component, Input } from '@angular/core'
 import { ModalController } from '@ionic/angular'
+import { RecoveryDrive } from 'src/app/services/api/api.service'
 
 @Component({
   selector: 'password',
@@ -7,9 +8,9 @@ import { ModalController } from '@ionic/angular'
   styleUrls: ['password.page.scss'],
 })
 export class PasswordPage {
-  @Input() version: string | null
+  @Input() recoveryDrive: RecoveryDrive
 
-  needsVer = true
+  needsVer: boolean
 
   error = ''
   password = ''
@@ -20,27 +21,20 @@ export class PasswordPage {
   ) {}
 
   ngOnInit() {
-    this.needsVer = !this.version?.startsWith('0.3')
-    console.log('needs', this.needsVer)
+    this.needsVer = !!this.recoveryDrive && !this.recoveryDrive.version.startsWith('0.2')
   }
 
   async submitPassword () {
-    if (this.needsVer && this.password !== this.passwordVer) {
+    if (!this.needsVer && this.password !== this.passwordVer) {
       this.error="*passwords dont match"
     } else {
-      this.dismiss(true)
+      this.modalController.dismiss({
+        password: this.password,
+      })
     }
   }
 
   cancel () {
-    this.dismiss(false)
+    this.modalController.dismiss()
   }
-
-  dismiss(submitted: boolean) {
-    this.modalController.dismiss({
-      pwValid: submitted,
-      pw: this.password
-    });
-  }
-
 }

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

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { IonicModule } from '@ionic/angular';
 import { FormsModule } from '@angular/forms';
 import { RecoverPage } from './recover.page';
+import { PasswordPageModule } from '../password/password.module';
 
 import { RecoverPageRoutingModule } from './recover-routing.module';
 
@@ -12,7 +13,8 @@ import { RecoverPageRoutingModule } from './recover-routing.module';
     CommonModule,
     FormsModule,
     IonicModule,
-    RecoverPageRoutingModule
+    RecoverPageRoutingModule,
+    PasswordPageModule,
   ],
   declarations: [RecoverPage]
 })

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

@@ -7,16 +7,16 @@
 </ion-header>
 <ion-content>
   <div *ngIf="!stateService.recoveryDrive">
-    <h2 color="light">Select Data Drive</h2>
+    <h2 color="light">Select Recovery Drive</h2>
     <ion-card 
       *ngFor="let drive of dataDrives"
       (click)="selectDrive(drive)"
       button="true"
-      [class.selected]="selectedDrive === drive['logical-name']"
+      [class.selected]="selectedDrive?.logicalname === drive.logicalname"
       color="light"
     >
       <ion-card-header>
-        <ion-card-title>{{drive["logical-name"]}}</ion-card-title>
+        <ion-card-title>{{drive.logicalname}}</ion-card-title>
         <ion-card-subtitle>{{drive.name}}</ion-card-subtitle>
       </ion-card-header>
 
@@ -24,15 +24,15 @@
         Currently running {{drive.version}}
       </ion-card-content>
     </ion-card>
-    <ion-button (click)="warn()" color="primary" [disabled]="!selectedDrive">Next</ion-button>
+    <ion-button (click)="chooseDrive()" 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>
+    <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 
       (click)="navToEmbassy()"
       color="primary" 
-      [disabled]="stateService.dataProgress != 1"
+      [disabled]="stateService.dataProgress !== 1"
     >
       Go To Embassy
     </ion-button>

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

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core'
-import { AlertController, ModalController } from '@ionic/angular'
-import { ApiService, EmbassyDrive } from 'src/app/services/api/api.service'
+import { AlertController, ModalController, LoadingController } from '@ionic/angular'
+import { ApiService, RecoveryDrive } from 'src/app/services/api/api.service'
 import { StateService } from 'src/app/services/state.service'
 import { PasswordPage } from '../password/password.page'
 
@@ -11,62 +11,33 @@ import { PasswordPage } from '../password/password.page'
 })
 export class RecoverPage {
   dataDrives = []
-  selectedDrive = null
-  selectedVersion = null
+  selectedDrive: RecoveryDrive = null
 
   constructor(
     private readonly apiService: ApiService,
     private readonly stateService: StateService,
     public alertController: AlertController,
     private modalController: ModalController,
+    private readonly loadingCtrl: LoadingController,
   ) {}
 
   async ngOnInit() {
     if(!this.stateService.recoveryDrive) {
-      this.dataDrives = await this.apiService.getEmbassyDrives()
+      this.dataDrives = await this.apiService.getRecoveryDrives()
     } else {
       this.stateService.pollDataTransferProgress()
     }
   }
 
-  selectDrive(disk: EmbassyDrive) {
-    const name = disk['logical-name']
-    const version = disk.version
-    if (name === this.selectedDrive) {
+  selectDrive(drive: RecoveryDrive) {
+    if (drive.logicalname === this.selectedDrive?.logicalname) {
       this.selectedDrive = null
-      this.selectedVersion = null
     } else {
-      this.selectedDrive = name
-      this.selectedVersion = version
+      this.selectedDrive = drive
     }
   }
 
-  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() {
+  async chooseDrive() {
     this.presentPasswordModal()
   }
 
@@ -75,25 +46,38 @@ export class RecoverPage {
       component: PasswordPage,
       backdropDismiss: false,
       componentProps: {
-        'version': this.selectedVersion,
+        recoveryDrive: this.selectedDrive,
       }
     })
     modal.onDidDismiss().then(ret => {
-      if(ret.data.pwValid) {
-        this.submitPWAndDisk(ret.data.password)
+      const pass = ret.data.password
+      if(pass) {
+        this.submitPWAndDrive(pass)
       }
     })
     await modal.present();
   }
 
-  async submitPWAndDisk(pw: string) {
-    await this.apiService.selectEmbassyDrive({logicalName: this.selectedDrive}, pw)
-    this.stateService.recoveryDrive = this.selectedDrive
-    this.stateService.pollDataTransferProgress()
+  async submitPWAndDrive(pw: string) {
+    const loader = await this.loadingCtrl.create({
+      message: 'Validating password'
+    })
+    await loader.present()
+
+    try {
+      await this.apiService.selectRecoveryDrive(this.selectedDrive.logicalname, pw)
+      this.stateService.recoveryDrive = this.selectedDrive
+      this.stateService.pollDataTransferProgress()
+    } catch (e) {
+    } finally {
+      loader.dismiss()
+    }
+
+
   }
 
   async navToEmbassy() {
-    // @TODO nav to embassy
+    location.reload()
   }
 
 }

setup-wizard/src/app/services/api/api.service.ts

@@ -1,37 +1,36 @@
-import { Subject } from "rxjs";
+import { Subject } from 'rxjs'
 
 export abstract class ApiService {
-  protected error$: Subject<string> = new Subject()
-  watchError$ = this.error$.asObservable()
-  abstract getState (): Promise<State> 
-  abstract getStorageDisks (): Promise<StorageDisk[]>
-  abstract selectStorageDisk (disk: { logicalName: string }): Promise<void>
-  abstract getEmbassyDrives (): Promise<EmbassyDrive[]>
-  abstract selectEmbassyDrive (disk: { logicalName: string }, password: string): Promise<void>
-  abstract getDataTransferProgress () : Promise<TransferProgress>
-  abstract submitPassword (password: string) : Promise<void>
+  protected error$: Subject<string> = new Subject();
+  watchError$ = this.error$.asObservable();
+  abstract getState (): Promise<State>;
+  abstract getDataDrives (): Promise<DataDrive[]>;
+  abstract selectDataDrive (logicalName: string): Promise<void>;
+  abstract getRecoveryDrives (): Promise<RecoveryDrive[]>;
+  abstract selectRecoveryDrive (logicalName: string, password: string): Promise<void>;
+  abstract getDataTransferProgress (): Promise<TransferProgress>;
+  abstract submitPassword (password: string): Promise<void>;
 }
 
 export interface State {
-  'selected-data-drive': string | null,
-  'recovery-drive': string | null,
-  'has-password': boolean,
+  'data-drive': DataDrive | null;
+  'recovery-drive': RecoveryDrive | null;
 }
 
 export interface TransferProgress {
-  'bytes-transfered': number
-  'total-bytes': number
+  'bytes-transfered': number;
+  'total-bytes': number;
 }
 
-export interface StorageDisk {
-  "logical-name": string
-  labels: string[]
-  capacity: number
-  used: number
+export interface DataDrive {
+  logicalname: string;
+  labels: string[];
+  capacity: number;
+  used: number;
 }
 
-export interface EmbassyDrive {
-  "logical-name": string
-  version: string
-  name: string
-}
+export interface RecoveryDrive {
+  logicalname: string;
+  version: string;
+  name: string;
+}

setup-wizard/src/app/services/api/mock-api.service.ts

@@ -1,26 +1,36 @@
-import { Injectable } from "@angular/core";
-import { pauseFor } from "../state.service";
-import { ApiService } from "./api.service"
+import { Injectable } from '@angular/core'
+import { pauseFor } from '../state.service'
+import { ApiService } from './api.service'
 
 @Injectable({
   providedIn: 'root'
 })
 export class MockApiService extends ApiService {
 
-  constructor () {
+  constructor() {
     super()
   }
 
-  async getState () {
+  async getState() {
+    await pauseFor(2000)
     return {
-      'selected-data-drive': 'page1',
+      'data-drive': null,
+      // {
+      //   logicalname: 'name1',
+      //   labels: ['label 1', 'label 2'],
+      //   capacity: 1600,
+      //   used: 200,
+      // },
       'recovery-drive': null,
-      'has-password': false,
-      'data-transfer-progress': null
+      // {
+      //   logicalname: 'name1',
+      //   version: '0.3.3',
+      //   name: 'My Embassy'
+      // }
     }
   }
 
-  async getDataTransferProgress () {
+  async getDataTransferProgress() {
     tries = Math.min(tries + 1, 4)
     return {
       'bytes-transfered': tries,
@@ -28,17 +38,17 @@ export class MockApiService extends ApiService {
     }
   }
 
-  async getStorageDisks () {
+  async getDataDrives() {
     await pauseFor(2000)
     return [
       {
-        "logical-name": 'name1',
+        logicalname: 'name1',
         labels: ['label 1', 'label 2'],
         capacity: 1600,
         used: 200,
       },
       {
-        "logical-name": 'name2',
+        logicalname: 'name2',
         labels: [],
         capacity: 1600,
         used: 0,
@@ -46,31 +56,31 @@ export class MockApiService extends ApiService {
     ]
   }
 
-  async selectStorageDisk(disk) {
-    await pauseFor(200)
+  async selectDataDrive(drive) {
+    await pauseFor(2000)
     return
   }
 
-  async getEmbassyDrives () {
+  async getRecoveryDrives() {
     await pauseFor(2000)
     return [
       {
-        "logical-name": 'name1',
-        version: '0.2.3',
-        name: 'Embassy 0.2.3'
+        logicalname: 'name1',
+        version: '0.3.3',
+        name: 'My Embassy'
       }
     ]
   }
 
-  async selectEmbassyDrive(disk) {
-    await pauseFor(200)
+  async selectRecoveryDrive(logicalName, password) {
+    await pauseFor(2000)
     return
   }
 
   async submitPassword(password) {
-    await pauseFor(200)
+    await pauseFor(2000)
     return
   }
 }
 
-let tries = 2
+let tries = 0

setup-wizard/src/app/services/state.service.ts

@@ -1,38 +1,37 @@
-import { Injectable } from "@angular/core";
-import { ApiService } from "./api/api.service"
+import { Injectable } from '@angular/core'
+import { ApiService, DataDrive, RecoveryDrive } from './api/api.service'
 
 @Injectable({
   providedIn: 'root'
 })
 export class StateService {
-  loading = true
+  loading = true;
 
-  selectedDataDrive: string
-  recoveryDrive: string
-  hasPassword: Boolean
-  dataTransferProgress: { bytesTransfered: number, totalBytes: number } | null
-  dataProgress = 0
+  dataDrive: DataDrive;
+  recoveryDrive: RecoveryDrive;
+  dataTransferProgress: { bytesTransfered: number; totalBytes: number } | null;
+  dataProgress = 0;
 
-  constructor (
+  constructor(
     private readonly apiService: ApiService
   ) {}
 
-  async getState () {
+  async getState() {
     const state = await this.apiService.getState()
     if(state) {
-      this.selectedDataDrive = state['selected-data-drive']
+      this.dataDrive = state['data-drive']
       this.recoveryDrive = state['recovery-drive']
-      this.hasPassword = state['has-password']
-  
+
       this.loading = false
     }
   }
 
-  async pollDataTransferProgress () {
+  async pollDataTransferProgress() {
     if (
-      this.dataTransferProgress?.totalBytes && 
+      this.dataTransferProgress?.totalBytes &&
       this.dataTransferProgress.bytesTransfered === this.dataTransferProgress.totalBytes
     ) {return }
+    
     const progress = await this.apiService.getDataTransferProgress()
     this.dataTransferProgress = {
       bytesTransfered: progress['bytes-transfered'],
@@ -46,6 +45,7 @@ export class StateService {
   }
 }
 
-export function pauseFor (ms: number): Promise<void> {
-  return new Promise(resolve => setTimeout(resolve, ms))
-}
+export const pauseFor = (ms: number) => {
+  const promise = new Promise(resolve => setTimeout(resolve, ms))
+  return promise
+};