complete export process

public/views/export.html

@@ -1,13 +1,22 @@
-<ion-view >
+<ion-view>
-  <ion-tabs class="tabs-striped tabs-color-positive tabs-color-active-positive tabs-top">
+  <ion-nav-bar class="bar-royal">
+    <ion-nav-title>{{'Export wallet' | translate}}</ion-nav-title>
+    <ion-nav-back-button>
+      <i class="icon ion-ios-arrow-thin-left"></i>
+    </ion-nav-back-button>
+  </ion-nav-bar>
 
-    <ion-tab title="File/Text" ui-sref="tabs.preferences.export.file">
+  <ion-content ng-controller="exportController" ng-init="file = true; init();">
-      <ion-nav-view name="tab-export-file"></ion-nav-view>
+    <div class="row text-center">
-    </ion-tab>
+      <div class="col" ng-click="file = true" ng-style="file && {'border-bottom': '2px solid'}">
+        <span class="" translate>File/Text</span>
+      </div>
+      <div class="col" ng-click="file = false" ng-style="!file && {'border-bottom': '2px solid'}">
+        <span class="" translate>QR Code</span>
+      </div>
+    </div>
 
-    <ion-tab title="QR Code" ui-sref="tabs.preferences.export.qrCode">
+    <div ng-include="'views/tab-export-file.html'" ng-if="file"></div>
-      <ion-nav-view name="tab-export-qrCode"></ion-nav-view>
+    <div ng-include="'views/tab-export-qrCode.html'" ng-if="!file"></div>
-    </ion-tab>
+  </ion-content>
-
-  </ion-tabs>
 </ion-view>

public/views/preferencesAdvanced.html

@@ -17,7 +17,7 @@
         <span translate>Sweep paper wallet</span>
         <i class="icon nav-item-arrow-right"></i>
       </a>
-      <a class="item item-icon-right" ui-sref="tabs.preferences.export.file">
+      <a class="item item-icon-right" ui-sref="tabs.preferences.export">
         <span translate>Export Wallet</span>
         <i class="icon nav-item-arrow-right"></i>
       </a>

public/views/tab-export-file.html

@@ -1,104 +1,93 @@
-<ion-view>
+<div ng-show="!backupWalletPlainText">
-  <ion-nav-bar class="bar-royal">
+  <div class="size-14" ng-show="error">
-    <ion-nav-title>{{'Export Wallet' | translate}}</ion-nav-title>
+    <i class="ion-alert-circled"></i>
-    <ion-nav-buttons side="primary">
+    <span translate>Failed to export</span>
-    <button class="button back-button" ui-sref="tabs.preferences.preferencesAdvanced">
+  </div>
-      <i class="icon ion-ios-arrow-thin-left"></i>
-    </button>
-    </ion-nav-buttons>
-  </ion-nav-bar>
 
-  <ion-content ng-controller="exportController" ng-init="init()" cache-view="true">
+  <form name="exportForm" novalidate>
+    <div class="card">
+      <label class="item item-input item-stacked-label">
+        <span class="input-label" transalate>Set up a password</span>
+        <input type="password" placeholder="{{'Your password'|translate}}" ng-model="formData.password">
+      </label>
 
