add backup warning view to backup flow

public/views/backup.html

@@ -1,10 +1,10 @@
-<ion-view id="wallet-backup-phrase" title="{{viewTitle}}">
+<ion-view id="wallet-backup-phrase">
   <ion-nav-bar class="bar-royal">
-    <ion-nav-buttons side="primary">
-      <button class="button button-back button-clear" ng-click="backupGoBack()">
-        <i class="icon ion-ios-arrow-thin-left"></i>
-      </button>
-    </ion-nav-buttons>
+    <ion-nav-title>
+      {{viewTitle}}
+    </ion-nav-title>
+    <ion-nav-back-button>
+    </ion-nav-back-button>
   </ion-nav-bar>
   <ion-content>
     <div class="ng-hide" ng-show="deleted">

public/views/backupWarning.html

@@ -1,7 +1,7 @@
-<ion-view id="onboarding-backup-warning" class="onboarding" ng-controller="backupWarningController">
+<ion-view id="backup-warning" class="onboarding" ng-controller="backupWarningController">
   <ion-nav-bar  class="bar-royal">
     <ion-nav-buttons side="primary">
-      <button class="button button-back button-clear" href ui-sref="onboarding.backupRequest({walletId: walletId})">
+      <button class="button button-back button-clear" ng-click="goBack()">
         <i class="icon ion-ios-arrow-thin-left"></i>
       </button>
     </ion-nav-buttons>
@@ -18,7 +18,7 @@
       </p>
     </div>
     <div class="row">
-      <img src="img/onboarding-backup-warning.svg" class="col col-60 warning-image">
+      <img src="img/backup-warning.svg" class="col col-60 warning-image">
     </div>
     <div class="row text-center">
       <p class="col col-60">

public/views/includes/backupNeededPopup.html

@@ -10,14 +10,14 @@
         <div class="col">
           <button
             class="button button-clear expand"
-            ng-click="closeBackupNeededModal()"
+            ng-click="close()"
             translate>Not now
           </button>
         </div>
         <div class="col">
           <button
             class="button button-clear expand"
-            ng-click="goToBackupFlow()"
+            ng-click="doBackup()"
             translate>Backup wallet now
           </button>
         </div>

public/views/onboarding/backupRequest.html

@@ -19,7 +19,7 @@
     <div class="cta-buttons">
       <div class="row">
         <button class="button button-block button-positive col-75 col" href
-                ui-sref="onboarding.backupWarning({walletId: walletId})" translate>Backup wallet</button>
+                ui-sref="onboarding.backupWarning({from: 'onboarding.backupRequest', walletId: walletId})" translate>Backup wallet</button>
       </div>
       <div class="row">
         <button class="button button-block button-transparent col-75 col" ng-click="openPopup()" translate>I'll backup my wallet later</button>

public/views/preferences.html

@@ -40,7 +40,7 @@
       <div class="item item-divider" translate>
         Security
       </div>
-      <a class="item item-icon-right" ui-sref="tabs.preferences.backup" ng-hide="wallet.isPrivKeyExternal()">
+      <a class="item item-icon-right" ui-sref="tabs.preferences.backupWarning({from: 'tabs.preferences'})" ng-hide="wallet.isPrivKeyExternal()">
         <span translate>Backup</span>
         <i class="icon nav-item-arrow-right"></i>
       </a>

public/views/tab-receive.html

@@ -31,7 +31,7 @@
         </div>
       </article>
       <article ng-if="wallet.isComplete()">
-        <div class="row backup" ng-click="openBackupNeededPopup()">
+        <div class="row backup" ng-show="!wallet.showBackupNeededModal" ng-click="goToBackupFlow()">
           <div class="m15t text-center col center-block">
             <i class="icon ion-alert"></i><span translate>Wallet not backed up</span><i class="icon ion-ios-arrow-thin-right"></i>
           </div>

src/js/controllers/backup.js

