Merge pull request #248 from stratisproject/ui

Require creation date on recovery, build latest styling

Breeze.UI/.angular-cli.json

@@ -18,7 +18,7 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
-        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
+        "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
         "styles.css"
       ],
       "scripts": [],

Breeze.UI/package.json

@@ -58,6 +58,7 @@
     "electron-context-menu": "0.9.1",
     "enhanced-resolve": "3.3.0",
     "ngx-clipboard": "8.1.0",
+    "ngx-bootstrap": "1.9.3",
     "rxjs": "5.4.3",
     "zone.js": "0.8.17"
   },

Breeze.UI/src/app/setup/recover/recover.component.html

@@ -12,12 +12,13 @@
             <div *ngIf="formErrors.walletName" class="form-control-feedback mt-2">{{ formErrors.walletName }}</div>
           </div>
           <div class="form-group">
-            <label class="col-12 row" for="creationDate">Creation Date (optional)</label>
-            <material-datepicker class="form-control col-7" [(date)]="creationDate"></material-datepicker>
+            <label class="col-12 row" for="creationDate">Creation Date</label>
+            <input type="text" class="form-control" bsDatepicker formControlName="walletDate" placeholder="Select the date your wallet was created." [bsConfig]="bsConfig" [maxDate]="maxDate"/>
+            <div *ngIf="formErrors.walletDate" class="form-control-feedback mt-2">{{ formErrors.walletDate }}</div>
           </div>
           <div class="form-group">
-            <label class="col-12 row" for="walletMnemonic">12 Secret Words</label>
-            <input type="text" class="form-control form-control-success" formControlName="walletMnemonic" id="walletName" placeholder="Enter your 12 secret words.">
+            <label class="col-12 row" for="walletMnemonic">Secret Words</label>
+            <input type="text" class="form-control form-control-success" formControlName="walletMnemonic" id="walletName" placeholder="Enter your secret words.">
             <div *ngIf="formErrors.walletMnemonic" class="form-control-feedback mt-2">{{ formErrors.walletMnemonic }}</div>
           </div>
           <div class="form-group">
@@ -30,7 +31,6 @@
             <select class="form-control custom-select" name="network" formControlName="selectNetwork">
               <!--<option value="main">Main</option>-->
               <option value="test">Testnet</option>
-              <!--<option value="stratistest">StratisTest</option>-->
             </select>
           </div>
         </form>

Breeze.UI/src/app/setup/recover/recover.component.ts

 import { Component, OnInit } from '@angular/core';
 import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
 import { Router } from '@angular/router';
+import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';
 
 import { GlobalService } from '../../shared/services/global.service';
 import { ApiService } from '../../shared/services/api.service';
@@ -16,24 +17,22 @@ export class RecoverComponent implements OnInit {
 
   constructor(private globalService: GlobalService, private apiService: ApiService, private router: Router, private fb: FormBuilder) {
     this.buildRecoverForm();
-
   }
 
   public recoverWalletForm: FormGroup;
   public creationDate: Date;
-  private walletRecovery: WalletRecovery;
   public isRecovering: boolean = false;
-
-  private responseMessage: string;
-  private errorMessage: string;
+  public maxDate = new Date();
+  private walletRecovery: WalletRecovery;
+  private bsConfig: Partial<BsDatepickerConfig>;
 
   ngOnInit() {
+    this.bsConfig = Object.assign({}, {showWeekNumbers: false, containerClass: 'theme-blue'});
+    console.log(new Date());
   }
 
   private buildRecoverForm(): void {
     this.recoverWalletForm = this.fb.group({
-      "walletMnemonic": ["", Validators.required],
-      "walletPassword": ["", Validators.required],
       "walletName": ["", [
           Validators.required,
           Validators.minLength(1),
@@ -41,6 +40,9 @@ export class RecoverComponent implements OnInit {
           Validators.pattern(/^[a-zA-Z0-9]*$/)
         ]
       ],
+      "walletMnemonic": ["", Validators.required],
+      "walletDate": ["", Validators.required],
+      "walletPassword": ["", Validators.required],
       "selectNetwork": ["test", Validators.required]
     });
 
@@ -66,24 +68,30 @@ export class RecoverComponent implements OnInit {
   }
 
   formErrors = {
+    'walletName': '',
     'walletMnemonic': '',
+    'walletDate': '',
     'walletPassword': '',
-    'walletName': ''
+
   };
 
   validationMessages = {
-    'walletMnemonic': {
-      'required': 'Please enter your 12 word phrase.'
-    },
-    'walletPassword': {
-      'required': 'A password is required.'
-    },
     'walletName': {
       'required': 'A wallet name is required.',
       'minlength': 'A wallet name must be at least one character long.',
       'maxlength': 'A wallet name cannot be more than 24 characters long.',
       'pattern': 'Please enter a valid wallet name. [a-Z] and [0-9] are the only characters allowed.'
     },
+    'walletMnemonic': {
+      'required': 'Please enter your 12 word phrase.'
+    },
+    'walletDate': {
+      'required': 'Please choose the date the wallet should sync from.'
+    },
+    'walletPassword': {
+      'required': 'A password is required.'
+    },
+
   };
 
   public onBackClicked() {
@@ -92,12 +100,16 @@ export class RecoverComponent implements OnInit {
 
   public onRecoverClicked(){
     this.isRecovering = true;
+
+    let recoveryDate = new Date(this.recoverWalletForm.get("walletDate").value);
+    recoveryDate.setDate(recoveryDate.getDate() - 1);
+
     this.walletRecovery = new WalletRecovery(
       this.recoverWalletForm.get("walletName").value,
       this.recoverWalletForm.get("walletMnemonic").value,
       this.recoverWalletForm.get("walletPassword").value,
       this.recoverWalletForm.get("selectNetwork").value,
-      this.creationDate
+      recoveryDate
     );
     this.recoverWallets(this.walletRecovery);
   }
@@ -136,7 +148,6 @@ export class RecoverComponent implements OnInit {
       .subscribe(
         response => {
           if (response.status >= 200 && response.status < 400) {
-            this.responseMessage = response;
             alert("Your wallet has been recovered. \nYou will be redirected to the decryption page.");
             this.router.navigate([''])
           }

Breeze.UI/src/app/setup/setup.module.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { DatepickerModule } from 'angular2-material-datepicker'
+import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 
 import { SetupComponent } from './setup.component';
 import { CreateComponent } from './create/create.component';
@@ -13,6 +14,7 @@ import { RecoverComponent } from './recover/recover.component';
 
 @NgModule({
   imports: [
+    BsDatepickerModule.forRoot(),
     CommonModule,
     DatepickerModule,
     ReactiveFormsModule,

Breeze.UI/src/styles.css

@@ -171,10 +171,15 @@ em.display-4 {
   color: #878685;
 }
 
+.jumbotron p {
+  margin-bottom: 0 !important;
+}
+
 .jumbotron .lead {
   color: #444;
   font-size: 1.85em;
   font-weight: 500;
+  margin-bottom: 0;
 }
 
 .jumbotron .lead .h2 {

Breeze.UI/webpack.config.js

@@ -21,6 +21,7 @@ const isProd = (process.env.NODE_ENV === 'production');
 
 //add all external css to be added in our index.html--> like as if it's .angular-cli.json
 const styles = [
+  "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
   "./src/styles.css"
 ];