-    <div ng-show="!backupWalletPlainText">
+      <label class="item item-input item-stacked-label">
-      <div class="size-14" ng-show="error">
+        <span class="input-label" transalate>Repeat the password</span>
-        <i class="ion-alert-circled"></i>
+        <input type="password" placeholder="{{'Repeat password'|translate}}" ng-model="formData.repeatpassword">
-        <span translate>Failed to export</span>
+      </label>
-      </div>
-
-      <form name="exportForm" novalidate>
-        <label class="item item-input item-stacked-label">
-          <span class="input-label" transalate>Set up a password</span>
-          <input type="password" placeholder="{{'Your password'|translate}}" name="password" ng-model="password">
-        </label>
-        <label class="item item-input item-stacked-label">
-          <span class="input-label" transalate>Repeat the password</span>
-          <input type="password" class="form-control" placeholder="{{'Repeat password'|translate}}" name="password" ng-model="repeatpassword">
-        </label>
-      </form>
-
-      <ion-toggle ng-show="canSign" ng-model="showAdvanced" toggle-class="toggle-balanced">
-        <span translate ng-show="!showAdvanced">Show advanced options</span>
-        <span translate ng-show="showAdvanced">Hide advanced options</span>
-      </ion-toggle>
-
-      <ion-toggle ng-model="noSignEnabled" ng-show="showAdvanced" toggle-class="toggle-balanced" class="r0" ng-change="noSignEnabledChange()">
-        <span class="toggle-label" translate>Do not include private key</span>
-      </ion-toggle>
-
-      <div class="box-notification" ng-show="!canSign">
-        <span class="size-14">
-          <i class="ion-alert-circled"></i>
-          <span translate>
-            WARNING: The private key of this wallet is not available. The export allows to check the wallet balance, transaction history, and create spend proposals from the export. However, does not allow to approve (sign) proposals, so <b>funds will not be accessible from the export</b>.
-          </span>
-        </span>
-      </div>
-
-      <div class="box-notification" ng-show="noSignEnabled">
-        <span class="size-14">
-          <i class="ion-alert-circled"></i>
-          <span translate>
-          WARNING: Not including the private key allows to check the wallet balance, transaction history, and create spend proposals from the export. However, does not allow to approve (sign) proposals, so <b>funds will not be accessible from the export</b>.
-          </span>
-        </span>
-      </div>
-
-      <button
-              ng-click="downloadWalletBackup()"
-              class="button button-block button-positive"
-              ng-disabled="(!password || password != repeatpassword)"
-              ng-style="{'background-color':wallet.color}"
-              ng-show="!isSafari && !isCordova">
-              <i class="fi-download"></i>
-              <span translate>Download</span>
-      </button>
-
-      <button
-              ng-click="viewWalletBackup()"
-              class="button button-block button-positive"
-              ng-disabled="(!password || password != repeatpassword)"
-              ng-style="{'background-color':wallet.color}"
-              ng-show="isSafari && !isCordova">
-              <i class="fi-eye"></i>
-        <span translate>View</span>
-      </button>
-      <div ng-show="isCordova">
-        <h4 translate>Export options</h4>
-        <button class="button button-block button-positive"
-          ng-disabled="(!password || password != repeatpassword)"
-          ng-style="{'background-color':wallet.color}"
-          ng-click="copyWalletBackup()">
-          <i class="fi-clipboard-pencil"></i>
-          <span translate>Copy to clipboard</span></button>
-        <button class="button button-block button-positive" ng-disabled="(!password || password != repeatpassword)"
-          ng-style="{'background-color':wallet.color}"
-          ng-click="sendWalletBackup()"><i class="fi-mail"></i>
-          <span translate>Send by email</span></button>
-      </div>
     </div>
+  </form>
 
