checkpoiint

2026-03-26 18:31:52 +00:00 · 2021-08-09 16:08:12 -06:00
parent 1cc7cc439f
commit bce87cc819
21 changed files with 440 additions and 485 deletions
--- a/setup-wizard/src/app/app-routing.module.ts
+++ b/setup-wizard/src/app/app-routing.module.ts
@@ -1,17 +1,17 @@
 import { NgModule } from '@angular/core';
 import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
-import { CanActivateHome, CanActivateRecover } from './guards/guards'
 const routes: Routes = [
  {
    path: 'wizard',
    loadChildren: () => import('./pages/home/home.module').then( m => m.HomePageModule),
-    canActivate: [CanActivateHome],
-
  },
  {
    path: 'recover',
    loadChildren: () => import('./pages/recover/recover.module').then( m => m.RecoverPageModule),
-    canActivate: [CanActivateRecover]
+  },
+  {
+    path: 'embassy',
+    loadChildren: () => import('./pages/embassy/embassy.module').then( m => m.EmbassyPageModule),
  },
 ];

--- a/setup-wizard/src/app/app.component.html
+++ b/setup-wizard/src/app/app.component.html
@@ -1,7 +1,5 @@
 <ion-app>
-  <body>
-    <ion-content *ngIf="!stateService.loading" class="has-header">
-      <ion-router-outlet></ion-router-outlet>
-    </ion-content>
-  </body>
+  <ion-content class="has-header">
+    <ion-router-outlet></ion-router-outlet>
+  </ion-content>
 </ion-app>
--- a/setup-wizard/src/app/app.component.ts
+++ b/setup-wizard/src/app/app.component.ts
@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core'
-import { LoadingController, NavController, ToastController } from '@ionic/angular'
-import { ApiService } from './services/api/api.service'
+import { NavController } from '@ionic/angular'
 import { StateService } from './services/state.service'

