Merge branch 'newdesign-2' into bechi-changes

index.html

@@ -37,7 +37,6 @@
   <script src="lib/angular-moment/angular-moment.js"></script>
   <script src="lib/qrcode-generator/js/qrcode.js"></script>
   <script src="lib/angular-qrcode/qrcode.js"></script>
-  <script src="lib/angular-route/angular-route.min.js"></script>
   <script src="lib/angular-foundation/mm-foundation.min.js"></script>
   <script src="lib/angular-foundation/mm-foundation-tpls.min.js"></script>
   <script src="lib/peer.js"></script> <!-- TODO Change this on PeerJS version 0.3.9 -->

js/controllers/setup.js

@@ -85,4 +85,10 @@ angular.module('copayApp.controllers').controller('SetupController',
       });
     };
 
+    $scope.isSetupWalletPage = 0;
+
+    $scope.setupWallet = function() {
+      $scope.isSetupWalletPage = !$scope.isSetupWalletPage;
+    };
+
   });

js/controllers/signin.js

@@ -75,4 +75,26 @@ angular.module('copayApp.controllers').controller('SigninController',
         });
       });
     }
+
+    $scope.isHome = 1;
+    $scope.isJoin = 0;
+    $scope.isOpen = 0;
+
+    $scope.backWallet = function() {
+      $scope.isHome = 1;
+      $scope.isJoin = 0;
+      $scope.isOpen = 0;
+    };
+
+    $scope.openWallet = function() {
+      $scope.isHome = 0;
+      $scope.isJoin = 0;
+      $scope.isOpen = 1;
+    };
+    
+    $scope.joinWallet = function() {
+      $scope.isHome = 0;
+      $scope.isOpen = 0;
+      $scope.isJoin = 1;
+    };
   });

views/includes/copayers.html

@@ -1,70 +1,62 @@
 <div ng-controller="BackupController" ng-if='$root.wallet && !$root.wallet.isReady() && !loading'>
-  <div class="row m10b" ng-if="!$root.wallet.publicKeyRing.isComplete()">
+  <div ng-if="!$root.wallet.publicKeyRing.isComplete()">
-    <div class="large-12 medium-12 small-12 columns">
+    <h2>Share this secret with your other copayers</h2>
-      <div class="panel radius m30v">
+    <div class="panel input">
-        <h3 class="m15b">Share this secret with your other copayers
+      <p class="ellipsis text-gray">{{$root.wallet.getSecret()}}</p>
-        </h3>
-        <div class="row">
-          <div class="large-9 medium-12 small-12 columns line-dashed-v text-gray">
-            <div class="panel input">
-              <p class="ellipsis text-gray">{{$root.wallet.getSecret()}}</p>
-            </div>
-          </div>
-          <div class="large-3 columns hide-for-medium hide-for-small" ng-show="$root.wallet">
-            <h5 class="m0">{{$root.wallet.getName()}}</h5>
-            <p class="text-gray">{{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}} wallet</p>
-          </div>
-        </div>
-      </div>
     </div>
   </div>
-  <div class="row">
+  <h2 ng-if="$root.wallet && $root.wallet.publicKeyRing.isComplete()">
-    <div class="large-12 medium-12 small-12 columns ">
+    New Wallet Created
-      <div class="box-setup-copayers panel">
+  </h2>
-        <div class="oh">
+  <h3 ng-show="!$root.wallet.publicKeyRing.isComplete()">Waiting Copayers for {{$root.wallet.getName()}}</h3>
-          <h6 class="size-18 m15b">People on this wallet</h6>
+  <h4
-          <div ng-include="'views/includes/video.html'"></div>
+    ng-show="$root.wallet.publicKeyRing.isComplete()">
-          <div  class="m10" ng-if="!$root.wallet.publicKeyRing.isComplete()">
+    {{$root.wallet.getName()}} - 
-            <p> <i class="size-60 text-gray fi-bitcoin-circle icon-rotate spinner"></i>Waiting for other copayers to join</p>
+    {{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}}
-          </div>
+  </h4>
+  <span ng-show="$root.wallet && !$root.wallet.publicKeyRing.isComplete()">
+    {{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}} wallet
+  </span>
+  <div ng-include="'views/includes/video.html'"></div> 
   