-    <div class="row" ng-show="backupWalletPlainText">
+  <ion-toggle ng-show="canSign" ng-model="formData.showAdvanced" toggle-class="toggle-balanced">
-      <div class="large-12 columns">
+    <span translate ng-show="!formData.showAdvanced">Show advanced options</span>
-        <h3 translate>Wallet Export</h3>
+    <span translate ng-show="formData.showAdvanced">Hide advanced options</span>
-        <div class="input">
+  </ion-toggle>
-          <textarea rows="12">{{backupWalletPlainText}}</textarea>
+
-        </div>
+  <div class="card" ng-show="formData.showAdvanced">
-        <div class="size-12 text-gray text-right">
+    <ion-checkbox ng-model="formData.noSignEnabled" class="checkbox-balanced" ng-change="noSignEnabledChange()">
-          <i class="icon-compose"></i>
+      <span class="toggle-label" translate>Do not include private key</span>
-          <span translate>Copy this text as it is to a safe place (notepad or email)</span>
+    </ion-checkbox>
-        </div>
+  </div>
-      </div>
+
-    </div>
+  <div class="box-notification error" ng-show="!canSign">
-  </ion-content>
+    <span class="size-14">
-</ion-view>
+      <i class="ion-alert-circled"></i>
+      <span translate>
+        WARNING: The private key of this wallet is not available. The export allows to check the wallet balance, transaction history, and create spend proposals from the export. However, does not allow to approve (sign) proposals, so <b>funds will not be accessible from the export</b>.
+      </span>
+    </span>
+  </div>
+
+  <div class="box-notification error" ng-show="formData.noSignEnabled">
+    <span class="size-14">
+      <i class="ion-alert-circled"></i>
+      <span translate>
+      WARNING: Not including the private key allows to check the wallet balance, transaction history, and create spend proposals from the export. However, does not allow to approve (sign) proposals, so <b>funds will not be accessible from the export</b>.
+      </span>
+    </span>
+  </div>
+
+  <button
+    ng-click="downloadWalletBackup()"
+    class="button button-block button-positive"
+    ng-disabled="(!formData.password || formData.password != formData.repeatpassword)"
+    ng-style="{'background-color':wallet.color}"
+    ng-show="!isSafari && !isCordova">
+    <i class="fi-download"></i>
+    <span translate>Download</span>
+  </button>
+
+  <button
+    ng-click="viewWalletBackup()"
+    class="button button-block button-positive"
+    ng-disabled="(!formData.password || formData.password != formData.repeatpassword)"
+    ng-style="{'background-color':wallet.color}"
+    ng-show="isSafari && !isCordova">
+    <i class="fi-eye"></i>
+    <span translate>View</span>
+  </button>
+
+  <div ng-show="isCordova">
+    <h4 translate>Export options</h4>
+    <button class="button button-block button-positive"
+      ng-disabled="(!formData.password || formData.password != formData.repeatpassword)"
+      ng-style="{'background-color':wallet.color}"
+      ng-click="copyWalletBackup()">
+      <i class="fi-clipboard-pencil"></i>
+      <span translate>Copy to clipboard</span></button>
+    <button class="button button-block button-positive" ng-disabled="(!formData.password || formData.password != formData.repeatpassword)"
+      ng-style="{'background-color':wallet.color}"
+      ng-click="sendWalletBackup()"><i class="fi-mail"></i>
+      <span translate>Send by email</span></button>
+  </div>
+</div>
+
+<div ng-show="backupWalletPlainText" class="text-center card">
+  <label class="item item-input item-stacked-label">
+    <textarea rows="12">{{backupWalletPlainText}}</textarea>
+  </label>
+  <div class="item text-gray item-icon-left">
+    <i class="icon ion-compose"></i>
+    <p translate>Copy this text as it is to a safe place (notepad or email)</p>
+  </div>
+</div>

public/views/tab-export-qrCode.html

@@ -1,25 +1,10 @@
-<ion-view>
+<div class="m20t text-gray" ng-show="formData.supported">
-  <ion-nav-bar class="bar-royal">
+  <div class="text-center m20b">
-    <ion-nav-title>{{'Export Wallet' | translate}}</ion-nav-title>
+    <qrcode size="220" version="8" error-correction-level="M" data="{{formData.exportWalletInfo}}"></qrcode>
-    <ion-nav-buttons side="primary">
+  </div>
-    <button class="button back-button" ui-sref="tabs.preferences.preferencesAdvanced">
+  <div class="text-center size-12 m10" translate>From the destination device, go to Add wallet &gt; Import wallet and scan this QR code</div>
-      <i class="icon ion-ios-arrow-thin-left"></i>
+</div>
-    </button>
-    </ion-nav-buttons>
-  </ion-nav-bar>
 
-  <ion-content ng-controller="exportController" ng-init="init()">
+<div class="m20t text-gray" ng-show="!formData.supported">
-
+  <div class="text-center size-12 m10" translate>Exporting via QR not supported for this wallet</div>
-      <div class="m20t text-gray" ng-show="supported">
+</div>
-        <div class="text-center m20b">
-          <qrcode size="220" version="8" error-correction-level="M" data="{{exportWalletInfo}}"></qrcode>
-        </div>
-        <div class="text-center size-12 m10" translate>From the destination device, go to Add wallet &gt; Import wallet and scan this QR code</div>
-      </div>
-
-      <div class="m20t text-gray" ng-show="!supported">
-        <div class="text-center size-12 m10" translate>Exporting via QR not supported for this wallet</div>
-      </div>
-
-  </ion-content>
-</ion-view>

src/js/controllers/export.js

