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

refactor form generation

Browse Source
This commit is contained in:
dogeystamp 2023-01-03 15:34:57 -05:00
parent c4317bc5e8
commit c3653a45b6
Signed by: dogeystamp
GPG Key ID: 7225FE3592EFFA38
4 changed files with 86 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
aes.html
View File

@ -11,10 +11,6 @@
</head> </head>
<body> <body>
<h1>encryptme</h1> <h1>encryptme</h1>
<h2>Encryption</h2>
<div id="encryption"></div>
<h2>Decryption</h2>
<div id="decryption"></div>
<script src="scripts/interface.js"></script> <script src="scripts/interface.js"></script>
<script src="scripts/aes.js"></script> <script src="scripts/aes.js"></script>
</body> </body>

29
scripts/aes.js
View File

@ -1,14 +1,35 @@
let encForm = new Form({id: "encryption", tag: document.getElementById("encryption")}); let encForm = new Form({label: "Encryption"});
let encMsg = encForm.createTextArea({label: "Message"}); let encMsg = encForm.createTextArea({label: "Message"});
let encPass = encForm.createPasswordInput({label: "Password"}); let encPass = encForm.createPasswordInput({label: "Password"});
let encManualMode = encForm.createCheckBox({
label: "Manual mode",
advanced: true
});
let encSalt = encForm.createTextBox({
label: "PBKDF2 salt",
dataType: "b64",
advanced: true,
disabled: true
});
let encIV = encForm.createTextBox({
label: "IV",
dataType: "b64",
advanced: true,
disabled: true
});
let encButton = encForm.createButton({label: "Encrypt"}); let encButton = encForm.createButton({label: "Encrypt"});
let encOut = encForm.createOutput({ let encOut = encForm.createOutput({
label: "Output", label: "Output",
dataType: "json-b64", dataType: "json-b64",
}); });
let encOutRaw = encForm.createOutput({
label: "Raw ciphertext",
dataType: "b64",
advanced: true
});
let decForm = new Form({id: "decryption", tag: document.getElementById("decryption")}); let decForm = new Form({label: "Decryption"});
let decMsg = decForm.createTextArea({ let decMsg = decForm.createTextArea({
label: "Encrypted message", label: "Encrypted message",
@ -51,9 +72,11 @@ function getKey(keyMaterial, salt) {
async function encrypt() { async function encrypt() {
let keyMaterial = await getKeyMaterial(encPass.value); let keyMaterial = await getKeyMaterial(encPass.value);
let salt = window.crypto.getRandomValues(new Uint8Array(16)); let salt = window.crypto.getRandomValues(new Uint8Array(16));
encSalt.value = salt;
let key = await getKey(keyMaterial, salt); let key = await getKey(keyMaterial, salt);
let iv = window.crypto.getRandomValues(new Uint8Array(16)); let iv = window.crypto.getRandomValues(new Uint8Array(16));
encIV.value = iv;
let enc = new TextEncoder(); let enc = new TextEncoder();
let msgEncoded = enc.encode(encMsg.value); let msgEncoded = enc.encode(encMsg.value);
@ -67,6 +90,8 @@ async function encrypt() {
msgEncoded msgEncoded
); );
encOutRaw.value = ciphertext;
encOut.value = { encOut.value = {
"ciphertext": bufToB64(ciphertext), "ciphertext": bufToB64(ciphertext),
"salt": bufToB64(salt), "salt": bufToB64(salt),

54
scripts/interface.js
View File

@ -1,7 +1,9 @@
class InterfaceElement { class InterfaceElement {
constructor({tag}) { constructor({fragment}) {
if (tag !== undefined) { if (fragment === undefined) {
this.handle = tag; this.fragment = new DocumentFragment();
} else {
this.fragment = fragment;
} }
} }
@ -32,13 +34,22 @@ function dataTypeSupports(params, validTypes) {
} }
class Form extends InterfaceElement { class Form extends InterfaceElement {
constructor({tag}) { constructor({tag, par=document.body, label}) {
super({tag}); super({});
if (tag === undefined) { if (tag === undefined) {
this.handle = document.createElement("div"); this.handle = document.createElement("div");
} else {
this.handle = tag;
} }
if (label !== undefined) {
let labelTag = document.createElement("h2");
labelTag.appendChild(document.createTextNode(label));
this.fragment.appendChild(labelTag);
}
this.fragment.appendChild(this.handle);
this.elements = []; this.elements = [];
this.clearAlerts = this.clearAlerts.bind(this); this.clearAlerts = this.clearAlerts.bind(this);
@ -47,6 +58,8 @@ class Form extends InterfaceElement {
advancedToggle.handle.addEventListener('change', function() { advancedToggle.handle.addEventListener('change', function() {
this.advanced = advancedToggle.value; this.advanced = advancedToggle.value;
}.bind(this)); }.bind(this));
par.appendChild(this.fragment);
} }
#advanced = false; #advanced = false;
@ -163,32 +176,27 @@ class FormElement extends InterfaceElement {
} }
constructor({tag, labelTag, label="", fragment, dataType, advanced=false, enabled=true}) { constructor({tag, labelTag, label="", fragment, dataType, advanced=false, enabled=true}) {
super({tag}); super({fragment});
this.clearAlerts = this.clearAlerts.bind(this);
this.dataType = dataType;
this.enabled = enabled;
this.advanced = advanced;
if (this.advanced === true) this.hidden = true;
this.labelText = label; this.labelText = label;
if (labelTag === undefined) { if (labelTag === undefined) {
this.labelTag = document.createElement("label"); this.labelTag = document.createElement("label");
this.labelTag.appendChild(document.createTextNode(this.labelText)); this.labelTag.appendChild(document.createTextNode(this.labelText));
this.fragment.appendChild(this.labelTag);
this.fragment.appendChild(tag);
} else { } else {
this.labelTag = labelTag; this.labelTag = labelTag;
} }
if (fragment === undefined) {
this.fragment = new DocumentFragment();
if (this.labelTag !== undefined) { this.clearAlerts = this.clearAlerts.bind(this);
this.fragment.appendChild(this.labelTag);
} this.handle = tag;
this.fragment.appendChild(this.handle); this.dataType = dataType;
} else { this.enabled = enabled;
this.fragment = fragment; this.advanced = advanced;
}
if (this.advanced === true) this.hidden = true;
} }
get value() { get value() {

49
style.css
View File

@ -30,6 +30,11 @@ input {
height: 100%; height: 100%;
} }
input:not([type]), input[type=password] {
width: 20em;
font-family: monospace;
}
label, input, button, textarea { label, input, button, textarea {
display: block; display: block;
margin-top: 1em; margin-top: 1em;
@ -56,6 +61,7 @@ textarea:disabled, input:disabled {
.checkbox-container { .checkbox-container {
list-style: none; list-style: none;
height: fit-content;
} }
.checkbox-container label { .checkbox-container label {
display: inline; display: inline;
@ -81,27 +87,6 @@ textarea:disabled, input:disabled {
background: #aaaaff44; background: #aaaaff44;
} }
[hidden] {
animation: fadeOut 0.2s, disappear 0.3s;
opacity: 0;
visibility: hidden;
max-height: 0;
margin: 0;
}
@keyframes fadeOut {
0% {opacity: 1; visibility: visible;}
100% {opacity: 0; visibility: hidden;}
}
@keyframes disappear {
0% {
max-height: 100em;
}
100% {
max-height: 0;
margin: 0;
}
}
p { p {
text-align: justify; text-align: justify;
} }
@ -143,3 +128,25 @@ button:active {
color: #c9d1d9; color: #c9d1d9;
} }
} }
[hidden] {
animation: fadeOut 0.2s, disappear 0.3s;
opacity: 0;
visibility: hidden;
max-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
@keyframes fadeOut {
0% {opacity: 1; visibility: visible;}
100% {opacity: 0; visibility: hidden;}
}
@keyframes disappear {
0% {
max-height: 100em;
}
100% {
max-height: 0;
margin: 0;
}
}