dogeystamp/encryptme
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

interface.js: added basic interface classes

Browse Source 
Minimal prototype for dynamically generating an interface
This commit is contained in:
dogeystamp 2022-12-29 19:22:50 -05:00
parent b147ecf151
commit 30bce07f67
Signed by: dogeystamp
GPG Key ID: 7225FE3592EFFA38
5 changed files with 123 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
aes.html Normal file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<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>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>encryptme</h1>
<script src="scripts/interface.js"></script>
<script src="scripts/aes.js"></script>
</body>
</html>

23
dec.html
View File

@ -1,23 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<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: Decryption</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="encryption.js"></script>
<h1>encryptme</h1>
<label for="msg">Ciphertext: </label>
<textarea id="msg" form="form"></textarea>
<label for="password">Password: </label>
<input id="password" type="password">
<button id="decrypt">Decrypt</button>
<textarea id="plaintext" readonly></textarea>
<script>
document.getElementById("decrypt").addEventListener("click", dec);
</script>
</body>
</html>

23
enc.html
View File

@ -1,23 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<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: Encryption</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="encryption.js"></script>
<h1>encryptme</h1>
<label for="msg">Message: </label>
<textarea id="msg" form="form"></textarea>
<label for="password">Password: </label>
<input id="password" type="password">
<button id="encrypt">Encrypt</button>
<textarea id="ciphertext" readonly></textarea>
<script>
document.getElementById("encrypt").addEventListener("click", enc);
</script>
</body>
</html>

39
scripts/aes.js Normal file
View File

@ -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
});

69
scripts/interface.js Normal file
View File

@ -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);
}
}
}