mo style

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

@@ -1,14 +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)
+    loadChildren: () => import('./pages/home/home.module').then( m => m.HomePageModule),
+    canActivate: [CanActivateHome],
+
   },
   {
     path: 'recover',
-    loadChildren: () => import('./pages/recover/recover.module').then( m => m.RecoverPageModule)
+    loadChildren: () => import('./pages/recover/recover.module').then( m => m.RecoverPageModule),
+    canActivate: [CanActivateRecover]
   },
 ];
 

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

@@ -0,0 +1,32 @@
+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
+  }
+}

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

@@ -28,7 +28,7 @@
       <div style="width: 100%; text-align: center;">
         <ion-button 
         (click)="warn()"
-        color="tertiary"
+        color="primary"
         [disabled]="!selectedDrive"
         style="text-align:center"
         size="large"

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

@@ -1,5 +1,5 @@
 <ion-content>
-  <div *ngIf="!stateService.recoveryDrive && dataDrives?.length">
+  <div *ngIf="!stateService.polling && dataDrives?.length">
     <div *ngIf="!dataDrives.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>
@@ -26,7 +26,7 @@
       <div style="width: 100%; text-align: center;;">
         <ion-button 
         (click)="presentPasswordModal()"
-        color="tertiary"
+        color="primary"
         [disabled]="!selectedDrive"
         style="text-align:center"
         size="large"
@@ -37,13 +37,12 @@
     </div>
     
   </div>
-  <div *ngIf="stateService.recoveryDrive" style="width: 100%; text-align: center;">
-    <h2>Recovering Your Embassy</h2>
-    <ion-progress-bar style="max-width: 700px; margin: auto;" value="{{stateService.dataProgress}}"></ion-progress-bar>
-    <h2>Progress: {{ 100 * stateService.dataProgress }}% <ion-spinner *ngIf="stateService.dataProgress !== 1"></ion-spinner> </h2>
+  <div *ngIf="stateService.polling" style="width: 100%; text-align: center;">
+    <h2 style="padding-bottom: 30px; padding-top: 70px;">Recovery Progress: {{ 100 * stateService.dataProgress }}% </h2>
+    <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()"
-      color="tertiary" 
+      color="primary" 
       [disabled]="stateService.dataProgress !== 1"
       style="text-align:center"
       size="large"

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

@@ -72,8 +72,8 @@ export class RecoverPage {
     await loader.present()
 
     try {
-      await this.apiService.selectRecoveryDrive(this.selectedDrive.logicalname, pw)
       this.stateService.recoveryDrive = this.selectedDrive
+      await this.apiService.selectRecoveryDrive(this.selectedDrive.logicalname, pw)
       this.stateService.pollDataTransferProgress()
     } catch (e) {
     } finally {

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

@@ -15,20 +15,20 @@ export class MockApiService extends ApiService {
     await pauseFor(2000)
     return {
       'data-drive': 
-      // null,
-      {
-        logicalname: 'name1',
-        labels: ['label 1', 'label 2'],
-        capacity: 1600,
-        used: 200,
-      },
+      null,
+      // {
+      //   logicalname: 'name1',
+      //   labels: ['label 1', 'label 2'],
+      //   capacity: 1600,
+      //   used: 200,
+      // },
       'recovery-drive': 
-      // null,
-      {
-        logicalname: 'name1',
-        version: '0.3.3',
-        name: 'My Embassy'
-      }
+      null,
+      // {
+      //   logicalname: 'name1',
+      //   version: '0.3.3',
+      //   name: 'My Embassy'
+      // }
     }
   }
 

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

@@ -5,7 +5,8 @@ import { ApiService, DataDrive, RecoveryDrive } from './api/api.service'
   providedIn: 'root'
 })
 export class StateService {
-  loading = true;
+  loading = true
+  polling = false
 
   dataDrive: DataDrive;
   recoveryDrive: RecoveryDrive;
@@ -27,6 +28,7 @@ export class StateService {
   }
 
   async pollDataTransferProgress() {
+    this.polling = true
     await pauseFor(7000)
 
     if (

setup-wizard/src/theme/variables.scss

@@ -28,7 +28,7 @@
   --ion-color-tertiary-tint: #FF4961;
 
   /** success **/
-  --ion-color-success: #2dd36f;
+  --ion-color-success: #a5e77f;
   --ion-color-success-rgb: 45, 211, 111;
   --ion-color-success-contrast: #ffffff;
   --ion-color-success-contrast-rgb: 255, 255, 255;
@@ -104,7 +104,7 @@
     --ion-color-tertiary-shade: #FF4961;
     --ion-color-tertiary-tint: #FF4961;
 
-    --ion-color-success: #2fdf75;
+    --ion-color-success: #a5e77f;
     --ion-color-success-rgb: 47,223,117;
     --ion-color-success-contrast: #000000;
     --ion-color-success-contrast-rgb: 0,0,0;