Merge pull request #103 from jamal-jackson/feature/onboarding_backup_phrase

Added design and styling needed for backup phrase view

public/views/backup.html

@@ -1,86 +1,76 @@
-<ion-view>
+<ion-view id="wallet-backup-phrase" title="{{viewTitle}}" ng-controller="backupController" ng-init="init()">
   <ion-nav-bar class="bar-royal">
     <ion-nav-back-button>
       <i class="icon ion-ios-arrow-thin-left"></i>
     </ion-nav-back-button>
   </ion-nav-bar>
-
+  <ion-content>
-  <ion-content ng-controller="backupController" ng-init="init()">
     <div ng-show="deleted">
-      <span translate>Wallet recovery phrase not available. You can still export it from Advanced &gt; Export.</span>
+      <div class="row text-center">
-    </div>
+        <h3 translate class="col col-75 center-block">Wallet recovery phrase not available.</h3>
-
-    <!--
-    ## STEP 1
-    -->
-    <div ng-show="step == 1 && (mnemonicWords || (!credentialsEncrypted && !deleted))">
-      <h5 translate>Backup Phrase</h5>
-      <div ng-class="{'enable_text_select': wallet.network == 'testnet'}">
-        <span ng-repeat="word in mnemonicWords track by $index"><span style="white-space:nowrap">{{word}}</span><span ng-show="useIdeograms">&#x3000;</span> </span>
       </div>
-      <span translate>
+      <div class="row text-center">
+        <p translate class="col col-75 center-block">
+          You can still export it from Advanced &gt; Export.
+        </p>
+      </div>
+    </div>
+        <!--
+    ## STEP 1
+  -->
+  <div ng-show="step == 1 && (mnemonicWords || (!credentialsEncrypted && !deleted))">
+    <div class="backup-phrase" ng-class="{'enable_text_select': wallet.network == 'testnet'}">
+      <span ng-repeat="word in mnemonicWords track by $index"><span style="white-space:nowrap">{{word}}</span><span ng-show="useIdeograms">&#x3000;</span> </span>
+    </div>
+    <div class="row text-center">
+      <p class="col col-70" translate>
         Please carefully write down this phrase
-      </span>
+      </p>
-
+    </div>
-      <div ng-show="mnemonicHasPassphrase">
+    <div class="row text-center" ng-show="mnemonicHasPassphrase">
-        <i class="ion-alert-circled"></i>
+      <p class="bold-text col col-80 center-block">
         <span translate>
           This recovery phrase was created with a password. To recover this wallet both the recovery phrase and password are needed.
         </span>
-      </div>
+      </p>
-
-        <button
-          ng-show="!deleted"
-          ng-disabled="credentialsEncrypted || error"
-          class="button button-block button-positive"
-          ng-click="goToStep(2);"
-          translate>I've written it down
-        </button>
     </div>
-
+    <div class="cta-buttons">
-      <!--
+      <button ng-show="!deleted" ng-disabled="credentialsEncrypted || error" class="button button-block button-positive" ng-click="goToStep(2);" translate>I've written it down
-      ## STEP 2
-      -->
-
-    <div ng-show="step == 2">
-      <h5 translate>Let's verify your backup phrase</h5>
-        <span ng-repeat="cword in customWords track by $index" ng-show="customWords[$index]">
-          <button class="button" ng-click="removeButton($index, cword)">{{cword.word}}</button>
-        </span>
-        <p translate>
-          Please tap the words in order to confirm your backup phrase is correctly written.
-        </p>
-        <span ng-repeat="shuffledWord in shuffledMnemonicWords track by $index">
-          <button class="button" ng-click="addButton($index, shuffledWord)"
-            ng-disabled="shuffledWord.selected">{{shuffledWord.word}}
-          </button>
-        </span>
-
-      <button
-        ng-show="selectComplete"
-        class="button button-block button-positive"
-        ng-click="goToStep(3);"
-        translate>Confirm
       </button>
     </div>
