Add validation framework with fast visual feedback

saltgui/index.html

@@ -72,9 +72,9 @@ <h1 id="docu" class='docu'>&#x1F4D6;&#xFE0E;</h1>
         <!-- FE0E = VARIATION SELECTOR-15 (render as text) -->
         <span id="help" class="small-button small-button-right small-button-for-click" style="cursor: help">&#x2753;&#xFE0E;</span>
         <div><h1>Manual Run</h1><p id="template-catmenu-here"></p><p id="template-tmplmenu-here"></p></div>
-        <div id="target-box"><!-- //NOSONAR --><input list="data-list-target" id='target' type='text' placeholder="Target" spellcheck="false" style="margin-right: 10px"/></div>
-        <div id="cmd-box"><!-- //NOSONAR --><input id='command' type='text' placeholder="Command" spellcheck="false" style="margin-right: 10px"/></div>
-        <div id="run-block"><input id="run-command" type='submit' value="Run command" style="margin-right: 10px"/></div>
+        <div id="target-box"><!-- //NOSONAR --><input list="data-list-target" id='target' type='text' placeholder="Target" spellcheck="false" style="margin-right: 10px"/><span id="target-validation-indicator" class="cmd-validation-indicator" style="cursor: help; margin-right: 5px;"></span></div>
+        <div id="cmd-box"><!-- //NOSONAR --><input id='command' type='text' placeholder="Command" spellcheck="false" style="margin-right: 10px"/><span id="cmd-validation-indicator" class="cmd-validation-indicator" style="cursor: help; margin-right: 5px;"></span></div>
+        <div id="run-block"><input id="run-command" type='submit' value="Run command" style="margin-right: 10px"/><span id="form-validation-indicator" class="cmd-validation-indicator" style="cursor: help; margin-right: 5px;"></span></div>
         <pre id="popup-output" class='output'>Waiting for command...</pre>
       </div>
     </div>

saltgui/static/scripts/Api.js

@@ -1,6 +1,5 @@
 /* global config EventSource window */
 
-import {Character} from "./Character.js";
 import {CommandBox} from "./CommandBox.js";
 import {Router} from "./Router.js";
 import {TargetType} from "./TargetType.js";
@@ -359,7 +358,15 @@ export class API {
     };
 
     if (pMethod === "POST") {
-      options.body = JSON.stringify(pParams);
+      // BigInt is not JSON-serializable; convert to marker string so JSON.stringify
+      // can process it, then regex removes quotes to produce unquoted JSON numbers.
+      // Use \x00 (null byte) as delimiter since it cannot be typed, preventing collisions.
+      options.body = JSON.stringify(pParams, (_key, value) => { // eslint-disable-line no-unused-vars
+        if (typeof value === 'bigint') {
+          return `\x00BIGINT${value.toString()}\x00`;
+        }
+        return value;
+      }).replace(/"\\u0000BIGINT(-?\d+)\\u0000"/g, '$1');
     }
 
     /* eslint-disable compat/compat */
@@ -481,7 +488,7 @@ export class API {
       // the character counts include "-----BEGIN PUBLIC KEY-----" at the beginning and
       // include "-----END PUBLIC KEY-----" at the end.
       if (data.pub && data.pub.length > 75) {
-        data.pub = data.pub.substring(0, 35) + Character.HORIZONTAL_ELLIPSIS + data.pub.substring(data.pub.length - 33);
+        data.pub = Utils.truncateString(data.pub, 35, 33);
       }
 
       // salt/beacon/<minion>/<beacon>/

saltgui/static/scripts/Character.js

@@ -31,6 +31,7 @@ export class Character {
     Character.BALLOT_BOX_WITH_CHECK = "\u2611";
     Character.GEAR = "\u2699";
     Character.WARNING_SIGN = "\u26A0" + Character._VARIATION_SELECTOR_16;
+    Character.NO_ENTRY_SIGN = "\u26D4" + Character._VARIATION_SELECTOR_16;
     Character.HEAVY_CHECK_MARK = "\u2714";
     Character.HEAVY_MULTIPLICATION_X = "\u2716" + Character._VARIATION_SELECTOR_15;
     Character.BLACK_QUESTION_MARK_ORNAMENT = "\u2753" + Character._VARIATION_SELECTOR_15;