Merge pull request #96 from cmgustavo/feature/send-form

Send form: validation and functionality. Issue in navbar was fixed

css/main.css

@@ -58,7 +58,6 @@ body {
 .header {
   background: #111;
   color: white;
-  overflow: hidden;
   margin-bottom: 30px;
 }
 
@@ -71,6 +70,10 @@ body {
   color: #fff;
 }
 
+.top-bar {
+  height: auto;
+}
+
 .panel {
   color: #333;
   background: #FFFFFF;
@@ -164,7 +167,7 @@ span.panel-res {
   color: #FBE500;
 }
 
-.alert-box.warning {
+.alert-box.warning, .alert-box.error {
   background-color: #C0392A;
   border-color: #C0392A;
   color: #fff;
@@ -174,6 +177,14 @@ span.panel-res {
   color:#C0392A;
 }
 
+small.is-valid {
+  color: #04B404; 
+}
+
+small.has-error {
+  color: #f04124;
+}
+
 hr { margin: 2.25rem 0;}
 
 button.primary { background-color: #111; }
@@ -203,4 +214,4 @@ button.secondary:hover { background-color: #FFDF00 !important;}
 .p20h {padding: 0 20px;}
 .m30v {margin: 30px 0;}
 .m30a {margin: 30px auto;}
-.br100 {border-radius: 100%;}
+.br100 {border-radius: 100%;}

index.html

@@ -45,11 +45,14 @@
       
     </div>
 
-    <div ng-if='$root.flashMessage.message' class="panel callout radius" style="color:red" >
-      {{$root.flashMessage.type}}: 
-      {{$root.flashMessage.message}}
-      <a ng-click="clearFlashMessage()" class="button tiny">Dismiss</a>
+  <div class="row" ng-if='$root.flashMessage.message'>
+    <div class="small-8 large-centered columns">
+      <div data-alert class="alert-box round {{$root.flashMessage.type}}">
+        {{$root.flashMessage.message}}
+        <a ng-click="clearFlashMessage()" class="close">&times;</a>
+      </div>
     </div>
+  </div>
 
     <div class="row">
       <div ng-if='$root.wallet && !$root.wallet.publicKeyRing.isComplete() && !loading' data-alert class="alert-box warning round" >
@@ -68,7 +71,7 @@
 
   </div>
 
-  <div class="row m30a">
+  <div class="row">
     <div class="large-12 columns" ng-view></div>
   </div>
 
@@ -296,21 +299,51 @@
     <script type="text/ng-template" id="send.html">
       <div class="send" data-ng-controller="SendController">
         <div class="row" ng-show='$root.wallet.publicKeyRing.isComplete()'>
-          <div class="large-8 columns">
-            <form>
-              <label for="address">To
-                <input type="text" id="address" placeholder="Send to">
-              </label>
-              <label for="amount">Amount
-                <input type="text" id="amount" placeholder="Amount">
-                <select class="form-control">
-                  <option>mBTC</option>
-                  <option>BTC</option>
-                </select>
-              </label>
-              <button class="button primary round" type="button" ng-click="sendTest()">sendTest</button>
-              <button type="submit" class="button secondary round right">send</button>
+          <div class="small-6 large-centered columns">
+            <h1>{{title}}</h1>
+            <form name="sendForm" ng-submit="submitForm(sendForm)" novalidate>
+              <div class="row">
+                <div class="large-12 columns">
+                  <label for="address">To address
+                    <small ng-hide="!sendForm.address.$pristine">required</small>
+                    <small class="is-valid" ng-show="!sendForm.address.$invalid && !sendForm.address.$pristine">is valid!</small>
+                    <small class="has-error" ng-show="sendForm.address.$invalid && !sendForm.address.$pristine">
+                    is not valid</small>
+                  </label>
+                  <input type="text" id="address" name="address" placeholder="Send to" ng-model="address" ng-minlength="20" ng-maxlength="37" required>
+                </div>
+              </div>
+
+              <div class="row">
+                <div class="large-6 columns">
+                  <div class="row collapse">
+                    <label for="amount">Amount 
+                      <small ng-hide="!sendForm.amount.$pristine">required</small>
+                      <small class="is-valid" ng-show="!sendForm.amount.$invalid && !sendForm.amount.$pristine">is valid!</small>
+                      <small class="has-error" ng-show="sendForm.amount.$invalid && !sendForm.amount.$pristine">
+                      is not valid</small>
+                    </label>
+                    <div class="small-9 columns">
+                      <input type="number" id="amount" name="amount" placeholder="Amount" ng-model="amount" min="0.0001" max="10000000" required>
+                    </div>
+                    <div class="small-3 columns">
+                      <span class="postfix">BTC</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="row">
+                <div class="large-4 columns">
+                  <button type="submit" class="button secondary round text-center" ng-disabled="sendForm.$invalid">
+                    Send
+                  </button>                 
+                </div>
+              </div>
             </form>
+            <hr>
+            <div class="text-center">
+              <a ng-click="sendTest()">sendTest</a>
+            </div>
           </div>
         </div>
       </div>

js/controllers/send.js

@@ -4,6 +4,9 @@ angular.module('copay.send').controller('SendController',
   function($scope, $rootScope, $location, Socket, controllerUtils) {
     $scope.title = 'Send';
 
+    $scope.unitIds = ['BTC','mBTC'];
+    $scope.selectedUnit = $scope.unitIds[0];
+
     if (!$rootScope.wallet || !$rootScope.wallet.id) {
       $location.path('signin');
     }
@@ -11,6 +14,30 @@ angular.module('copay.send').controller('SendController',
       controllerUtils.handleTransactionByAddress($scope); 
     }
 
+    $scope.submitForm = function(form) {
+      if (form.$invalid) {
+        $rootScope.flashMessage = { message: 'You can not send a proposal transaction. Please, try again', type: 'error'};
+        return;
+      }
+
+      var address = form.address.$modelValue;
+      var amount = (form.amount.$modelValue * 100000000).toString(); // satoshi to string
+
+      var w = $rootScope.wallet;
+      w.createTx( address, amount,function() {
+        $rootScope.$digest();
+      });
+     
+      // reset fields
+      $scope.address = null;
+      $scope.amount = null;
+      form.address.$pristine = true;
+      form.amount.$pristine = true;
+
+      // TODO: check if createTx has an error.
+      $rootScope.flashMessage = { message: 'You send a proposal transaction succefully', type: 'success'};
+		};
+
     $scope.sendTest = function() {
       var w    = $rootScope.wallet;
       w.createTx( 'mimoZNLcP2rrMRgdeX5PSnR7AjCqQveZZ4', '12345',function() {