From 30bce07f67087b69f31c8b0bb2a28b17d0282747 Mon Sep 17 00:00:00 2001 From: dogeystamp Date: Thu, 29 Dec 2022 19:22:50 -0500 Subject: [PATCH] interface.js: added basic interface classes Minimal prototype for dynamically generating an interface --- aes.html | 15 ++++++++++ dec.html | 23 --------------- enc.html | 23 --------------- scripts/aes.js | 39 +++++++++++++++++++++++++ scripts/interface.js | 69 ++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 123 insertions(+), 46 deletions(-) create mode 100644 aes.html delete mode 100644 dec.html delete mode 100644 enc.html create mode 100644 scripts/aes.js create mode 100644 scripts/interface.js diff --git a/aes.html b/aes.html new file mode 100644 index 0000000..ed6f6b1 --- /dev/null +++ b/aes.html @@ -0,0 +1,15 @@ + + + + + + + encryptme: AES encryption and decryption + + + +

encryptme

+ + + + diff --git a/dec.html b/dec.html deleted file mode 100644 index 29f4d94..0000000 --- a/dec.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - encryptme: Decryption - - - - -

encryptme

- - - - - - - - - diff --git a/enc.html b/enc.html deleted file mode 100644 index e187cd0..0000000 --- a/enc.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - encryptme: Encryption - - - - -

encryptme

- - - - - - - - - diff --git a/scripts/aes.js b/scripts/aes.js new file mode 100644 index 0000000..f793e99 --- /dev/null +++ b/scripts/aes.js @@ -0,0 +1,39 @@ +let form = new Form({id: "encryption"}); +document.body.appendChild(form.handle); + +let inp = new FormElement({ + id: "textbox", + type: "textbox", + label: "Text box", + form: form +}); + +let inp2 = new FormElement({ + id: "password", + type: "password", + label: "Password", + form: form +}); + +let inp3 = new FormElement({ + id: "textarea", + type: "textarea", + label: "Large text box", + enabled: true, + form: form +}); + +let inp4 = new FormElement({ + id: "textarea", + type: "textarea", + label: "Large text box (disabled)", + enabled: false, + form: form +}); + +let out = new FormElement({ + id: "output", + type: "output", + label: "Output box", + form: form +}); diff --git a/scripts/interface.js b/scripts/interface.js new file mode 100644 index 0000000..fd7ec61 --- /dev/null +++ b/scripts/interface.js @@ -0,0 +1,69 @@ +class Form { + constructor(id, formTag) { + this.id = id; + + if (formTag !== undefined) { + this.handle = formTag; + } else { + this.handle = document.createElement("div"); + } + + this.inputs = new Map(); + } +} + +class FormElement { + #enabled = true; + get enabled() { + return this.#enabled; + } + set enabled(x) { + this.#enabled = x; + this.handle.disabled = !this.#enabled; + } + + constructor({id, type, form, label="", dataType="plaintext", advanced=false, enabled=true}) { + this.id = id; + this.dataType = dataType; + this.advanced = advanced; + + if (label !== "") { + this.label = document.createElement("label"); + this.label.innerHTML = label; + } + + this.type = type; + switch (type) { + case "textbox": + this.handle = document.createElement("input"); + break; + case "password": + this.handle = document.createElement("input"); + this.handle.setAttribute("type", "password"); + break; + case "textarea": + this.handle = document.createElement("textarea"); + break; + case "button": + this.handle = document.createElement("button"); + break; + case "output": + this.handle = document.createElement("textarea"); + this.handle.setAttribute("readonly", true); + break; + default: + console.error(`Unknown input type: ${type}`) + return; + } + + this.enabled = enabled; + + if (form !== undefined) { + if (this.label !== undefined) { + this.label.setAttribute("for", form.id); + form.handle.appendChild(this.label); + } + form.handle.appendChild(this.handle); + } + } +}