-        </div>
+  <div  ng-if="!$root.wallet.publicKeyRing.isComplete()">
-      </div>
+    <i class="fi-bitcoin-circle icon-rotate spinner"></i> Waiting for other copayers to join
-    </div>
-    <div class="large-12 medium-12 small-12 columns">
-      <div class="line-dashed">
-        <a ng-click="dowloadBackup()"
-          ng-show="!$root.wallet.publicKeyRing.isComplete()">Download seed backup</a>
-        <button class="button primary radius right"
-          ng-click="backup()"
-          ng-show="!$root.wallet.publicKeyRing.isBackupReady()"
-          ng-disabled="!$root.wallet.publicKeyRing.isComplete()">
-          <span ng-show="$root.wallet.publicKeyRing.isComplete()" >
-            Backup wallet
-          </span>
-          <span ng-show="!$root.wallet.publicKeyRing.isComplete()" >
-            <span ng-show="$root.wallet.publicKeyRing.remainingCopayers() > 1">
-              {{ $root.wallet.publicKeyRing.remainingCopayers() }} people have
-            </span>
-            <span ng-show="$root.wallet.publicKeyRing.remainingCopayers() == 1">
-              One person has
-            </span>
-            yet to join.
-          </span>
-        </button>
-        <button class="button primary radius right"
-          disabled="disabled"
-          ng-show="$root.wallet.publicKeyRing.isBackupReady()">
-          <span ng-show="$root.wallet.publicKeyRing.remainingBackups() > 1">
-            {{ $root.wallet.publicKeyRing.remainingBackups() }} people have
-            <span ng-show="$root.wallet.publicKeyRing.remainingBackups() == 1">
-              One person has
-            </span>
-            yet to backup the wallet.
-          </span>
-        </button>
-      </div>
-    </div>
   </div>
+
+  <div  ng-if="$root.wallet && $root.wallet.publicKeyRing.isComplete()">
+    <i class="fi-bitcoin-circle icon-rotate spinner"></i> Waiting for other
+    copayers to make a Backup
+  </div>
+
+  <a ng-click="dowloadBackup()"
+    ng-show="!$root.wallet.publicKeyRing.isComplete()">Download seed backup</a>
+  <button class="button primary radius right"
+    ng-click="backup()"
+    ng-show="!$root.wallet.publicKeyRing.isBackupReady()"
+    ng-disabled="!$root.wallet.publicKeyRing.isComplete()">
+    <span ng-show="$root.wallet.publicKeyRing.isComplete()" >
+      Backup wallet
+    </span>
+    <span ng-show="!$root.wallet.publicKeyRing.isComplete()" >
+      <span ng-show="$root.wallet.publicKeyRing.remainingCopayers() > 1">
+        {{ $root.wallet.publicKeyRing.remainingCopayers() }} people have
+      </span>
+      <span ng-show="$root.wallet.publicKeyRing.remainingCopayers() == 1">
+        One person has
+      </span>
+      yet to join.
+    </span>
+  </button>
+  <button class="button primary radius right"
+    disabled="disabled"
+    ng-show="$root.wallet.publicKeyRing.isBackupReady()">
+    <span ng-show="$root.wallet.publicKeyRing.remainingBackups() > 1">
+      {{ $root.wallet.publicKeyRing.remainingBackups() }} people have
+      <span ng-show="$root.wallet.publicKeyRing.remainingBackups() == 1">
+        One person has
+      </span>
+      yet to backup the wallet.
+    </span>
+  </button>
 </div>
 

views/setup.html

