all: add option to set description (Hint) on any inputs element

This changes refactor the KeyValue from map[string]string into
map[string]FormInput, where FormInput is a struct with Label, Hint,
Kind, Value, Max, and Min.

With the available of Hint field, the web user interface can render it
as description of input.

This changes also make all input hint to be displayed on the first render.

1 files changed, 22 insertions, 62 deletions

diff --git a/_www/http_target.ts b/_www/http_target.ts
index 2b1d71e..15f85e5 100644
--- a/_www/http_target.ts
+++ b/_www/http_target.ts
@@ -1,21 +1,25 @@
+import { WuiInputNumber, WuiInputNumberOpts } from "./wui/input/number.js"
+import { WuiInputSelect, WuiInputSelectOpts } from "./wui/input/select.js"
+import { WuiInputString, WuiInputStringOpts } from "./wui/input/string.js"
+
+import { GenerateFormInput } from "./functions.js"
 import {
 	CLASS_INPUT,
 	CLASS_INPUT_LABEL,
+	FormInputKindNumber,
+	FormInputKindString,
 	HttpTargetInterface,
-	KeyValue,
+	KeyFormInput,
 	ResultInterface,
 	RunResponseInterface,
 	TargetInterface,
 	TrunksInterface,
 } from "./interface.js"
-import { WuiInputSelect, WuiInputSelectOpts } from "./wui/input/select.js"
-import { WuiInputString, WuiInputStringOpts } from "./wui/input/string.js"
 
 const CLASS_HTTP_TARGET = "http_target"
 const CLASS_HTTP_TARGET_ACTIONS = "http_target_actions"
 const CLASS_HTTP_TARGET_ATTACK_RESULT = "http_target_attack_result"
-const CLASS_HTTP_TARGET_ATTACK_RESULT_ACTIONS =
-	"http_target_attack_result_actions"
+const CLASS_HTTP_TARGET_ATTACK_RESULT_ACTIONS = "http_target_attack_result_actions"
 const CLASS_HTTP_TARGET_INPUT = "http_target_input"
 const CLASS_HTTP_TARGET_INPUT_HEADER = "http_target_input_header"
 const CLASS_HTTP_TARGET_INPUT_PARAMS = "http_target_input_header"
@@ -36,11 +40,7 @@ export class HttpTarget {
 	el_out_attack: HTMLElement = document.createElement("div")
 	el_out_attack_results: HTMLElement = document.createElement("div")
 
-	constructor(
-		public trunks: TrunksInterface,
-		public target: TargetInterface,
-		public opts: HttpTargetInterface,
-	) {
+	constructor(public trunks: TrunksInterface, public target: TargetInterface, public opts: HttpTargetInterface) {
 		this.el.id = opts.ID
 		this.el.classList.add(CLASS_HTTP_TARGET)
 
@@ -216,17 +216,8 @@ export class HttpTarget {
 		wrapper.appendChild(title)
 
 		for (let key in this.opts.Headers) {
-			let opts: WuiInputStringOpts = {
-				label: key,
-				value: this.opts.Headers[key],
-				class_input: CLASS_INPUT,
-				class_label: CLASS_INPUT_LABEL,
-				onChangeHandler: (new_value: string) => {
-					this.opts.Headers[key] = new_value
-				},
-			}
-			let wui_input_header = new WuiInputString(opts)
-			wrapper.appendChild(wui_input_header.el)
+			let fi = this.opts.Headers[key]
+			GenerateFormInput(wrapper, fi)
 		}
 
 		parent.appendChild(wrapper)
@@ -248,17 +239,8 @@ export class HttpTarget {
 		wrapper.appendChild(title)
 
 		for (let key in this.opts.Params) {
-			let opts: WuiInputStringOpts = {
-				label: key,
-				value: this.opts.Params[key],
-				class_input: CLASS_INPUT,
-				class_label: CLASS_INPUT_LABEL,
-				onChangeHandler: (new_value: string) => {
-					this.opts.Params[key] = new_value
-				},
-			}
-			let wui_input_param = new WuiInputString(opts)
-			wrapper.appendChild(wui_input_param.el)
+			let fi = this.opts.Params[key]
+			GenerateFormInput(wrapper, fi)
 		}
 
 		parent.appendChild(wrapper)
@@ -280,9 +262,7 @@ export class HttpTarget {
 
 		this.el_out_request.classList.add(CLASS_HTTP_TARGET_OUT_MONO)
 		this.el_out_response.classList.add(CLASS_HTTP_TARGET_OUT_MONO)
-		this.el_out_response_body.classList.add(
-			CLASS_HTTP_TARGET_OUT_MONO,
-		)
+		this.el_out_response_body.classList.add(CLASS_HTTP_TARGET_OUT_MONO)
 
 		wrapper.appendChild(title)
 		wrapper.appendChild(this.el_out_request)
@@ -318,33 +298,22 @@ export class HttpTarget {
 
 			let el_report_text = document.createElement("pre")
 			el_report_text.style.display = "none"
-			el_report_text.classList.add(
-				CLASS_HTTP_TARGET_OUT_MONO,
-			)
+			el_report_text.classList.add(CLASS_HTTP_TARGET_OUT_MONO)
 
 			let el_report_hist = document.createElement("pre")
 			el_report_hist.style.display = "none"
-			el_report_hist.classList.add(
-				CLASS_HTTP_TARGET_OUT_MONO,
-			)
+			el_report_hist.classList.add(CLASS_HTTP_TARGET_OUT_MONO)
 
 			let el = document.createElement("div")
 			el.innerText = result.Name
 
 			let actions = document.createElement("span")
-			actions.classList.add(
-				CLASS_HTTP_TARGET_ATTACK_RESULT_ACTIONS,
-			)
+			actions.classList.add(CLASS_HTTP_TARGET_ATTACK_RESULT_ACTIONS)
 
 			let btn_attack_show = document.createElement("button")
 			btn_attack_show.innerText = "Show"
 			btn_attack_show.onclick = () => {
-				this.onClickAttackShow(
-					result.Name,
-					btn_attack_show,
-					el_report_text,
-					el_report_hist,
-				)
+				this.onClickAttackShow(result.Name, btn_attack_show, el_report_text, el_report_hist)
 			}
 
 			let btn_attack_del = document.createElement("button")
@@ -378,9 +347,7 @@ export class HttpTarget {
 			let r = this.opts.Results[x]
 			if (r.Name == result.Name) {
 				this.opts.Results.splice(x, 1)
-				this.generateAttackResults(
-					this.el_out_attack_results,
-				)
+				this.generateAttackResults(this.el_out_attack_results)
 				return
 			}
 		}
@@ -422,10 +389,7 @@ export class HttpTarget {
 	}
 
 	private async onClickRun() {
-		let res_json = await this.trunks.RunHttp(
-			this.target,
-			this.opts,
-		)
+		let res_json = await this.trunks.RunHttp(this.target, this.opts)
 		if (res_json.code != 200) {
 			return
 		}
@@ -435,11 +399,7 @@ export class HttpTarget {
 		this.el_out_response.innerText = atob(res.DumpResponse)
 		let body = atob(res.ResponseBody)
 		if (res.ResponseType === CONTENT_TYPE_JSON) {
-			this.el_out_response_body.innerText = JSON.stringify(
-				JSON.parse(body),
-				null,
-				2,
-			)
+			this.el_out_response_body.innerText = JSON.stringify(JSON.parse(body), null, 2)
 		} else {
 			this.el_out_response_body.innerText = body
 		}