View plain text backup for Safari

js/controllers/copayers.js

@@ -2,10 +2,9 @@
 
 angular.module('copayApp.controllers').controller('CopayersController',
   function($scope, $rootScope, $location, backupService, walletFactory, controllerUtils) {
-
+    $scope.isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
     $scope.hideAdv = true;
 
-
     $scope.skipBackup = function() {
       var w = $rootScope.wallet;
       w.setBackupReady(true);
@@ -13,14 +12,22 @@ angular.module('copayApp.controllers').controller('CopayersController',
 
     $scope.backup = function() {
       var w = $rootScope.wallet;
-      w.setBackupReady();
+      if ($scope.isSafari) {
-      backupService.download(w);
+        $scope.viewBackup(w);
+      } else {
+        w.setBackupReady();
+        $scope.downloadBackup(w);
+      }
     };
 
-    $scope.downloadBackup = function() {
+    $scope.downloadBackup = function(w) {
-      var w = $rootScope.wallet;
       backupService.download(w);
-    }
+    };
+    
+    $scope.viewBackup = function(w) {
+      $scope.backupPlainText = backupService.getBackup(w);
+      $scope.hideViewBackup = true;
+    };
 
     $scope.goToWallet = function() {
       controllerUtils.updateAddressList();

js/controllers/more.js

@@ -3,6 +3,7 @@
 angular.module('copayApp.controllers').controller('MoreController',
   function($scope, $rootScope, $location, $filter, backupService, walletFactory, controllerUtils, notification, rateService) {
     var w = $rootScope.wallet;
+    $scope.isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
 
     $scope.unitOpts = [{
       name: 'Satoshis (100,000,000 satoshis = 1BTC)',
@@ -74,6 +75,11 @@ angular.module('copayApp.controllers').controller('MoreController',
       backupService.download(w);
     }
 
+    $scope.viewBackup = function() {
+      $scope.backupPlainText = backupService.getBackup(w);
+      $scope.hideViewBackup = true;
+    };
+
     $scope.deleteWallet = function() {
       walletFactory.delete(w.id, function() {
         controllerUtils.logout();

js/services/backupService.js

@@ -13,8 +13,12 @@ BackupService.prototype.getCopayer = function(wallet) {
   return wallet.totalCopayers > 1 ? wallet.getMyCopayerNickname() : '';
 };
 
+BackupService.prototype.getBackup = function(wallet) {
+  return wallet.toEncryptedObj();
+};
+
 BackupService.prototype.download = function(wallet) {
-  var ew = wallet.toEncryptedObj();
+  var ew = this.getBackup(wallet);
   var walletName = this.getName(wallet);
   var copayerName = this.getCopayer(wallet);
   var filename = (copayerName ? copayerName + '-' : '') + walletName + '-keybackup.json.aes';

views/copayers.html

@@ -78,13 +78,17 @@
           </div>
           </div>
         </div>
+        <div>
           <button class="button primary right m0"
             ng-click="backup()"
-            ng-show="!$root.wallet.publicKeyRing.isBackupReady()"
+            ng-show="!$root.wallet.publicKeyRing.isBackupReady() && !hideViewBackup"
             ng-disabled="!$root.wallet.publicKeyRing.isComplete()">
-            <span translate ng-show="$root.wallet.publicKeyRing.isComplete()" >
+            <span translate ng-show="$root.wallet.publicKeyRing.isComplete() && !isSafari">
               Backup wallet
             </span>
+            <span translate ng-show="$root.wallet.publicKeyRing.isComplete() && isSafari">
+              View backup
+            </span>
             <span ng-show="!$root.wallet.publicKeyRing.isComplete()" >
               <span ng-show="$root.wallet.publicKeyRing.remainingCopayers() > 1">
                 {{ $root.wallet.publicKeyRing.remainingCopayers() }} <span
@@ -97,7 +101,7 @@
             </span>
           </button>
           <a class="text-primary m15t m20r right"  ng-click="skipBackup()"      
-            ng-show="!$root.wallet.publicKeyRing.isBackupReady()"
+            ng-show="!$root.wallet.publicKeyRing.isBackupReady() && !hideViewBackup"
             ng-disabled="!$root.wallet.publicKeyRing.isComplete()">
              <span class="size-12" translate ng-show="$root.wallet.publicKeyRing.isComplete()" >
               Skip Backup
@@ -115,6 +119,18 @@
             </span>
             <span translate>yet to backup the wallet.</span>
           </button>
+          <div ng-show="backupPlainText">
+            <textarea readonly rows="5">{{backupPlainText}}</textarea>
+            <div class="show-for-large-up">
+              <span translate class="size-12">Copy to clipboard</span> <span class="btn-copy" clip-copy="backupPlainText"> </span>
+            </div>
+            <div class="hide-for-large-up m10b">
+              <span translate class="size-12">Copy this text as it is in a safe place (notepad or email)</span>
+            </div>
+          </div>
+          <button class="button primary right m0" 
+            ng-show="hideViewBackup"
+            ng-click="skipBackup()" translate>Continue</button>
         </div>
       </div>
     </div>

views/more.html

@@ -1,10 +1,22 @@
 <div class="backup" ng-controller="MoreController">
   <h1 translate>Settings </h1>
-  <div class="oh large-12 columns panel">
+  <div class="large-12 columns panel">
-    <h3><i class="fi-download m10r"></i> <span translate>Backup</span> </h3>
+    <h2><i class="fi-download m10r"></i> <span translate>Backup</span> </h2>
-    <p translate class="large-8 columns text-gray">It's important to backup your wallet so that you can recover it in case of disaster</p>
+    <p translate class="text-gray">
-    <div class="large-4 columns">
+      It's important to backup your wallet so that you can recover it in case of disaster
-      <a translate class="button primary expand" ng-click="downloadBackup()">Download File</a>
+    </p>
+    <a translate class="button primary m0" ng-click="downloadBackup()"
+      ng-show="!isSafari">Download File</a>
+    <a translate class="button primary m0" ng-click="viewBackup()"
+      ng-show="isSafari && !hideViewBackup">View Backup</a>
+    <div ng-show="backupPlainText">
+      <textarea readonly rows="5">{{backupPlainText}}</textarea>
+      <div class="show-for-large-up">
+        <span translate class="size-12">Copy to clipboard</span> <span class="btn-copy" clip-copy="backupPlainText"> </span>
+      </div>
+      <div class="hide-for-large-up">
+        <span translate class="size-12">Copy this text as it is in a safe place (notepad or email)</span>
+      </div>
     </div>
   </div>
   <div class="large-12 columns line-dashed-h m15b"></div>