Merge pull request #158 from LiskHQ/117-add-routing-functionality

Add routing functionality - Fixes #117

src/app/app.js

@@ -1,4 +1,5 @@
-export default angular.module('app', [
+const app = angular.module('app', [
+  'ui.router',
   'angular-svg-round-progressbar',
   'ngMessages',
   'ngMaterial',
@@ -7,3 +8,5 @@ export default angular.module('app', [
   'infinite-scroll',
   'md.data.table',
 ]);
+
+export default app;

src/app/components/delegates/delegates.js

@@ -9,13 +9,17 @@ app.component('delegates', {
     passphrase: '<',
   },
   controller: class delegates {
-    constructor($scope, delegateService, $mdDialog, $mdMedia, $mdToast, $timeout) {
+    constructor($scope, $rootScope, $peers, $mdDialog, $mdMedia,
+      $mdToast, $timeout, delegateService, Account) {
       this.$scope = $scope;
+      this.$rootScope = $rootScope;
+      this.$peers = $peers;
       this.delegateService = delegateService;
       this.$mdDialog = $mdDialog;
       this.$mdMedia = $mdMedia;
       this.$mdToast = $mdToast;
       this.$timeout = $timeout;
+      this.account = Account;
 
       this.$scope.search = '';
       this.voteList = [];
@@ -43,15 +47,16 @@ app.component('delegates', {
     updateAll() {
       this.delegates = [];
       this.delegatesDisplayedCount = 20;
-      this.delegateService.listAccountDelegates({
-        address: this.account.address,
-      }).then((data) => {
-        this.votedList = data.delegates || [];
-        (this.votedList).forEach((delegate) => {
-          this.votedDict[delegate.username] = delegate;
+      if (this.$peers.active) {
+        this.delegateService.listAccountDelegates({
+          address: this.account.get().address,
+        }).then((data) => {
+          this.votedList = data.delegates || [];
+          this.votedList.forEach((delegate) => {
+            this.votedDict[delegate.username] = delegate;
+          });
         });
-        this.loadDelegates(0, this.$scope.search);
-      });
+      }
     }
 
     loadDelegates(offset, search, replace) {
@@ -142,7 +147,7 @@ app.component('delegates', {
 
     checkPendingVotes() {
       this.$timeout(() => {
-        this.delegateService.listAccountDelegates(this.account,
+        this.delegateService.listAccountDelegates(this.account.get().address,
         ).then((data) => {
           this.votedList = data.delegates || [];
           this.votedDict = {};
@@ -261,8 +266,8 @@ app.component('delegates', {
           '</md-dialog>',
         fullscreen: (this.$mdMedia('sm') || this.$mdMedia('xs')) && this.$scope.customFullscreen,
         locals: {
-          account: this.account,
-          passphrase: this.passphrase,
+          account: this.account.get(),
+          passphrase: this.account.get().passphrase,
           voteList: this.voteList,
           unvoteList: this.unvoteList,
         },

src/app/components/delegates/vote.js

@@ -3,16 +3,16 @@ import './vote.less';
 app.component('vote', {
   template: require('./vote.pug')(),
   bindings: {
-    account: '=',
-    passphrase: '<',
     voteList: '=',
     unvoteList: '=',
   },
   controller: class vote {
-    constructor($scope, $mdDialog, $mdToast, delegateService) {
+    constructor($scope, $mdDialog, $mdToast, delegateService, $rootScope, Account) {
       this.$mdDialog = $mdDialog;
       this.$mdToast = $mdToast;
       this.delegateService = delegateService;
+      this.$rootScope = $rootScope;
+      this.account = Account;
 
       this.votedDict = {};
       this.votedList = [];
@@ -30,8 +30,8 @@ app.component('vote', {
     vote() {
       this.votingInProgress = true;
       this.delegateService.vote({
-        secret: this.passphrase,
-        publicKey: this.account.publicKey,
+        secret: this.account.get().passphrase,
+        publicKey: this.account.get().publicKey,
         secondSecret: this.secondPassphrase,
         voteList: this.voteList,
         unvoteList: this.unvoteList,
@@ -55,7 +55,7 @@ app.component('vote', {
       const totalVotes = this.voteList.length + this.unvoteList.length;
       return totalVotes > 0 && totalVotes <= 33 &&
               !this.votingInProgress &&
-              (!this.account.secondSignature || this.secondPassphrase);
+              (!this.account.get().secondSignature || this.secondPassphrase);
     }
 
     // eslint-disable-next-line class-methods-use-this

src/app/components/delegates/vote.pug

@@ -28,7 +28,7 @@ div.dialog-vote(aria-label='Vote for delegates')
             br
             span You can vote for up to 101 delegates in total.
         md-divider
-        md-input-container.md-block(ng-if='$ctrl.account.secondSignature')
+        md-input-container.md-block(ng-if='$ctrl.account.get().secondSignature')
           label Second Passphrase
           input(type='password', ng-model='$ctrl.secondPassphrase')
           md-divider

src/app/components/forging/forging.js

@@ -10,15 +10,21 @@ app.component('forging', {
     account: '=',
   },
   controller: class forging {
-    constructor($scope, $timeout, $peers) {
+    constructor($scope, $timeout, $peers, Account) {
       this.$scope = $scope;
       this.$timeout = $timeout;
       this.$peers = $peers;
+      this.account = Account;
 
       this.statistics = {};
       this.blocks = [];
-
-      this.updateAllData();
+      if (!this.account.get().publicKey) {
+        this.$scope.$on('onAccountChange', () => {
+          this.updateAllData();
+        });
+      } else {
+        this.updateAllData();
+      }
     }
 
     $onDestroy() {
@@ -38,7 +44,7 @@ app.component('forging', {
 
     updateDelegate() {
       this.$peers.active.sendRequest('delegates/get', {
-        publicKey: this.account.publicKey,
+        publicKey: this.account.get().publicKey,
       }, (data) => {
         if (data.success) {
           this.delegate = data.delegate;
@@ -54,7 +60,7 @@ app.component('forging', {
       this.$peers.active.sendRequest('blocks', {
         limit,
         offset: offset || 0,
-        generatorPublicKey: this.account.publicKey,
+        generatorPublicKey: this.account.get().publicKey,
       }, (data) => {
         if (data.success) {
           if (this.blocks.length === 0) {
@@ -80,7 +86,7 @@ app.component('forging', {
 
     updateForgingStats(key, startMoment) {
       this.$peers.active.sendRequest('delegates/forging/getForgedByAccount', {
-        generatorPublicKey: this.account.publicKey,
+        generatorPublicKey: this.account.get().publicKey,
         start: moment(startMoment).unix(),
         end: moment().unix(),
       }, (data) => {

src/app/components/header/header.js

@@ -0,0 +1,14 @@
+import './header.less';
+
+app.component('header', {
+  template: require('./header.pug')(),
+  controllerAs: '$ctrl',
+  controller: class header {
+    constructor($rootScope, Account, signVerify) {
+      this.$rootScope = $rootScope;
+      this.account = Account;
+      this.signVerify = signVerify;
+    }
+  },
+});
+

src/app/components/header/header.less

@@ -0,0 +1,13 @@
+.header {
+  margin-top: 5px;
+
+  h2 {
+    margin: 5px 0
+  }
+
+  .logo {
+    width: 25%;
+    min-width: 128px;
+    max-width: 256px;
+  }
+}

src/app/components/header/header.pug

@@ -0,0 +1,21 @@
+md-content.header(layout='row', layout-align='center center', layout-padding)
+  img.logo(src=require('../../assets/images/LISK-nano.png'))
+  div(flex)
+  md-button.md-raised.md-primary.send(data-show-send-modal, ng-if='$root.logged') Send
+  md-button.md-raised.md-secondary.logout(ng-click='$root.logout()', ng-if='$root.logged') Logout
+  md-menu.top-menu(ng-if='$root.logged', md-position-mode='target-right target', md-offset='14 0')
+    md-button.md-icon-button(ng-click='$mdOpenMenu()')
+      i.material-icons more_vert
+    md-menu-content(width='2')
+      md-menu-item
+        md-button(ng-click='$ctrl.signVerify.openSignMessageDialog()')
+          div(layout='row', flex='')
+            p(flex='') Sign message
+      md-menu-item
+        md-button(ng-click='$ctrl.signVerify.openVerifyMessageDialog()')
+          div(layout='row', flex='')
+            p(flex='') Verify message
+      md-menu-item
+        md-button(data-set-second-pass, ng-if='$root.logged && !$ctrl.account.get().secondSignature')
+          div(layout='row', flex='')
+            p(flex='') Set 2nd passphrase

src/app/components/login/login.js

@@ -3,21 +3,22 @@ import './save.less';
 
 app.component('login', {
   template: require('./login.pug')(),
-  bindings: {
-    passphrase: '=',
-    onLogin: '&',
-  },
   controller: class login {
 
     /* eslint no-param-reassign: ["error", { "props": false }] */
-    constructor($scope, $rootScope, $timeout, $document, $mdMedia, $cookies, $peers, Passphrase) {
+
+    constructor($scope, $rootScope, $timeout, $document, $mdMedia,
+      $cookies, $peers, Passphrase, $state, Account) {
       this.$scope = $scope;
       this.$rootScope = $rootScope;
       this.$timeout = $timeout;
       this.$document = $document;
       this.$mdMedia = $mdMedia;
       this.$cookies = $cookies;
       this.$peers = $peers;
+      this.$state = $state;
+      this.account = Account;
+
       this.Passphrase = Passphrase;
       this.generatingNewPassphrase = false;
 
@@ -45,9 +46,9 @@ app.component('login', {
 
     passConfirmSubmit(_passphrase = this.input_passphrase) {
       if (this.Passphrase.normalize.constructor === Function) {
-        this.passphrase = this.Passphrase.normalize(_passphrase);
+        this.account.set({ passphrase: this.Passphrase.normalize(_passphrase) });
 
-        this.$timeout(this.onLogin);
+        this.$state.go('main');
       }
     }
 
@@ -59,7 +60,7 @@ app.component('login', {
       const passphrase = this.$cookies.get('passphrase');
       if (passphrase) {
         this.input_passphrase = passphrase;
-        this.$timeout(this.passConfirmSubmit.bind(this), 10);
+        // this.$timeout(this.passConfirmSubmit.bind(this), 10);
       }
     }
   },

src/app/components/main/main.js

@@ -1,86 +1,81 @@
-import lisk from 'lisk-js';
-
 import './main.less';
 
 const UPDATE_INTERVAL_BALANCE = 10000;
 
 app.component('main', {
   template: require('./main.pug')(),
+  controllerAs: '$ctrl',
   controller: class main {
-    constructor($scope, $rootScope, $timeout, $q, $peers, error, SendModal, signVerify) {
+    constructor($scope, $rootScope, $timeout, $q, $state, $peers,
+      error, SendModal, Account) {
       this.$scope = $scope;
       this.$rootScope = $rootScope;
       this.$timeout = $timeout;
       this.$q = $q;
       this.$peers = $peers;
       this.error = error;
-      this.signVerify = signVerify;
       this.sendModal = SendModal;
+      this.$state = $state;
+      this.account = Account;
 
-      this.$scope.$on('login', this.login.bind(this));
+      this.init();
     }
 
-    reset() {
-      this.$timeout.cancel(this.timeout);
-    }
+    init(attempts = 0) {
+      if (!this.account.get() || !this.account.get().passphrase) {
+        // Return to login but keep the state
+        this.$rootScope.landingUrl = this.$state.current.name;
+        this.$state.go('login');
+        return;
+      }
 
-    login(attempts = 0) {
-      this.prelogged = true;
+      this.$rootScope.prelogged = true;
 
       this.$peers.setActive();
 
-      const kp = lisk.crypto.getKeys(this.passphrase);
-      this.address = lisk.crypto.getAddress(kp.publicKey);
-
       this.update()
         .then(() => {
-          this.prelogged = false;
-          this.logged = true;
+          this.$rootScope.prelogged = false;
+          this.$rootScope.logged = true;
           this.checkIfIsDelegate();
         })
         .catch(() => {
           if (attempts < 10) {
-            this.$timeout(() => this.login(attempts + 1), 1000);
+            this.$timeout(() => this.init(attempts + 1), 1000);
           } else {
             this.error.dialog({ text: 'No peer connection' });
-            this.logout();
+            this.$rootScope.logout();
           }
         });
-    }
-
-    logout() {
-      this.reset();
-      this.$peers.reset(true);
 
-      this.logged = false;
-      this.prelogged = false;
-      this.account = {};
-      this.passphrase = '';
+      // Return to landing page if there's any
+      this.$scope.activeTab = this.$rootScope.landingUrl || 'main.transactions';
+      this.$state.go(this.$rootScope.landingUrl || 'main.transactions');
+      delete this.$rootScope.landingUrl;
     }
 
     checkIfIsDelegate() {
-      if (this.account && this.account.publicKey) {
+      if (this.account.get() && this.account.get().publicKey) {
         this.$peers.active.sendRequest('delegates/get', {
-          publicKey: this.account.publicKey,
+          publicKey: this.account.get().publicKey,
         }, (data) => {
-          this.isDelegate = data.success;
+          this.account.set({ isDelegate: data.success });
         });
       }
     }
 
     update() {
-      this.reset();
-      return this.$peers.active.getAccountPromise(this.address)
+      this.$rootScope.reset();
+      return this.$peers.active.getAccountPromise(this.account.get().address)
         .then((res) => {
-          this.account = res;
-          this.sendModal.init(this.account, this.passphrase);
+          this.account.set({ balance: res.balance });
         })
         .catch((res) => {
-          this.account.balance = undefined;
+          this.account.get({ balance: null });
           return this.$q.reject(res);
         })
         .finally(() => {
-          this.timeout = this.$timeout(this.update.bind(this), UPDATE_INTERVAL_BALANCE);
+          this.$rootScope.timeout = this.$timeout(this.update.bind(this), UPDATE_INTERVAL_BALANCE);
           return this.$q.resolve();
         });
     }