From a4c16a94a595bb99a08e57e5c4f442ec9adf2fa3 Mon Sep 17 00:00:00 2001
From: Gustavo Cortez <cmgustavo83@gmail.com>
Date: Tue, 6 May 2014 14:39:16 -0300
Subject: [PATCH] Signin page: * Swap places for "join" and "create/open"
 (#285). * Prevent the user not set the password and required fields (#280).

---
 css/main.css             |  3 ---
 index.html               | 42 +++++++++++++++++++++++-----------------
 js/controllers/signin.js | 36 ++++++++++++++++++++++------------
 3 files changed, 48 insertions(+), 33 deletions(-)

diff --git a/css/main.css b/css/main.css
index 6108e8a29..779713c4f 100644
--- a/css/main.css
+++ b/css/main.css
@@ -267,9 +267,6 @@ hr { margin: 2.25rem 0;}
 .lh {line-height: 0;}
 .oh {overflow:hidden;}
 .lh {line-height: 0;}
-.signin input.ng-dirty.ng-invalid { 
-  border: 2px red solid;
-}
 
 .video-small {
   width: 80px;
diff --git a/index.html b/index.html
index 9994794a6..8d308e0d6 100644
--- a/index.html
+++ b/index.html
@@ -143,38 +143,44 @@
         </div>
         <div ng-show="!loading">
           <div class="row">
-            <div class="large-6 columns">
-              <div class="box-signin">
-                <h3>Join a Wallet in Creation</h3>
-                <input type="text" class="form-control" placeholder="Paste wallet secret here" ng-model="connectionId" required autofocus>
-                <input type="password" class="form-control" placeholder="Your wallet password" ng-model="joinPassword">
-                <input type="text" class="form-control" placeholder="Your name (optional)" ng-model="nickname">
-                <button class="button primary expand radius" ng-click="join()" ng-disabled="loading" loading="Joining">Join</button>
-              </div>
-            </div>
-            <div class="large-6 columns">
+            <div class="large-6 medium-6 columns">
               <div class="box-signin">
                 <div ng-show="wallets.length">
                   <h3>Open Wallet</h3>
-                  <select class="form-control" ng-model="selectedWalletId" ng-options="w.id as w.show for w in wallets">
-                  </select>
-                  <input type="password" class="form-control" placeholder="Your wallet password" ng-model="openPassword">
-                  <button class="button secondary expand radius" type="button" ng-click="open()" ng-disabled="loading" loading="Opening">Open</button>
+                  <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 wallet 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>
-                  <input type="text" class="form-control" ng-model="walletName" placeholder="Wallet name (optional)">
-                  <input type="password" class="form-control" placeholder="Your wallet password" ng-model="createPassword">
-                  <button class="button secondary expand radius" ng-click="create()" ng-disabled="loading" loading="Creating">Create</button> 
+                  <form name="createForm" ng-submit="create(createForm)" novalidate>
+                    <input type="text" class="form-control" ng-model="walletName" name="walletName" placeholder="Wallet name (optional)">
+                    <input type="password" class="form-control" placeholder="Your wallet password" name="createPassword" ng-model="createPassword" required>
+                    <button type="submit" class="button secondary radius" ng-disabled="createForm.$invalid || loading" loading="Creating">Create</button> 
+                  </form>
                 </div>
               </div>
             </div>
+            <div class="large-6 medium-6 columns">
+              <div class="box-signin">
+                <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" required>
+                  <input type="password" class="form-control" placeholder="Your wallet password" name="joinPassword" ng-model="joinPassword" required>
+                  <input type="text" class="form-control" placeholder="Your name (optional)" name="nickname" ng-model="nickname">
+                  <button type="submit" class="button primary radius" ng-disabled="joinForm.$invalid || loading" loading="Joining">Join</button>
+                </form>
+              </div>
+            </div>
           </div>
 
           <div class="row">
             <div class="large-12 columns text-center line-dashed">
               <span ng-show="wallets.length">
-                <a ng-click="create()" ng-disabled="loading" loading="Creating">Create a new wallet</a> &middot;
+                <a ng-click="create()">Create a new wallet</a> &middot;
               </span>
               <a ng-href="#import">Import from file</a>
             </div>
diff --git a/js/controllers/signin.js b/js/controllers/signin.js
index 04eedc1c7..6eee392b0 100644
--- a/js/controllers/signin.js
+++ b/js/controllers/signin.js
@@ -7,25 +7,37 @@ angular.module('copay.signin').controller('SigninController',
     $scope.selectedWalletId = $scope.wallets.length ? $scope.wallets[0].id : null;
     $scope.openPassword = '';
 
-    $scope.create = function() {
-      $scope.loading = true;
+    $scope.create = function(form) {
+      if (form) {
+        if (form.$invalid) {
+          $rootScope.flashMessage = { message: 'Please, enter required fields', type: 'error'};
+          return;
+        }
 
-      $rootScope.walletName = $scope.walletName;
-      $rootScope.walletPassword = $scope.createPassword;
+        $rootScope.walletName = form.walletName.$modelValue;
+        $rootScope.walletPassword = form.createPassword.$modelValue;
+      }
       $location.path('setup');
     };
 
-    $scope.open = function() {
-      if ($scope.openPassword != '') {
-        $scope.loading = true;
-
-        var passphrase = Passphrase.getBase64($scope.openPassword);
-        var w = walletFactory.open($scope.selectedWalletId, { passphrase: passphrase});
-        controllerUtils.startNetwork(w);
+    $scope.open = function(form) {
+      if (form.$invalid) {
+        $rootScope.flashMessage = { message: 'Please, enter required fields', type: 'error'};
+        return;
       }
+      $scope.loading = true;
+      var password = form.openPassword.$modelValue;
+
+      var passphrase = Passphrase.getBase64(password);
+      var w = walletFactory.open($scope.selectedWalletId, { passphrase: passphrase});
+      controllerUtils.startNetwork(w);
     };
 
-    $scope.join = function() {
+    $scope.join = function(form) {
+      if (form.$invalid) {
+        $rootScope.flashMessage = { message: 'Please, enter required fields', type: 'error'};
+        return;
+      }
       $scope.loading = true;
 
       walletFactory.network.on('badSecret', function() {