stylized

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

@@ -1,8 +1,12 @@
 <ion-app>
-  <ion-content *ngIf="stateService.loading; else loaded">
+  <ion-header>
-    <h2 color="light">Connecting to Embassy</h2>
+    <ion-toolbar color="primary">
-  </ion-content>
+      <ion-title>
-  <ng-template #loaded>
+        Embassy Setup Wizard
+      </ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content *ngIf="!stateService.loading" class="has-header">
     <ion-router-outlet></ion-router-outlet>
-  </ng-template>
+  </ion-content>
 </ion-app>

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

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core'
-import { NavController, ToastController } from '@ionic/angular'
+import { LoadingController, NavController, ToastController } from '@ionic/angular'
 import { ApiService } from './services/api/api.service'
 import { StateService } from './services/state.service'
 
@@ -14,7 +14,9 @@ export class AppComponent implements OnInit {
     private readonly apiService: ApiService,
     private readonly stateService: StateService,
     private readonly navCtrl: NavController,
-    private readonly toastController: ToastController
+    private readonly toastController: ToastController,
+    private readonly loadingCtrl: LoadingController,
+
   ) {
     this.apiService.watchError$.subscribe(error => {
       if(error) {
@@ -24,11 +26,19 @@ export class AppComponent implements OnInit {
   }
 
   async ngOnInit() {
-    await this.stateService.getState()
+    const loader = await this.loadingCtrl.create({
-    if (this.stateService.recoveryDrive) {
+      message: 'Connecting to your Embassy'
-      await this.navCtrl.navigateForward(`/recover`)
+    })
-    } else {
+    await loader.present()
-      await this.navCtrl.navigateForward(`/wizard`)
+    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()
     }
   }
 

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

@@ -1,10 +1,3 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>
-      Setup Wizard
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
 <ion-content>
   <div *ngIf="!stateService.dataDrive && dataDrives">
     <div *ngIf="!dataDrives.length">
@@ -12,13 +5,16 @@
       <p color="light">Please connect a data drive to your embassy and refresh the page.</p>
     </div>
     <div *ngIf="dataDrives.length">
-      <h2 color="light">Select Data Drive</h2>
+      <h2 style="text-align: center;" color="secondary">Select Data Drive</h2>
+      
       <ion-card 
+        color="medium"
         *ngFor="let drive of dataDrives"
         (click)="selectDrive(drive)"
         button="true"
         [class.selected]="selectedDrive?.logicalname === drive.logicalname"
         color="light"
+        class="wiz-card"
       >
         <ion-card-header>
           <ion-card-title>{{drive.logicalname}}</ion-card-title>
@@ -29,30 +25,52 @@
           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 style="width: 100%; text-align: center;">
+        <ion-button 
+        (click)="warn()"
+        color="tertiary"
+        [disabled]="!selectedDrive"
+        style="text-align:center"
+        size="large"
+        >
+          Next
+        </ion-button>
+      </div>
     </div>
   </div>
   <div *ngIf="stateService.dataDrive">
-    <ion-card
+    <ion-grid style="max-width: 800px; margin: auto; margin-top: 30px;">
-      (click)="presentPasswordModal()"
+      <ion-row>
-      button="true"
+        <ion-col size-xs="12" size-sm="6">
-      color="light"
+          <ion-card
-    >
+            (click)="presentPasswordModal()"
-      <ion-card-header>
+            button="true"
-        <ion-card-title>Start Fresh</ion-card-title>
+            color="light"
-        <ion-card-subtitle>Get started with a brand new Embassy</ion-card-subtitle>
+            class="wiz-card"
-      </ion-card-header>
+            style="text-align: center; background-color: #00919b !important; height: 160px;"
-    </ion-card>
+          >
+            <ion-card-header style="margin-top: 25px;">
+              <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-col>
+        <ion-col size-xs="12" size-sm="6">
+          <ion-card
+            [routerLink]="['/recover']"
+            button="true"
+            color="light"
+            class="wiz-card"
+            style="text-align: center; background-color: #bf5900 !important; height: 160px;"
+          >
+            <ion-card-header style="margin-top: 25px;">
+              <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-col>
+      </ion-row>
+    </ion-grid>
 
-    <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

@@ -1,3 +1,3 @@
 .selected {
   border: 1px solid white;
-}
+}

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

@@ -48,16 +48,18 @@ export class HomePage {
       cssClass: 'my-custom-class',
       header: 'Warning!',
       message: 'This drive will be entirely wiped of all memory.',
+      backdropDismiss: false,
       buttons: [
         {
           text: 'Cancel',
           role: 'cancel',
-          cssClass: 'secondary',
+          cssClass: 'cancel-button',
           handler: () => {
             this.selectedDrive = null
           }
         }, {
           text: 'Okay',
+          cssClass: 'okay-button',
           handler: async () => {
             await this.chooseDrive()
           }
@@ -85,7 +87,8 @@ export class HomePage {
   async presentPasswordModal() {
     const modal = await this.modalController.create({
       component: PasswordPage,
-      backdropDismiss: false
+      backdropDismiss: false,
+      cssClass: 'pw-modal',
     })
     modal.onDidDismiss().then(ret => {
       const pass = ret.data.password

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

@@ -1,22 +1,26 @@
 <ion-header>
   <ion-toolbar>
     <ion-title>
-      Setup Wizard
+      <span *ngIf="needsVer">Enter Password</span>
+      <span *ngIf="!needsVer">Create Password</span>
     </ion-title>
   </ion-toolbar>
 </ion-header>
-<ion-content>
+<ion-content color="light">
-  <div *ngIf="needsVer">
+  <div style="padding: 8px 24px; height: 100%;">
-    <h2>Enter Password</h2>
+    <div *ngIf="needsVer">
-    <ion-input type="password" [(ngModel)]="password">Password:</ion-input>
+      <ion-input style="color: #e6f4f1 !important;"  type="password" [(ngModel)]="password" placeholder="_________">Password:</ion-input>
-  </div>
+    </div>
 
-  <div *ngIf="!needsVer">
+    <div *ngIf="!needsVer">
-    <h2>Create Password</h2>
+      <ion-input style="color: #e6f4f1 !important;" (keyup)="error = ''" type="password" [(ngModel)]="password" placeholder="_________">Password:</ion-input>
-    <ion-input type="password" [(ngModel)]="password">Password:</ion-input>
+      <ion-input style="color: #e6f4f1 !important;" (keyup)="error = ''" type="password" [(ngModel)]="passwordVer" placeholder="_________">Verify Password:</ion-input>
-    <ion-input type="password" [(ngModel)]="passwordVer">Verify Password:</ion-input>
+    </div>
+    <p style="color: #FF4961;">{{error}}</p>
+    <div style="text-align: right; position: absolute; bottom: 10px; right: 24px;">
+      <ion-button color="tertiary" item-end (click)="cancel()">Cancel</ion-button>
+      <ion-button color="primary" item-end (click)="submitPassword()" [disabled]="!password">Submit</ion-button>
+    </div>
   </div>
-  <p>{{error}}</p>
+  
-  <ion-button (click)="cancel()">Cancel</ion-button>
-  <ion-button (click)="submitPassword()" [disabled]="!password">Submit</ion-button>
 </ion-content>

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

@@ -25,8 +25,12 @@ export class PasswordPage {
   }
 
   async submitPassword () {
-    if (!this.needsVer && this.password !== this.passwordVer) {
+    if(!this.needsVer) {
-      this.error="*passwords dont match"
+      if (this.password.length < 12) {
+        this.error="*passwords must be 12 characters or greater"
+      } else if (this.password !== this.passwordVer) {
+        this.error="*passwords dont match"
+      }
     } else {
       this.modalController.dismiss({
         password: this.password,

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

@@ -1,10 +1,3 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-title>
-      Setup Wizard
-    </ion-title>
-  </ion-toolbar>
-</ion-header>
 <ion-content>
   <div *ngIf="!stateService.recoveryDrive && dataDrives?.length">
     <div *ngIf="!dataDrives.length">
@@ -12,8 +5,9 @@
       <p color="light">Please connect a recovery drive to your embassy and refresh the page.</p>
     </div>
     <div>
-      <h2 color="light">Select Recovery Drive</h2>
+      <h2 style="text-align: center;" color="secondary">Select Recovery Drive</h2>
       <ion-card 
+        class="wiz-card"
         *ngFor="let drive of dataDrives"
         (click)="selectDrive(drive)"
         button="true"
@@ -29,17 +23,30 @@
           Currently running {{drive.version}}
         </ion-card-content>
       </ion-card>
-      <ion-button (click)="chooseDrive()" color="primary" [disabled]="!selectedDrive">Next</ion-button>
+      <div style="width: 100%; text-align: center;;">
+        <ion-button 
+        (click)="presentPasswordModal()"
+        color="tertiary"
+        [disabled]="!selectedDrive"
+        style="text-align:center"
+        size="large"
+        >
+          Next
+        </ion-button>
+      </div>
     </div>
     
   </div>
-  <div *ngIf="stateService.recoveryDrive">
+  <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>
-    <ion-progress-bar value="{{stateService.dataProgress}}"></ion-progress-bar>
     <ion-button 
       (click)="navToEmbassy()"
-      color="primary" 
+      color="tertiary" 
       [disabled]="stateService.dataProgress !== 1"
+      style="text-align:center"
+      size="large"
     >
       Go To Embassy
     </ion-button>

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

@@ -51,6 +51,7 @@ export class RecoverPage {
     const modal = await this.modalController.create({
       component: PasswordPage,
       backdropDismiss: false,
+      cssClass: 'pw-modal',
       componentProps: {
         recoveryDrive: this.selectedDrive,
       }

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

@@ -23,12 +23,12 @@ export class MockApiService extends ApiService {
         used: 200,
       },
       'recovery-drive': 
-      null,
+      // null,
-      // {
+      {
-      //   logicalname: 'name1',
+        logicalname: 'name1',
-      //   version: '0.3.3',
+        version: '0.3.3',
-      //   name: 'My Embassy'
+        name: 'My Embassy'
-      // }
+      }
     }
   }
 

setup-wizard/src/global.scss

@@ -24,3 +24,20 @@
 @import "~@ionic/angular/css/text-alignment.css";
 @import "~@ionic/angular/css/text-transformation.css";
 @import "~@ionic/angular/css/flex-utils.css";
+
+.cancel-button {
+  color: #FF4961 !important;
+}
+
+.okay-button {
+  color: #00AACC !important;
+}
+
+.wiz-card {
+  max-width: 800px; margin: auto; margin-bottom: 10px;
+}
+
+.pw-modal .modal-wrapper{
+  width: 400px;
+  height: 300px;
+}

setup-wizard/src/index.html

@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="utf-8" />
-  <title>Setup Wizard</title>
+  <title>Embassy Setup Wizard</title>
 
   <base href="/" />
 

setup-wizard/src/theme/variables.scss

@@ -4,7 +4,7 @@
 /** Ionic CSS Variables **/
 :root {
   /** primary **/
-  --ion-color-primary: #3880ff;
+  --ion-color-primary: #007495;
   --ion-color-primary-rgb: 56, 128, 255;
   --ion-color-primary-contrast: #ffffff;
   --ion-color-primary-contrast-rgb: 255, 255, 255;
@@ -12,7 +12,7 @@
   --ion-color-primary-tint: #4c8dff;
 
   /** secondary **/
-  --ion-color-secondary: #3dc2ff;
+  --ion-color-secondary: #00AACC;
   --ion-color-secondary-rgb: 61, 194, 255;
   --ion-color-secondary-contrast: #ffffff;
   --ion-color-secondary-contrast-rgb: 255, 255, 255;
@@ -20,12 +20,12 @@
   --ion-color-secondary-tint: #50c8ff;
 
   /** tertiary **/
-  --ion-color-tertiary: #5260ff;
+  --ion-color-tertiary: #FF4961;
   --ion-color-tertiary-rgb: 82, 96, 255;
   --ion-color-tertiary-contrast: #ffffff;
   --ion-color-tertiary-contrast-rgb: 255, 255, 255;
-  --ion-color-tertiary-shade: #4854e0;
+  --ion-color-tertiary-shade: #FF4961;
-  --ion-color-tertiary-tint: #6370ff;
+  --ion-color-tertiary-tint: #FF4961;
 
   /** success **/
   --ion-color-success: #2dd36f;
@@ -60,7 +60,7 @@
   --ion-color-dark-tint: #383a3e;
 
   /** medium **/
-  --ion-color-medium: #92949c;
+  --ion-color-medium: #574141;
   --ion-color-medium-rgb: 146, 148, 156;
   --ion-color-medium-contrast: #ffffff;
   --ion-color-medium-contrast-rgb: 255, 255, 255;
@@ -97,12 +97,12 @@
     --ion-color-secondary-shade: #46b0e0;
     --ion-color-secondary-tint: #62ceff;
 
-    --ion-color-tertiary: #6a64ff;
+    --ion-color-tertiary: #FF4961;
     --ion-color-tertiary-rgb: 106,100,255;
     --ion-color-tertiary-contrast: #ffffff;
     --ion-color-tertiary-contrast-rgb: 255,255,255;
-    --ion-color-tertiary-shade: #5d58e0;
+    --ion-color-tertiary-shade: #FF4961;
-    --ion-color-tertiary-tint: #7974ff;
+    --ion-color-tertiary-tint: #FF4961;
 
     --ion-color-success: #2fdf75;
     --ion-color-success-rgb: 47,223,117;
@@ -132,7 +132,7 @@
     --ion-color-dark-shade: #d7d8da;
     --ion-color-dark-tint: #f5f6f9;
 
-    --ion-color-medium: #989aa2;
+    --ion-color-medium: #574141;
     --ion-color-medium-rgb: 152,154,162;
     --ion-color-medium-contrast: #000000;
     --ion-color-medium-contrast-rgb: 0,0,0;