Merge pull request #92 from gabrielbazan7/fix/onboarding

onboarding process details

public/views/includes/confirmBackupPopup.html

@@ -1,19 +1,9 @@
-<div class="text-center" ng-show="!backupError">
+<div class="text-center">
   <h5 translate>Your bitcoin wallet is backed up!</h5>
   <p translate> Be sure to store your recovery phrase in a secure place. If this app is deelted, you money coont be recovered with out it.</p>
   <button
     class="button round expand"
-    ng-click="closePopup(true)"
+    ng-click="closePopup()"
     translate>Got it
   </button>
 </div>
-<div class="text-center" ng-show="backupError">
-  <h5 translate>uh oh...</h5>
-  <p translate>It's importante that you write your backup phrase down correctly. If something happens to your wallet, you'll need this backup to recover your money
-  Please review your backup and try again</p>
-  <button
-    class="button button-block button-stable"
-    ng-click="closePopup(false)"
-    translate>Ok
-  </button>
-</div>

public/views/onboarding/collectEmail.html

@@ -1,11 +1,4 @@
 <ion-view ng-controller="collectEmailController" id="onboarding-collect-email" class="onboarding">
-<ion-nav-bar class="bar-overlay">
-    <ion-nav-buttons side="right">
-      <button class="button button-block button-positive button-clear" ng-click="onboardingMailSkip()">
-        {{'Skip' | translate}}
-      </button>
-    </ion-nav-buttons>
-  </ion-nav-bar>
   <ion-content>
     <div class="row">
       <img src="img/onboarding-success.svg" class="col col-75" id="success-image" />
@@ -14,16 +7,42 @@
       <h3 translate class="col">Wallet Created</h3>
     </div>
     <div id="collect-email">
-    <div class="row text-center">
+      <div ng-if="!confirmation">
-      <p translate class="col col-75 center-block">Where would you like to receive email notifications about payments? </p>
+        <div class="row text-center">
+          <p translate class="col col-75">Where would you like to receive email notifications about payments?</p>
+        </div>
+        <form name="emailForm" ng-submit="confirm(emailForm)" novalidate>
+          <label class="item item-input col col-75">
+            <i class="icon ion-arrow-right-c"></i>
+            <input type="email" id="email" name="email" ng-model="email" laceholder="satoshi@example.com" required></input>
+          </label>
+        </form>
+      </div>
+      <div ng-if="confirmation">
+        <div class="row text-center">
+          <p translate class="col col-75">Is this email address correct?</p>
+        </div>
+        <div class="row text-center">
+          <p class="col col-75">{{email}}</p>
+        </div>
+        <div class="row">
+          <div class="col col-50">
+            <button class="button button-block button-stable" ng-click="cancel()">
+              {{'No' | translate}}
+            </button>
+          </div>
+          <div class="col col-50">
+            <button class="button button-block button-stable" ng-click="save()">
+              {{'Yes' | translate}}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="overlay collect-overlay">
+      <button class="button button-stable button-clear" ng-click="onboardingMailSkip()">
+        {{'Skip' | translate}}
+      </button>
     </div>
-    <form name="emailForm" ng-submit="save(emailForm)" novalidate>
-      <label class="item item-input col col-75 center-block">
-        <i class="icon ion-arrow-right-c"></i>
-        <input type="email" id="email" name="email" ng-model="email" placeholder="satoshi@example.com" required></input>
-      </label>
-    </form>
-  </div>
-  <div class="overlay collect-overlay"></div>
   </ion-content>
 </ion-view>

src/js/controllers/backup.js