@Component({
@@ -11,51 +10,13 @@ import { StateService } from './services/state.service'
 export class AppComponent implements OnInit {

  constructor(
-    private readonly apiService: ApiService,
-    private readonly stateService: StateService,
    private readonly navCtrl: NavController,
-    private readonly toastController: ToastController,
-    private readonly loadingCtrl: LoadingController,
+    private stateService: StateService

-  ) {
-    this.apiService.watchError$.subscribe(error => {
-      if(error) {
-        this.presentToast(error)
-      }
-    })
-  }
+  ) {}

  async ngOnInit() {
-    const loader = await this.loadingCtrl.create({
-      message: 'Connecting to your Embassy'
-    })
-    await loader.present()
-    try {
-      await this.stateService.getState()
-      if (this.stateService.recoveryDrive) {
-        await this.navCtrl.navigateForward(`/recover`)
-      } else {
-        await this.navCtrl.navigateForward(`/wizard`)
-      }
-    } catch (e) {} finally {
-      loader.dismiss()
-    }
-  }
-
-  async presentToast(error: string) {
-    const toast = await this.toastController.create({
-      header: 'Error',
-      message: error,
-      position: 'bottom',
-      buttons: [
-       {
-          text: 'X',
-          role: 'cancel',
-        }
-      ]
-    })
-    await toast.present()
-
-    await toast.onDidDismiss()
+    this.stateService.reset()
+    await this.navCtrl.navigateForward(`/wizard`)
  }
 }
--- a/setup-wizard/src/app/guards/guards.ts
+++ b/setup-wizard/src/app/guards/guards.ts
@@ -1,32 +0,0 @@
-import { Injectable } from '@angular/core'
-import { CanActivate } from '@angular/router'
-import { StateService } from '../services/state.service'
-
-@Injectable({
-  providedIn: 'root',
-})
-export class CanActivateHome implements CanActivate {
-
-  constructor (
-    private readonly stateService: StateService
-  ) {}
-
-  canActivate (): boolean {
-    console.log(!!this.stateService.recoveryDrive)
-    return !!this.stateService.recoveryDrive ? false : true
-  }
-}
-
-@Injectable({
-  providedIn: 'root',
-})
-export class CanActivateRecover implements CanActivate {
-
-  constructor (
-    private readonly stateService: StateService
-  ) {}
-
-  canActivate (): boolean {
-    return this.stateService.dataDrive ? true : false
-  }
-}
--- a/setup-wizard/src/app/pages/embassy/embassy-routing.module.ts
+++ b/setup-wizard/src/app/pages/embassy/embassy-routing.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { EmbassyPage } from './embassy.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EmbassyPage,
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class EmbassyPageRoutingModule {}
--- a/setup-wizard/src/app/pages/embassy/embassy.module.ts
+++ b/setup-wizard/src/app/pages/embassy/embassy.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { IonicModule } from '@ionic/angular';
+import { FormsModule } from '@angular/forms';
+import { EmbassyPage } from './embassy.page';
+import { PasswordPageModule } from '../password/password.module';
+
+import { EmbassyPageRoutingModule } from './embassy-routing.module';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    EmbassyPageRoutingModule,
+    PasswordPageModule,
+  ],
+  declarations: [EmbassyPage]
+})
+export class EmbassyPageModule {}
--- a/setup-wizard/src/app/pages/embassy/embassy.page.html
+++ b/setup-wizard/src/app/pages/embassy/embassy.page.html
@@ -0,0 +1,57 @@
+<ion-content color="light">
+  <ion-grid style="padding-top: 32px; height: 100%; max-width: 540px;">
+    <ion-row class="ion-align-items-center" style="height: 100%;">
+      <ion-col class="ion-text-center">
+
+        <div style="padding-bottom: 32px;">
+          <img src="assets/png/logo.png" style="max-width: 240px;" />
+        </div>
+
+        <ion-card color="dark">
+          <ion-card-header class="ion-text-center" style="padding-bottom: 8px;">
+            <ion-card-title>{{ loading ? 'Loading Embassy Drives' : 'Select Embassy Drive'}}</ion-card-title>
+          </ion-card-header>
+
+          <ion-card-content class="ion-margin">
+            <ng-container *ngIf="!loading && !embassyDrives.length">
+              <h2 color="light">No Embassy drives found</h2>
+              <p color="light">Please connect an Embassy drive to your embassy and refresh the page.</p>
+              <ion-button 
+                (click)="window.location.reload()"
+                style="text-align:center"
+                class="claim-button"
+              >
+                Refresh
+              </ion-button>
+            </ng-container>
+
+            <ion-item-group>
+              <ng-container *ngIf="loading">
+                <ion-item button color="light" lines="none">
+                  <ion-avatar slot="start">
+                    <ion-skeleton-text animated></ion-skeleton-text>
+                  </ion-avatar>
+                  <ion-label class="ion-text-wrap">
+                    <ion-skeleton-text style="width: 80%; margin: 13px 0;" animated></ion-skeleton-text>
+                    <ion-skeleton-text style="width: 60%; margin: 10px 0;" animated></ion-skeleton-text>
+                    <ion-skeleton-text style="width: 30%; margin: 8px 0;" animated></ion-skeleton-text>
+                  </ion-label>
+                </ion-item>
+              </ng-container>
+              <ng-container *ngIf="embassyDrives.length">
+                <ion-item (click)="chooseDrive(drive)" class="ion-margin-bottom" button color="light" lines="none" *ngFor="let drive of embassyDrives">
+                  <ion-icon slot="start" name="save-outline"></ion-icon>
+                  <ion-label class="ion-text-wrap">
+                    <h1>{{ drive.logicalname }}</h1>
+                    <h2 style="min-height: 19px;">{{ drive.labels.length ? drive.labels.join(' / ') : 'unnamed' }}</h2>
+                    <p> Using {{drive.used.toFixed(2)}} of {{drive.capacity.toFixed(2)}} GiB</p>
+                  </ion-label>
+                </ion-item>
+              </ng-container>
+            </ion-item-group>
+          </ion-card-content>
+        </ion-card>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-content>
--- a/setup-wizard/src/app/pages/embassy/embassy.page.scss
+++ b/setup-wizard/src/app/pages/embassy/embassy.page.scss
@@ -0,0 +1,44 @@
+.selected {
+  border: 4px solid gray;
+}
+
+ion-card-title {
+  margin: 24px 0;
+  font-family: 'Montserrat';
+  font-size: x-large;
+  --color: var(--ion-color-light);
+}
+
+// ion-item {
+//   --border-radius: 4px;
+//   --border-style: solid;
+//   --border-width: 1px;
+//   --border-color: var(--ion-color-light);
+// }
+
+.input-label {
+  text-align: left;
+  padding-bottom: 2px;
+  font-size: small;
+  color: var(--ion-color-light);
+  font-weight: bold;
+}
+
+.claim-button {
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  margin-top: 24px;
+  height: 48px;
+  --background: linear-gradient(45deg, var(--ion-color-light) 16%, var(--ion-color-medium) 150%);
+}
+
+.card-footer {
+  text-align: left;
+  --background: rgb(222, 222, 222);
+  border-top: solid;
+  border-width: 1px;
+  border-color: var(--ion-color-medium);
+  ion-item {
+    --border-color: var(--ion-color-medium);
+  }
+}
--- a/setup-wizard/src/app/pages/embassy/embassy.page.ts
+++ b/setup-wizard/src/app/pages/embassy/embassy.page.ts
@@ -0,0 +1,42 @@
+import { Component } from '@angular/core'
+import { ModalController, NavController } from '@ionic/angular'
+import { ApiService, EmbassyDrive } from 'src/app/services/api/api.service'
+import { StateService } from 'src/app/services/state.service'
+import { PasswordPage } from '../password/password.page'
+
+@Component({
+  selector: 'embassy',
+  templateUrl: 'embassy.page.html',
+  styleUrls: ['embassy.page.scss'],
+})
+export class EmbassyPage {
+  embassyDrives = []
+  selectedDrive: EmbassyDrive = null
+  loading = true
+
+  constructor(
+    private readonly apiService: ApiService,
+    private readonly navCtrl: NavController,
+    private modalController: ModalController,
+    private stateService: StateService
+  ) {}
+
+  async ngOnInit() {
+    this.embassyDrives = await this.apiService.getEmbassyDrives()
+    this.loading = false
+  }
+
+  async chooseDrive(drive: EmbassyDrive) {    
+    const modal = await this.modalController.create({
+      component: PasswordPage,
+      componentProps: {
+        embassyDrive: drive,
+        verify: false
+      }
+    })
+    modal.onDidDismiss().then(async ret => {
+      if (!ret.data) return
+    })
+    await modal.present();
+  }
+}
--- a/setup-wizard/src/app/pages/home/home.page.html
+++ b/setup-wizard/src/app/pages/home/home.page.html
@@ -7,107 +7,37 @@
          <img src="assets/png/logo.png" style="max-width: 240px;" />
        </div>

