stylized

2026-03-26 18:31:52 +00:00 · 2021-07-02 17:05:26 -06:00
parent 44d58f3b6e
commit 1803a51e95
13 changed files with 156 additions and 88 deletions
--- a/setup-wizard/src/app/app.component.html
+++ b/setup-wizard/src/app/app.component.html
@@ -1,8 +1,12 @@
 <ion-app>
-  <ion-content *ngIf="stateService.loading; else loaded">
-    <h2 color="light">Connecting to Embassy</h2>
-  </ion-content>
-  <ng-template #loaded>
+  <ion-header>
+    <ion-toolbar color="primary">
+      <ion-title>
+        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>
--- a/setup-wizard/src/app/app.component.ts
+++ b/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()
-    if (this.stateService.recoveryDrive) {
-      await this.navCtrl.navigateForward(`/recover`)
-    } else {
-      await this.navCtrl.navigateForward(`/wizard`)
+    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()
    }
  }

--- a/setup-wizard/src/app/pages/home/home.page.html
+++ b/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
-      (click)="presentPasswordModal()"
-      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-grid style="max-width: 800px; margin: auto; margin-top: 30px;">
+      <ion-row>
+        <ion-col size-xs="12" size-sm="6">
+          <ion-card
+            (click)="presentPasswordModal()"
+            button="true"
+            color="light"
+            class="wiz-card"
+            style="text-align: center; background-color: #00919b !important; height: 160px;"
+          >
+            <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>
--- a/setup-wizard/src/app/pages/home/home.page.scss
+++ b/setup-wizard/src/app/pages/home/home.page.scss
@@ -1,3 +1,3 @@
 .selected {
  border: 1px solid white;
-}
+}
--- a/setup-wizard/src/app/pages/home/home.page.ts
+++ b/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
--- a/setup-wizard/src/app/pages/password/password.page.html
+++ b/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>
-  <div *ngIf="needsVer">
-    <h2>Enter Password</h2>
-    <ion-input type="password" [(ngModel)]="password">Password:</ion-input>
-  </div>
+<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">
-    <h2>Create Password</h2>
-    <ion-input type="password" [(ngModel)]="password">Password:</ion-input>
-    <ion-input type="password" [(ngModel)]="passwordVer">Verify Password:</ion-input>
+    <div *ngIf="!needsVer">
+      <ion-input style="color: #e6f4f1 !important;" (keyup)="error = ''" type="password" [(ngModel)]="password" placeholder="_________">Password:</ion-input>
+      <ion-input style="color: #e6f4f1 !important;" (keyup)="error = ''" type="password" [(ngModel)]="passwordVer" placeholder="_________">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>
--- a/setup-wizard/src/app/pages/password/password.page.ts
+++ b/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) {
-      this.error="*passwords dont match"
+    if(!this.needsVer) {
+      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,
--- a/setup-wizard/src/app/pages/recover/recover.page.html
+++ b/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>
--- a/setup-wizard/src/app/pages/recover/recover.page.ts
+++ b/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,
      }
--- a/setup-wizard/src/app/services/api/mock-api.service.ts
+++ b/setup-wizard/src/app/services/api/mock-api.service.ts
@@ -23,12 +23,12 @@ export class MockApiService extends ApiService {
        used: 200,
      },
      'recovery-drive': 
-      null,
-      // {
-      //   logicalname: 'name1',
-      //   version: '0.3.3',
-      //   name: 'My Embassy'
-      // }
+      // null,
+      {
+        logicalname: 'name1',
+        version: '0.3.3',
+        name: 'My Embassy'
+      }
    }
  }

--- a/setup-wizard/src/global.scss
+++ b/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;
+}
--- a/setup-wizard/src/index.html
+++ b/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="/" />

--- a/setup-wizard/src/theme/variables.scss
+++ b/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-tint: #6370ff;
+  --ion-color-tertiary-shade: #FF4961;
+  --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-tint: #7974ff;
+    --ion-color-tertiary-shade: #FF4961;
+    --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;