WIP passphrase confirm - add passphrase view and separate controllers

public/views/backup.html

@@ -4,18 +4,14 @@
   ng-init="titleSection='Backup'; goBackToState = 'preferences'">
 </div>
 
-
-<div class="content preferences" ng-controller="wordsController as wordsC">
+<div class="content preferences" ng-controller="backupController as wordsC">
   <h4></h4>
-
   <div class="box-notification" ng-show="wordsC.error">
     <span class="text-warning">
     {{wordsC.error|translate}}
     </span>
   </div>
 
-
-
   <div ng-show="wordsC.mnemonicWords || (wordsC.credentialsEncrypted && !wordsC.deleted)">
     <div class="row"  ng-show="index.n==1">
       <div class="m10t columns size-14 text-gray">
@@ -75,23 +71,23 @@
 
 
     <!-- <div class="row m10t m10b" ng-show="wordsC.show"> -->
-    <div class="row m10t m10b">
+    <div class="row m10t m10b" ng-show="!wordsC.credentialsEncrypted">
       <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">
+    <div class="row" ng-show="!wordsC.credentialsEncrypted">
         <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>  
-        </div>
+          <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>  
+          </div>
         </div>
     </div>
 
     <!-- <div class="row m10t m20b" ng-show="wordsC.show"> -->
-    <div class="row m10t m20b">
+    <div class="row m10t m20b" ng-show="!wordsC.credentialsEncrypted">
       <div class="columns" ng-show="wordsC.mnemonicHasPassphrase">
         <span class="size-12">
           <i class="fi-alert"></i>
@@ -120,8 +116,12 @@
     </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 
+        ng-disabled="wordsC.credentialsEncrypted"
+        class="black round small expand" 
+        ng-style="{'background-color':index.backgroundColor}" 
+        ng-click="$root.go('backupWords');" 
+        translate>Continue
       </button>
     </div>
 
@@ -136,8 +136,6 @@
         </div>
       </div>
     </div>
-
   </div>
-
 </div>
 <div class="extra-margin-bottom"></div>

public/views/backupConfirm.html

@@ -4,10 +4,9 @@
   ng-init="titleSection='Backup'; goBackToState = 'backupWords'">
 </div>
 
-
-<div class="content preferences" ng-controller="wordsController as wordsC">
+<div class="content preferences" ng-controller="backupConfirmController as backupConfirmC">
   <h4></h4>
-  <div ng-show="wordsC.mnemonicWords || (wordsC.credentialsEncrypted && !wordsC.deleted)">
+  <div ng-show="backupConfirmC.mnemonicWords || (backupConfirmC.credentialsEncrypted && !backupConfirmC.deleted)">
 
     <div class="row m10t m10b">
       <div class="small-centered  text-gray columns size-14 text-center" translate>
@@ -19,7 +18,7 @@
       <button 
         ng-style="{'background-color':index.backgroundColor}" 
         class="button black round expand" 
-        ng-click="$root.go('walletHome');"
+        ng-click="backupConfirmC.confirm(); $root.go('walletHome');"
         translate>Finish
       </button>
     </div>

public/views/backupPassphrase.html