@@ -5,16 +5,14 @@ angular.module('copayApp.controllers').controller('exportController',
     var prevState;
     var isWP = platformInfo.isWP;
     var isAndroid = platformInfo.isAndroid;
-
     var wallet = profileService.getWallet($stateParams.walletId);
-    $scope.isEncrypted = wallet.isPrivKeyEncrypted();
-    $scope.isCordova = platformInfo.isCordova;
-    $scope.isSafari = platformInfo.isSafari;
 
     $scope.init = function() {
-      $scope.supported = true;
+      $scope.formData = {};
-      $scope.exportQR = false;
+      $scope.isEncrypted = wallet.isPrivKeyEncrypted();
-      $scope.noSignEnabled = false;
+      $scope.isCordova = platformInfo.isCordova;
+      $scope.isSafari = platformInfo.isSafari;
+      $scope.formData.noSignEnabled = false;
       $scope.showAdvanced = false;
       $scope.wallet = wallet;
       $scope.canSign = wallet.canSign();
@@ -22,13 +20,15 @@ angular.module('copayApp.controllers').controller('exportController',
       walletService.getEncodedWalletInfo(wallet, function(err, code) {
         if (err || !code) {
           $log.warn(err);
-          return $state.go('wallet.preferencesAdvanced')
+          return $ionicHistory.goBack();
         }
 
         if (!code)
-          $scope.supported = false;
+          $scope.formData.supported = false;
-        else
+        else {
-          $scope.exportWalletInfo = code;
+          $scope.formData.supported = true;
+          $scope.formData.exportWalletInfo = code;
+        }
 
         $timeout(function() {
           $scope.$apply();
@@ -38,14 +38,25 @@ angular.module('copayApp.controllers').controller('exportController',
 
     /*
       EXPORT WITHOUT PRIVATE KEY - PENDING
+    */
 
     $scope.noSignEnabledChange = function() {
-      $scope.exportWalletInfo = encodeWalletInfo();
+      if (!$scope.supported) return;
-      $timeout(function() {
+
-        $scope.$apply();
+      walletService.getEncodedWalletInfo(wallet, function(err, code) {
-      }, 1);
+        if (err) {
+          $log.error(err);
+          $scope.formData.supported = false;
+          $scope.formData.exportWalletInfo = null;
+        } else {
+          $scope.formData.supported = true;
+          $scope.formData.exportWalletInfo = code;
+        }
+        $timeout(function() {
+          $scope.$apply();
+        }, 1);
+      });
     };
-    */
 
     $scope.downloadWalletBackup = function() {
       $scope.getAddressbook(function(err, localAddressBook) {
@@ -54,11 +65,11 @@ angular.module('copayApp.controllers').controller('exportController',
           return;
         }
         var opts = {
-          noSign: $scope.noSignEnabled,
+          noSign: $scope.formData.noSignEnabled,
           addressBook: localAddressBook
         };
 
-        backupService.walletDownload($scope.password, opts, function(err) {
+        backupService.walletDownload($scope.formData.password, opts, function(err) {
           if (err) {
             popupService.showAlert(gettextCatalog.getString('Error'), gettextCatalog.getString('Failed to export'));
             return;
@@ -91,11 +102,11 @@ angular.module('copayApp.controllers').controller('exportController',
           return cb(null);
         }
         var opts = {
-          noSign: $scope.noSignEnabled,
+          noSign: $scope.formData.noSignEnabled,
           addressBook: localAddressBook
         };
 
-        var ew = backupService.walletExport($scope.password, opts);
+        var ew = backupService.walletExport($scope.formData.password, opts);
         if (!ew) {
           popupService.showAlert(gettextCatalog.getString('Error'), gettextCatalog.getString('Failed to export'));
         }
@@ -132,7 +143,7 @@ angular.module('copayApp.controllers').controller('exportController',
         var ew = backup;
         if (!ew) return;
 
-        if ($scope.noSignEnabled)
+        if ($scope.formData.noSignEnabled)
           name = name + '(No Private Key)';
 
         var subject = 'Copay Wallet Backup: ' + name;

src/js/routes.js

@@ -459,7 +459,6 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
         }
       })
       .state('tabs.preferences.export', {
-        abstract: true,
         url: '/export',
         views: {
           'preferences': {
@@ -467,24 +466,6 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
           }
         }
       })
-      .state('tabs.preferences.export.file', {
-        url: '/tab-export-file',
-        needProfile: true,
-        views: {
-          'tab-export-file': {
-            templateUrl: 'views/tab-export-file.html',
-          },
-        }
-      })
-      .state('tabs.preferences.export.qrCode', {
-        url: '/tab-export-qrCode',
-        needProfile: true,
-        views: {
-          'tab-export-qrCode': {
-            templateUrl: 'views/tab-export-qrCode.html',
-          },
-        }
-      })
       .state('tabs.preferences.preferencesBwsUrl', {
         url: '/preferencesBwsUrl',
         views: {