@@ -8,10 +8,10 @@
       <div class="row">
         <div class="large-8 medium-12 columns large-centered medium-centered">
           <h3>Create new wallet</h3>
-          <label>Wallet name <small>Optional</small>
+          <label ng-show="!isSetupWalletPage">Wallet name <small>Optional</small>
             <input type="text" placeholder="Family vacation funds" class="form-control" ng-model="walletName">
           </label>
-          <div class="row">
+          <div class="row" ng-show="isSetupWalletPage">
             <div class="small-12 medium-6 large-6 columns">
               <label>Your name <small>Optional</small>
                 <input type="text" placeholder="Name" class="form-control" ng-model="myNickname">
@@ -30,7 +30,7 @@
               </label>
             </div>
           </div>
-          <div class="box-setup">
+          <div class="box-setup" ng-show="!isSetupWalletPage">
             <fieldset>
               <div class="row">
                 <div class="large-6 medium-6 columns line-dashed-v">
@@ -48,7 +48,7 @@
               </div>
             </fieldset>
           </div>
-          <div class="box-setup-copayers">
+          <div class="box-setup-copayers" ng-show="!isSetupWalletPage">
             <div class="box-setup-copayers-fix">
               <img class="box-setup-copay" ng-repeat="i in getNumber(totalCopayers) track by $index"
               src="./img/satoshi.gif"
@@ -61,10 +61,14 @@
       <div class="row">
         <div class="large-8 medium-12 columns large-centered medium-centered">
           <div class="line-dashed">
-            <a class="back-button" href="/signin">&laquo; Back</a>
+            <a ng-show="!isSetupWalletPage" class="back-button" href="/signin">&laquo; Back</a>
-            <button type="submit" class="button primary radius right" ng-disabled="setupForm.$invalid || loading">
+            <a ng-show="isSetupWalletPage" class="back-button"
+              ng-click="setupWallet()">&laquo; Back</a>
+            <button ng-show="isSetupWalletPage" type="submit" class="button primary radius right" ng-disabled="setupForm.$invalid || loading">
               Create {{requiredCopayers}}-of-{{totalCopayers}} wallet
             </button>
+            <a class="button primary radius right" ng-show="!isSetupWalletPage"
+              ng-click="setupWallet()">Next</a>
           </div>
         </div>
       </div>

views/signin.html

@@ -5,52 +5,59 @@
   </div>
   <div ng-show="!loading">
     <div class="row">
-      <div class="large-6 medium-6 columns">
+      <div class="large-6 medium-8 small-12 large-centered medium-centered
-        <div class="box-signin radius">
+        columns" ng-show="!isHome && isOpen">
-          <div ng-show="wallets.length">
+        <h3>Open Wallet</h3>
-            <h3>Open Wallet</h3>
+        <form name="openForm" ng-submit="open(openForm)" novalidate>
-            <form name="openForm" ng-submit="open(openForm)" novalidate>
+          <select class="form-control" ng-model="selectedWalletId" ng-options="w.id as w.show for w in wallets" required>
-              <select class="form-control" ng-model="selectedWalletId" ng-options="w.id as w.show for w in wallets" required>
+          </select>
-              </select>
+          <input type="password" class="form-control" placeholder="Your password" name="openPassword" ng-model="openPassword" required>
-              <input type="password" class="form-control" placeholder="Your password" name="openPassword" ng-model="openPassword" required>
+          <a class="back-button" ng-click="backWallet()">&laquo; Back</a>
-              <button type="submit" class="button secondary radius" ng-disabled="openForm.$invalid || loading" loading="Opening">Open</button>
+          <button type="submit" class="button secondary radius" ng-disabled="openForm.$invalid || loading" loading="Opening">Open</button>
-            </form>
+        </form>
-          </div>
-          <div ng-show="!wallets.length">
-            <h3>Create a new wallet</h3>
-
-            <p class="text-gray">
-            Copay is a free, open-source, multisignature bitcoin wallet. A single-owner bitcoin wallet's security depends on carefully securing the private keys. With copay you can have multiple people controlling the funds, using bitcoin's multisignature functionality, requiring no trust in any third party.
-            </p>
-            <a href="/setup" class="button secondary radius">Create</a>
-          </div>
-        </div>
       </div>