@@ -0,0 +1,57 @@
+<div
+  class="topbar-container"
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Backup'; goBackToState = 'backupWords'">
+</div>
+
+<div class="content preferences" ng-controller="backupPassphraseController as backupPassphraseC">
+  <h4></h4>
+  <div class="box-notification" ng-show="backupPassphraseC.error">
+    <span class="text-warning">
+      {{backupPassphraseC.error|translate}}
+    </span>
+  </div>
+
+  <div ng-show="backupPassphraseC.mnemonicWords || (backupPassphraseC.credentialsEncrypted && !backupPassphraseC.deleted)">
+    <div class="row m10t m10b panel">
+      <div class="small-centered  text-gray columns size-14 text-center" translate>
+        Passphrase needed
+      </div>
+      <div class="columns size-14 m20t">
+        <input type="text" id="passphrase" ng-model="passphrase" autofocus/>
+      </div>
+    </div>
+
+    <div class="columns text-center m20t">
+      <button
+        ng-show="!backupPassphraseC.passphraseSuccess"
+        ng-disabled="!passphrase || backupPassphraseC.error"
+        ng-style="{'background-color':index.backgroundColor}" 
+        class="button black round expand" 
+        ng-click="backupPassphraseC.confirm()"
+        translate>Confirm passphrase
+      </button>
+      <button
+        ng-show="backupPassphraseC.passphraseSuccess"
+        ng-disabled="!passphrase || backupPassphraseC.error"
+        ng-style="{'background-color':index.backgroundColor}" 
+        class="button black round expand" 
+        ng-click="$root.go('backupConfirm');"
+        translate>Continue
+      </button>
+    </div>
+
+    <div class="row m20t"  ng-show="index.n==1">
+      <div class="columns size-12 text-gray">
+        <div class="p10t"  style="border-top:1px solid #ccc">
+          <span translate>You can safely install your wallet on another device and use it from multiple devices at the same time.</span> 
+          <a href="#" ng-click="$root.openExternalLink('https://github.com/bitpay/copay/blob/master/README.md#copay-backups-and-recovery')" translate>
+            Learn more about Copay backups
+          </a>
+        </div>
+      </div>
+    </div>
+
+  </div>
+</div>
+<div class="extra-margin-bottom"></div>

public/views/backupWords.html

@@ -4,17 +4,10 @@
   ng-init="titleSection='Backup'; goBackToState = 'backup'">
 </div>
 
-
-<div class="content preferences" ng-controller="wordsController as wordsC">
+<div class="content preferences" ng-controller="backupWordsController as backupWordsC">
   <h4></h4>
-
-  <div class="box-notification" ng-show="wordsC.error">
-    <span class="text-warning">
-    {{wordsC.error|translate}}
-    </span>
-  </div>
  
-  <div ng-show="wordsC.mnemonicWords || (wordsC.credentialsEncrypted && !wordsC.deleted)">
+  <div ng-show="backupWordsC.mnemonicWords || (backupWordsC.credentialsEncrypted && !backupWordsC.deleted)">
 
     <div class="row m10t m10b">
       <div class="small-centered  text-gray columns size-14 text-center" translate>
@@ -28,8 +21,8 @@
           <div id="addWord"></div>
         </div>
         <div class="p10" style="background:white" ng-class="{'enable_text_select': index.network == 'testnet'}">
-          <span ng-repeat="word in wordsC.mnemonicWords track by $index">
-            <button class="button radius tiny" style="white-space:nowrap" ng-click="wordsC.disableButton(word)" id="{{word}}">{{word}}</button>
+          <span ng-repeat="word in backupWordsC.mnemonicWords track by $index">
+            <button class="button radius tiny" style="white-space:nowrap" ng-click="backupWordsC.disableButton(word)" id="{{word}}">{{word}}</button>
           </span>
         </div>
       </div>
@@ -37,12 +30,21 @@
 
     <div class="columns text-center m20t">
       <button 
-        ng-disabled="!wordsC.sorted"
+        ng-show="!backupWordsC.mnemonicHasPassphrase"
+        ng-disabled="!backupWordsC.sorted"
         ng-style="{'background-color':index.backgroundColor}" 
         class="button black round expand" 
         ng-click="$root.go('backupConfirm');" 
         translate>Continue
       </button>
+      <button 
+        ng-show="backupWordsC.mnemonicHasPassphrase"
+        ng-disabled="!backupWordsC.sorted"
+        ng-style="{'background-color':index.backgroundColor}" 
+        class="button black round expand" 
+        ng-click="$root.go('backupPassphrase');" 
+        translate>Continue
+      </button>
     </div>
 
     <div class="row m20t"  ng-show="index.n==1">

public/views/export.html

@@ -6,17 +6,17 @@
 
 
 
-<div class="content preferences" ng-controller="backupController as backup">
+<div class="content preferences" ng-controller="exportController as exportC">
   <h4></h4>
