improve interface scripts

- dynamically hide/unhide advanced options
- add base64 handlers for raw data inputs

scripts/interface.js

@@ -1,5 +1,5 @@
 class Form {
-	constructor(id, formTag) {
+	constructor({id, formTag}) {
 		this.id = id;
 
 		if (formTag !== undefined) {
@@ -8,8 +8,44 @@ class Form {
 			this.handle = document.createElement("div");
 		}
 
-		this.inputs = new Map();
+		this.elements = new Map();
 	}
+
+	#advanced = false;
+	get advanced() {
+		return this.#advanced;
+	}
+	set advanced(x) {
+		this.#advanced = x;
+		for (const [id, element] of this.elements.entries()) {
+			if (element.advanced === true) {
+				if (this.advanced === true) {
+					element.hidden = false;
+				} else {
+					element.hidden = true;
+				}
+			}
+		}
+	}
+}
+
+function b64ToBuf (b64) {
+	let ascii = atob(b64);
+	let buf = new ArrayBuffer(ascii.length);
+	let bytes = new Uint8Array(buf);
+	for (var i = 0; i < ascii.length; i++) {
+		bytes[i] = ascii.charCodeAt(i);
+	}
+	return buf;
+}
+
+function bufToB64 (buf) {
+	let bytes = new Uint8Array(buf);
+	let ascii = ''
+	for (var i = 0; i < bytes.byteLength; i++) {
+		ascii += String.fromCharCode(bytes[i]);
+	}
+	return btoa(ascii);
 }
 
 class FormElement {
@@ -22,9 +58,22 @@ class FormElement {
 		this.handle.disabled = !this.#enabled;
 	}
 
+	#hidden = true;
+	get hidden() {
+		return this.#hidden;
+	}
+	set hidden(x) {
+		this.#hidden = x;
+
+		this.handle.hidden = this.hidden;
+		if (this.label !== undefined) {
+			this.label.hidden = this.hidden;
+		}
+	}
+
 	constructor({id, type, form, label="", dataType="plaintext", advanced=false, enabled=true}) {
 		this.id = id;
-		this.dataType = dataType;
+
 		this.advanced = advanced;
 
 		if (label !== "") {
@@ -33,6 +82,7 @@ class FormElement {
 		}
 
 		this.type = type;
+
 		switch (type) {
 			case "textbox":
 				this.handle = document.createElement("input");
@@ -46,24 +96,82 @@ class FormElement {
 				break;
 			case "button":
 				this.handle = document.createElement("button");
+				dataType = "none"
 				break;
 			case "output":
 				this.handle = document.createElement("textarea");
 				this.handle.setAttribute("readonly", true);
 				break;
 			default:
-				console.error(`Unknown input type: ${type}`)
-				return;
+				throw `Unknown input type: ${type}`;
 		}
 
+		this.dataType = dataType;
+
 		this.enabled = enabled;
+		this.handle.id = this.id;
+
+		if (this.advanced === true) this.hidden = true;
 
 		if (form !== undefined) {
+			this.form = form;
 			if (this.label !== undefined) {
-				this.label.setAttribute("for", form.id);
+				this.label.setAttribute("for", this.id);
 				form.handle.appendChild(this.label);
 			}
 			form.handle.appendChild(this.handle);
+			form.elements.set(id, this);
+
+			if (this.advanced === true) this.hidden = !form.advanced;
+		}
+	}
+
+	// plaintext is string data
+	// b64 is raw ArrayBuffer data
+	// or none, which gives undefined
+	#dataType = "none";
+	get dataType() {
+		return this.#dataType;
+	}
+	set dataType(x) {
+		function err(type, x) {
+			throw `'${type}' element can not support '${x}' data type`;
+		}
+
+		switch (x) {
+			case "plaintext":
+			case "b64":
+				let valid = ["textbox", "password", "textarea", "output"];
+				if (!valid.includes(this.type)) err(this.type, x);
+				break;
+			case "none":
+				if (this.type !== "button") err(this.type, x);
+				break;
+			default:
+				throw `Unknown data type: ${x}`;
+		}
+
+		this.#dataType = x;
+	}
+	
+	#value;
+	get value() {
+		switch (this.dataType) {
+			case "plaintext":
+				return this.handle.value;
+			case "b64":
+				// TODO: error handling
+				return b64ToBuf(this.handle.value);
+			case "none":
+				return undefined;
+		}
+	}
+	set value(x) {
+		switch (this.dataType) {
+			case "plaintext":
+				this.handle.value = x;
+			case "b64":
+				this.handle.value = bufToB64(x);
 		}
 	}
 }

scripts/testpage.js

@@ -20,6 +20,7 @@ let inp3 = new FormElement({
 	type: "textarea",
 	label: "Large text box",
 	enabled: true,
+	dataType: "b64",
 	form: form
 });
 
@@ -35,5 +36,14 @@ let out = new FormElement({
 	id: "output",
 	type: "output",
 	label: "Output box",
+	dataType: "b64",
+	form: form
+});
+
+let outAdvanced = new FormElement({
+	id: "output-advanced",
+	type: "output",
+	label: "Output box (advanced setting)",
+	advanced: true,
 	form: form
 });

style.css

@@ -51,6 +51,11 @@ textarea:disabled, input:disabled {
 	opacity: 40%;
 }
 
+[hidden] {
+	height: 0;
+	opacity: 0;
+}
+
 p {
 	text-align: justify;
 }

testpage.html

@@ -4,12 +4,12 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>encryptme: AES encryption and decryption</title>
+    <title>encryptme: interface logic testing page</title>
     <link rel="stylesheet" href="style.css">
   </head>
   <body>
 	<h1>encryptme</h1>
 	<script src="scripts/interface.js"></script>
-	<script src="scripts/aes.js"></script>
+	<script src="scripts/testpage.js"></script>
   </body>
 </html>