Add modal method to dialog service as general modal service

src/components/delegateRegistration/delegateRegistration.js

@@ -6,8 +6,9 @@ import './delegateRegistration.less';
  * @class app.delegateRegistration
  * @memberOf app
  */
-app.directive('delegateRegistration', ($mdDialog, delegateApi, Account, dialog, $rootScope) => {
-  const DelegateRegistrationLink = function ($scope, $element) {
+app.component('delegateRegistration', {
+  template: require('./delegateRegistration.pug')(),
+  controller($scope, $mdDialog, delegateApi, Account, dialog, $rootScope) {
     function checkPendingRegistration() {
       delegateApi.getDelegate({
         username: $scope.username,
@@ -73,31 +74,7 @@ app.directive('delegateRegistration', ($mdDialog, delegateApi, Account, dialog,
      */
     $scope.cancel = (form) => {
       $scope.reset(form);
-      $mdDialog.hide();
+      // $mdDialog.hide();
     };
-
-    /**
-     * Shows from dialog.
-     *
-     * @todo This should be replaced by a general dialog directive.
-     */
-    $element.bind('click', () => {
-      $mdDialog.show({
-        template: require('./delegateRegistration.pug')(),
-        bindToController: true,
-        locals: {
-          form: $scope.form,
-          cancel: $scope.cancel,
-          account: Account,
-        },
-        controller: () => {},
-        controllerAs: '$ctrl',
-      });
-    });
-  };
-
-  return {
-    restrict: 'A',
-    link: DelegateRegistrationLink,
-  };
+  },
 });

src/components/delegateRegistration/delegateRegistration.pug

@@ -1,35 +1,35 @@
 div.dialog-delegate-registration(aria-label='Vote for delegates')
-  form(name='delegateRegistrationForm', ng-submit='$ctrl.form.onSubmit(delegateRegistrationForm)')
+  form(name='delegateRegistrationForm', ng-submit='form.onSubmit(delegateRegistrationForm)')
     md-toolbar
       .md-toolbar-tools
         h2 Delegate Registration
         span(flex='')
-        md-button.md-icon-button(ng-click='$ctrl.cancel(delegateRegistrationForm)', aria-label='Close dialog')
+        md-button.md-icon-button(ng-click='cancel(delegateRegistrationForm)', aria-label='Close dialog')
           i.material-icons close
     md-dialog-content
       .md-dialog-content
         div
           md-input-container.md-block
             label Delegate name
-            input.username(type='text', name='delegateName', ng-model='$ctrl.form.name', required, ng-disabled='$ctrl.loading', md-autofocus)
+            input.username(type='text', name='delegateName', ng-model='form.name', required, ng-disabled='loading', md-autofocus)
             div(ng-messages='delegateRegistrationForm.name.$error')
               div(ng-message='required') Required
             md-input-container.md-block(ng-if='!$ctrl.account.get().secondSignature')
               div.fee Fee: {{$ctrl.form.fee}} LSK
           md-input-container.md-block(ng-if='$ctrl.account.get().secondSignature')
             label Second Passphrase
-            input(type='password', ng-model='$ctrl.form.secondPassphrase', required)
+            input(type='password', ng-model='form.secondPassphrase', required)
             md-input-container.md-block
-              div.fee Fee: {{$ctrl.form.fee}} LSK
+              div.fee Fee: {{form.fee}} LSK
           md-divider
           div(layout='row')
             p.info-icon-wrapper
               i.material-icons info
             p
               span Becoming a delegate requires registration. You may choose your own delegate name, which can be used to promote your delegate. Only the top 101 delegates are eligible to forge. All fees are shared equally between the top 101 delegates.
           md-divider
-            p.error(ng-bind='$ctrl.form.error', ng-if='$ctrl.form.error')
+            p.error(ng-bind='form.error', ng-if='form.error')
       md-dialog-actions(layout='row')
-        md-button.md-secondary(ng-disabled='$ctrl.loading', ng-click='$ctrl.cancel(delegateRegistrationForm)') {{ 'Cancel' }}
+        md-button.md-secondary(ng-disabled='loading', ng-click='cancel(delegateRegistrationForm)') {{ 'Cancel' }}
         span(flex)
-        md-button.md-raised.md-primary.register-button(ng-disabled='!delegateRegistrationForm.$valid || $ctrl.loading', type='submit') {{ $ctrl.loading ? 'Registering...' : 'Register' }}
+        md-button.md-raised.md-primary.register-button(ng-disabled='!delegateRegistrationForm.$valid || loading', type='submit') {{ loading ? 'Registering...' : 'Register' }}

src/components/header/header.pug

@@ -1,18 +1,18 @@
 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-button.offline-hide(data-show-send-modal, ng-if='$root.logged' ng-disabled='!$root.peers.online') Send
+  md-button.md-raised.md-primary.send-button.offline-hide(data-open-dialog='send', ng-if='$root.logged' ng-disabled='!$root.peers.online') Send
   md-button.md-raised.md-secondary.logout-button(ng-click='$root.logout()', ng-if='$root.logged') Logout
   md-menu.top-menu.offline-hide(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(ng-if='$root.logged && !$ctrl.account.get().secondSignature')
-        md-button.register-second-passphrase(data-set-second-pass)
+        md-button.register-second-passphrase(data-open-dialog='set-second-pass')
           div(layout='row', flex='')
             p(flex='') Register second passphrase
       md-menu-item(ng-if='$root.logged && !$ctrl.account.get().isDelegate')
-        md-button.register-as-delegate(data-delegate-registration)
+        md-button.register-as-delegate(data-open-dialog='delegate-registration')
           div(layout='row', flex='')
             p(flex='') Register as delegate 
       md-menu-item

src/components/login/login.js

@@ -57,11 +57,10 @@ app.component('login', {
         this.$scope.customFullscreen = wantsFullScreen === true;
       });
 
-      this.$scope.$on('onAfterSignup', (ev, args) => {
-        if (args.target === 'primary-pass') {
-          this.passConfirmSubmit(args.passphrase);
-        }
-      });
+      this.$scope.onSave = (primaryPass) => {
+        this.passConfirmSubmit(primaryPass);
+      };
+
       this.$scope.$on('onSignupCancel', () => {
         this.generatingNewPassphrase = false;
       });

src/components/login/login.pug

@@ -18,4 +18,4 @@ md-card
         // md-button(ng-disabled='$ctrl.generatingNewPassphrase', ng-click='$ctrl.devTestAccount()') Dev Test Account
         md-button.md-primary.new-account-button(ng-disabled='$ctrl.random || $ctrl.generatingNewPassphrase', ng-click='$ctrl.generatePassphrase()') NEW ACCOUNT
         md-button.md-raised.md-primary.login-button(md-autofocus, ng-disabled='($ctrl.valid != undefined && $ctrl.valid !== 1) || $root.loggingIn', type='submit') Login
-    passphrase(ng-if='$ctrl.generatingNewPassphrase', data-on-login='$ctrl.onLogin', data-target='primary-pass', data-ok-button-label='Login')
+    passphrase(ng-if='$ctrl.generatingNewPassphrase', data-on-save='onSave', data-target='primary-pass', data-ok-button-label='Login')

src/components/main/main.js

@@ -15,14 +15,13 @@ app.component('main', {
    */
   controller: class main {
     constructor($scope, $rootScope, $timeout, $q, $state, Peers,
-      dialog, SendModal, Account, AccountApi, Notification) {
+      dialog, Account, AccountApi, Notification) {
       this.$scope = $scope;
       this.$rootScope = $rootScope;
       this.$timeout = $timeout;
       this.$q = $q;
       this.peers = Peers;
       this.dialog = dialog;
-      this.transferModal = SendModal;
       this.$state = $state;
       this.account = Account;
       this.accountApi = AccountApi;

src/components/main/setSecondPassDirective.js → src/components/main/secondPass.js

@@ -4,22 +4,18 @@ import './secondPass.less';
  * The directive to show the second passphrase form and register it using AccountApi
  *
  * @module app
- * @submodule setSecondPass
+ * @submodule SetSecondPassCtrl
  */
-app.directive('setSecondPass', (setSecondPass, Account, $rootScope, dialog, AccountApi) => {
-  /* eslint no-param-reassign: ["error", { "props": false }] */
-  const SetSecondPassLink = function (scope, element) {
-    element.bind('click', () => {
-      setSecondPass.show();
-    });
-
+app.component('setSecondPass', {
+  template: require('./secondPass.pug')(),
+  controller($scope, Account, $rootScope, dialog, AccountApi) {
     /**
      * We call this after second passphrase is generated.
      * Shows an alert with appropriate message in case the request fails.
      *
      * @param {String} secondSecret - The validated passphrase to register as second secret
      */
-    scope.passConfirmSubmit = (secondSecret) => {
+    $scope.passConfirmSubmit = (secondSecret) => {
       AccountApi.setSecondSecret(secondSecret, Account.get().publicKey, Account.get().passphrase)
         .then(() => {
           dialog.successAlert({
@@ -39,17 +35,9 @@ app.directive('setSecondPass', (setSecondPass, Account, $rootScope, dialog, Acco
         });
     };
 
-    /**
-     * @todo Why we're listening for onAfterSignup here?
-     */
-    scope.$on('onAfterSignup', (ev, args) => {
-      if (args.target === 'second-pass') {
-        scope.passConfirmSubmit(args.passphrase);
-      }
-    });
-  };
-  return {
-    restrict: 'A',
-    link: SetSecondPassLink,
-  };
+    $scope.onSave = (secondPass) => {
+      $scope.passConfirmSubmit(secondPass);
+    };
+  },
+  // controllerAs: 'md',
 });

src/components/main/secondPass.pug

@@ -1,6 +1,6 @@
-md-dialog.dialog-second(aria-label='Generate a second passphrase for your account')
+div.dialog-second(aria-label='Generate a second passphrase for your account')
   form
     md-toolbar
       .md-toolbar-tools
         h2 Generate a second passphrase of your account
-    passphrase(data-on-login='md.onLogin', data-target='second-pass', data-ok-button-label='Register')
+    passphrase(data-on-save='onSave', data-target='second-pass', data-ok-button-label='Register')

src/components/openDialog/openDialog.js

@@ -0,0 +1,17 @@
+/**
+ * a directive to use dialog.modal as a directive
+ */
+app.directive('openDialog', (dialog) => {
+  const linkFunc = ($scope, $element) => {
+    $element.bind('click', () => {
+      dialog.modal($scope.openDialog, $scope.options);
+    });
+  };
+  return {
+    scope: {
+      options: '=',
+      openDialog: '@',
+    },
+    link: linkFunc,
+  };
+});

src/components/passphrase/passphrase.js

@@ -25,24 +25,12 @@ app.directive('passphrase', ($rootScope, $document, Passphrase, dialog, $mdMedia
      */
     const generateAndDoubleCheck = (seed) => {
       const passphrase = Passphrase.generatePassPhrase(seed);
+      const label = 'Save';
 
-      dialog.modal({
-        controllerAs: '$ctrl',
-        controller: /* @ngInject*/ class save {
-          // eslint-disable-next-line no-shadow
-          constructor(passphrase, okButtonLabel) {
-            this.passphrase = passphrase;
-            this.okButtonLabel = okButtonLabel;
-          }
-        },
-        template: '<save-passphrase ' +
-          'passphrase="$ctrl.passphrase" ' +
-          'ok-button-label="$ctrl.okButtonLabel">' +
-        '</save-passphrase>',
-        locals: {
-          passphrase,
-          okButtonLabel: attrs.okButtonLabel,
-        },
+      dialog.modal('save-passphrase', {
+        passphrase,
+        label,
+        'on-save': scope.onSave,
       }).then(() => {
         $timeout(() => {
           $rootScope.$broadcast('onAfterSignup', {
@@ -86,7 +74,7 @@ app.directive('passphrase', ($rootScope, $document, Passphrase, dialog, $mdMedia
     link: PassphraseLink,
     restrict: 'E',
     scope: {
-      onLogin: '=',
+      onSave: '=',
     },
     template: require('./passphrase.pug')(),
   };

src/components/passphrase/savePassphrase.js

@@ -4,7 +4,8 @@ app.component('savePassphrase', {
   template: require('./savePassphrase.pug')(),
   bindings: {
     passphrase: '<',
-    okButtonLabel: '<',
+    label: '<',
+    onSave: '=',
   },
   controller: class savePassphrase {
     constructor($scope, $rootScope, $mdDialog) {
@@ -31,6 +32,7 @@ app.component('savePassphrase', {
 
     ok() {
       this.$mdDialog.hide();
+      this.onSave(this.passphrase);
     }
 
     back() {

src/components/passphrase/savePassphrase.pug

@@ -34,4 +34,4 @@ form(ng-if='$ctrl.step === 2')
   md-dialog-actions(layout='row')
     md-button.back-button(ng-click="$ctrl.back()") Back
     span(flex)
-    md-button.md-raised.md-primary.ok-button(ng-click="$ctrl.ok()", ng-disabled='!$ctrl.missing_ok', ng-bind='$ctrl.okButtonLabel')
+    md-button.md-raised.md-primary.ok-button(ng-click="$ctrl.ok()", ng-disabled='!$ctrl.missing_ok', ng-bind='$ctrl.label')