0.4.0

Automatic selection of the fastest blockchain api endpoint Password visibility toggle Bug fix for private key verification Minor UX improvements
eosrio · Jun 14, 2018 · 230f372 · 230f372
1 parent ed8795a
commit 230f372
Show file tree

Hide file tree

Showing 13 changed files with 260 additions and 54 deletions.
diff --git a/ng-dist/main.js b/ng-dist/main.js
diff --git a/ng-dist/styles.css b/ng-dist/styles.css
diff --git a/package.json b/package.json
@@ -8,7 +8,7 @@
   },
   "repository": "https://github.com/eosrio/simpleos",
   "license": "UNLICENSED",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --port 7878",

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -15,6 +15,6 @@ export class AppComponent implements OnInit {
   }
 
   ngOnInit() {
-    this.network.startup();
+    this.network.connect();
   }
 }
diff --git a/src/app/dashboard/config/config.component.html b/src/app/dashboard/config/config.component.html
@@ -11,7 +11,7 @@
           <div class="card chains-card">
             <div class="card-block chain-section selected">
               Mainnet
-              <span style="float:right">endpoint</span>
+              <span style="float:right">endpoint: {{network.selectedEndpoint.getValue().url}}</span>
             </div>
             <div class="card-block chain-section" (click)="confirmModal = true">
               Jungle testnet
@@ -53,14 +53,18 @@ <h3 class="modal-title text-white">
     Are you <span class="blue">sure</span> ?
   </h3>
   <div class="modal-body">
-    <p style="margin-bottom: 20px;">All your data will be lost. If you want to login again you will have to import your private key again.</p>
+    <p style="margin-bottom: 20px;">All your data will be lost. If you want to login again you will have to import your
+      private key again.</p>
     <mat-checkbox [(ngModel)]="clearContacts">Also clear contacts on logout</mat-checkbox>
   </div>
   <div class="modal-footer">
     <button class="btn btn-danger-outline" (click)="logoutModal = false">Cancel</button>
-    <button type="button" class="btn btn-info-outline" (click)="logout()">
-      Yes
-    </button>
+    <div>
+      <button type="button" class="btn btn-info-outline" (click)="logout()">
+        Yes
+      </button>
+      <div class="text-center">*SimplEOS will <br> be restarted</div>
+    </div>
   </div>
 </clr-modal>
 

diff --git a/src/app/dashboard/config/config.component.ts b/src/app/dashboard/config/config.component.ts
@@ -5,6 +5,7 @@ import {EOSJSService} from '../../eosjs.service';
 import {AccountsService} from '../../accounts.service';
 import {VotingService} from '../vote/voting.service';
 import {AppComponent} from '../../app.component';