-        <ion-card>
-          <ion-card-header class="ion-text-center" style="padding-bottom: 8px;">
-            <ion-card-title>{{ stateService.dataDrive ? 'Startup Options' : 'Select Data Drive'}}</ion-card-title>
-          </ion-card-header>
-
+        <ion-card color="dark">
          <ion-card-content class="ion-margin">
-            <div *ngIf="!stateService.loading && !stateService.dataDrive && dataDrives">
-              <div *ngIf="!dataDrives.length">
-                <h2 color="light">No data drives found</h2>
-                <p color="light">Please connect a data drive to your embassy and refresh the page.</p>
-                <ion-button 
-                    (click)="window.location.reload()"
-                    style="text-align:center"
-                    class="claim-button"
-                  >
-                    Refresh
-                  </ion-button>
-              </div>
-              <div *ngIf="dataDrives.length">
-                <ion-card
-                  color="light"
-                  *ngFor="let drive of dataDrives"
-                  (click)="selectDrive(drive)"
-                  button="true"
-                  style="border-radius: 11px;"
-                  [class.selected]="selectedDrive?.logicalname === drive.logicalname"
-                >
-                  <ion-card-header>
-                    <ion-card-title>{{drive.logicalname}}</ion-card-title>
-                    <ion-card-subtitle>{{drive.labels}}</ion-card-subtitle>
-                  </ion-card-header>
-                
-                  <ion-card-content>
-                    Using {{drive.used}} out of {{drive.capacity}} bytes.
-                  </ion-card-content>
-                </ion-card>
-                <div style="width: 100%; text-align: center;">
-                  <ion-button 
-                    (click)="warn()"
-                    [disabled]="!selectedDrive"
-                    class="claim-button"
-                  >
-                    Next
-                  </ion-button>
-                </div>
-              </div>
-            </div>
-            <div *ngIf="stateService.dataDrive">
-                    <ion-card
-                      (click)="presentPasswordModal()"
-                      button="true"
-                      color="light"
-                      class="wiz-card"
-                      style="text-align: center; background-color: #00919b !important; height: 160px;"
-                    >
-                      <ion-card-header>
-                        <ion-card-title style="font-size: 40px">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"
-                      class="wiz-card"
-                      style="text-align: center; background-color: #bf5900 !important; height: 160px;"
-                    >
-                      <ion-card-header>
-                        <ion-card-title style="font-size: 40px">Recover</ion-card-title>
-                        <ion-card-subtitle>Recover the data from an old embassy</ion-card-subtitle>
-                      </ion-card-header>
-                    </ion-card>
-            </div>
+            <!-- fresh -->
+            <ion-card
+              (click)="embassyNav()"
+              button="true"
+              color="light"
+              style="text-align: center; background-color: #00919b !important; height: 160px; margin-bottom: 20px;   box-shadow: 4px 4px 16px var(--ion-color-light);
+              "
+            >
+            <ion-card-header>
+              <ion-card-title style="font-size: 40px;">Start Fresh</ion-card-title>
+              <ion-card-subtitle>Get started with a brand new Embassy</ion-card-subtitle>
+            </ion-card-header>
+
+            <!-- recover -->
+            </ion-card>
+              <ion-card
+                (click)="recoverNav()"
+                button="true"
+                color="light"
+                style="text-align: center; background-color: #bf5900 !important; height: 160px; box-shadow: 4px 4px 16px var(--ion-color-light);
+                "
+              >
+              <ion-card-header>
+                <ion-card-title style="font-size: 40px;">Recover</ion-card-title>
+                <ion-card-subtitle>Recover the data from an old embassy</ion-card-subtitle>
+              </ion-card-header>
+            </ion-card>
          </ion-card-content>
-
-          <ion-card-header class="card-footer">
-            <ion-item lines="none">
-              <ion-label class="ion-text-wrap">
-                <p *ngIf="!stateService.dataDrive">
-                  Choose drive to save all Embassy data to.
-                </p>
-                <p *ngIf="stateService.dataDrive">
-                  Spin up a brand new Embassy, or recover data from an old device.
-                </p>
-              </ion-label>
-            </ion-item>
-          </ion-card-header>
        </ion-card>
