Merge pull request #3489 from tanojaja/ref/backup-flow-01

Backup flow

src/css/main.css

@@ -367,6 +367,55 @@ ul.tx-copayers {
   margin: 0 auto;
 }
 
+.receive .circle-icon {
+  padding: 0.2rem;
+  margin-bottom: 2rem;
+}
+
+.backup .circle-icon {
+  background: #fff;
+  padding: 0.2rem;
+  margin-bottom: 2rem;
+}
+
+.receive h5, .backup h5 {
+  font-weight: 500;
+  color: #4B6178;
+  margin-bottom: 1rem;
+}
+
+.receive p, .backup p {
+  font-size: 0.9rem;
+  margin-bottom: 2rem;
+}
+
+.backup .tab-bar {
+  background: #f1f3f5;
+  border-bottom: none;
+}
+
+.backup .button-box {
+  background: #F1F3F5;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  padding: 0.5rem 1rem 1rem;
+  z-index: 9999;
+}
+
+.backup input[type="text"] {
+  border-bottom: 1px solid #CAD4DB;
+}
+
+.backup input[type="text"]:focus {
+  border-bottom: 1px solid #A5B2BF;
+}
+
+.extra-padding-bottom {
+  padding-bottom: 78px;
+}
+
 .date-message {
   background-color: #213140;
   border-radius: 3px;
@@ -988,6 +1037,30 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
   padding: 1rem;
 }
 
+.panel.words {
+  background: #E6EAEE;
+  border: 1px dashed #A5B2BF;
+  min-height: 147px;
+}
+
+.backup .panel {
+  padding: 0.5rem;
+}
+
+.backup button.words {
+  background: #FFFFFF;
+  box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.30);
+  color: #4B6178;
+  text-transform: lowercase;
+  font-size: 0.8rem;
+  margin: 5px;
+  padding: 0.5rem;
+}
+
+.backup button[disabled] {
+  box-shadow: none;
+}
+
 .panel qrcode {
   background-color: white;
 }

src/js/controllers/backup.js

