Merge pull request #278 from LiskHQ/189-refactor-new-passphrase-modal

Refactor save passphrase modal into a component - Closes #189

features/step_definitions/generic.step.js

@@ -98,20 +98,20 @@ defineSupportCode(({ Given, When, Then, setDefaultTimeout }) => {
   });
 
   When('I remember passphrase, click "{nextButtonSelector}", fill in missing word', (nextButtonSelector, callback) => {
-    waitForElemAndCheckItsText('.dialog-save h2', 'Save your passphrase in a safe place!');
+    waitForElemAndCheckItsText('save-passphrase h2', 'Save your passphrase in a safe place!');
 
-    element(by.css('.dialog-save textarea.passphrase')).getText().then((passphrase) => {
+    element(by.css('save-passphrase textarea.passphrase')).getText().then((passphrase) => {
       // eslint-disable-next-line no-unused-expressions
       expect(passphrase).to.not.be.undefined;
       const passphraseWords = passphrase.split(' ');
       expect(passphraseWords.length).to.equal(12);
       waitForElemAndClickIt(`.${nextButtonSelector.replace(/ /g, '-')}`);
 
-      element.all(by.css('.dialog-save p.passphrase span')).get(0).getText().then((firstPartOfPassphrase) => {
+      element.all(by.css('save-passphrase p.passphrase span')).get(0).getText().then((firstPartOfPassphrase) => {
         const missingWordIndex = firstPartOfPassphrase.length ?
           firstPartOfPassphrase.split(' ').length :
           0;
-        element(by.css('.dialog-save input')).sendKeys(passphraseWords[missingWordIndex]).then(callback);
+        element(by.css('save-passphrase input')).sendKeys(passphraseWords[missingWordIndex]).then(callback);
       });
     });
   });

src/components/login/login.js

@@ -1,5 +1,4 @@
 import './login.less';
-import './save.less';
 
 app.component('login', {
   template: require('./login.pug')(),

src/components/login/passphrase.js → src/components/passphrase/passphrase.js

@@ -1,6 +1,6 @@
 import './passphrase.less';
 
-app.directive('passphrase', ($rootScope, $document, Passphrase, $mdDialog, $mdMedia, $timeout) => {
+app.directive('passphrase', ($rootScope, $document, Passphrase, dialog, $mdMedia, $timeout) => {
   /* eslint no-param-reassign: ["error", { "props": false }] */
   const PassphraseLink = function (scope, element, attrs) {
     const bindEvents = (listener) => {
@@ -26,53 +26,24 @@ app.directive('passphrase', ($rootScope, $document, Passphrase, $mdDialog, $mdMe
     const generateAndDoubleCheck = (seed) => {
       const passphrase = Passphrase.generatePassPhrase(seed);
 
-      const ok = () => {
-        // this.input_passphrase = passphrase;
-        $timeout(() => {
-          $rootScope.$broadcast('onAfterSignup', {
-            passphrase,
-            target: attrs.target,
-          });
-        }, 100);
-      };
 
-      $mdDialog.show({
+      dialog.modal({
         controllerAs: '$ctrl',
         controller: /* @ngInject*/ class save {
-          constructor($scope, $state) {
-            this.$mdDialog = $mdDialog;
+          // eslint-disable-next-line no-shadow
+          constructor(passphrase) {
             this.passphrase = passphrase;
-            this.$state = $state;
-
-            $scope.$watch('$ctrl.missing_input', () => {
-              this.missing_ok = this.missing_input && this.missing_input === this.missing_word;
-            });
-          }
-
-          next() {
-            this.enter = true;
-
-            const words = this.passphrase.split(' ');
-            const missingNumber = parseInt(Math.random() * words.length, 10);
-
-            this.missing_word = words[missingNumber];
-            this.pre = words.slice(0, missingNumber).join(' ');
-            this.pos = words.slice(missingNumber + 1).join(' ');
-          }
-
-          ok() {
-            ok();
-            this.close();
-          }
-
-          close() {
-            this.$mdDialog.hide();
-            this.$state.reload();
           }
         },
-
-        template: require('./save.pug')(),
-        fullscreen: ($mdMedia('xs')),
+        template: '<save-passphrase passphrase="$ctrl.passphrase"></save-passphrase>',
+        locals: { passphrase },
+      }).then(() => {
+        $timeout(() => {
+          $rootScope.$broadcast('onAfterSignup', {
+            passphrase,
+            target: attrs.target,
+          });
+        }, 100);
       });
     };
 

src/components/passphrase/savePassphrase.js

@@ -0,0 +1,40 @@
+import './savePassphrase.less';
+
+app.component('savePassphrase', {
+  template: require('./savePassphrase.pug')(),
+  bindings: {
+    passphrase: '<',
+  },
+  controller: class savePassphrase {
+    constructor($scope, $state, $mdDialog) {
+      this.$mdDialog = $mdDialog;
+      this.$state = $state;
+
+      $scope.$watch('$ctrl.missing_input', () => {
+        this.missing_ok = this.missing_input && this.missing_input === this.missing_word;
+      });
+    }
+
+    next() {
+      this.enter = true;
+
+      const words = this.passphrase.split(' ');
+      const missingNumber = parseInt(Math.random() * words.length, 10);
+
+      this.missing_word = words[missingNumber];
+      this.pre = words.slice(0, missingNumber).join(' ');
+      this.pos = words.slice(missingNumber + 1).join(' ');
+    }
+
+    ok() {
+      this.$mdDialog.hide();
+      this.$state.reload();
+    }
+
+    close() {
+      this.$mdDialog.cancel();
+      this.$state.reload();
+    }
+  },
+});
+

src/components/login/save.less → src/components/passphrase/savePassphrase.less

@@ -1,4 +1,4 @@
-.dialog-save {
+save-passphrase {
   .missing {
     padding: 0 5px 0;
     font-weight: bold;

src/components/passphrase/savePassphrase.pug

@@ -0,0 +1,23 @@
+form
+  md-toolbar
+    .md-toolbar-tools
+      h2
+        span(ng-if="!$ctrl.enter") Save your passphrase in a safe place!
+        span(ng-if="$ctrl.enter") Enter the missing word to continue
+  md-dialog-content
+    .md-dialog-content
+      md-input-container.md-block(ng-if="!$ctrl.enter")
+        textarea.passphrase(ng-bind='$ctrl.passphrase', md-autofocus, readonly)
+      div(ng-if="$ctrl.enter")
+        p.passphrase
+          span {{ $ctrl.pre }}
+          span.missing -----
+          span {{ $ctrl.pos }}
+        md-input-container.md-block(md-is-error='!$ctrl.missing_ok')
+          label Enter the missing word
+          input(ng-model='$ctrl.missing_input')
+  md-dialog-actions(layout='row')
+    md-button.close-button(ng-click="$ctrl.close()") Close
+    span(flex)
+    md-button.yes-its-save-button(ng-click="$ctrl.next()", ng-show='!$ctrl.enter') Yes! It's safe!
+    md-button.ok-button(ng-click="$ctrl.ok()", ng-show='$ctrl.enter', ng-disabled='!$ctrl.missing_ok') OK

src/liskNano.js

@@ -1,39 +1,40 @@
 import './index.less';
 
-import './theme/theme';
-import './util/animateOnChange/animateOnChange';
+import './components/delegateRegistration/delegateRegistration';
+import './components/delegates/delegates';
+import './components/delegates/vote';
+import './components/forging/forging';
+import './components/header/header';
+import './components/login/login';
+import './components/lsk/lsk';
 import './components/main/main';
-import './components/main/setSecondPassService';
 import './components/main/setSecondPassDirective';
-import './components/login/login';
-import './components/login/passphrase';
-import './components/top/top';
-import './components/header/header';
+import './components/main/setSecondPassService';
+import './components/passphrase/passphrase';
+import './components/passphrase/passphraseService';
+import './components/passphrase/savePassphrase';
 import './components/send/send';
-import './components/send/sendModalService';
 import './components/send/sendModalDirective';
-import './components/transactions/transactions';
-import './components/timestamp/timestamp';
-import './components/lsk/lsk';
-import './components/forging/forging';
-import './components/delegates/delegates';
-import './components/delegates/vote';
+import './components/send/sendModalService';
 import './components/signVerify/signMessage';
 import './components/signVerify/verifyMessage';
-import './components/delegateRegistration/delegateRegistration';
+import './components/timestamp/timestamp';
+import './components/top/top';
+import './components/transactions/transactions';
+import './theme/theme';
+import './util/animateOnChange/animateOnChange';
 
-import './services/api/peers';
-import './services/lsk';
-import './services/dialog';
-import './services/passphrase';
-import './services/signVerify';
 import './services/account';
+import './services/api/accountApi';
 import './services/api/delegateApi';
 import './services/api/forgingApi';
-import './services/api/accountApi';
+import './services/api/peers';
+import './services/dialog';
+import './services/lsk';
+import './services/signVerify';
 import './services/sync';
 
 import './filters/lsk';
 
-import './states';
 import './run';
+import './states';

test/components/passphrase/savePassphrase.spec.js

@@ -0,0 +1,83 @@
+const chai = require('chai');
+const sinon = require('sinon');
+const sinonChai = require('sinon-chai');
+
+const expect = chai.expect;
+chai.use(sinonChai);
+const PASSPHRASE = 'illegal symbol search tree deposit youth mixture craft amazing tool soon unit';
+
+describe('Save passphrase component', () => {
+  let $compile;
+  let $rootScope;
+  let element;
+  let $scope;
+
+  beforeEach(angular.mock.module('app'));
+
+  beforeEach(inject((_$compile_, _$rootScope_) => {
+    $compile = _$compile_;
+    $rootScope = _$rootScope_;
+  }));
+
+  beforeEach(() => {
+    $scope = $rootScope.$new();
+    $scope.passphrase = PASSPHRASE;
+    element = $compile('<save-passphrase passphrase="passphrase"></save-passphrase>')($scope);
+    $rootScope.$digest();
+  });
+
+  it('should contain an input field with the passphrase', () => {
+    expect(element.find('textarea').val()).to.equal(PASSPHRASE);
+  });
+
+  it('should ask for a missing word when "yes-its-save-button" clicked', () => {
+    element.find('.yes-its-save-button').click();
+    expect(element.find('label').text()).to.equal('Enter the missing word');
+  });
+
+  describe('Save passphrase component controller', () => {
+    let controller;
+    let $componentController;
+    let dialogMock;
+    let stateMock;
+
+    beforeEach(inject((_$componentController_) => {
+      $componentController = _$componentController_;
+    }));
+
+    beforeEach(() => {
+      $scope = $rootScope.$new();
+      $scope.passphrase = PASSPHRASE;
+      controller = $componentController('savePassphrase', $scope, {});
+
+      dialogMock = sinon.mock(controller.$mdDialog);
+      stateMock = sinon.mock(controller.$state);
+    });
+
+    afterEach(() => {
+      dialogMock.verify();
+      dialogMock.restore();
+      stateMock.verify();
+      stateMock.restore();
+    });
+
+    describe('ok()', () => {
+      it('calls $mdDialog.hide and $state.reload', () => {
+        dialogMock.expects('hide');
+        stateMock.expects('reload');
+
+        controller.ok();
+      });
+    });
+
+    describe('close()', () => {
+      it('calls $mdDialog.cancel and $state.reload', () => {
+        dialogMock.expects('cancel');
+        stateMock.expects('reload');
+
+        controller.close();
+      });
+    });
+  });
+});
+

test/test.js

@@ -1,29 +1,30 @@
-require('./components/forging/forging.spec');
+require('./components/delegateRegistration/delegateRegistration.spec.js');
 require('./components/delegates/delegates.spec');
 require('./components/delegates/vote.spec');
+require('./components/forging/forging.spec');
 require('./components/header/header.spec');
 require('./components/login/login.spec');
-require('./components/login/passphrase.spec');
 require('./components/main/main.spec');
 require('./components/main/setSecondPassDirective.spec');
 require('./components/main/setSecondPassService.spec');
+require('./components/passphrase/passphrase.spec');
+require('./components/passphrase/savePassphrase.spec');
 require('./components/send/send.spec');
 require('./components/send/sendModalDirective.spec');
-require('./components/top/top.spec');
-require('./components/timestamp/timestamp.spec');
-require('./components/transactions/transactions.spec');
 require('./components/signVerify/signMessage.spec');
 require('./components/signVerify/verifyMessage.spec');
-require('./components/delegateRegistration/delegateRegistration.spec.js');
+require('./components/timestamp/timestamp.spec');
+require('./components/top/top.spec');
+require('./components/transactions/transactions.spec');
 
-require('./services/passphrase.spec');
-require('./services/signVerify.spec');
-require('./services/lsk.spec');
-require('./services/api/peers.spec');
+require('./services/account.spec');
+require('./services/api/accountApi.spec');
 require('./services/api/delegateApi.spec');
 require('./services/api/forgingApi.spec');
-require('./services/api/accountApi.spec');
-require('./services/account.spec');
+require('./services/api/peers.spec');
+require('./services/lsk.spec');
+require('./services/passphrase.spec');
+require('./services/signVerify.spec');
 
 require('./run.spec');