-      <div class="large-6 medium-6 columns">
+      <div ng-show="isHome && wallets.length">
-        <div class="box-signin radius">
+        <h3>Open a wallet</h3>
-          <h3>Join a Wallet in Creation</h3>
+        <a ng-click="openWallet()" class="button secondary radius">Open</a>
-          <form name="joinForm" ng-submit="join(joinForm)" novalidate>
+      </div>
-            <input type="text" class="form-control" placeholder="Paste wallet secret here" name="connectionId" ng-model="connectionId" wallet-secret required>
+      <div ng-show="isHome && !wallets.length">
-            <input type="text" class="form-control" placeholder="Your name (optional)" name="nickname" ng-model="nickname">
+        <h3>Create a new wallet</h3>
-            <input type="password" class="form-control"
+        <a href="/setup" class="button secondary radius">Create</a>
-            placeholder="Choose your password" name="joinPassword"
+      </div>
-            ng-model="$parent.joinPassword"
+      <div class="large-6 medium-8 small-12 large-centered medium-centered
-            check-strength="passwordStrength"
+        columns" ng-show="!isHome && isJoin">
-            tooltip-html-unsafe="Password strength: 
+        <h3>Join a Wallet in Creation</h3>
-            <i>{{passwordStrength}}</i><br/><span class='size-12'>Tip: Use lower and uppercase,
+        <form name="joinForm" ng-submit="join(joinForm)" novalidate>
-              numbers and symbols</span>" tooltip-trigger="focus" required>
+          <input type="text" class="form-control" placeholder="Paste wallet secret here" name="connectionId" ng-model="connectionId" wallet-secret required>
-            <button type="submit" class="button primary radius" ng-disabled="joinForm.$invalid || loading" loading="Joining">Join</button>
+          <input type="text" class="form-control" placeholder="Your name (optional)" name="nickname" ng-model="nickname">
-          </form>
+          <input type="password" class="form-control"
-        </div>
+          placeholder="Choose your password" name="joinPassword"
+          ng-model="$parent.joinPassword"
+          check-strength="passwordStrength"
+          tooltip-html-unsafe="Password strength: 
+          <i>{{passwordStrength}}</i><br/><span class='size-12'>Tip: Use lower and uppercase,
+            numbers and symbols</span>" tooltip-trigger="focus" required>
+          <a class="back-button" ng-click="backWallet()">&laquo; Back</a>
+          <button type="submit" class="button primary radius" ng-disabled="joinForm.$invalid || loading" loading="Joining">Join</button>
+        </form>
+      </div>
+      <div ng-show="isHome && !isJoin">
+        <h3>Join a Wallet in Creation</h3>
+        <a ng-click="joinWallet()" class="button secondary
+          radius">Join</a>
+      </div>
+      <div ng-show="isHome && wallets.length">
+        <h5>Create a wallet</h5>
+        <a href="/setup" class="button secondar radius">Create</a>
       </div>
     </div>
 
-    <div class="row">
+    <div class="row" ng-show="isHome">
+      <p class="text-gray">
+      Copay is a free, open-source, multisignature bitcoin wallet. A single-owner bitcoin wallet's security depends on carefully securing the private keys. With copay you can have multiple people controlling the funds, using bitcoin's multisignature functionality, requiring no trust in any third party.
+      </p>
       <div class="large-12 columns text-center line-dashed">
         <a href="/settings">Settings</a> &middot;
-        <span ng-show="wallets.length">
-          <a href="/setup">Create a new wallet</a> &middot;
-        </span>
         <a href="/import">Import a backup</a>
       </div>
     </div>