Merge pull request #3068 from cmgustavo/bug/number-input

Supports commas on amount input

public/views/modals/customized-amount.html

@@ -53,9 +53,9 @@
             <span translate>Amount</span>
           </label>
           <div class="input">
-            <input type="number" id="amount" name="amount" ng-attr-placeholder="{{'Amount'|translate}}"
+            <input type="text" id="amount" name="amount" ng-attr-placeholder="{{'Amount'|translate}}"
-            ng-model="_customAmount" valid-amount required autocomplete="off">
+            ng-model="_customAmount" valid-amount required autocomplete="off" pattern="[0-9]+([\.,][0-9]+)*">
-            <input type="number" id="alternative"  name="alternative"  ng-model="_customAlternative" style="display:none">
+            <input type="text" id="alternative"  name="alternative"  ng-model="_customAlternative" style="display:none">
             <a class="postfix" ng-click="toggleAlternative()">{{unitName}}</a>
           </div>
         </div>
@@ -63,9 +63,9 @@
           <label for="alternative"><span translate>Amount in</span> {{ alternativeName }}
           </label>
           <div class="input">
-            <input type="number" id="alternative" name="alternative" ng-attr-placeholder="{{'Amount'|translate}}"
+            <input type="text" id="alternative" name="alternative" ng-attr-placeholder="{{'Amount'|translate}}"
-            ng-model="_customAlternative" requiredautocomplete="off" required>
+            ng-model="_customAlternative" valid-alternative required autocomplete="off" pattern="[0-9]+([\.,][0-9]+)*" required>
-            <input type="number" id="amount" name="amount" ng-model="_customAmount" style="display:none">
+            <input type="text" id="amount" name="amount" ng-model="_customAmount" style="display:none">
             <a class="postfix" ng-click="toggleAlternative()"> {{ alternativeIsoCode }}</a>
           </div>
         </div>

public/views/walletHome.html

@@ -373,7 +373,7 @@
                     <i class="icon-close-circle size-14"></i>
                     <span clas="vm" translate>Not valid</span>
                   </span>
-                  <small class="text-primary right" ng-if="!sendForm.amount.$invalid">
+                  <small class="text-primary right" ng-if="!sendForm.amount.$invalid && !sendForm.alternative.$invalid">
                     <i class="icon-checkmark-circle size-14"></i>
                   </small>
                 </div>
@@ -382,8 +382,11 @@
                     <span translate>Amount</span>
                   </label>
                   <div class="input">
-                    <input type="number" id="amount" ng-disabled="home.blockUx || home.lockAmount" name="amount" ng-attr-placeholder="{{'Amount'|translate}}" ng-minlength="0.00000001" ng-maxlength="10000000000" ng-model="_amount" valid-amount required autocomplete="off" ng-focus="home.formFocus('amount')" ng-blur="home.formFocus(false)">
+                    <input type="text" id="amount" ng-disabled="home.blockUx || home.lockAmount" name="amount"
-                    <input type="number" id="alternative"  name="alternative"  ng-model="_alternative" style="display:none">
+                    ng-attr-placeholder="{{'Amount'|translate}}" 
+                    ng-model="_amount" valid-amount required autocomplete="off" ng-focus="home.formFocus('amount')"
+                    ng-blur="home.formFocus(false)">
+                    <input type="text" id="alternative" name="alternative"  ng-model="_alternative" style="display:none">
                     <a class="postfix" ng-click="home.showAlternative()">{{home.unitName}}</a>
                   </div>
                 </div>
@@ -391,8 +394,11 @@
                   <label for="alternative"><span translate>Amount in</span> {{ home.alternativeName }}
                   </label>
                   <div class="input">
-                    <input type="number" id="alternative" ng-disabled="home.blockUx || !home.isRateAvailable || home.lockAmount" name="alternative" ng-attr-placeholder="{{'Amount'|translate}}" ng-model="_alternative" requiredautocomplete="off" ng-focus="home.formFocus('amount')" ng-blur="home.formFocus(false)">
+                    <input type="text" id="alternative" ng-disabled="home.blockUx || !home.isRateAvailable ||
-                    <input type="number" id="amount" name="amount" ng-model="_amount" style="display:none">
+                    home.lockAmount" name="alternative" ng-attr-placeholder="{{'Amount'|translate}}"
+                    ng-model="_alternative" valid-alternative required autocomplete="off" ng-focus="home.formFocus('amount')"
+                    ng-blur="home.formFocus(false)">
+                    <input type="text" id="amount" name="amount" ng-model="_amount" style="display:none">
                     <a class="postfix" ng-click="home.hideAlternative()"> {{ home.alternativeIsoCode }}</a>
                   </div>
                 </div>

