Merge pull request #262 from LiskHQ/261-sign-message-simplicity

Add "sign and copy to clipboard" button to sign message - Closes #261

features/menu.feature

@@ -17,7 +17,8 @@ Feature: Top right menu
   Scenario: should allow to sign message
     Given I'm logged in as "any account"
     When I click "sign message" in main menu
-    And  I fill in "Hello world" to "message" field
+    And I fill in "Hello world" to "message" field
+    And I click "sign button"
     Then I should see in "result" field:
          """
          -----BEGIN LISK SIGNED MESSAGE-----

package.json

@@ -30,19 +30,20 @@
     "angular-material": "=1.1.1",
     "angular-material-data-table": "=0.10.9",
     "angular-messages": "=1.5.8",
-    "angular-ui-router": "=1.0.0-rc.1",
     "angular-svg-round-progressbar": "=0.4.8",
+    "angular-ui-router": "=1.0.0-rc.1",
     "babel-polyfill": "=6.9.1",
     "bignumber.js": "=4.0.0",
     "bitcore-mnemonic": "=1.1.1",
     "debug": "=2.2.0",
+    "jasmine-spec-reporter": "=3.3.0",
     "jquery": "=2.2.4",
     "lisk-js": "=0.4.1",
     "lodash": "=4.16.4",
     "moment": "=2.15.1",
     "ng-infinite-scroll": "=1.3.0",
-    "numeral": "=1.5.3",
-    "jasmine-spec-reporter": "=3.3.0"
+    "ngclipboard": "=1.1.1",
+    "numeral": "=1.5.3"
   },
   "devDependencies": {
     "angular-mocks": "=1.5.8",

src/app.js

@@ -14,6 +14,7 @@ const app = angular.module('app', [
   'ngCookies',
   'infinite-scroll',
   'md.data.table',
+  'ngclipboard',
 ]);
 
 export default app;

src/components/signVerify/signMessage.js

@@ -15,9 +15,10 @@ app.component('signMessage', {
    * @constructor
    */
   controller: class signMessage {
-    constructor($mdDialog, Account) {
+    constructor($mdDialog, Account, dialog) {
       this.$mdDialog = $mdDialog;
       this.account = Account;
+      this.dialog = dialog;
     }
 
     /**
@@ -31,6 +32,13 @@ app.component('signMessage', {
         this.account.get().passphrase);
       this.result = lisk.crypto.printSignedMessage(
         this.message, signnedMessage, this.account.get().publicKey);
+      this.resultIsShown = false;
+    }
+
+    showResult() {
+      if (this.result) {
+        this.resultIsShown = true;
+      }
     }
   },
 });

src/components/signVerify/signMessage.pug

@@ -10,7 +10,9 @@ div
       md-input-container.md-block
         label Message
         textarea.message(name='message', ng-model='$ctrl.message', ng-change='$ctrl.sign()', md-autofocus)
-    div(ng-show='$ctrl.result')
+      div(layout='row', layout-align='center center')
+        md-button.sign-button(ngclipboard, data-clipboard-text='{{$ctrl.result}}', ng-click='$ctrl.showResult()', ngclipboard-success="$ctrl.dialog.successToast('Result copied to clipboard')", ng-disabled='!$ctrl.result || $ctrl.resultIsShown') Sign and copy result to clipboard
+    div(ng-if='$ctrl.resultIsShown')
       md-input-container.md-block
         label Result
         textarea.result(name='result', ng-model='$ctrl.result', readonly)

src/libs.js

@@ -12,6 +12,6 @@ import 'angular-material-data-table/dist/md-data-table';
 import 'angular-material-data-table/dist/md-data-table.css';
 import 'ng-infinite-scroll';
 import 'angular-svg-round-progressbar';
-
+import 'ngclipboard';
 
 import 'babel-polyfill';

test/components/signVerify/signMessage.spec.js

@@ -45,6 +45,7 @@ describe('Sign message component', () => {
       '-----END LISK SIGNED MESSAGE-----';
     const ngModelController = element.find('textarea[name="message"]').controller('ngModel');
     ngModelController.$setViewValue(message);
+    element.find('.sign-button').click();
     expect(element.find('textarea[name="result"]').val()).to.equal(result);
   });
 });