From d5e59a8cd20e0758b326a8ca1d9d6f4b0f8ef36c Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Tue, 2 May 2017 10:47:34 +0200 Subject: [PATCH 1/7] Simplify peer selection dropdown on login page Now it's just: * Mainnet * Testnet * Custom Node --- src/app/components/login/login.js | 43 ++++++++++++++++++------- src/app/components/login/login.pug | 15 +++++---- src/app/components/top/top.pug | 6 ++-- src/app/services/peers/peers.js | 50 +++++++++++------------------- 4 files changed, 61 insertions(+), 53 deletions(-) diff --git a/src/app/components/login/login.js b/src/app/components/login/login.js index 19e103f70..9fa58643d 100644 --- a/src/app/components/login/login.js +++ b/src/app/components/login/login.js @@ -8,34 +8,37 @@ app.component('login', { /* eslint no-param-reassign: ["error", { "props": false }] */ constructor($scope, $rootScope, $timeout, $document, $mdMedia, - $cookies, $peers, Passphrase, $state, Account) { + $cookies, 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; + this.networks = [{ + name: 'Mainnet', + },{ + name: 'Testnet', + testnet: true, + },{ + name: 'Custom Node', + custom: true, + address: 'http://localhost:8000', + }]; + this.network = this.networks[0]; + this.$scope.$watch('$ctrl.input_passphrase', val => this.valid = this.Passphrase.isValidPassphrase(val)); this.$timeout(this.devTestAccount.bind(this), 200); this.$scope.$watch(() => this.$mdMedia('xs') || this.$mdMedia('sm'), (wantsFullScreen) => { this.$scope.customFullscreen = wantsFullScreen === true; }); - this.$scope.$watch('$ctrl.$peers.currentPeerConfig', () => { - this.$peers.setActive(this.$peers.currentPeerConfig); - }); - this.$scope.$watch('$ctrl.$peers.stack', (val) => { - if (val && !this.$peers.currentPeerConfig.node) { - this.$peers.setActive($peers.stack.official[0]); - } - }); this.$scope.$on('onAfterSignup', (ev, args) => { if (args.target === 'primary-pass') { @@ -46,7 +49,10 @@ app.component('login', { passConfirmSubmit(_passphrase = this.input_passphrase) { if (this.Passphrase.normalize.constructor === Function) { - this.account.set({ passphrase: this.Passphrase.normalize(_passphrase) }); + this.account.set({ + passphrase: this.Passphrase.normalize(_passphrase), + network: this.network, + }); this.$state.go('main'); } @@ -57,10 +63,23 @@ app.component('login', { } devTestAccount() { + const peerStack = this.$cookies.get('peerStack'); + if (peerStack === 'localhost') { + this.network = this.networks[2]; + angular.merge(this.network, { + address: 'http://localhost:4000', + testnet: true, + nethash: '198f2b61a8eb95fbeed58b8216780b68f697f26b849acf00c8c93bb9b24f783d', + }); + } else if (peerStack === 'testnet') { + this.network = this.networks[1]; + } const passphrase = this.$cookies.get('passphrase'); if (passphrase) { this.input_passphrase = passphrase; - // this.$timeout(this.passConfirmSubmit.bind(this), 10); + if (this.$rootScope.logged === undefined) { + this.$timeout(this.passConfirmSubmit.bind(this), 10); + } } } }, diff --git a/src/app/components/login/login.pug b/src/app/components/login/login.pug index e0ef11a15..10806dfc7 100644 --- a/src/app/components/login/login.pug +++ b/src/app/components/login/login.pug @@ -4,11 +4,14 @@ md-card span.md-title Sign In md-card-content(flex='100', flex-gt-sm='70', flex-offset-gt-sm='15') form(ng-submit='$ctrl.passConfirmSubmit()') - md-input-container.md-block(md-is-error='$ctrl.valid === 0') - label.select Choose a peer - md-select(ng-model='$ctrl.$peers.currentPeerConfig', aria-label='Peer') - md-optgroup(ng-repeat='(name, peers) in $ctrl.$peers.stack', ng-if='peers.length', label='{{ name }}') - md-option(ng-repeat='peer in peers', ng-value='peer') {{ peer.node }}{{ peer.port ? ':' + peer.port : '' }} + md-input-container.md-block + label.select Network + md-select(ng-model='$ctrl.network', aria-label='Peer') + md-option(ng-repeat='network in $ctrl.networks', ng-value='network') {{ network.name }} + div(ng-if='$ctrl.network.custom') + md-input-container.md-block + label.pass Node address + input(type="text", ng-model="$ctrl.network.address") md-input-container.md-block(md-is-error='$ctrl.valid === 0') label.pass Enter your passphrase input(type="{{ $ctrl.show_passphrase ? 'text' : 'password' }}", ng-model='$ctrl.input_passphrase', ng-disabled='$ctrl.generatingNewPassphrase', autofocus) @@ -18,4 +21,4 @@ md-card // md-button(ng-disabled='$ctrl.generatingNewPassphrase', ng-click='$ctrl.devTestAccount()') Dev Test Account md-button.md-primary(ng-disabled='$ctrl.random || $ctrl.generatingNewPassphrase', ng-click='$ctrl.generatePassphrase()') NEW ACCOUNT md-button.md-raised.md-primary(md-autofocus, ng-disabled='$ctrl.valid != undefined && $ctrl.valid !== 1', type='submit') Login - passphrase(ng-if='$ctrl.generatingNewPassphrase', data-on-login='$ctrl.onLogin', data-target='primary-pass') \ No newline at end of file + passphrase(ng-if='$ctrl.generatingNewPassphrase', data-on-login='$ctrl.onLogin', data-target='primary-pass') diff --git a/src/app/components/top/top.pug b/src/app/components/top/top.pug index 3221e8b1a..736979eba 100644 --- a/src/app/components/top/top.pug +++ b/src/app/components/top/top.pug @@ -10,9 +10,9 @@ md-content(layout='column', layout-gt-xs='row') i.material-icons.online(ng-show='$ctrl.$peers.online') check circle span.md-title.title Peer div.active-peer.value - span(ng-bind="$ctrl.$peers.currentPeerConfig.node") - span(ng-if="$ctrl.$peers.currentPeerConfig.port") : - span(ng-bind="$ctrl.$peers.currentPeerConfig.port") + span(ng-bind="$ctrl.$peers.active.currentPeer") + span(ng-if="$ctrl.$peers.active.port") : + span(ng-bind="$ctrl.$peers.active.port") md-card.offline-hide(flex-gt-xs=33) md-card-content(layout='column', layout-align='center center') span.md-title.title Balance diff --git a/src/app/services/peers/peers.js b/src/app/services/peers/peers.js index b1d270e52..c11599ea2 100644 --- a/src/app/services/peers/peers.js +++ b/src/app/services/peers/peers.js @@ -2,10 +2,14 @@ import lisk from 'lisk-js'; const UPDATE_INTERVAL_CHECK = 10000; -app.factory('$peers', ($timeout, $cookies, $location, $q) => { +app.factory('$peers', ($timeout, $cookies, $location, $q, $rootScope, Account) => { class $peers { constructor() { this.check(); + + $rootScope.$on('onAccountChange', () => { + this.setActive(); + }); } reset(active) { @@ -16,40 +20,22 @@ app.factory('$peers', ($timeout, $cookies, $location, $q) => { } } - setActive(peerConf) { - const peerStack = $location.search().peerStack || $cookies.get('peerStack') || 'official'; - let conf = peerConf || { }; - const localhostConf = { - node: 'localhost', - port: 4000, - testnet: true, - nethash: '198f2b61a8eb95fbeed58b8216780b68f697f26b849acf00c8c93bb9b24f783d', - }; - if (peerStack === 'localhost' && !peerConf) { - conf = localhostConf; - } else if (peerStack === 'testnet' && !peerConf) { - conf.testnet = true; + setActive() { + let conf = { }; + const network = Account.get().network; + if (network) { + conf = network; + if (network.address) { + conf.node = network.address.split(':')[1].replace('//', ''); + conf.port = network.address.match(/:([0-9]{1,5})$/)[1]; + conf.ssl = network.address.split(':')[0] === 'https'; + } + if (conf.testnet === undefined && conf.port !== undefined) { + conf.testnet = conf.port === '7000'; + } } this.setPeerAPIObject(conf); - if (!this.stack) { - this.stack = this.active.listPeers(); - this.stack.localhost = [localhostConf, { - node: 'localhost', - port: 7000, - testnet: true, - }, { - node: 'localhost', - port: 8000, - }]; - this.peerByName = {}; - Object.keys(this.stack).forEach((key) => { - this.stack[key].forEach(peer => this.peerByName[peer.node + (peer.port || '')] = peer); - }); - } - this.currentPeerConfig = this.peerByName[this.active.currentPeer + this.active.port] || - this.peerByName[this.active.currentPeer]; - this.check(); } From 994e5adcb1aed17f6c510ff048e45acf785aea92 Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Tue, 2 May 2017 14:03:21 +0200 Subject: [PATCH 2/7] Make the tests pass --- src/test/components/forging/forging.spec.js | 18 ++++++++-------- src/test/components/login/login.spec.js | 23 +-------------------- src/test/services/peers/peers.spec.js | 2 +- 3 files changed, 11 insertions(+), 32 deletions(-) diff --git a/src/test/components/forging/forging.spec.js b/src/test/components/forging/forging.spec.js index cc67c00f0..1bb098988 100644 --- a/src/test/components/forging/forging.spec.js +++ b/src/test/components/forging/forging.spec.js @@ -40,6 +40,11 @@ describe('Forging component', () => { vote: '9999982470000000', }; + account.set({ + passphrase: delegate.passphrase, + balance: lsk.from(100), + }); + $peers.active = { sendRequest() {} }; const mock = sinon.mock($peers.active); mock.expects('sendRequest').withArgs('blocks').callsArgWith(2, { @@ -53,10 +58,6 @@ describe('Forging component', () => { mock.expects('sendRequest').withArgs('delegates/forging/getForgedByAccount').exactly(5); $scope = $rootScope.$new(); - account.set({ - passphrase: delegate.passphrase, - balance: lsk.from(100), - }); element = $compile('')($scope); $scope.$digest(); }); @@ -91,15 +92,13 @@ describe('forging component controller', () => { let controller; let $componentController; let activePeerMock; - let $peers; let delegate; let blocks; let account; - beforeEach(inject((_$componentController_, _$rootScope_, _$peers_, _Account_) => { + beforeEach(inject((_$componentController_, _$rootScope_, _Account_) => { $componentController = _$componentController_; $rootScope = _$rootScope_; - $peers = _$peers_; account = _Account_; })); @@ -122,8 +121,6 @@ describe('forging component controller', () => { vote: '9999982470000000', }; - $peers.active = { sendRequest() {} }; - activePeerMock = sinon.mock($peers.active); $scope = $rootScope.$new(); account.set({ @@ -136,6 +133,9 @@ describe('forging component controller', () => { // balance: '10000', // }, }); + + controller.$peers.active = { sendRequest() {} }; + activePeerMock = sinon.mock(controller.$peers.active); }); describe('updateDelegate()', () => { diff --git a/src/test/components/login/login.spec.js b/src/test/components/login/login.spec.js index 3c897510c..33fab91a4 100644 --- a/src/test/components/login/login.spec.js +++ b/src/test/components/login/login.spec.js @@ -39,7 +39,7 @@ describe('Login component', () => { expect(element.find('form md-input-container label.pass').text()).to.equal(PASS_LABEL_TEXT); }); - const SELECT_LABEL_TEXT = 'Choose a peer'; + const SELECT_LABEL_TEXT = 'Network'; it(`should contain a select element with label saying "${SELECT_LABEL_TEXT}"`, () => { expect(element.find('form md-input-container label.select').text()).to.equal(SELECT_LABEL_TEXT); }); @@ -92,27 +92,6 @@ describe('Login controller', () => { }); describe('controller()', () => { - it('should define a watcher for $ctrl.$peers.currentPeerConfig', () => { - $scope.$apply(); - const peers = controller.$peers; - const spy = sinon.spy(peers, 'setActive'); - peers.currentPeerConfig = peers.stack.localhost[0]; - $scope.$apply(); - peers.currentPeerConfig = peers.stack.official[0]; - $scope.$apply(); - expect(spy).to.have.been.calledWith(); - }); - - it('should be able to change the active peer', () => { - $scope.$apply(); - controller.$peers.setActive(controller.$peers.stack.localhost[0]); - $scope.$apply(); - expect(controller.$peers.currentPeerConfig).to.equal(controller.$peers.stack.localhost[0]); - controller.$peers.setActive(controller.$peers.stack.official[0]); - $scope.$apply(); - expect(controller.$peers.currentPeerConfig).to.equal(controller.$peers.stack.official[0]); - }); - it('should define a watcher for $ctrl.input_passphrase', () => { $scope.$apply(); const spy = sinon.spy(Passphrase, 'isValidPassphrase'); diff --git a/src/test/services/peers/peers.spec.js b/src/test/services/peers/peers.spec.js index 4061a2dba..5820907e3 100644 --- a/src/test/services/peers/peers.spec.js +++ b/src/test/services/peers/peers.spec.js @@ -23,7 +23,7 @@ describe('Factory: $peers', () => { expect($peers.active).to.equal(undefined); $peers.setActive(); expect($peers.active).not.to.equal(undefined); - expect($peers.stack.official).to.include({ node: $peers.active.currentPeer }); + expect($peers.active.currentPeer).not.to.equal(undefined); }); }); From e6e9f41c44d7371781e584a653eacc78a4aa2159 Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Tue, 2 May 2017 14:07:26 +0200 Subject: [PATCH 3/7] Removed unused code I believe that I removed this before, but it probably went back when resolving some merge conflicts --- src/app/services/peers/peers.js | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/src/app/services/peers/peers.js b/src/app/services/peers/peers.js index c11599ea2..86862fe18 100644 --- a/src/app/services/peers/peers.js +++ b/src/app/services/peers/peers.js @@ -90,17 +90,6 @@ app.factory('$peers', ($timeout, $cookies, $location, $q, $rootScope, Account) = return deferred.promise; }; - this.active.listTransactionsPromise = (address, limit, offset) => { - const deferred = $q.defer(); - this.active.listTransactions(address, limit, offset, (data) => { - if (data.success) { - return deferred.resolve(data); - } - return deferred.reject(data); - }); - return deferred.promise; - }; - this.active.setSignature = (secondSecret, publicKey, secret) => { const deferred = $q.defer(); this.active.sendRequest('signatures', { secondSecret, publicKey, secret }, (res) => { From 708826941ef74f4e1c28596ab384533ff3ca8187 Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Tue, 2 May 2017 14:23:32 +0200 Subject: [PATCH 4/7] Don't display port 8000 --- src/app/components/top/top.pug | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/app/components/top/top.pug b/src/app/components/top/top.pug index 736979eba..7a920399f 100644 --- a/src/app/components/top/top.pug +++ b/src/app/components/top/top.pug @@ -11,8 +11,9 @@ md-content(layout='column', layout-gt-xs='row') span.md-title.title Peer div.active-peer.value span(ng-bind="$ctrl.$peers.active.currentPeer") - span(ng-if="$ctrl.$peers.active.port") : - span(ng-bind="$ctrl.$peers.active.port") + span(ng-if="$ctrl.$peers.active.port && $ctrl.$peers.active.port != '8000' ") + span : + span(ng-bind="$ctrl.$peers.active.port") md-card.offline-hide(flex-gt-xs=33) md-card-content(layout='column', layout-align='center center') span.md-title.title Balance From 8328ef07d6ffb6443e5d92c30b65df3c8c72e08e Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Tue, 2 May 2017 14:26:15 +0200 Subject: [PATCH 5/7] Fix eslint violations --- src/app/components/login/login.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/components/login/login.js b/src/app/components/login/login.js index 9fa58643d..a22345adb 100644 --- a/src/app/components/login/login.js +++ b/src/app/components/login/login.js @@ -23,10 +23,10 @@ app.component('login', { this.networks = [{ name: 'Mainnet', - },{ + }, { name: 'Testnet', testnet: true, - },{ + }, { name: 'Custom Node', custom: true, address: 'http://localhost:8000', @@ -49,7 +49,7 @@ app.component('login', { passConfirmSubmit(_passphrase = this.input_passphrase) { if (this.Passphrase.normalize.constructor === Function) { - this.account.set({ + this.account.set({ passphrase: this.Passphrase.normalize(_passphrase), network: this.network, }); From 06f34294438402b7d65bf677ef04bbbcb67b682c Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Tue, 2 May 2017 14:37:57 +0200 Subject: [PATCH 6/7] Remove problematic rule from eslintrc It was causing this issue: Warning: /Users/slaweet/git/lisk-nano/src/.eslintrc.json: Configuration for rule "no-param-reassign" is invalid: Value "data["0"].ignorePropertyModificationsFor" has additional properties. --- src/.eslintrc.json | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/src/.eslintrc.json b/src/.eslintrc.json index 5fd7c06ff..da5ab0878 100644 --- a/src/.eslintrc.json +++ b/src/.eslintrc.json @@ -20,11 +20,6 @@ "no-restricted-properties": "off", "no-return-assign": "off", "no-underscore-dangle": "off", - "no-param-reassign": [ - "error", { - "props": true, - "ignorePropertyModificationsFor": ["scope", "$scope", "rootScope", "$rootScope"] - } - ] + "no-param-reassign": "off" } } From 636f6490876ec4bd087bda6f645e220404c9ff10 Mon Sep 17 00:00:00 2001 From: Vit Stanislav Date: Fri, 5 May 2017 09:05:44 +0200 Subject: [PATCH 7/7] Support peerStack and passphrase also as url params ...not just cookies. It's usefull to simplify e2e tests. --- src/app/components/login/login.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/app/components/login/login.js b/src/app/components/login/login.js index a22345adb..278e5d576 100644 --- a/src/app/components/login/login.js +++ b/src/app/components/login/login.js @@ -8,13 +8,14 @@ app.component('login', { /* eslint no-param-reassign: ["error", { "props": false }] */ constructor($scope, $rootScope, $timeout, $document, $mdMedia, - $cookies, Passphrase, $state, Account) { + $cookies, $location, Passphrase, $state, Account) { this.$scope = $scope; this.$rootScope = $rootScope; this.$timeout = $timeout; this.$document = $document; this.$mdMedia = $mdMedia; this.$cookies = $cookies; + this.$location = $location; this.$state = $state; this.account = Account; @@ -63,7 +64,7 @@ app.component('login', { } devTestAccount() { - const peerStack = this.$cookies.get('peerStack'); + const peerStack = this.$location.search().peerStack || this.$cookies.get('peerStack'); if (peerStack === 'localhost') { this.network = this.networks[2]; angular.merge(this.network, { @@ -74,7 +75,7 @@ app.component('login', { } else if (peerStack === 'testnet') { this.network = this.networks[1]; } - const passphrase = this.$cookies.get('passphrase'); + const passphrase = this.$location.search().passphrase || this.$cookies.get('passphrase'); if (passphrase) { this.input_passphrase = passphrase; if (this.$rootScope.logged === undefined) {