src/js/controllers/walletHome.js

@@ -475,6 +475,8 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
             $scope.customAlternative = newValue;
             if (typeof(newValue) === 'number' && $scope.isRateAvailable) {
               $scope.customAmount = parseFloat((rateService.fromFiat(newValue, $scope.alternativeIsoCode) * satToUnit).toFixed($scope.unitDecimals), 10);
+            } else {
+              $scope.customAmount = null;
             }
           },
           enumerable: true,
@@ -491,7 +493,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
             if (typeof(newValue) === 'number' && $scope.isRateAvailable) {
               $scope.customAlternative = parseFloat((rateService.toFiat(newValue * $scope.unitToSatoshi, $scope.alternativeIsoCode)).toFixed(2), 10);
             } else {
-              $scope.customAlternative = 0;
+              $scope.customAlternative = null;
             }
             $scope.alternativeAmount = $scope.customAlternative;
           },
@@ -625,6 +627,8 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
           $scope.__alternative = newValue;
           if (typeof(newValue) === 'number' && self.isRateAvailable) {
             $scope._amount = parseFloat((rateService.fromFiat(newValue, self.alternativeIsoCode) * satToUnit).toFixed(self.unitDecimals), 10);
+          } else {
+            $scope.__amount = null;
           }
         },
         enumerable: true,
@@ -640,7 +644,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
           if (typeof(newValue) === 'number' && self.isRateAvailable) {
             $scope.__alternative = parseFloat((rateService.toFiat(newValue * self.unitToSatoshi, self.alternativeIsoCode)).toFixed(2), 10);
           } else {
-            $scope.__alternative = 0;
+            $scope.__alternative = null;
           }
           self.alternativeAmount = $scope.__alternative;
           self.resetError();

src/js/directives/directives.js

@@ -85,24 +85,24 @@ angular.module('copayApp.directives')
       };
     }
   ])
-  .directive('validAmount', ['configService', '$locale',
+  .directive('validAmount', ['configService',
-    function(configService, locale) {
+    function(configService) {
-      var formats = locale.NUMBER_FORMATS;
 
       return {
         require: 'ngModel',
         link: function(scope, element, attrs, ctrl) {
           var val = function(value) {
+            if (value) value = Number(String(value).replace(/,/g, '.'));
             var settings = configService.getSync().wallet.settings;
             var vNum = Number((value * settings.unitToSatoshi).toFixed(0));
 
-            if (typeof value == 'undefined') {
+            if (typeof value == 'undefined' || value == 0) {
               ctrl.$pristine = true;
             }
 
             if (typeof vNum == "number" && vNum > 0) {
               var decimals = Number(settings.unitDecimals);
-              var sep_index = ('' + value).indexOf(formats.DECIMAL_SEP);
+              var sep_index = ('' + value).indexOf('.');
               var str_value = ('' + value).substring(sep_index + 1);
               if (sep_index > 0 && str_value.length > decimals) {
                 ctrl.$setValidity('validAmount', false);
@@ -120,6 +120,33 @@ angular.module('copayApp.directives')
       };
     }
   ])
+  .directive('validAlternative', [
+    function() {
+
+      return {
+        require: 'ngModel',
+        link: function(scope, element, attrs, ctrl) {
+          var val = function(value) {
+            if (value) value = Number(String(value).replace(/,/g, '.'));
+            var vNum = Number(value);
+
+            if (typeof value == 'undefined' || value == 0) {
+              ctrl.$pristine = true;
+            }
+
+            if (typeof vNum == "number" && vNum > 0) {
+                ctrl.$setValidity('validAlternative', true);
+            } else {
+              ctrl.$setValidity('validAlternative', false);
+            }
+            return value;
+          }
+          ctrl.$parsers.unshift(val);
+          ctrl.$formatters.unshift(val);
+        }
+      };
+    }
+  ])
   .directive('walletSecret', function(bitcore) {
     return {
       require: 'ngModel',