-
+  </div>
-      <!--
+        <!--
+      ## STEP 2
+    -->
+    <div ng-show="step == 2">
+      <div class="backup-phrase">
+        <span ng-repeat="cword in customWords track by $index" ng-show="customWords[$index]">
+        <button class="button select-word" ng-click="removeButton($index, cword)">{{cword.word}}</button>
+        </span>
+      </div>
+      <div id="select-phrase">
+        <p translate>
+          Please tap each word in the correct order.
+        </p>
+        <span ng-repeat="shuffledWord in shuffledMnemonicWords track by $index">
+          <button class="button select-word" ng-click="addButton($index, shuffledWord)"
+          ng-disabled="shuffledWord.selected">{{shuffledWord.word}}
+        </button>
+      </span>
+      <button ng-show="selectComplete" id="confirm-phrase" class="button button-block button-positive" ng-click="goToStep(3);" translate>Confirm</button>
+    </div>
+  </div>
+        <!--
       ## STEP 3
-      -->
+    -->
-
     <div ng-show="step == 3">
       <h5 translate>Enter your password</h5>
       <label class="item item-input item-stacked-label">
         <span class="input-label" transalate>In order to verify your wallet backup, please type your password:</span>
-        <input type="text" id="passphrase" ng-model="passphrase" autocapitalize="off" spellcheck="false" autofocus/>
+        <input type="text" id="passphrase" ng-model="data.passphrase" autocapitalize="off" spellcheck="false" autofocus/>
       </label>
-      <button
+      <button ng-disabled="!data.passphrase" class="button button-block button-positive" ng-click="goToStep(4);" translate>Confirm
-        ng-disabled="!passphrase"
-        class="button button-block button-positive"
-        ng-click="goToStep(4);"
-        translate>Confirm
       </button>
     </div>
-
   </ion-content>
 </ion-view>

public/views/includes/confirmBackupPopup.html

@@ -1,9 +1,26 @@
-<div class="text-center">
+<div id="backup-confirm-modal" class="popup-modal">
-  <h5 translate>Your bitcoin wallet is backed up!</h5>
+  <div class="popup-modal-header">
-  <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>
+    <div ng-class="{'popup-modal-header-success': !backupError, 'popup-modal-header-fail': backupError}"></div>
-  <button
+  </div>
-    class="button round expand"
+  <div class="popup-modal-content" ng-class="{'popup-modal-content-success': !backupError, 'popup-modal-content-fail': backupError}">
-    ng-click="closePopup()"
+    <div class="text-center" ng-show="!backupError">
-    translate>Got it
+      <h5 translate>Your bitcoin wallet is backed up!</h5>
-  </button>
+      <p translate> Be sure to store your recovery phrase in a secure place. If this app is deelted, you money cannot be recoved with out it.</p>
+      <button
+        class="button button-clear expand"
+        ng-click="closeBackupResultModal()"
+        translate>I Understand
+      </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="closeBackupResultModal()">
+        Ok
+      </button>
+    </div>
+  </div>
 </div>

src/js/controllers/backup.js

@@ -1,9 +1,9 @@
 '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, popupService, gettextCatalog) {
+  function($scope, $timeout, $log, $state, $stateParams, $ionicHistory, lodash, profileService, bwcService, walletService, ongoingProcess, popupService, gettextCatalog, $ionicModal) {
     var wallet = profileService.getWallet($stateParams.walletId);
-    $ionicNavBarDelegate.title(wallet.credentials.walletName);
+    $scope.viewTitle = wallet.name || wallet.credentials.walletName;
     $scope.n = wallet.n;
     var keys;
 
@@ -50,12 +50,13 @@ angular.module('copayApp.controllers').controller('backupController',
       if (!keys) return;
 
       var words = keys.mnemonic;
+      $scope.data = {};
 
       $scope.mnemonicWords = words.split(/[\u3000\s]+/);
       $scope.shuffledMnemonicWords = shuffledWords($scope.mnemonicWords);
       $scope.mnemonicHasPassphrase = wallet.mnemonicHasPassphrase();
       $scope.useIdeograms = words.indexOf("\u3000") >= 0;
-      $scope.passphrase = '';
+      $scope.data.passphrase = null;
       $scope.customWords = [];
       $scope.step = 1;
       $scope.selectComplete = false;
@@ -86,31 +87,39 @@ angular.module('copayApp.controllers').controller('backupController',
       }, 1);
     };
 
