web: Improve form input validation and visibility. (#12812)

web/src/components/HorizontalLightComponent.ts

@@ -45,6 +45,9 @@ export class HorizontalLightComponent<T> extends AKElement {
     @property({ attribute: false })
     value?: T;
 
+    @property({ type: String })
+    inputHint = "";
+
     renderControl() {
         throw new Error("Must be implemented in a subclass");
     }
@@ -69,7 +72,7 @@ export class HorizontalLightComponent<T> extends AKElement {
             .errorMessages=${this.errorMessages}
             ?invalid=${this.invalid}
             >
-              ${this.renderControl()} 
+              ${this.renderControl()}
               ${this.renderHelp()}
         </ak-form-element-horizontal> `;
     }

web/src/components/ak-text-input.ts

@@ -1,5 +1,6 @@
 import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
 import { HorizontalLightComponent } from "./HorizontalLightComponent";
@@ -14,11 +15,18 @@ export class AkTextInput extends HorizontalLightComponent<string> {
             this.value = (ev.target as HTMLInputElement).value;
         };
 
+        const code = this.inputHint === "code";
+
         return html` <input
             type="text"
             @input=${setValue}
             value=${ifDefined(this.value)}
-            class="pf-c-form-control"
+            class="${classMap({
+                "pf-c-form-control": true,
+                "pf-m-monospace": code,
+            })}"
+            autocomplete=${ifDefined(code ? "off" : undefined)}
+            spellcheck=${ifDefined(code ? "false" : undefined)}
             ?required=${this.required}
         />`;
     }