From 576cf04138b1e746696948c453db568eab223bc2 Mon Sep 17 00:00:00 2001
From: Jamal Jackson <jamal@bitpay.com>
Date: Mon, 12 Sep 2016 12:25:15 -0400
Subject: [PATCH] completed second step in backup

---
 public/views/backup.html                 | 110 ++++++++++-------------
 src/js/controllers/backup.js             |   6 +-
 src/sass/views/wallet-backup-phrase.scss |  39 +++++++-
 3 files changed, 87 insertions(+), 68 deletions(-)

diff --git a/public/views/backup.html b/public/views/backup.html
index 39df36761..b7c306dd3 100644
--- a/public/views/backup.html
+++ b/public/views/backup.html
@@ -1,88 +1,68 @@
-<ion-view id="wallet-backup-phrase" title="Backup Phrase">
+<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 ng-controller="backupController" ng-init="init()">
+  <ion-content>
     <div ng-show="deleted">
       <span translate>Wallet recovery phrase not available. You can still export it from Advanced &gt; Export.</span>
     </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
-        </p>
-      </div>
-
-      <div ng-show="mnemonicHasPassphrase">
-        <i class="ion-alert-circled"></i>
-        <span translate>
-          This recovery phrase was created with a password. To recover this wallet both the recovery phrase and password are needed.
-        </span>
-      </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
-          </button>
-        </div>
+  -->
+  <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>
-
-      <!--
-      ## 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
+    <div class="row text-center">
+      <p class="col col-70" translate>
+        Please carefully write down this phrase
+      </p>
+    </div>
+    <div ng-show="mnemonicHasPassphrase">
+      <i class="ion-alert-circled"></i>
+      <span translate>
+        This recovery phrase was created with a password. To recover this wallet both the recovery phrase and password are needed.
+      </span>
+    </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
       </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" ng-if="!selectComplete">
+          <button class="button select-word" 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 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/>
       </label>
-      <button
-        ng-disabled="!passphrase"
-        class="button button-block button-positive"
-        ng-click="goToStep(4);"
-        translate>Confirm
+      <button ng-disabled="!passphrase" class="button button-block button-positive" ng-click="goToStep(4);" translate>Confirm
       </button>
     </div>
-
   </ion-content>
 </ion-view>
diff --git a/src/js/controllers/backup.js b/src/js/controllers/backup.js
index ce0cba754..cf0b20c9b 100644
--- a/src/js/controllers/backup.js
+++ b/src/js/controllers/backup.js
@@ -47,7 +47,7 @@ angular.module('copayApp.controllers').controller('backupController',
 
     $scope.initFlow = function() {
       if (!keys) return;
-
+      $scope.viewTitle = "Backup Phrase";
       var words = keys.mnemonic;
 
       $scope.mnemonicWords = words.split(/[\u3000\s]+/);
@@ -158,8 +158,10 @@ angular.module('copayApp.controllers').controller('backupController',
     $scope.goToStep = function(n) {
       if (n == 1)
         $scope.initFlow();
-      if (n == 2)
+      if (n == 2){
         $scope.step = 2;
+        $scope.viewTitle = "Let's verify your backup phrase";
+      }
       if (n == 3) {
         if (!$scope.mnemonicHasPassphrase)
           finalStep();
diff --git a/src/sass/views/wallet-backup-phrase.scss b/src/sass/views/wallet-backup-phrase.scss
index 16525bb66..a68f69a5c 100644
--- a/src/sass/views/wallet-backup-phrase.scss
+++ b/src/sass/views/wallet-backup-phrase.scss
@@ -3,11 +3,17 @@
   & 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: 1.5rem 1rem;
+    padding: .5rem .5rem 1.7rem;
     border: 2px dashed rgb(206, 206, 206);
     width: 80%;
     margin: 2rem auto;
@@ -33,4 +39,35 @@
       max-width: 400px;
     }
   }
+  .select-word {
+    background: #fff;
+    box-shadow: 0px 4px 5px 0px rgba(50, 50, 50, 0.37);
+    margin: 1rem 0 0;
+    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.9rem;
+      float: left;
+      width: 100%;
+    }
+    .select-word {
+      &.button[disabled] {
+        background: transparent !important;
+        box-shadow: none !important;
+        color: transparent;
+        border: 1px solid rgb(211, 211, 211);
+      }
+    }
+  }
 }