validate inserted values in numeric global settings (apache#10279)

Author: bernardodemarco

ui/src/views/setting/ConfigurationValue.vue

@@ -39,6 +39,7 @@
             @keydown.esc="editableValueKey = null"
             @pressEnter="updateConfigurationValue(configrecord)"
             @change="value => setConfigurationEditable(configrecord, value)"
+            @keydown="e => handleInputNumberKeyDown(e, false)"
           />
         </a-tooltip>
       </span>
@@ -52,6 +53,7 @@
             @keydown.esc="editableValueKey = null"
             @pressEnter="updateConfigurationValue(configrecord)"
             @change="value => setConfigurationEditable(configrecord, value)"
+            @keydown="e => handleInputNumberKeyDown(e, true)"
           />
         </a-tooltip>
       </span>
@@ -87,6 +89,7 @@
                 @keydown.esc="editableValueKey = null"
                 @pressEnter="updateConfigurationValue(configrecord)"
                 @change="value => setConfigurationEditable(configrecord, value)"
+                @keydown="e => handleInputNumberKeyDown(e, true)"
               />
             </a-tooltip>
           </a-col>
@@ -365,6 +368,26 @@ export default {
       } else {
         this.editableValueKey = null
       }
+    },
+    handleInputNumberKeyDown (event, isDecimal) {
+      const allowedCodes = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Minus']
+
+      if (isDecimal) {
+        allowedCodes.push('Period')
+      }
+
+      if (
+        event.getModifierState('Control') ||
+        event.getModifierState('Meta') ||
+        event.getModifierState('Alt')
+      ) {
+        return
+      }
+
+      const isValid = allowedCodes.includes(event.code) || !isNaN(event.key)
+      if (!isValid) {
+        event.preventDefault()
+      }
     }
   }
 }