@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('copayApp.controllers').controller('backupController',
-  function($rootScope, $scope, $timeout, $log, $state, $stateParams, $ionicPopup, $ionicNavBarDelegate, uxLanguage, lodash, fingerprintService, platformInfo, configService, profileService, bwcService, walletService, ongoingProcess, storageService) {
+  function($rootScope, $scope, $timeout, $log, $state, $stateParams, $ionicPopup, $ionicNavBarDelegate, uxLanguage, lodash, fingerprintService, platformInfo, configService, profileService, bwcService, walletService, ongoingProcess, storageService, popupService, gettextCatalog) {
     var wallet = profileService.getWallet($stateParams.walletId);
     $ionicNavBarDelegate.title(wallet.credentials.walletName);
     $scope.n = wallet.n;
@@ -87,24 +87,29 @@ angular.module('copayApp.controllers').controller('backupController',
     };
 
     var openPopup = function() {
-      var confirmBackupPopup = $ionicPopup.show({
-        templateUrl: "views/includes/confirmBackupPopup.html",
-        scope: $scope,
-      });
 
-      $scope.closePopup = function(val) {
+      if ($scope.backupError) {
-        if (val) {
+        var title = gettextCatalog.getString('uh oh...');
+        var message = gettextCatalog.getString("It's importante that you write your backup phrase down correctly. If something happens to your wallet, you'll need this backup to recover your money Please review your backup and try again");
+        popupService.showAlert(title, message, function() {
+          $scope.goToStep(1);
+        })
+      }
+      else {
+        var confirmBackupPopup = $ionicPopup.show({
+          templateUrl: "views/includes/confirmBackupPopup.html",
+          scope: $scope,
+        });
+
+        $scope.closePopup = function() {
           confirmBackupPopup.close();
           if ($stateParams.fromOnboarding) $state.go('onboarding.disclaimer');
           else {
             $ionicHistory.clearHistory();
-            $state.go('tabs.home');
+            $state.go('tabs.home')
           }
-        } else {
+        };
-          confirmBackupPopup.close();
+      }
-          $scope.goToStep(1);
-        }
-      };
     }
 
     var confirm = function(cb) {

src/js/controllers/copayers.js

@@ -21,7 +21,7 @@ angular.module('copayApp.controllers').controller('copayersController',
     $scope.isCordova = platformInfo.isCordova;
 
     $scope.showDeletePopup = function() {
-      popupService.showConfirm(gettextCatalog.getString('Confirm'), gettextCatalog.getString('Are you sure you want to delete this wallet?'), function(res) {
+      popupService.showConfirm(gettextCatalog.getString('Confirm'), gettextCatalog.getString('Are you sure you want to delete this wallet?'), null, null, function(res) {
         if (res) deleteWallet();
       });
     };

src/js/controllers/onboarding/backupRequest.js

@@ -1,22 +1,28 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('backupRequestController', function($scope, $state, $stateParams, $ionicPopup) {
+angular.module('copayApp.controllers').controller('backupRequestController', function($scope, $state, $stateParams, $ionicPopup, popupService, gettextCatalog) {
 
   $scope.walletId = $stateParams.walletId;
+
   $scope.openPopup = function() {
-    var backupLaterPopup = $ionicPopup.show({
+
-      templateUrl: "views/includes/backupLaterPopup.html",
+    var title = gettextCatalog.getString('Without a backup, you could lose money');
-      scope: $scope,
+    var message = gettextCatalog.getString('If something happens to this device, this app is deleted, or your password forgotten, neither you nor Bitpay can recover your funds');
+    var okText = gettextCatalog.getString('I understand');
+    var cancelText = gettextCatalog.getString('Go back');
+    popupService.showConfirm(title, message, okText, cancelText, function(val) {
+      if (val) {
+        var title = gettextCatalog.getString('Are you sure you want to skip the backup?');
+        var message = gettextCatalog.getString('You can create a backup later from your wallet settings');
+        var okText = gettextCatalog.getString('Yes, skip backup');
+        var cancelText = gettextCatalog.getString('Go back');
+        popupService.showConfirm(title, message, okText, cancelText, function(val) {
+          if (val) {
+            $state.go('onboarding.disclaimer');
+          }
+        });
+      }
     });
-
-    $scope.goBack = function() {
-      backupLaterPopup.close();
-    };
-
-    $scope.continue = function() {
-      backupLaterPopup.close();
-      $state.go('onboarding.disclaimer');
-    };
   }
 
 });

src/js/controllers/onboarding/collectEmail.js

@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('collectEmailController', function($scope, $state, $stateParams, profileService, configService, walletService, platformInfo) {
+angular.module('copayApp.controllers').controller('collectEmailController', function($scope, $state, $timeout, $stateParams, profileService, configService, walletService, platformInfo) {
 
   var isCordova = platformInfo.isCordova;
   var isWP = platformInfo.isWP;
@@ -9,11 +9,7 @@ angular.module('copayApp.controllers').controller('collectEmailController', func
   var wallet = profileService.getWallet($stateParams.walletId);
   var walletId = wallet.credentials.walletId;
 
-  var config = configService.getSync();
+  $scope.save = function() {
-  config.emailFor = config.emailFor || {};
-  $scope.email = config.emailFor && config.emailFor[walletId];
-
-  $scope.save = function(form) {
     var opts = {
       emailFor: {}
     };
@@ -25,13 +21,32 @@ angular.module('copayApp.controllers').controller('collectEmailController', func
       if (err) $log.warn(err);
       configService.set(opts, function(err) {
         if (err) $log.warn(err);
-        if (!usePushNotifications) $state.go('onboarding.backupRequest', {walletId: walletId});
+        if (!usePushNotifications) $state.go('onboarding.backupRequest', {
-        else $state.go('onboarding.notifications', {walletId: walletId});
+          walletId: walletId
+        });
+        else $state.go('onboarding.notifications', {
+          walletId: walletId
+        });
       });
     });
   };
 
+  $scope.confirm = function(emailForm) {
+    if (emailForm.$invalid) return;
+    $scope.confirmation = true;
+    $scope.email = emailForm.email.$modelValue;
+  };
+
+  $scope.cancel = function() {
+    $scope.confirmation = false;
+    $timeout(function() {
+      $scope.$digest();
+    }, 1);
+  };
+
   $scope.onboardingMailSkip = function() {
-    $state.go('onboarding.backupRequest', {walletId: walletId});
+    $state.go('onboarding.backupRequest', {
+      walletId: walletId
+    });
   };
 });

src/js/controllers/preferencesBitpayCard.js

@@ -5,7 +5,7 @@ angular.module('copayApp.controllers').controller('preferencesBitpayCardControll
 
     $scope.logout = function() {
       var title = 'Are you sure you would like to log out of your Bitpay Card account?';
-      popupService.showConfirm(title, null, function(res) {
+      popupService.showConfirm(title, null, null, null, function(res) {
         if (res) logout();
       });
     };

src/js/controllers/preferencesDelete.js

@@ -10,7 +10,7 @@ angular.module('copayApp.controllers').controller('preferencesDeleteWalletContro
     $scope.showDeletePopup = function() {
       var title = gettextCatalog.getString('Warning!');
       var message = gettextCatalog.getString('Are you sure you want to delete this wallet?');
-      popupService.showConfirm(title, message, function(res) {
+      popupService.showConfirm(title, message, null, null, function(res) {
         if (res) deleteWallet();
       });
     };

src/js/controllers/preferencesGlidera.js

@@ -23,7 +23,9 @@ angular.module('copayApp.controllers').controller('preferencesGlideraController'
         }
         $scope.token = glidera.token;
         $scope.permissions = glidera.permissions;
-        $scope.update({fullUpdate: true});
+        $scope.update({
+          fullUpdate: true
+        });
       });
     };
 
@@ -62,7 +64,7 @@ angular.module('copayApp.controllers').controller('preferencesGlideraController'
     };
 
     $scope.revokeToken = function() {
-      popupService.showConfirm('Glidera', 'Are you sure you would like to log out of your Glidera account?', function(res) {
+      popupService.showConfirm('Glidera', 'Are you sure you would like to log out of your Glidera account?', null, null, function(res) {
         if (res) {
           glideraService.removeToken(function() {
             $timeout(function() {

src/js/services/popupService.js

@@ -10,14 +10,19 @@ angular.module('copayApp.services').service('popupService', function($log, $ioni
     if (!cb) cb = function() {};
     $ionicPopup.alert({
       title: title,
-      template: message
+      template: message,
+      okType: 'button-clear button-positive'
     }).then(cb);
   };
 
-  var _ionicConfirm = function(title, message, cb) {
+  var _ionicConfirm = function(title, message, okText, cancelText, cb) {
     $ionicPopup.confirm({
       title: title,
-      template: message
+      template: message,
+      cancelText: cancelText,
+      cancelType: 'button-clear button-positive',
+      okText: okText,
+      okType: 'button-clear button-positive'
     }).then(function(res) {
       return cb(res);
     });
@@ -42,16 +47,16 @@ angular.module('copayApp.services').service('popupService', function($log, $ioni
     navigator.notification.alert(message, cb, title);
   };
 
-  var _cordovaConfirm = function(title, message, cb) {
+  var _cordovaConfirm = function(title, message, okText, cancelText, cb) {
-    var onConfirm = function (buttonIndex) {
+    var onConfirm = function(buttonIndex) {
       if (buttonIndex == 1) return cb(true);
       else return cb(false);
     }
-    navigator.notification.confirm(message, onConfirm, title);
+    navigator.notification.confirm(message, onConfirm, title, [okText, cancelText]);
   };
 
   var _cordovaPrompt = function(title, message, cb) {
-    var onPrompt = function (results) {
+    var onPrompt = function(results) {
       if (results.buttonIndex == 1) return cb(results.input1);
       else return cb();
     }
@@ -81,17 +86,19 @@ angular.module('copayApp.services').service('popupService', function($log, $ioni
    *
    * @param {String} Title
    * @param {String} Message
+   * @param {String} okText
+   * @param {String} cancelText
    * @param {Callback} Function
    * @returns {Callback} OK: true, Cancel: false
    */
 
-  this.showConfirm = function(title, message, cb) {
+  this.showConfirm = function(title, message, okText, cancelText, cb) {
     $log.warn(title + ": " + message);
 
     if (isCordova)
-      _cordovaConfirm(title, message, cb);
+      _cordovaConfirm(title, message, okText, cancelText, cb);
     else
-      _ionicConfirm(title, message, cb);
+      _ionicConfirm(title, message, okText, cancelText, cb);
   };
 
   /**

src/sass/views/onboarding/onboard-collect-email.scss

@@ -14,25 +14,22 @@
     margin-top: 1rem;
     margin-bottom: 1rem;
   }
-  .collect-overlay, .bar-overlay {
+  .collect-overlay {
-    animation-name: opacity;
+   animation-name: opacity;
-    animation-iteration-count: 1;
+   animation-iteration-count: 1;
-    animation-timing-function: ease-in;
+   animation-timing-function: ease-in;
-    animation-duration: .2s;
+   animation-duration: .2s;
-    animation-delay: .8s;
+   animation-delay: .8s;
-    animation-fill-mode: forwards;
+   animation-fill-mode: forwards;
-    opacity: 0;
+   opacity: 0;
-  }
+   button {
-  .collect-overlay{
+     position: absolute;
-    top:-1px;
+     right: 11px;
-  }
+   }
-  .bar-overlay{
+ }
-    background: rgba(0, 0, 0, 0.23);
+ .collect-overlay{
-    .button-clear{
+   top:-1px;
-      color:#fff;
+ }
-      min-width: 100%;
-    }
-  }
   #collect-email {
     opacity: 1;
     background: #fff;
@@ -52,10 +49,7 @@
     label {
       background: rgba(200, 200, 200, 0.20);
       height: 3rem;
-      margin-top: 0;
+      margin-top:0;
-      input {
-        position: absolute;
-      }
       i {
         position: absolute;
         right: 3%;