@@ -1,69 +1,73 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('wordsController',
-  function($rootScope, $scope, $timeout, profileService, go, gettext, confirmDialog, notification, bwsError, $log) {
+angular.module('copayApp.controllers').controller('backupController',
+  function($rootScope, $scope, $timeout, $log, $state, $compile, go, lodash, profileService, gettext, bwcService, bwsError) {
 
-    var msg = gettext('Are you sure you want to delete the backup words?');
-    var successMsg = gettext('Backup words deleted');
     var self = this;
-    self.show = false;
     var fc = profileService.focusedClient;
+    var customWords = [];
 
-    if (fc.isPrivKeyEncrypted()) self.credentialsEncrypted = true;
-    else {
-      setWords(fc.getMnemonic());
+    function init() {
+      $scope.passphrase = '';
+      resetAllButtons();
+      customWords = [];
+      self.step = 1;
+      self.deleted = false;
+      self.credentialsEncrypted = false;
+      self.selectComplete = false;
+      self.backupError = false;
     }
-    if (fc.credentials && !fc.credentials.mnemonicEncrypted && !fc.credentials.mnemonic) {
+
+    init();
+
+    if (fc.credentials && !fc.credentials.mnemonicEncrypted && !fc.credentials.mnemonic)
       self.deleted = true;
+
+    if (fc.isPrivKeyEncrypted() && !self.deleted) {
+      self.credentialsEncrypted = true;
+      passwordRequest();
+    } else {
+      if (!self.deleted)
+        initWords();
     }
 
+    self.goToStep = function(n) {
+      self.step = n;
+      if (self.step == 1)
+        init();
+      if (self.step == 3 && !self.mnemonicHasPassphrase)
+        self.step++;
+      if (self.step == 4) {
+        confirm();
+      }
+    }
+
+    function initWords() {
+      var words = fc.getMnemonic();
+      self.xPrivKey = fc.credentials.xPrivKey;
+      profileService.lockFC();
+      self.mnemonicWords = words.split(/[\u3000\s]+/);
+      self.shuffledMnemonicWords = lodash.sortBy(self.mnemonicWords);;
+      self.mnemonicHasPassphrase = fc.mnemonicHasPassphrase();
+      self.useIdeograms = words.indexOf("\u3000") >= 0;
+    };
+
     self.toggle = function() {
       self.error = "";
-      if (!self.credentialsEncrypted) {
-        if (!self.show)
-          $rootScope.$emit('Local/BackupDone');
-        self.show = !self.show;
-      }
 
       if (self.credentialsEncrypted)
-        self.passwordRequest();
+        passwordRequest();
 
       $timeout(function() {
         $scope.$apply();
       }, 1);
     };
 
-    self.delete = function() {
-      confirmDialog.show(msg, function(ok) {
-        if (ok) {
-          fc.clearMnemonic();
-          profileService.updateCredentialsFC(function() {
-            self.deleted = true;
-            notification.success(successMsg);
-            go.walletHome();
-          });
-        }
-      });
-    };
-
-    $scope.$on('$destroy', function() {
-      profileService.lockFC();
-    });
-
-    function setWords(words) {
-      if (words) {
-        self.mnemonicWords = words.split(/[\u3000\s]+/);
-        self.mnemonicHasPassphrase = fc.mnemonicHasPassphrase();
-        self.useIdeograms = words.indexOf("\u3000") >= 0;
-      }
-    };
-
-    self.passwordRequest = function() {
+    function passwordRequest() {
       try {
-        setWords(fc.getMnemonic());
+        initWords();
       } catch (e) {
         if (e.message && e.message.match(/encrypted/) && fc.isPrivKeyEncrypted()) {
-          self.credentialsEncrypted = true;
 
           $timeout(function() {
             $scope.$apply();
@@ -75,13 +79,99 @@ angular.module('copayApp.controllers').controller('wordsController',
               $log.warn('Error decrypting credentials:', self.error); //TODO
               return;
             }
-            if (!self.show && self.credentialsEncrypted)
-              self.show = !self.show;
+
             self.credentialsEncrypted = false;
-            setWords(fc.getMnemonic());
-            $rootScope.$emit('Local/BackupDone');
+            initWords();
+
+            $timeout(function() {
+              $scope.$apply();
+            }, 1);
           });
         }
       }
     }
+
+    function resetAllButtons() {
+      document.getElementById('addWord').innerHTML = '';
+      var nodes = document.getElementById("buttons").getElementsByTagName('button');
+      lodash.each(nodes, function(n) {
+        document.getElementById(n.id).disabled = false;
+      });
+    }
+
+    self.enableButton = function(word) {
+      document.getElementById(word).disabled = false;
+      lodash.remove(customWords, function(v) {
+        return v == word;
+      });
+    }
+
+    self.disableButton = function(index, word) {
+      var element = {
+        index: index,
+        word: word
+      };
+      document.getElementById(index + word).disabled = true;
+      customWords.push(element);
+      self.addButton(index, word);
+    }
+
+    self.addButton = function(index, word) {
+      var btnhtml = '<button class="button radius tiny words" ng-disabled="wordsC.disableButtons"' +
+        'data-ng-click="wordsC.removeButton($event)" id="_' + index + word + '" > ' + word + ' </button>';
+      var temp = $compile(btnhtml)($scope);
+      angular.element(document.getElementById('addWord')).append(temp);
+      self.shouldContinue();
+    }
+
+    self.removeButton = function(event) {
+      var id = (event.target.id);
+      document.getElementById(id).remove();
+      self.enableButton(id.substring(1));
+      lodash.remove(customWords, function(d) {
+        return d.index == id.substring(1, 3);
+      });
+      self.shouldContinue();
+    }
+
+    self.shouldContinue = function() {
+      if (customWords.length == 12)
+        self.selectComplete = true;
+      else
+        self.selectComplete = false;
+    }
+
+    function confirm() {
+      self.backupError = false;
+
+      var walletClient = bwcService.getClient();
+      var separator = self.useIdeograms ? '\u3000' : ' ';
+      var customSentence = lodash.pluck(customWords, 'word').join(separator);
+      var passphrase = $scope.passphrase || '';
+
+      try {
+        walletClient.seedFromMnemonic(customSentence, {
+          network: fc.credentials.network,
+          passphrase: passphrase,
+          account: fc.credentials.account
+        })
+      } catch (err) {
+        return backupError(err);
+      }
+
+      if (walletClient.credentials.xPrivKey != self.xPrivKey) {
+        return backupError('Private key mismatch');
+      }
+
+      $rootScope.$emit('Local/BackupDone');
+    }
+
+    function backupError(err) {
+      $log.debug('Failed to verify backup: ', err);
+      self.backupError = true;
+
+      $timeout(function() {
+        $scope.$apply();
+      }, 1);
+    };
   });

src/js/controllers/export.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('backupController',
+angular.module('copayApp.controllers').controller('exportController',
   function($rootScope, $scope, $timeout, $log, backupService, storageService, profileService, isMobile, notification, go, gettext, gettextCatalog) {
     var self = this;
 

src/js/controllers/index.js

@@ -9,6 +9,7 @@ angular.module('copayApp.controllers').controller('indexController', function($r
   self.onGoingProcess = {};
   self.historyShowLimit = 10;
   self.updatingTxHistory = {};
+  self.prevState = 'walletHome';
 
   function strip(number) {
     return (parseFloat(number.toPrecision(12)));
@@ -1105,6 +1106,11 @@ angular.module('copayApp.controllers').controller('indexController', function($r
     });
   };
 
+  $rootScope.$on('$stateChangeSuccess', function(ev, to, toParams, from, fromParams) {
+    self.prevState = from.name || 'walletHome';
+    self.tab = 'walletHome';
+  });
+
   $rootScope.$on('Local/ClearHistory', function(event) {
     $log.debug('The wallet transaction history has been deleted');
     self.txHistory = self.completeHistory = [];