WIP functionality on words

public/views/backup.html

@@ -61,7 +61,7 @@
   </div>
  
   <div ng-show="wordsC.mnemonicWords || (wordsC.credentialsEncrypted && !wordsC.deleted)">
-    <div class="row">
+    <!-- <div class="row">
         <div class="m10t columns">
           <a class="button outline light-gray expand tiny" ng-click="wordsC.toggle()">
             <i class="fi-widget m3r"></i>
@@ -71,16 +71,18 @@
             <i ng-if="wordsC.show" class="icon-arrow-up4"></i>
           </a>
         </div>
-    </div>
+    </div> -->
 
 
-    <div class="row m10t m10b" ng-show="wordsC.show">
+    <!-- <div class="row m10t m10b" ng-show="wordsC.show"> -->
+    <div class="row m10t m10b">
       <div class="small-centered  text-gray columns size-14 text-center" translate>
           Your Wallet Seed
       </div>
     </div>
 
-    <div class="row" ng-show="wordsC.show">
+    <!-- <div class="row" ng-show="wordsC.show"> -->
+    <div class="row">
         <div class="columns">
         <div class="p10" style="background:white" ng-class="{'enable_text_select': index.network == 'testnet'}">
           <span ng-repeat="word in wordsC.mnemonicWords track by $index"><span style="white-space:nowrap">{{word}}</span><span ng-show="wordsC.useIdeograms">&#x3000;</span> </span>  
@@ -88,18 +90,20 @@
         </div>
     </div>
 
-    <div class="row m10t m20b" ng-show="wordsC.show">
-        <div class="columns" ng-show="wordsC.mnemonicHasPassphrase">
-          <span class="size-12">
-            <i class="fi-alert"></i>
-            <span translate>
-            WARNING: This seed was created with a passphrase. To recover this wallet both the mnemonic and passphrase are needed.
-            </span>
+    <!-- <div class="row m10t m20b" ng-show="wordsC.show"> -->
+    <div class="row m10t m20b">
+      <div class="columns" ng-show="wordsC.mnemonicHasPassphrase">
+        <span class="size-12">
+          <i class="fi-alert"></i>
+          <span translate>
+          WARNING: This seed was created with a passphrase. To recover this wallet both the mnemonic and passphrase are needed.
           </span>
-        </div>
+        </span>
+      </div>
     </div>
 
-    <div class="row" ng-show="wordsC.show">
+    <!-- <div class="row" ng-show="wordsC.show"> -->
+    <!-- <div class="row">
         <div class="m10t text-center columns">
           <div class="size-12 text-gray">
             <span translate>
@@ -113,6 +117,12 @@
             </span>
           </button>
         </div>
+    </div> -->
+
+    <div class="columns text-center">
+      <button class="black round small expand" ng-style="{'background-color':index.backgroundColor}" ng-click="$root.go('backupWords');" translate>
+        Continue
+      </button>
     </div>
 
     <!-- hide this in multisig just to show less text -->

src/js/controllers/backup.js

@@ -1,12 +1,15 @@
 'use strict';
 
 angular.module('copayApp.controllers').controller('wordsController',
-  function($rootScope, $scope, $timeout, profileService, go, gettext, confirmDialog, notification, bwsError, $log) {
+  function($rootScope, $scope, $timeout, $log, $compile, lodash, profileService, go, gettext, confirmDialog, notification, 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;
+    self.sorted = false;
+    $scope.seed = '';
+    var customSortWords = [];
     var fc = profileService.focusedClient;
 
     if (fc.isPrivKeyEncrypted()) self.credentialsEncrypted = true;
@@ -84,4 +87,31 @@ angular.module('copayApp.controllers').controller('wordsController',
         }
       }
     }
+
+    self.disableButton = function(word) {
+      document.getElementById(word).disabled = true;
+      $scope.seed += word + ' ';
+      customSortWords.push(word);
+
+      if (customSortWords.length == 12)
+        self.shouldContinue(customSortWords);
+
+      self.addButton(word);
+    }
+
+    self.addButton = function(word) {
+      var btnhtml = '<button class="button radius tiny" style="white-space:nowrap" ' +
+        'ng - click = "wordsC.removeButton(' + word + ')" id = "{{' + word + '_}}" > ' + word + ' </button>';
+      var temp = $compile(btnhtml)($scope);
+      angular.element(document.getElementById('addWord')).append(temp);
+    }
+
+    self.removeButton = function(word) {
+
+    }
+
+    self.shouldContinue = function(customSortWords) {
+      if (lodash.isEqual(self.mnemonicWords, customSortWords))
+        self.sorted = true;
+    }
   });

src/js/routes.js

@@ -434,6 +434,17 @@ angular
           },
         }
       })
+      .state('backupWords', {
+        url: '/backupWords',
+        templateUrl: 'views/backupWords.html',
+        walletShouldBeComplete: true,
+        needProfile: true,
+        views: {
+          'main': {
+            templateUrl: 'views/backupWords.html'
+          },
+        }
+      })
       .state('preferencesGlobal', {
         url: '/preferencesGlobal',
         needProfile: true,