@@ -84,13 +84,15 @@ angular.module('copayApp.controllers').controller('backupController',
 
     $scope.closeBackupResultModal = function() {
       $scope.confirmBackupModal.hide();
+      $scope.confirmBackupModal.remove();
 
-      if ($stateParams.fromOnboarding) {
-        $state.go('onboarding.disclaimer');
-      } else {
-        $ionicHistory.removeBackView();
-        $state.go('tabs.home');
-      }
+      profileService.isDisclaimerAccepted(function(val) {
+        if (val) {
+          $ionicHistory.removeBackView();
+          $state.go('tabs.home');
+        }
+        else $state.go('onboarding.disclaimer');
+      });
     };
 
     var confirm = function(cb) {
@@ -184,17 +186,6 @@ angular.module('copayApp.controllers').controller('backupController',
         $scope.selectComplete = false;
     };
 
-    $scope.backupGoBack = function() {
-      if ($stateParams.fromOnboarding) $state.go('onboarding.backupWarning', {
-        walletId: $stateParams.walletId,
-        fromOnboarding: true
-      });
-      else if ($stateParams.fromReceive) $state.go('tabs.receive');
-      else $state.go('tabs.preferences', {
-        walletId: $stateParams.walletId
-      });
-    };
-
     $scope.$on("$ionicView.enter", function(event, data) {
       $scope.deleted = isDeletedSeed();
       if ($scope.deleted) {

src/js/controllers/onboarding/backupWarning.js

@@ -5,20 +5,31 @@ angular.module('copayApp.controllers').controller('backupWarningController', fun
   $scope.walletId = $stateParams.walletId;
   $scope.openPopup = function() {
     $ionicModal.fromTemplateUrl('views/includes/screenshotWarningModal.html', {
-        scope: $scope,
-        backdropClickToClose: false,
-        hardwareBackButtonClose: false
-      }).then(function(modal) {
-        $scope.warningModal = modal;
-        $scope.warningModal.show();
-      });
+      scope: $scope,
+      backdropClickToClose: false,
+      hardwareBackButtonClose: false
+    }).then(function(modal) {
+      $scope.warningModal = modal;
+      $scope.warningModal.show();
+    });
 
     $scope.close = function() {
       $scope.warningModal.hide();
-      $state.go('onboarding.backup', {
-        walletId: $stateParams.walletId,
-        fromOnboarding: true
-      });
+      if ($stateParams.from == 'onboarding.backupRequest')
+        $state.go('onboarding.backup', {
+          walletId: $stateParams.walletId
+        });
+      else
+        $state.go($stateParams.from + '.backup', {
+          walletId: $stateParams.walletId
+        });
     };
   }
+
+  $scope.goBack = function() {
+    $state.go($stateParams.from, {
+      walletId: $stateParams.walletId
+    });
+  };
+
 });

src/js/controllers/tab-receive.js

@@ -53,6 +53,7 @@ angular.module('copayApp.controllers').controller('tabReceiveController', functi
         $scope.wallet = wallet;
         $log.debug('Wallet changed: ' + wallet.name);
         $scope.setAddress();
+        if ($scope.wallet.showBackupNeededModal) $scope.openBackupNeededModal();
         $scope.$apply();
       });
     });
@@ -71,28 +72,32 @@ angular.module('copayApp.controllers').controller('tabReceiveController', functi
     }, 100);
   };
 
-  $scope.openBackupNeededPopup = function() {
+  $scope.openBackupNeededModal = function() {
     $ionicModal.fromTemplateUrl('views/includes/backupNeededPopup.html', {
       scope: $scope,
       backdropClickToClose: false,
       hardwareBackButtonClose: false
     }).then(function(modal) {
-      $scope.BackupNeededPopup = modal;
-      $scope.BackupNeededPopup.show();
+      $scope.BackupNeededModal = modal;
+      $scope.BackupNeededModal.show();
     });
   };
 
-  $scope.closeBackupNeededModal = function() {
-    $scope.BackupNeededPopup.hide();
-    $scope.BackupNeededPopup.remove();
+  $scope.close = function() {
+    $scope.BackupNeededModal.hide();
+    $scope.BackupNeededModal.remove();
+    profileService.setBackupNeededModalFlag($scope.wallet.credentials.walletId);
+  };
+
+  $scope.doBackup = function() {
+    $scope.close();
+    $scope.goToBackupFlow();
   };
 
   $scope.goToBackupFlow = function() {
-    $scope.BackupNeededPopup.hide();
-    $scope.BackupNeededPopup.remove();
-    $state.go('tabs.receive.backup', {
-      fromReceive: true,
+    $state.go('tabs.receive.backupWarning', {
+      from: 'tabs.receive',
       walletId: $scope.wallet.credentials.walletId
     });
-  };
+  }
 });

src/js/routes.js

@@ -432,6 +432,14 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
           }
         }
       })