-
-        <div class="divider"></div>
-
-        <div class="footer">
-          <p style="margin-bottom: 30px;">Contact/Community</p>
-          <ion-icon name="logo-youtube"></ion-icon>
-          <ion-icon name="paper-plane"></ion-icon>
-          <ion-icon name="mail"></ion-icon>
-          <ion-icon name="logo-github"></ion-icon>
-          <ion-icon name="logo-twitter"></ion-icon>
-          <ion-icon name="logo-mastodon"></ion-icon>
-          <ion-icon name="logo-medium"></ion-icon>
-        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
--- a/setup-wizard/src/app/pages/home/home.page.ts
+++ b/setup-wizard/src/app/pages/home/home.page.ts
@@ -1,8 +1,5 @@
 import { Component } from '@angular/core'
-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'
+import { NavController } from '@ionic/angular'

@Component({
  selector: 'home',
@@ -10,109 +7,16 @@ import { PasswordPage } from '../password/password.page'
  styleUrls: ['home.page.scss'],
 })
 export class HomePage {
-  dataDrives = []
-  selectedDrive: DataDrive = null
-  console = console
-
  constructor(
-    private readonly apiService: ApiService,
-    private readonly stateService: StateService,
-    private readonly alertController: AlertController,
-    private readonly modalController: ModalController,
-    private readonly loadingCtrl: LoadingController,
+    private readonly navCtrl: NavController,
  ) {}

-  async ngOnInit() {
-    if(!this.stateService.dataDrive) {
-      const loader = await this.loadingCtrl.create({
-        message: 'Fetching data drives'
-      })
-      await loader.present()
-      this.dataDrives = await this.apiService.getDataDrives()
-      loader.dismiss()
-    }
+  async recoverNav () {
+    await this.navCtrl.navigateForward(`/recover`, { animationDirection: 'forward' })
  }

-  selectDrive(drive: DataDrive) {
-    if (drive.logicalname === this.selectedDrive?.logicalname) {
-      this.selectedDrive = null
-    } else {
-      this.selectedDrive = drive
-    }
+  async embassyNav () {
+    await this.navCtrl.navigateForward(`/embassy`, { animationDirection: 'forward' })
  }
-
-  async warn() {
-    const alert = await this.alertController.create({
-      cssClass: 'my-custom-class',
-      header: 'Warning!',
-      message: 'This drive will be entirely wiped of all existing memory.',
-      backdropDismiss: false,
-      buttons: [
-        {
-          text: 'Cancel',
-          role: 'cancel',
-          cssClass: 'cancel-button',
-          handler: () => {
-            this.selectedDrive = null
-          }
-        }, {
-          text: 'Okay',
-          cssClass: 'okay-button',
-          handler: async () => {
-            await this.chooseDrive()
-          }
-        }
-      ]
-    });
-
-    await alert.present();
-  }
-
-  async chooseDrive() {
-    const loader = await this.loadingCtrl.create({
-      message: 'Selecting data drive'
-    })
-    await loader.present()
-    try {
-      await this.apiService.selectDataDrive(this.selectedDrive.logicalname)
-      this.stateService.dataDrive = this.selectedDrive
-    } catch (e) {
-    } finally {
-      loader.dismiss()
-    }
-  }
-
-  async presentPasswordModal() {
-    const modal = await this.modalController.create({
-      component: PasswordPage,
-      backdropDismiss: false,
-      cssClass: 'pw-modal',
-    })
-    modal.onDidDismiss().then(ret => {
-      if(ret.data) {
-        const pass = ret.data.password
-        if (pass) {
-          this.submitPassword(pass)
-        }
-      }
-    })
-    await modal.present();
-  }
-
-  async submitPassword (pw: string) {
-    const loader = await this.loadingCtrl.create({
-      message: 'Setting up your Embassy'
-    })
-    await loader.present()
-
-    try {
-      await this.apiService.submitPassword(pw)
-      console.log('reloading')
-      location.reload()
-    } catch (e) {
-    } finally {
-      loader.dismiss()
-    }
-  }
-
 }
+
--- a/setup-wizard/src/app/pages/password/password.page.html
+++ b/setup-wizard/src/app/pages/password/password.page.html
@@ -1,26 +1,56 @@
 <ion-header>
  <ion-toolbar color="light">
    <ion-title>
-      <span *ngIf="needsVer">Enter Password</span>
-      <span *ngIf="!needsVer">Create Password</span>
+      <span *ngIf="verify">Verify Recovery Drive Password</span>
+      <span *ngIf="!verify">Set Password</span>
    </ion-title>
  </ion-toolbar>
 </ion-header>
-<ion-content color="light">
-  <div style="padding: 8px 24px; height: 100%;">
-    <div *ngIf="needsVer">
-      <ion-input style="color: #e6f4f1 !important;"  type="password" [(ngModel)]="password" placeholder="_________">Password:</ion-input>
-    </div>

-    <div *ngIf="!needsVer">
-      <ion-input (click)="error = ''" (focusout)="validate()" style="color: #e6f4f1 !important;" (keyup)="error = ''" type="password" [(ngModel)]="password" placeholder="_________">Password:</ion-input>
-      <ion-input (focusout)="checkMatch()" style="color: #e6f4f1 !important;" (keyup)="error = ''" type="password" [(ngModel)]="passwordVer" placeholder="_________">Verify Password:</ion-input>
+<ion-content color="light">
+  <div style="padding: 8px 24px;">
+    <ng-container *ngIf="verify">
+      <p style="padding: 3px 0">Password:</p>
+      <ion-input (click)="error = ''" color="light"  type="password" [(ngModel)]="password"  placeholder="*********"></ion-input>
+    </ng-container>
+
+    <div *ngIf="!verify">
+      <p *ngIf="embassyDrive.used > 0" style="padding-bottom: 15px;color: var(--ion-color-warning);"><b>Warning:</b> After submit, any data currently stored on <b>{{ embassyDrive.labels.length ? embassyDrive.labels.join(' / ') : embassyDrive.logicalname }}</b> will be wiped.</p>
+      <p style="padding: 3px 0">Password:</p>
+      <ion-input 
+        (click)="error = ''"
+        color="light"
+        (focusout)="validate()"
+        (keyup)="error = ''"
+        type="password"
+        [(ngModel)]="password"
+        placeholder="*********"
+      ></ion-input>
+      
+      <p style="padding: 3px 0">Verify Password:</p>
+      <ion-input
+        (focusout)="validate()"
+        color="light"
+        (keyup)="error = ''"
+        type="password"
+        [(ngModel)]="passwordVer"
+        placeholder="*********"
+      ></ion-input>
    </div>
    <p style="color: #FF4961;">{{error}}</p>
-    <div style="text-align: right; position: absolute; bottom: 10px; right: 24px;">
-      <ion-button class="claim-button" item-end (click)="cancel()" style="margin-right: 10px;">Cancel</ion-button>
-      <ion-button class="claim-button" item-end (click)="submitPassword()" [disabled]="!password">Submit</ion-button>
-    </div>
  </div>
-  
 </ion-content>
+
+<ion-footer>
+  <ion-toolbar color="light">
+    <ion-buttons slot="end" class="ion-padding-end">
+      <ion-button class="claim-button" (click)="cancel()">
+        Cancel
+      </ion-button>
+      <ion-button class="claim-button" (click)="verify ? verifyPw() : submitPw()">
+        {{ verify ? 'Verify Password' : 'Submit' }}
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-footer>
+
--- a/setup-wizard/src/app/pages/password/password.page.scss
+++ b/setup-wizard/src/app/pages/password/password.page.scss
@@ -1,7 +1,15 @@
 .claim-button {
  margin-inline-start: 0;
  margin-inline-end: 0;
-  margin-top: 24px;
+  margin: 6px;
  height: 48px;
  --background: linear-gradient(45deg, var(--ion-color-light) 16%, var(--ion-color-medium) 150%);
+}
+
+ion-input {
+  font-weight: 500;
+  --placeholder-font-weight: 400;
+  width: 100%;
+  background: var(--ion-color-dark);
+  border-radius: 3px;
 }
--- a/setup-wizard/src/app/pages/password/password.page.ts
+++ b/setup-wizard/src/app/pages/password/password.page.ts
@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core'
-import { ModalController } from '@ionic/angular'
-import { RecoveryDrive } from 'src/app/services/api/api.service'
+import { LoadingController, ModalController } from '@ionic/angular'
+import { ApiService, EmbassyDrive, RecoveryDrive } from 'src/app/services/api/api.service'

@Component({
  selector: 'password',
@@ -9,51 +9,61 @@ import { RecoveryDrive } from 'src/app/services/api/api.service'
 })
 export class PasswordPage {
  @Input() recoveryDrive: RecoveryDrive
-
-  needsVer: boolean
+  @Input() embassyDrive: EmbassyDrive
+  @Input() verify: boolean

  error = ''
  password = ''
  passwordVer = ''

  constructor(
-    private modalController: ModalController
+    private modalController: ModalController,
+    private apiService: ApiService,
+    private loadingCtrl: LoadingController
  ) {}

-  ngOnInit() {
-    this.needsVer = !!this.recoveryDrive && !this.recoveryDrive.version.startsWith('0.2')
+  ngOnInit() { }
+
+  async verifyPw () {
+    
+    if(!this.recoveryDrive) this.error = 'No recovery drive' // unreachable
+    const loader = await this.loadingCtrl.create({
+      message: 'Verifying Password'
+    })
+    await loader.present()
+
+    try {
+      const isCorrectPassword = await this.apiService.verifyRecoveryPassword(this.recoveryDrive.logicalname, this.password)
+      if(isCorrectPassword) {
+        this.modalController.dismiss({ password: this.password })
+      } else {
+        this.error = "Incorrect password provided"
+      }
+    } catch (e) {
+      this.error = 'Error connecting to Embassy'
+    } finally {
+      loader.dismiss()
+    }
  }

-  async submitPassword () {
-    if(!this.needsVer) {
-      this.validate()
-      if(!this.error) {
-        this.checkMatch()
-      }
-      this.modalController.dismiss({
-        password: this.password,
-      })
-    } else {
-      this.modalController.dismiss({
-        password: this.password,
-      })
-    }
+  async submitPw () {
+    this.validate()
+    if(this.error) return
+
+
  }

  validate () {
    if (this.password.length < 12) {
      this.error="*passwords must be 12 characters or greater"
-    }
-  }
-
-  checkMatch () {
-    if (this.password !== this.passwordVer) {
+    } else if (this.password !== this.passwordVer) {
      this.error="*passwords dont match"
    } else {
      this.error = ''
    }
  }

+
  cancel () {
    this.modalController.dismiss()
  }
--- a/setup-wizard/src/app/pages/recover/recover.page.html
+++ b/setup-wizard/src/app/pages/recover/recover.page.html
@@ -7,50 +7,61 @@
          <img src="assets/png/logo.png" style="max-width: 240px;" />
        </div>

-        <ion-card>
+        <ion-card color="dark">
          <ion-card-header class="ion-text-center" style="padding-bottom: 8px;">
-            <ion-card-title>{{ stateService.recoveryDrive && stateService.polling ? 'Recovery Progress: ' + (100 * stateService.dataProgress) + '%' : 'Select Recovery Drive'}}</ion-card-title>
+            <ion-card-title>{{ loading ? 'Loading Recovery Drives' : 'Select Recovery Drive'}}</ion-card-title>
          </ion-card-header>

+
          <ion-card-content class="ion-margin">
-            <div *ngIf="!loading && recoveryDrives && !recoveryDrives.length">
+            <ng-container *ngIf="!loading && !recoveryDrives.length">
              <h2 color="light">No recovery drives found</h2>
              <p color="light">Please connect a recovery drive to your embassy and refresh the page.</p>
-            </div>
-            <div *ngIf="!stateService.polling && recoveryDrives?.length">
-              <div>
-                <ion-card 
-                  class="wiz-card"
-                  *ngFor="let drive of recoveryDrives"
-                  (click)="selectDrive(drive)"
-                  button="true"
-                  [class.selected]="selectedDrive?.logicalname === drive.logicalname"
-                  color="light"
-                >
-                  <ion-card-header>
-                    <ion-card-title>{{drive.logicalname}}</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>
-                <div style="width: 100%; text-align: center;;">
-                  <ion-button 
-                  (click)="presentPasswordModal()"
-                  [disabled]="!selectedDrive"
-                  style="text-align:center"
-                  size="large"
+              <ion-button 
+                (click)="window.location.reload()"
+                style="text-align:center"
+                class="claim-button"
+              >
+                Refresh
+              </ion-button>
+            </ng-container>
+
+            <ion-item-group>
+              <ng-container *ngIf="loading">
+                <ion-item button color="light" lines="none">
+                  <ion-avatar slot="start">
+                    <ion-skeleton-text animated></ion-skeleton-text>
+                  </ion-avatar>
+                  <ion-label class="ion-text-wrap">
+                    <ion-skeleton-text style="width: 80%; margin: 13px 0;" animated></ion-skeleton-text>
+                    <ion-skeleton-text style="width: 60%; margin: 10px 0;" animated></ion-skeleton-text>
+                    <ion-skeleton-text style="width: 30%; margin: 8px 0;" animated></ion-skeleton-text>
+                  </ion-label>
+                </ion-item>
+              </ng-container>
+              <ng-container *ngIf="recoveryDrives.length">
+                <ion-item (click)="chooseDrive(drive)" class="ion-margin-bottom" button color="light" lines="none" *ngFor="let drive of recoveryDrives" [ngClass]="drive.logicalname === selectedDrive?.logicalname ? 'selected' : null">
+                  <ion-icon slot="start" name="save-outline"></ion-icon>
+                  <ion-label class="ion-text-wrap">
+                    <h1>{{ drive.logicalname }}</h1>
+                    <h2>{{ drive.name }}</h2>
+                    <p> Embassy version: {{drive.version}}</p>
+                  </ion-label>
+                  <ion-icon *ngIf="drive.version.startsWith('0.2') || passwords[drive.logicalname]" color="success" slot="end" name="lock-open-outline"></ion-icon>
+                  <ion-icon *ngIf="!drive.version.startsWith('0.2') && !passwords[drive.logicalname]" color="danger" slot="end" name="lock-closed-outline"></ion-icon>
+
+                </ion-item>
+              </ng-container>
+              <ion-button 
+                  (click)="selectRecoveryDrive()"
+                  [disabled]="!selectedDrive || (!passwords[selectedDrive.logicalname] && !selectedDrive.version.startsWith('0.2'))"
                  class="claim-button"
-                  >
-                    Next
-                  </ion-button>
-                </div>
-              </div>
-              
-            </div>
-            <div *ngIf="stateService.polling" style="width: 100%; text-align: center;">
+                >
+                  Next
+                </ion-button>
+            </ion-item-group>
+
+            <!-- <div *ngIf="stateService.polling" style="width: 100%; text-align: center;">
              <ion-progress-bar color="primary" style="max-width: 700px; margin: auto; padding-bottom: 20px; margin-bottom: 40px;" value="{{stateService.dataProgress}}"></ion-progress-bar>
              <ion-button 
                (click)="navToEmbassy()"
@@ -60,35 +71,9 @@
              >
                Go To Embassy
              </ion-button>
-            </div>
+            </div> -->
          </ion-card-content>
-
-          <ion-card-header class="card-footer">
-            <ion-item lines="none">
-              <ion-label class="ion-text-wrap">
-                <p *ngIf="!stateService.recoveryDrive">
-                  Choose drive recover Embassy data from.
-                </p>
-                <p *ngIf="stateService.recoveryDrive && stateService.polling">
-                  Recovering old Embassy data.
-                </p>
-              </ion-label>
-            </ion-item>
-          </ion-card-header>
        </ion-card>
-
-        <div class="divider"></div>
-
-        <div class="footer">
-          <p style="margin-bottom: 30px;">Contact/Community</p>
-          <ion-icon name="logo-youtube"></ion-icon>
-          <ion-icon name="paper-plane"></ion-icon>
-          <ion-icon name="mail"></ion-icon>
-          <ion-icon name="logo-github"></ion-icon>
-          <ion-icon name="logo-twitter"></ion-icon>
-          <ion-icon name="logo-mastodon"></ion-icon>
-          <ion-icon name="logo-medium"></ion-icon>
-        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
--- a/setup-wizard/src/app/pages/recover/recover.page.scss
+++ b/setup-wizard/src/app/pages/recover/recover.page.scss
@@ -1,5 +1,7 @@
 .selected {
-  border: 4px solid gray;
+  border-radius: 8px;
+  border: 4px solid var(--ion-color-secondary);
+  box-shadow: 4px 4px 16px var(--ion-color-light);
 }

 ion-card-title {
--- a/setup-wizard/src/app/pages/recover/recover.page.ts
+++ b/setup-wizard/src/app/pages/recover/recover.page.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core'
-import { AlertController, ModalController, LoadingController } from '@ionic/angular'
+import { ModalController, NavController } 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'
@@ -10,86 +10,58 @@ import { PasswordPage } from '../password/password.page'
  styleUrls: ['recover.page.scss'],
 })
 export class RecoverPage {
+  passwords = {}
  recoveryDrives = []
  selectedDrive: RecoveryDrive = null
  loading = true

  constructor(
    private readonly apiService: ApiService,
-    private readonly stateService: StateService,
-    public alertController: AlertController,
+    private readonly navCtrl: NavController,
    private modalController: ModalController,
-    private readonly loadingCtrl: LoadingController,
+    private stateService: StateService
  ) {}

  async ngOnInit() {
-    if(!this.stateService.recoveryDrive) {
-      const loader = await this.loadingCtrl.create({
-        message: 'Fetching recovery drives'
-      })
-      await loader.present()
-      this.recoveryDrives = await this.apiService.getRecoveryDrives()
-
-      loader.dismiss()  
-      this.loading = false
-    } else {
-      this.loading = false
-      this.stateService.pollDataTransferProgress()
-    }
+    this.recoveryDrives = await this.apiService.getRecoveryDrives()
+    this.loading = false
  }

-  selectDrive(drive: RecoveryDrive) {
-    if (drive.logicalname === this.selectedDrive?.logicalname) {
+  async chooseDrive(drive: RecoveryDrive) {
+
+    if (this.selectedDrive?.logicalname === drive.logicalname) {
      this.selectedDrive = null
+      return
    } else {
      this.selectedDrive = drive
    }
-  }

-  async chooseDrive() {
-    this.presentPasswordModal()
-  }
+    if (drive.version.startsWith('0.2') || this.passwords[drive.logicalname]) return

-  async presentPasswordModal() {
    const modal = await this.modalController.create({
      component: PasswordPage,
-      backdropDismiss: false,
-      cssClass: 'pw-modal',
      componentProps: {
        recoveryDrive: this.selectedDrive,
+        verify: true
      }
    })
-    modal.onDidDismiss().then(ret => {
-      if(ret.data) {
-        const pass = ret.data.password
-        if(pass) {
-          this.submitPWAndDrive(pass)
-        }
+    modal.onDidDismiss().then(async ret => {
+      if (!ret.data) {
+        this.selectedDrive = null
+      } else if(ret.data.password) {
+        this.passwords[drive.logicalname] = ret.data.password
      }
+      
    })
    await modal.present();
  }

-  async submitPWAndDrive(pw: string) {
-    const loader = await this.loadingCtrl.create({
-      message: 'Validating password'
-    })
-    await loader.present()
-
-    try {
-      this.stateService.recoveryDrive = this.selectedDrive
-      await this.apiService.selectRecoveryDrive(this.selectedDrive.logicalname, pw)
-      this.stateService.pollDataTransferProgress()
-    } catch (e) {
-    } finally {
-      loader.dismiss()
-    }
-
-
+  async selectRecoveryDrive() {
+    this.stateService.recoveryDrive = this.selectedDrive
+    const pw = this.passwords[this.selectedDrive.logicalname]
+    if(pw) {
+      this.stateService.recoveryPassword = pw
+    } 
+    await this.navCtrl.navigateForward(`/embassy`, { animationDirection: 'forward' })
  }
-
-  async navToEmbassy() {
-    location.reload()
-  }
-
 }
--- a/setup-wizard/src/app/services/api/api.service.ts
+++ b/setup-wizard/src/app/services/api/api.service.ts
@@ -3,18 +3,13 @@ import { Subject } from 'rxjs'
 export abstract class ApiService {
  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 getEmbassyDrives (): Promise<EmbassyDrive[]>;
+  abstract selectEmbassyDrive (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 {
-  'data-drive': DataDrive | null;
-  'recovery-drive': RecoveryDrive | null;
+  abstract verifyRecoveryPassword (logicalname: string, password: string): Promise<boolean>;
 }

 export interface TransferProgress {
@@ -22,7 +17,7 @@ export interface TransferProgress {
  'total-bytes': number;
 }

-export interface DataDrive {
+export interface EmbassyDrive {
  logicalname: string;
  labels: string[];
  capacity: number;
--- a/setup-wizard/src/app/services/api/mock-api.service.ts
+++ b/setup-wizard/src/app/services/api/mock-api.service.ts
@@ -14,14 +14,14 @@ export class MockApiService extends ApiService {
  async getState() {
    await pauseFor(2000)
    return {
-      'data-drive': 
-      // null,
-      {
-        logicalname: 'name1',
-        labels: ['label 1', 'label 2'],
-        capacity: 1600,
-        used: 200,
-      },
+      'embassy-drive': 
+      null,
+      // {
+      //   logicalname: 'name1',
+      //   labels: ['label 1', 'label 2'],
+      //   capacity: 1600,
+      //   used: 200,
+      // },
      'recovery-drive': 
      null,
      // {
@@ -40,25 +40,25 @@ export class MockApiService extends ApiService {
    }
  }

-  async getDataDrives() {
+  async getEmbassyDrives() {
    await pauseFor(2000)
    return [
      {
        logicalname: 'Name1',
        labels: ['label 1', 'label 2'],
-        capacity: 1600,
-        used: 200,
+        capacity: 1600.66666,
+        used: 200.1255312,
      },
      {
        logicalname: 'Name2',
        labels: [],
-        capacity: 1600,
-        used: 0,
+        capacity: 1600.01234,
+        used: 0.00,
      }
    ]
  }

-  async selectDataDrive(drive) {
+  async selectEmbassyDrive(drive) {
    await pauseFor(2000)
    return
  }
@@ -67,9 +67,14 @@ export class MockApiService extends ApiService {
    await pauseFor(2000)
    return [
      {
-        logicalname: 'name1',
+        logicalname: 'Name1',
        version: '0.3.3',
        name: 'My Embassy'
+      },
+      {
+        logicalname: 'Name2',
+        version: '0.2.7',
+        name: 'My Embassy'
      }
    ]
  }
@@ -83,6 +88,11 @@ export class MockApiService extends ApiService {
    await pauseFor(2000)
    return
  }
+
+  async verifyRecoveryPassword(logicalname, password) {
+    await pauseFor(2000)
+    return password.length > 8
+  }
 }

 let tries = 0
--- a/setup-wizard/src/app/services/state.service.ts
+++ b/setup-wizard/src/app/services/state.service.ts
@@ -1,15 +1,15 @@
 import { Injectable } from '@angular/core'
-import { ApiService, DataDrive, RecoveryDrive } from './api/api.service'
+import { ApiService, EmbassyDrive, RecoveryDrive } from './api/api.service'

@Injectable({
  providedIn: 'root'
 })
 export class StateService {
-  loading = true
  polling = false

-  dataDrive: DataDrive;
+  embassyDrive: EmbassyDrive;
  recoveryDrive: RecoveryDrive;
+  recoveryPassword: string
  dataTransferProgress: { bytesTransfered: number; totalBytes: number } | null;
  dataProgress = 0;

@@ -17,15 +17,14 @@ export class StateService {
    private readonly apiService: ApiService
  ) {}

-  async getState() {
-    this.loading = true
-    const state = await this.apiService.getState()
-    if(state) {
-      this.dataDrive = state['data-drive']
-      this.recoveryDrive = state['recovery-drive']
+  reset() {
+    this.polling = false

-      this.loading = false
-    }
+    this.embassyDrive = null
+    this.recoveryDrive = null
+    this.recoveryPassword = null
+    this.dataTransferProgress = null
+    this.dataProgress = 0
  }

  async pollDataTransferProgress() {
--- a/setup-wizard/src/theme/variables.scss
+++ b/setup-wizard/src/theme/variables.scss
@@ -3,6 +3,9 @@

 /** Ionic CSS Variables **/
 :root {
+  --ion-text-color: var(--ion-color-dark);
+  --ion-text-color-rgb: var(--ion-color-dark-rgb);
+
  --ion-font-family: 'Benton Sans';
  /** primary **/
  --ion-color-primary: #428cff;
@@ -53,12 +56,12 @@
  --ion-color-danger-tint: #ff5b71;

  /** dark **/
-  --ion-color-dark: #f4f5f8;
-  --ion-color-dark-rgb: 244,245,248;
+  --ion-color-dark: #e0e0e0;
+  --ion-color-dark-rgb: 224,224,224;
  --ion-color-dark-contrast: #000000;
  --ion-color-dark-contrast-rgb: 0,0,0;
-  --ion-color-dark-shade: #d7d8da;
-  --ion-color-dark-tint: #f5f6f9;
+  --ion-color-dark-shade: #bfbfbf;
+  --ion-color-dark-tint: #d8d8d8;

  /** medium **/
  --ion-color-medium: #989aa2;