feat(transfer): filter out non-numeric characters from decimal and in…

…teger input fields

Added directives to prevent input of wrong characters to numeric input fields

Gruntfile.js

@@ -108,6 +108,8 @@ module.exports = function (grunt) {
                 'src/js/shared/transaction.filter.js',
                 'src/js/shared/shared.autocomplete.factory.js',
                 'src/js/shared/transaction.broadcast.factory.js',
+                'src/js/shared/decimal.input.restrictor.directive.js',
+                'src/js/shared/integer.input.restrictor.directive.js',
 
                 'src/js/login/login.module.js',
                 'src/js/login/login.constants.js',

src/index.html

@@ -340,7 +340,7 @@ <h2 class="sectionHeader">SEND PAYMENT: {{send.currency}}</h2>
                                         <td>Amount</td>
                                         <td>
                                             <div class="form-field">
-                                                <input class="wInput form-control" name="sendAmount" type="text" placeholder="Amount" ng-model="send.amount" />
+                                                <input class="wInput form-control" name="sendAmount" type="text" placeholder="Amount" ng-model="send.amount" decimal-input-restrictor />
                                             </div>
                                         </td>
                                     </tr>
@@ -532,7 +532,7 @@ <h2 class="sectionHeader">ASSET TRANSFER</h2>
                                                 <td>Amount</td>
                                                 <td>
                                                     <div class="form-field">
-                                                        <input class="wInput form-control" name="assetAmount" type="text" placeholder="Amount" ng-model="transfer.amount" />
+                                                        <input class="wInput form-control" name="assetAmount" type="text" placeholder="Amount" ng-model="transfer.amount" decimal-input-restrictor />
                                                     </div>
                                                 </td>
                                             </tr>
@@ -593,7 +593,7 @@ <h2 class="sectionHeader">ASSET REISSUE</h2>
                                             <td>Additional amount</td>
                                             <td>
                                                 <div class="form-field">
-                                                    <input class="wInput form-control" name="assetAmount" type="text" placeholder="Amount" ng-model="reissue.amount" />
+                                                    <input class="wInput form-control" name="assetAmount" type="text" placeholder="Amount" ng-model="reissue.amount" decimal-input-restrictor />
                                                 </div>
                                             </td>
                                         </tr>
@@ -732,11 +732,11 @@ <h2 class="sectionHeader">ASSET CREATION</h2>
                                     </tr>
                                     <tr>
                                         <td><label for="assetTotalTokens">Total Tokens</label></td>
-                                        <td><input id="assetTotalTokens" name="assetTotalTokens" class="wInput" type="text" ng-model="ctrl.asset.totalTokens" tooltipster tooltip-theme="tooltipster-theme1" tooltip-html title="This field defines the TOTAL TOKENS<br/>supply that your asset will contain."/></td>
+                                        <td><input id="assetTotalTokens" name="assetTotalTokens" class="wInput" type="text" ng-model="ctrl.asset.totalTokens" integer-input-restrictor tooltipster tooltip-theme="tooltipster-theme1" tooltip-html title="This field defines the TOTAL TOKENS<br/>supply that your asset will contain."/></td>
                                     </tr>
                                     <tr>
                                         <td><label for="assetTokenDecimalPlaces">Token Decimals</label></td>
-                                        <td><input id="assetTokenDecimalPlaces" name="assetTokenDecimalPlaces" class="wInput" type="text" ng-model="ctrl.asset.decimalPlaces" tooltipster tooltip-theme="tooltipster-theme1" tooltip-html title="This field defines the number of DECIMALS<br/>that your asset tokens will be divided in.<br/><br/>Example: Three decimals would allow the<br/>tokens to be divided by 1,000, so 0.001<br/>would be the smallest token fraction."/></td>
+                                        <td><input id="assetTokenDecimalPlaces" name="assetTokenDecimalPlaces" class="wInput" type="text" ng-model="ctrl.asset.decimalPlaces" integer-input-restrictor tooltipster tooltip-theme="tooltipster-theme1" tooltip-html title="This field defines the number of DECIMALS<br/>that your asset tokens will be divided in.<br/><br/>Example: Three decimals would allow the<br/>tokens to be divided by 1,000, so 0.001<br/>would be the smallest token fraction."/></td>
                                     </tr>
                                     <tr>
                                         <td><label for="assetReissuable">Re-issuable</label></td>
@@ -896,6 +896,8 @@ <h2 class="sectionHeader">LATEST BLOCKS INFORMATION</h2>
     <script src="js/shared/transaction.filter.js"></script>
     <script src="js/shared/transaction.broadcast.factory.js"></script>
     <script src="js/shared/shared.autocomplete.factory.js"></script>
+    <script src="js/shared/decimal.input.restrictor.directive.js"></script>
+    <script src="js/shared/integer.input.restrictor.directive.js"></script>
 
     <script src="js/login/login.module.js"></script>
     <script src="js/login/login.constants.js"></script>

src/js/portfolio/asset.transfer.controller.js

@@ -41,7 +41,7 @@
                 },
                 assetAmount: {
                     required: true,
-                    decimal: 0, // stub value updated on validation
+                    decimal: 8, // stub value updated on validation
                     min: 1,     // stub value updated on validation
                     max: constants.JAVA_MAX_LONG // stub value updated on validation
                 },

src/js/shared/decimal.input.restrictor.directive.js

@@ -0,0 +1,30 @@
+(function () {
+    'use strict';
+
+    angular
+        .module('app.shared')
+        .directive('decimalInputRestrictor', [function WavesDecimalInputRestrictorDirective() {
+            return {
+                restrict: 'A',
+                require: 'ngModel',
+                link: function (scope, element, attributes, ngModelController) {
+                    var pattern = /[^0-9.]+/g;
+
+                    function fromUser (text) {
+                        if (!text)
+                            return text;
+
+                        var transformedInput = text.replace(pattern, '');
+                        if (transformedInput !== text) {
+                            ngModelController.$setViewValue(transformedInput);
+                            ngModelController.$render();
+                        }
+
+                        return transformedInput;
+                    }
+
+                    ngModelController.$parsers.push(fromUser);
+                }
+            };
+        }]);
+})();

src/js/shared/integer.input.restrictor.directive.js

@@ -0,0 +1,30 @@
+(function () {
+    'use strict';
+
+    angular
+        .module('app.shared')
+        .directive('integerInputRestrictor', [function WavesIntegerInputRestrictorDirective() {
+            return {
+                restrict: 'A',
+                require: 'ngModel',
+                link: function (scope, element, attributes, ngModelController) {
+                    var pattern = /[^0-9]+/g;
+
+                    function fromUser (text) {
+                        if (!text)
+                            return text;
+
+                        var transformedInput = text.replace(pattern, '');
+                        if (transformedInput !== text) {
+                            ngModelController.$setViewValue(transformedInput);
+                            ngModelController.$render();
+                        }
+
+                        return transformedInput;
+                    }
+
+                    ngModelController.$parsers.push(fromUser);
+                }
+            };
+        }]);
+})();