-    var openPopup = function() {
+    function openConfirmBackupModal() {
+      $ionicModal.fromTemplateUrl('views/includes/confirmBackupPopup.html', {
+        scope: $scope,
+        backdropClickToClose: false,
+        hardwareBackButtonClose: false
+      }).then(function(modal) {
+        $scope.confirmBackupModal = modal;
+        $scope.confirmBackupModal.show();
+      });
+    };
 
+    var showBackupResult = function() {
       if ($scope.backupError) {
         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 {
+        openConfirmBackupModal();
       }
-      else {
+    };
-        var confirmBackupPopup = $ionicPopup.show({
-          templateUrl: "views/includes/confirmBackupPopup.html",
-          scope: $scope,
-        });
 
-        $scope.closePopup = function() {
+    $scope.closeBackupResultModal = function() {
-          confirmBackupPopup.close();
+      $scope.confirmBackupModal.hide();
-          if ($stateParams.fromOnboarding) $state.go('onboarding.disclaimer');
+
-          else {
+      if ($stateParams.fromOnboarding) {
-            $ionicHistory.clearHistory();
+        $state.go('onboarding.disclaimer');
-            $state.go('tabs.home')
+      } else {
-          }
+        $ionicHistory.clearHistory();
-        };
+        $state.go('tabs.home');
       }
-    }
+    };
 
     var confirm = function(cb) {
       $scope.backupError = false;
@@ -126,7 +135,7 @@ angular.module('copayApp.controllers').controller('backupController',
           var walletClient = bwcService.getClient();
           var separator = $scope.useIdeograms ? '\u3000' : ' ';
           var customSentence = customWordList.join(separator);
-          var passphrase = $scope.passphrase || '';
+          var passphrase = $scope.data.passphrase || '';
 
           try {
             walletClient.seedFromMnemonic(customSentence, {
@@ -158,7 +167,7 @@ angular.module('copayApp.controllers').controller('backupController',
           backupError(err);
         }
         $timeout(function() {
-          openPopup();
+          showBackupResult();
           return;
         }, 1);
       });

src/sass/common.scss

@@ -80,3 +80,7 @@ ion-header-bar{
 .border-top{
   border-top:1px solid rgb(228,228,228);
 }
+
+.bold-text{
+  font-weight: bold !important;
+}

src/sass/forms.scss

@@ -0,0 +1,3 @@
+.button-clear{
+  background: none !important;
+}

src/sass/main.scss

@@ -988,6 +988,8 @@ input[type=number] {
 @import "views/tab-send";
 @import "views/walletDetails";
 @import "views/bitpayCard";
+@import "views/wallet-backup-phrase";
 @import 'views/onboarding/onboarding';
 @import "views/includes/walletActivity";
 @import "views/includes/wallets";
+@import "views/includes/modals/modals";

src/sass/views/includes/modals/backup-confirm-modal.scss

@@ -0,0 +1,3 @@
+#backup-confirm-modal{
+  
+}

src/sass/views/includes/modals/modals.scss

@@ -0,0 +1,47 @@
+.popup-modal {
+  background: #fff;
+  top: 20%;
+  position: absolute;
+  z-index: 10;
+  width: 90%;
+  left: 5%;
+  border-radius: .25rem;
+  &-header {
+    background: rgb(1, 209, 162);
+    padding: 1rem;
+    border-radius: .25rem .25rem 0 0;
+    min-height: 120px;
+    &-success {
+      background: url('../img/onboarding-success.svg') no-repeat center;
+      height: 6rem;
+      background-size: contain;
+      margin-top: .3rem;
+    }
+  }
+  &-content {
+    padding: .5rem .8rem;
+    h5,p{
+      margin:0 0 1rem;
+    }
+    h5 {
+      color: rgb(74, 74, 74);
+      font-weight: bold;
+      font-size: 1.3rem;
+      margin-top:1rem;
+    }
+    p{
+      font-weight: 200;
+    }
+  }
+  &-content-success{
+    button{
+      color:rgb(23, 174, 140) !important;
+    }
+  }
+}
+
+.modal-backdrop.active {
+  background: rgba(0, 0, 0, .8);
+}
+
+@import "backup-confirm-modal";

src/sass/views/wallet-backup-phrase.scss

@@ -0,0 +1,128 @@
+    #wallet-backup-phrase {
+      &,
+      & ion-content,
+      & ion-content .scroll {
+        height: 100%;
+        overflow-y: hidden;
+      }
+      .bar.bar-royal {
+        .title {
+          font-size: 1rem;
+        }
+      }
+      background: #fff;
+      .backup-phrase {
+        background: rgba(246, 246, 246, 0.87);
+        padding: .5rem .5rem 1.7rem;
+        border: 2px dashed rgb(206, 206, 206);
+        width: 95%;
+        margin: 1rem auto;
+        color: rgb(43, 43, 43);
+        text-align: center;
+        span {
+          line-height: 2rem;
+          font-weight: bold;
+          max-width: 400px;
+          color: rgb(43, 43, 43);
+        }
+      }
+      p {
+        color: rgb(58, 58, 58);
+        font-weight: 200;
+      }
+      .cta-buttons {
+        position: absolute;
+        width: 100%;
+        text-align: center;
+        bottom: 90px;
+        button {
+          max-width: 400px;
+        }
+      }
+      .select-word {
+        background: #fff;
+        box-shadow: 0px 4px 5px 0px rgba(50, 50, 50, 0.37);
+        margin: .25rem 0 .25rem;
+        display: inline-block;
+        padding: 0 5px;
+      }
+      #select-phrase {
+        background: rgba(246, 246, 246, 0.87);
+        width: 100%;
+        text-align: center;
+        position: absolute;
+        bottom: 43px;
+        padding-bottom: 20px;
+        p {
+          font-weight: bold;
+          font-weight: bold;
+          padding-top: .7rem;
+          margin-bottom: 0.3rem;
+          float: left;
+          width: 100%;
+        }
+        .select-word {
+          &.button[disabled] {
+            background: transparent !important;
+            box-shadow: none !important;
+            color: transparent;
+            border: 1px solid rgb(211, 211, 211);
+          }
+        }
+        #confirm-phrase {
+          margin: 5px auto 0;
+        }
+      }
+      ion-content.has-header {
+        #select-phrase {
+          bottom: 75px;
+        }
+        .backup-phrase {
+          padding: .5rem .5rem .9rem;
+        }
+      }
+    }
+
+    @media (max-width: 400px) {
+      #wallet-backup-phrase {
+        ion-content {
+          h2 {
+            font-size: 1.2rem;
+          }
+          p,
+          h2,
+          h3 {
+            max-width: 600px !important;
+          }
+          button {
+            max-width: 400px !important;
+          }
+        }
+      }
+    }
+
+    @media (max-height: 560px) {
+      #wallet-backup-phrase {
+        &,
+        & ion-content,
+        & ion-content .scroll {
+          overflow-y:visible; 
+        }
+          #select-phrase {
+            float: left;
+            position: relative;
+          }
+          .backup-phrase {
+            margin-bottom: 5rem;
+          }
+        }
+      }
+      @media (max-height: 379px) {
+        #wallet-backup-phrase {
+          .cta-buttons {
+            float: left;
+            position: relative;
+            bottom: 0;
+          }
+        }
+      }