fix DOM access

public/views/backup.html

@@ -116,13 +116,16 @@
         <p class="text-gray m0" translate>
           Please tap the words in order to confirm your backup phrase is correctly written.
         </p>
-        <div class="panel words text-left" ng-class="{'enable_text_select': index.network == 'testnet'}">
-          <div id="addWord"></div>
+        <div class="panel words text-left">
+          <span ng-repeat="cword in customWords track by $index" ng-show="customWords[$index]">
+            <button class="button radius tiny words" ng-click="removeButton($index, cword)">{{cword.word}}</button>
+          </span>
         </div>
-        <div class="text-left" ng-class="{'enable_text_select': index.network == 'testnet'}" id="buttons">
-          <span ng-repeat="word in wordsC.shuffledMnemonicWords track by $index">
-            <button class="button radius tiny words" ng-if="$index > 9" ng-click="wordsC.disableButton($index, word)" id="{{$index + word}}">{{word}}</button>
-            <button class="button radius tiny words" ng-if="$index <= 9" ng-click="wordsC.disableButton('0' + $index, word)" id="{{'0' + $index + word}}">{{word}}</button>
+        <div class="text-left">
+          <span ng-repeat="shuffledWord in wordsC.shuffledMnemonicWords track by $index">
+            <button class="button radius tiny words" ng-click="addButton($index, shuffledWord)"
+              ng-disabled="shuffledWord.selected">{{shuffledWord.word}}
+            </button>
           </span>
         </div>
       </div>

src/js/controllers/backup.js

@@ -1,11 +1,11 @@
 'use strict';
 
 angular.module('copayApp.controllers').controller('backupController',
-  function($rootScope, $scope, $timeout, $document, $log, $state, $compile, go, lodash, profileService, gettext, bwcService, bwsError, walletService) {
+  function($rootScope, $scope, $timeout, $log, lodash, profileService, gettext, bwcService, bwsError, walletService) {
 
     var self = this;
     var fc = profileService.focusedClient;
-    var customWords = [];
+    $scope.customWords = [];
     self.walletName = fc.credentials.walletName;
 
     var handleEncryptedWallet = function(client, cb) {
@@ -18,14 +18,14 @@ angular.module('copayApp.controllers').controller('backupController',
 
     function init() {
       $scope.passphrase = '';
-      resetAllButtons();
-      customWords = [];
+      _shuffleWords();
+      $scope.customWords = [];
       self.step = 1;
       self.deleted = false;
       self.credentialsEncrypted = false;
       self.selectComplete = false;
       self.backupError = false;
-    }
+    };
 
     init();
 
@@ -49,18 +49,28 @@ angular.module('copayApp.controllers').controller('backupController',
       if (self.step == 4) {
         confirm();
       }
-    }
+    };
 
     function initWords() {
       var words = fc.getMnemonic();
       self.xPrivKey = fc.credentials.xPrivKey;
       walletService.lock(fc);
       self.mnemonicWords = words.split(/[\u3000\s]+/);
-      self.shuffledMnemonicWords = lodash.sortBy(self.mnemonicWords);;
+      _shuffleWords();
       self.mnemonicHasPassphrase = fc.mnemonicHasPassphrase();
       self.useIdeograms = words.indexOf("\u3000") >= 0;
     };
 
+    function _shuffleWords() {
+      var sort = lodash.sortBy(self.mnemonicWords);
+      self.shuffledMnemonicWords = lodash.map(sort, function(w) {
+        return {
+          word: w,
+          selected: false
+        };
+      });
+    };
+
     self.toggle = function() {
       self.error = "";
 
@@ -98,64 +108,37 @@ angular.module('copayApp.controllers').controller('backupController',
           });
         }
       }
-    }
+    };
 
-    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
+    $scope.addButton = function(index, item) {
+      var newWord = {
+        word: item.word,
+        prevIndex: index
       };
-      $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);
+      $scope.customWords.push(newWord);
+      self.shuffledMnemonicWords[index].selected = true;
       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);
-      });
+    $scope.removeButton = function(index, item) {
+      $scope.customWords.splice(index, 1);
+      self.shuffledMnemonicWords[item.prevIndex].selected = false;
       self.shouldContinue();
-    }
+    };
 
     self.shouldContinue = function() {
-      if (customWords.length == 12)
+      if ($scope.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 customSentence = lodash.pluck($scope.customWords, 'word').join(separator);
       var passphrase = $scope.passphrase || '';
 
       try {
@@ -173,7 +156,7 @@ angular.module('copayApp.controllers').controller('backupController',
       }
 
       $rootScope.$emit('Local/BackupDone');
-    }
+    };
 
     function backupError(err) {
       $log.debug('Failed to verify backup: ', err);