From 0ffb8eb42f9da7cba975af951ffe7a83226fea41 Mon Sep 17 00:00:00 2001
From: Gustavo Maximiliano Cortez <cmgustavo83@gmail.com>
Date: Thu, 17 Jul 2014 15:09:44 -0300
Subject: [PATCH] New schema for signin/join a wallet

---
 js/controllers/signin.js | 22 ++++++++++
 views/signin.html        | 87 ++++++++++++++++++++++------------------
 2 files changed, 69 insertions(+), 40 deletions(-)

diff --git a/js/controllers/signin.js b/js/controllers/signin.js
index 6503d46ab..3c7a097d8 100644
--- a/js/controllers/signin.js
+++ b/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;
+    };
   });
diff --git a/views/signin.html b/views/signin.html
index e420e2b52..bff920108 100644
--- a/views/signin.html
+++ b/views/signin.html
@@ -5,52 +5,59 @@
   </div>
   <div ng-show="!loading">
     <div class="row">
-      <div class="large-6 medium-6 columns">
-        <div class="box-signin radius">
-          <div ng-show="wallets.length">
-            <h3>Open Wallet</h3>
-            <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>
-              <input type="password" class="form-control" placeholder="Your password" name="openPassword" ng-model="openPassword" required>
-              <button type="submit" class="button secondary radius" ng-disabled="openForm.$invalid || loading" loading="Opening">Open</button>
-            </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 class="large-6 medium-8 small-12 large-centered medium-centered
+        columns" ng-show="!isHome && isOpen">
+        <h3>Open Wallet</h3>
+        <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>
+          <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>
+        </form>
       </div>
-      <div class="large-6 medium-6 columns">
-        <div class="box-signin radius">
-          <h3>Join a Wallet in Creation</h3>
-          <form name="joinForm" ng-submit="join(joinForm)" novalidate>
-            <input type="text" class="form-control" placeholder="Paste wallet secret here" name="connectionId" ng-model="connectionId" wallet-secret required>
-            <input type="text" class="form-control" placeholder="Your name (optional)" name="nickname" ng-model="nickname">
-            <input type="password" class="form-control"
-            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>
-            <button type="submit" class="button primary radius" ng-disabled="joinForm.$invalid || loading" loading="Joining">Join</button>
-          </form>
-        </div>
+      <div ng-show="isHome && wallets.length">
+        <h3>Open a wallet</h3>
+        <a ng-click="openWallet()" class="button secondary radius">Open</a>
+      </div>
+      <div ng-show="isHome && !wallets.length">
+        <h3>Create a new wallet</h3>
+        <a href="/setup" class="button secondary radius">Create</a>
+      </div>
+      <div class="large-6 medium-8 small-12 large-centered medium-centered
+        columns" ng-show="!isHome && isJoin">
+        <h3>Join a Wallet in Creation</h3>
+        <form name="joinForm" ng-submit="join(joinForm)" novalidate>
+          <input type="text" class="form-control" placeholder="Paste wallet secret here" name="connectionId" ng-model="connectionId" wallet-secret required>
+          <input type="text" class="form-control" placeholder="Your name (optional)" name="nickname" ng-model="nickname">
+          <input type="password" class="form-control"
+          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>