-  <div ng-show="!backup.backupWalletPlainText">
-      <div class="text-warning size-14 m20b" ng-show="backup.error">
+  <div ng-show="!exportC.backupWalletPlainText">
+      <div class="text-warning size-14 m20b" ng-show="exportC.error">
         <i class="fi-alert size-12"></i>
         <span translate> Failed to export </span>
       </div>
 
       <div class="row">
         <div class="columns">
-          <div class="text-warning size-14 m20b" ng-show="backup.isEncrypted">
+          <div class="text-warning size-14 m20b" ng-show="exportC.isEncrypted">
             <i class="fi-alert size-12"></i>
             <span translate> The private key for this wallet is encrypted. Exporting keep the private key encrypted in the export archive.</span>
 
@@ -31,14 +31,14 @@
             <div class="input">
               <input type="password" class="form-control"
                                      placeholder="{{'Your export password'|translate}}"
-                                     name="password" ng-model="backup.password">
+                                     name="password" ng-model="exportC.password">
             </div>
 
             <label for="password" translate>Repeat password</label>
             <div class="input">
               <input type="password" class="form-control"
                                      placeholder="{{'Repeat password'|translate}}"
-                                     name="password" ng-model="backup.repeatpassword">
+                                     name="password" ng-model="exportC.repeatpassword">
             </div>
           </div>
         </div>
@@ -83,25 +83,25 @@
 
       <div class="row">
         <div class="columns">
-          <button class="black round expand m20t" ng-click="backup.downloadWalletBackup()"
-            ng-disabled="(!backup.password || backup.password != backup.repeatpassword)"
+          <button class="black round expand m20t" ng-click="exportC.downloadWalletBackup()"
+            ng-disabled="(!exportC.password || exportC.password != exportC.repeatpassword)"
             ng-style="{'background-color':index.backgroundColor}"
             ng-show="!index.isSafari && !index.isCordova"><i class="fi-download"></i>
             <span translate>Download</span></button>
-          <button class="black round expand m20t" ng-click="backup.viewWalletBackup()"
-            ng-disabled="(!backup.password || backup.password != backup.repeatpassword)"
+          <button class="black round expand m20t" ng-click="exportC.viewWalletBackup()"
+            ng-disabled="(!exportC.password || exportC.password != exportC.repeatpassword)"
             ng-style="{'background-color':index.backgroundColor}"
             ng-show="index.isSafari && !index.isCordova"><i class="fi-eye"></i>
             <span translate>View</span></button>
           <div ng-show="index.isCordova">
             <h4 translate>Export options</h4>
-            <button class="black round expand" ng-disabled="(!backup.password || backup.password != backup.repeatpassword)"
+            <button class="black round expand" ng-disabled="(!exportC.password || exportC.password != exportC.repeatpassword)"
               ng-style="{'background-color':index.backgroundColor}"
-              ng-click="backup.copyWalletBackup()"><i class="fi-clipboard-pencil"></i>
+              ng-click="exportC.copyWalletBackup()"><i class="fi-clipboard-pencil"></i>
               <span translate>Copy to clipboard</span></button>
-            <button class="black round expand" ng-disabled="(!backup.password || backup.password != backup.repeatpassword)"
+            <button class="black round expand" ng-disabled="(!exportC.password || exportC.password != exportC.repeatpassword)"
               ng-style="{'background-color':index.backgroundColor}"
-              ng-click="backup.sendWalletBackup()"><i class="fi-mail"></i>
+              ng-click="exportC.sendWalletBackup()"><i class="fi-mail"></i>
               <span translate>Send by email</span></button>
           </div>
         </div>
@@ -109,11 +109,11 @@
     
   </div>
 
-  <div class="row" ng-show="backup.backupWalletPlainText">
+  <div class="row" ng-show="exportC.backupWalletPlainText">
     <div class="large-12 columns">
       <h3 translate>Wallet Export</h3>
       <div class="input">
-        <textarea rows="12">{{backup.backupWalletPlainText}}</textarea>
+        <textarea rows="12">{{exportC.backupWalletPlainText}}</textarea>
       </div>
       <div class="size-12 text-gray text-right">
         <i class="icon-compose"></i>