+import {NetworkService} from '../../network.service';
 
 @Component({
   selector: 'app-config',
@@ -27,6 +28,7 @@ export class ConfigComponent implements OnInit {
 
   constructor(private fb: FormBuilder,
               public voteService: VotingService,
+              public network: NetworkService,
               private router: Router,
               private eos: EOSJSService,
               public aService: AccountsService) {

diff --git a/src/app/dashboard/send/send.component.html b/src/app/dashboard/send/send.component.html
@@ -109,7 +109,7 @@ <h5 class="mt-0" *ngIf="sendForm.value.alias !== ''">{{ sendForm.value.alias }}<
   <div class="modal-footer">
     <form [formGroup]="confirmForm" class="confirmForm">
       <mat-form-field>
-        <input matInput type="password" (keyup.enter)="transfer()" placeholder="Password" formControlName="pass">
+        <input matInput #pass type="password" (keyup.enter)="transfer()" placeholder="Password" formControlName="pass">
         <mat-hint class="error" align="start" *ngIf="wrongpass !== ''">
           {{wrongpass}}
         </mat-hint>

diff --git a/src/app/dashboard/vote/vote.component.html b/src/app/dashboard/vote/vote.component.html
@@ -301,7 +301,7 @@ <h5 class="mt-0">{{selectedBPs.join(', ')}}</h5>
     </div>
     <form [formGroup]="passForm" class="modal-footer">
         <mat-form-field>
-            <input matInput type="password" formControlName="pass" (keyup.enter)="modalVote(password.value)" #password
+            <input matInput #pass type="password" formControlName="pass" (keyup.enter)="modalVote(password.value)" #password
                    placeholder="Password">
             <mat-hint class="error" align="start" *ngIf="wrongpass !== ''">
                 {{wrongpass}}

diff --git a/src/app/eosjs.service.ts b/src/app/eosjs.service.ts
@@ -6,7 +6,6 @@ import {BehaviorSubject, Subject} from 'rxjs';
 
 @Injectable()
 export class EOSJSService {
-  eos: any;
   eosio: any;
   tokens: any;
   ecc: any;
@@ -34,8 +33,9 @@ export class EOSJSService {
   private masterKey: CryptoKey;
   private textEncoder = new TextEncoder('utf-8');
   public accounts = new BehaviorSubject<any>({});
-  public online = new BehaviorSubject<Boolean>(false);
+  public online = new BehaviorSubject<boolean>(false);
   public chainID: string;
+  private eos: any;
 
   constructor() {
     this.eosio = null;

diff --git a/src/app/landing/landing.component.html b/src/app/landing/landing.component.html
@@ -12,37 +12,47 @@
           </lottie-animation-view>
         </div>
         <div class="slogan">Your simple and secure EOS wallet</div>
-        <div style="margin-top: 30px">
-          <button class="btn btn-inverse" (click)="existingWallet = true">Import existing
-            key
-          </button>
-          <button class="btn btn-inverse" (click)="importFromExodus()">Import Exodus wallet
-          </button>
-          <button class="btn btn-inverse disabled" pTooltip="soon">
-            Create new wallet
-          </button>
-        </div>
-        <div class="card check-card">
-          <div class="card-block">
-            <div class="info">You can do a quick check of your account here</div>
-            <mat-form-field class="public-input">
-              <input matInput type="text" placeholder="EOS Public key" [(ngModel)]="publicEOS">
-            </mat-form-field>
-            <button class="btn btn-inverse btn-check" (click)="checkAccount()" [disabled]="!publicEOS">Check</button>
+        <ng-container *ngIf="busy">
+          <i class="far fa-spinner fa-spin fa-2x mt-2"></i>
+          <div>Connecting to the Blockchain...</div>
+        </ng-container>
+        <ng-container *ngIf="!busy">
+          <div style="margin-top: 30px">
+            <button class="btn btn-inverse" (click)="existingWallet = true">Import existing
+              key
+            </button>
+            <button class="btn btn-inverse" (click)="importFromExodus()">Import Exodus wallet
+            </button>
+            <button class="btn btn-inverse disabled" pTooltip="soon">
+              Create new wallet
+            </button>
           </div>
-          <ng-container *ngIf="checkerr === ''">
-            <div class="card-footer" *ngFor="let account of accounts">
-              <span style="float: left;">You have: <span class="blue">{{account.full_balance}} EOS</span></span>
-              <span style="float: right;">Account name: <span class="blue">{{account.name}}</span></span>
+          <div class="card check-card">
+            <div class="card-block">
+              <div class="info">You can do a quick check of your account here</div>
+              <mat-form-field class="public-input">
+                <input matInput type="text" placeholder="EOS Public key" [(ngModel)]="publicEOS">
+              </mat-form-field>
+              <button class="btn btn-inverse btn-check" (click)="checkAccount()" [disabled]="!publicEOS">
+                Check
+              </button>
+            </div>
+            <ng-container *ngIf="checkerr === ''">
+              <div class="card-footer" *ngFor="let account of accounts">
+                                <span style="float: left;">You have: <span
+                                  class="blue">{{account.full_balance}} EOS</span></span>
+                <span style="float: right;">Account name: <span
+                  class="blue">{{account.name}}</span></span>
+              </div>
+            </ng-container>
+            <div class="card-footer" *ngIf="checkerr === 'invalid'">
+              <span class="red">Invalid public key</span>
+            </div>
+            <div class="card-footer" *ngIf="checkerr === 'no_account'">
+              <span class="red">No account found :(</span>
             </div>
-          </ng-container>
-          <div class="card-footer" *ngIf="checkerr === 'invalid'">
-            <span class="red">Invalid public key</span>
-          </div>
-          <div class="card-footer" *ngIf="checkerr === 'no_account'">
-            <span class="red">No account found :(</span>
           </div>
-        </div>
+        </ng-container>
       </div>
     </div>
   </div>
@@ -55,17 +65,22 @@
 
   <clr-wizard-button [type]="'cancel'">Cancel</clr-wizard-button>
   <clr-wizard-button [type]="'previous'">Back</clr-wizard-button>
-  <clr-wizard-button [type]="'next'" (clicked)="verifyPrivateKey(pkField)">Next</clr-wizard-button>
+  <clr-wizard-button [type]="'next'">Next</clr-wizard-button>
   <clr-wizard-button [type]="'finish'">Finish</clr-wizard-button>
 
   <clr-wizard-page [clrWizardPageNextDisabled]="!pvtform.valid"
-                   (clrWizardPageOnCommit)="verifyPrivateKey(pkField.value)">
+                   (clrWizardPageOnCommit)="verifyPrivateKey(pkField.value)" clrWizardPagePreventDefault="true"
+                   (clrWizardPageOnCancel)="doCancel()">
     <ng-template clrPageTitle>Step 1</ng-template>
     <h5>Insert your existing private key below</h5>
     <form [formGroup]="pvtform">
       <mat-form-field class="mt-1">
-        <input #pkField matInput type="password" (blur)="verifyPrivateKey(pkField.value)" formControlName="private_key"
+        <input #pkField matInput type="password" formControlName="private_key"
                placeholder="EOS Private key">
+        <i matSuffix *ngIf="pkField.type === 'password'" class="far fa-eye fa-lg copy"
+           (click)="pkField.type = 'text'"></i>
+        <i matSuffix *ngIf="pkField.type === 'text'" class="far fa-eye-slash fa-lg copy"
+           (click)="pkField.type = 'password'"></i>
         <mat-error *ngIf="!pvtform.valid">
           {{this.errormsg}}
         </mat-error>
@@ -85,14 +100,22 @@ <h5>Define your password. This will be used to transactions confirmations.</h5>
       <mat-form-field class="mt-1">
         <input matInput #pass type="password" placeholder="Password" (blur)="passCompare()"
                [formControl]="passform['controls'].matchingPassword['controls']['pass1']">
+        <i matSuffix *ngIf="pass.type === 'password'" class="far fa-eye fa-lg copy"
+           (click)="pass.type = 'text'"></i>
+        <i matSuffix *ngIf="pass.type === 'text'" class="far fa-eye-slash fa-lg copy"
+           (click)="pass.type = 'password'"></i>
         <mat-hint align="start">
           Min 10 characters
         </mat-hint>
         <mat-hint align="end">{{pass.value.length}} / 10+</mat-hint>
       </mat-form-field>
       <mat-form-field style="margin-top: 19px">
-        <input matInput type="password" placeholder="Confirm password" (blur)="passCompare()"
+        <input matInput #pass2 type="password" placeholder="Confirm password" (blur)="passCompare()"
                [formControl]="passform['controls'].matchingPassword['controls']['pass2']">
+        <i matSuffix *ngIf="pass2.type === 'password'" class="far fa-eye fa-lg copy"
+           (click)="pass2.type = 'text'"></i>
+        <i matSuffix *ngIf="pass2.type === 'text'" class="far fa-eye-slash fa-lg copy"
+           (click)="pass2.type = 'password'"></i>
         <mat-error *ngIf="!passmatch">
           Passwords do not match!
         </mat-error>
@@ -137,14 +160,22 @@ <h5>Define your password. This will be used to transactions confirmations.</h5>
       <mat-form-field class="mt-1">
         <input matInput #passexodus type="password" placeholder="Password" (blur)="passExodusCompare()"
                [formControl]="passformexodus['controls'].matchingPassword['controls']['pass1']">
+        <i matSuffix *ngIf="passexodus.type === 'password'" class="far fa-eye fa-lg copy"
+           (click)="passexodus.type = 'text'"></i>
+        <i matSuffix *ngIf="passexodus.type === 'text'" class="far fa-eye-slash fa-lg copy"
+           (click)="passexodus.type = 'password'"></i>
         <mat-hint align="start">
           Min 10 characters
         </mat-hint>
         <mat-hint align="end">{{passexodus.value.length}} / 10+</mat-hint>
       </mat-form-field>
       <mat-form-field style="margin-top: 19px">
-        <input matInput type="password" placeholder="Confirm password" (blur)="passExodusCompare()"
+        <input matInput #passexodus2 type="password" placeholder="Confirm password" (blur)="passExodusCompare()"
                [formControl]="passformexodus['controls'].matchingPassword['controls']['pass2']">
+        <i matSuffix *ngIf="passexodus2.type === 'password'" class="far fa-eye fa-lg copy"
+           (click)="passexodus2.type = 'text'"></i>
+        <i matSuffix *ngIf="passexodus2.type === 'text'" class="far fa-eye-slash fa-lg copy"
+           (click)="passexodus2.type = 'password'"></i>
         <mat-error *ngIf="!passexodusmatch">
           Passwords do not match!
         </mat-error>

diff --git a/src/app/landing/landing.component.ts b/src/app/landing/landing.component.ts
@@ -4,6 +4,7 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 import {AccountsService} from '../accounts.service';
 import {Router} from '@angular/router';
 import {ClrWizard} from '@clr/angular';
+import {NetworkService} from '../network.service';
 
 @Component({
   selector: 'app-landing',
@@ -12,9 +13,11 @@ import {ClrWizard} from '@clr/angular';
 })
 export class LandingComponent implements OnInit {
 
+  @ViewChild('wizardexists') exisitswizard: ClrWizard;
   @ViewChild('wizardexodus') wizard: ClrWizard;
   lottieConfig: Object;
   anim: any;
+  busy: boolean;
   existingWallet: boolean;
   exodusWallet: boolean;
   newWallet: boolean;
@@ -23,7 +26,6 @@ export class LandingComponent implements OnInit {
   checkerr: string;
   errormsg: string;
   accounts: any[];
-  pkValid: boolean;
   dropReady: boolean;
   passmatch: boolean;
   passexodusmatch: boolean;
@@ -44,7 +46,12 @@ export class LandingComponent implements OnInit {
     }
   }
 
-  constructor(public eos: EOSJSService, private fb: FormBuilder, private aService: AccountsService, private router: Router) {
+  constructor(public eos: EOSJSService,
+              private fb: FormBuilder,
+              private aService: AccountsService,
+              public network: NetworkService,
+              private router: Router) {
+    this.busy = true;
     this.existingWallet = false;
     this.exodusWallet = false;
     this.dropReady = false;
@@ -57,13 +64,16 @@ export class LandingComponent implements OnInit {
     this.accounts = [];
     this.importedAccounts = [];
     this.checkerr = '';
-    this.pkValid = true;
     this.lottieConfig = {
       path: 'assets/logoanim.json',
       autoplay: true,
       loop: false
     };
 
+    this.network.networkingReady.asObservable().subscribe((status) => {
+      this.busy = !status;
+    });
+
     this.publicEOS = '';
 
     this.passform = this.fb.group({
@@ -203,6 +213,7 @@ export class LandingComponent implements OnInit {
         this.importedAccounts = [];
         this.importedAccounts = [...results.foundAccounts];
         this.pvtform.controls['private_key'].setErrors(null);
+        this.exisitswizard.forceNext();
         this.errormsg = '';
       }).catch((e) => {
         this.pvtform.controls['private_key'].setErrors({'incorrect': true});
@@ -217,6 +228,10 @@ export class LandingComponent implements OnInit {
     }
   }
 
+  doCancel(): void {
+    this.exisitswizard.close();
+  }
+
   checkAccount() {
     if (this.eos.ready) {
       this.check = true;