Merge pull request #316 from matiu/feature/ux13

spinner while derivating passphrase

config.template.js

@@ -98,7 +98,7 @@ var config = {
     port: 3001
   },
   passphrase: {
-    iterations: 1,
+    iterations: 1000,
     storageSalt: 'mjuBtGybi/4=', 
   },
   themes: ['default'],

css/main.css

@@ -443,3 +443,33 @@ a.loading {
   display: block;
   margin: 0 auto;
 }
+
+@keyframes rotateThis {
+	from { transform: scale( 1 ) rotate( 0deg );   }
+	to   { transform: scale( 1 ) rotate( 360deg ); }
+}
+
+@-webkit-keyframes rotateThis {
+	from { -webkit-transform: scale( 1 ) rotate( 0deg );   }
+	to   { -webkit-transform: scale( 1 ) rotate( 360deg ); }
+}
+
+.icon-rotate {
+	animation-name: rotateThis;
+	animation-duration: 2s;
+	animation-iteration-count: infinite;
+	animation-timing-function: linear;
+	-webkit-animation-name: rotateThis;
+  -webkit-animation-duration: 2s;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-timing-function: linear;
+}
+
+.spinner {
+ display:inline-block; 
+ width: 1em; 
+ text-align:center; 
+ line-height:1em; 
+ vertical-align:middle
+}
+

index.html

@@ -145,6 +145,7 @@
     <script type="text/ng-template" id="signin.html">
       <div class="signin" ng-controller="SigninController">
         <div data-alert class="alert-box info radius" ng-show="loading">
+          <i class="size-21 fi-bitcoin-circle icon-rotate spinner"></i>
           Looking for peers...
         </div>
         <div ng-show="!loading">
@@ -197,7 +198,11 @@
  
     <script type="text/ng-template" id="import.html">
       <div ng-controller="ImportController">
-        <div class="large-6 large-centered medium-6 medium-centered columns" ng-init="choosefile=0; pastetext=0">
+        <div data-alert class="alert-box info radius" ng-show="loading">
+          <i class="size-21 fi-bitcoin-circle icon-rotate spinner"></i>
+          Importing wallet...
+        </div>
+        <div class="large-6 large-centered medium-6 medium-centered columns" ng-init="choosefile=0; pastetext=0" ng-show="!loading">
           <h2>{{title}}</h2>
           <form name="importForm" ng-submit="import(importForm)" novalidate>
             <fieldset>
@@ -221,7 +226,8 @@
     <script type="text/ng-template" id="setup.html">
       <div ng-controller="SetupController">
         <div data-alert class="alert-box info radius" ng-show="loading">
-          Creating new wallet...
+          <i class="size-21 fi-bitcoin-circle icon-rotate spinner"></i>
+          Creating wallet...
         </div>
         <div ng-show="!loading">
           <form name="setupForm" ng-submit="create(setupForm)" novalidate>

js/controllers/import.js