+      .state('tabs.preferences.backupWarning', {
+        url: '/backupWarning/:from',
+        views: {
+          'tab-settings@tabs': {
+            templateUrl: 'views/backupWarning.html'
+          }
+        }
+      })
       .state('tabs.preferences.backup', {
         url: '/backup',
         views: {
@@ -571,15 +579,23 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
      *
      */
 
-    .state('tabs.receive.backup', {
-      url: '/backup/:fromReceive/:walletId',
-      views: {
-        'tab-receive@tabs': {
-          controller: 'backupController',
-          templateUrl: 'views/backup.html'
+    .state('tabs.receive.backupWarning', {
+        url: '/backupWarning/:from/:walletId',
+        views: {
+          'tab-receive@tabs': {
+            templateUrl: 'views/backupWarning.html'
+          }
         }
-      }
-    })
+      })
+      .state('tabs.receive.backup', {
+        url: '/backup/:walletId',
+        views: {
+          'tab-receive@tabs': {
+            controller: 'backupController',
+            templateUrl: 'views/backup.html'
+          }
+        }
+      })
 
     /*
      *
@@ -633,15 +649,15 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
         }
       })
       .state('onboarding.backupWarning', {
-        url: '/backupWarning/:walletId',
+        url: '/backupWarning/:from/:walletId',
         views: {
           'onboarding': {
-            templateUrl: 'views/onboarding/backupWarning.html'
+            templateUrl: 'views/backupWarning.html'
           }
         }
       })
       .state('onboarding.backup', {
-        url: '/backup/:walletId/:fromOnboarding',
+        url: '/backup/:walletId',
         views: {
           'onboarding': {
             templateUrl: 'views/backup.html',

src/js/services/profileService.js

@@ -38,6 +38,22 @@ angular.module('copayApp.services')
       });
     }
 
+    root.setBackupNeededModalFlag = function(walletId) {
+      storageService.setBackupNeededModalFlag(walletId, true, function(err) {
+        if (err) $log.error(err);
+        $log.debug('Backup warning modal flag stored');
+        root.wallet[walletId].showBackupNeededModal = false;
+      });
+    };
+
+    function _showBackupNeededModal(wallet, cb) {
+      storageService.getBackupNeededModalFlag(wallet.credentials.walletId, function(err, val) {
+        if (err) $log.error(err);
+        if (val) return cb(false);
+        return cb(true);
+      });
+    };
+
     root.setBackupFlag = function(walletId) {
       storageService.setBackupFlag(walletId, function(err) {
         if (err) $log.error(err);
@@ -101,6 +117,10 @@ angular.module('copayApp.services')
         wallet.balanceHidden = val;
       });
 
+      _showBackupNeededModal(wallet, function(val) {
+        wallet.showBackupNeededModal = val;
+      });
+
       wallet.removeAllListeners();
 
       wallet.on('report', function(n) {

src/js/services/storageService.js

@@ -365,6 +365,14 @@ angular.module('copayApp.services')
       storage.get('receiveTips', cb);
     };
 
+    root.setBackupNeededModalFlag = function(walletId, val, cb) {
+      storage.set('showBackupNeededModal-' + walletId, val, cb);
+    };
+
+    root.getBackupNeededModalFlag = function(walletId, cb) {
+      storage.get('showBackupNeededModal-' + walletId, cb);
+    };
+
     root.setAmazonGiftCards = function(network, gcs, cb) {
       storage.set('amazonGiftCards-' + network, gcs, cb);
     };

src/sass/views/backup-warning.scss

@@ -1,4 +1,4 @@
-#onboarding-backup-warning{
+#backup-warning{
   .warning{
     margin:4rem auto 1rem;
     height: 11rem;
@@ -21,7 +21,7 @@
 }
 
 @media (max-width: 400px){
-  #onboarding-backup-warning{
+  #backup-warning{
     .warning{
       margin: 2rem auto 1rem;
       height: 8rem;
@@ -45,10 +45,10 @@
   }
 }
 @media (max-height: 540px){
-  #onboarding-backup-warning{
+  #backup-warning{
     .cta-buttons{
       float:left;
       position: relative;
     }
   }
-}
+}

src/sass/views/includes/modals/screenshot-warning-model.scss

@@ -1,7 +1,7 @@
 #screenshot-warning-modal{
   .popup-modal-header{
     &-img{
-      background-image: url('../img/onboarding-no-screenshot.svg');
+      background-image: url('../img/no-screenshot.svg');
     }
   }
-}
+}

src/sass/views/onboarding/onboarding.scss

@@ -101,7 +101,7 @@
         max-width: 600px !important;
       }
       button{
-        max-width: 400px !important; 
+        max-width: 400px !important;
       }
     }
   }
@@ -112,6 +112,6 @@
 @import "onboard-tour";
 @import "onboard-collect-email";
 @import "onboard-backup-request";
-@import "onboard-backup-warning";
+@import "../backup-warning";
 @import "onboard-disclaimer";
 @import "onboard-push-notifications";