@@ -3,12 +3,12 @@
 angular.module('copay.import').controller('ImportController',
   function($scope, $rootScope, walletFactory, controllerUtils, Passphrase) {
     $scope.title = 'Import a backup';
-
     var reader = new FileReader();
     var _importBackup = function(encryptedObj) {
-      var passphrase = Passphrase.getBase64($scope.password);
-      $rootScope.wallet = walletFactory.fromEncryptedObj(encryptedObj, passphrase);
-      controllerUtils.startNetwork($rootScope.wallet);
+      Passphrase.getBase64Async($scope.password, function(passphrase){
+        $rootScope.wallet = walletFactory.fromEncryptedObj(encryptedObj, passphrase);
+        controllerUtils.startNetwork($rootScope.wallet);
+      });
     };
 
     $scope.getFile = function() {
@@ -44,8 +44,5 @@ angular.module('copay.import').controller('ImportController',
       else {
         _importBackup(backupText);
       }
-
-      $scope.loading = false;
-
     };
   });

js/controllers/setup.js

@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('copay.setup').controller('SetupController',
-  function($scope, $rootScope, $location, walletFactory, controllerUtils, Passphrase) {
+  function($scope, $rootScope, $location, $timeout, walletFactory, controllerUtils, Passphrase) {
 
     $scope.loading = false;
     $scope.walletPassword = $rootScope.walletPassword;
@@ -38,19 +38,19 @@ angular.module('copay.setup').controller('SetupController',
         return;
       }
 
+
       $scope.loading = true;
-
-      var passphrase = Passphrase.getBase64($scope.walletPassword);
-
-      var opts = {
-        requiredCopayers: $scope.requiredCopayers,
-        totalCopayers: $scope.totalCopayers,
-        name: $scope.walletName, 
-        nickname: $scope.myNickname,
-        passphrase: passphrase,
-      };
-      var w = walletFactory.create(opts);
-      controllerUtils.startNetwork(w);
+      Passphrase.getBase64Async($scope.walletPassword, function(passphrase){
+        var opts = {
+          requiredCopayers: $scope.requiredCopayers,
+          totalCopayers: $scope.totalCopayers,
+          name: $scope.walletName, 
+          nickname: $scope.myNickname,
+          passphrase: passphrase,
+        };
+        var w = walletFactory.create(opts);
+        controllerUtils.startNetwork(w);
+      });
     };
 
   });

js/controllers/signin.js

@@ -26,14 +26,15 @@ angular.module('copay.signin').controller('SigninController',
       
       $scope.loading = true;
       var password = form.openPassword.$modelValue;
-      var passphrase = Passphrase.getBase64(password);
-      var w = walletFactory.open($scope.selectedWalletId, { passphrase: passphrase});
-      if (!w) {
-        $scope.loading = false;
-        $rootScope.flashMessage = { message: 'Bad password or connection error', type: 'error'};
-        return;
-      }
-      controllerUtils.startNetwork(w);
+      Passphrase.getBase64Async(password, function(passphrase){
+        var w = walletFactory.open($scope.selectedWalletId, { passphrase: passphrase});
+        if (!w) {
+          $scope.loading = false;
+          $rootScope.flashMessage = { message: 'Bad password or connection error', type: 'error'};
+          return;
+        }
+        controllerUtils.startNetwork(w);
+      });
     };
 
     $scope.join = function(form) {
@@ -41,26 +42,26 @@ angular.module('copay.signin').controller('SigninController',
         $rootScope.flashMessage = { message: 'Please, enter required fields', type: 'error'};
         return;
       }
-      $scope.loading = true;
 
+      $scope.loading = true;
       walletFactory.network.on('badSecret', function() {
       });
 
-      var passphrase = Passphrase.getBase64($scope.joinPassword);
-      walletFactory.joinCreateSession($scope.connectionId, $scope.nickname, passphrase, function(err,w) {
-        $scope.loading = false;
-
-        if (err || !w) {
-          if (err === 'joinError') 
-            $rootScope.flashMessage = { message: 'Can not find peer'};
-          else if (err === 'badSecret')  
-            $rootScope.flashMessage = { message: 'Bad secret secret string', type: 'error'};
-          else 
-            $rootScope.flashMessage = { message: 'Unknown error', type: 'error'};
-            controllerUtils.onErrorDigest();
-        } else {
-            controllerUtils.startNetwork(w);
-        }
+      Passphrase.getBase64Async($scope.joinPassword, function(passphrase){
+        walletFactory.joinCreateSession($scope.connectionId, $scope.nickname, passphrase, function(err,w) {
+          $scope.loading = false;
+          if (err || !w) {
+            if (err === 'joinError') 
+              $rootScope.flashMessage = { message: 'Can not find peer'};
+            else if (err === 'badSecret')  
+              $rootScope.flashMessage = { message: 'Bad secret secret string', type: 'error'};
+            else 
+              $rootScope.flashMessage = { message: 'Unknown error', type: 'error'};
+              controllerUtils.onErrorDigest();
+          } else {
+              controllerUtils.startNetwork(w);
+          }
+        });
       });
     };
   });

js/models/core/Passphrase.js

@@ -21,4 +21,14 @@ Passphrase.prototype.getBase64 = function(password) {
   return keyBase64;
 };
 
+Passphrase.prototype.getBase64Async = function(password,cb) {
+  var self = this;
+  setTimeout(function() {
+    var ret = self.getBase64(password);
+    return cb(ret);
+  },10);
+};
+
+
+
 module.exports = Passphrase;