diff --git a/aes.html b/aes.html
index 95622a4..11b35ce 100644
--- a/aes.html
+++ b/aes.html
@@ -11,10 +11,6 @@
encryptme
- Encryption
-
- Decryption
-
diff --git a/scripts/aes.js b/scripts/aes.js
index b57727b..eaa0e22 100644
--- a/scripts/aes.js
+++ b/scripts/aes.js
@@ -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 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 encOut = encForm.createOutput({
label: "Output",
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({
label: "Encrypted message",
@@ -51,9 +72,11 @@ function getKey(keyMaterial, salt) {
async function encrypt() {
let keyMaterial = await getKeyMaterial(encPass.value);
let salt = window.crypto.getRandomValues(new Uint8Array(16));
+ encSalt.value = salt;
let key = await getKey(keyMaterial, salt);
let iv = window.crypto.getRandomValues(new Uint8Array(16));
+ encIV.value = iv;
let enc = new TextEncoder();
let msgEncoded = enc.encode(encMsg.value);
@@ -67,6 +90,8 @@ async function encrypt() {
msgEncoded
);
+ encOutRaw.value = ciphertext;
+
encOut.value = {
"ciphertext": bufToB64(ciphertext),
"salt": bufToB64(salt),
diff --git a/scripts/interface.js b/scripts/interface.js
index 5d87aae..6977bff 100644
--- a/scripts/interface.js
+++ b/scripts/interface.js
@@ -1,7 +1,9 @@
class InterfaceElement {
- constructor({tag}) {
- if (tag !== undefined) {
- this.handle = tag;
+ constructor({fragment}) {
+ if (fragment === undefined) {
+ this.fragment = new DocumentFragment();
+ } else {
+ this.fragment = fragment;
}
}
@@ -32,13 +34,22 @@ function dataTypeSupports(params, validTypes) {
}
class Form extends InterfaceElement {
- constructor({tag}) {
- super({tag});
+ constructor({tag, par=document.body, label}) {
+ super({});
if (tag === undefined) {
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.clearAlerts = this.clearAlerts.bind(this);
@@ -47,6 +58,8 @@ class Form extends InterfaceElement {
advancedToggle.handle.addEventListener('change', function() {
this.advanced = advancedToggle.value;
}.bind(this));
+
+ par.appendChild(this.fragment);
}
#advanced = false;
@@ -163,32 +176,27 @@ class FormElement extends InterfaceElement {
}
constructor({tag, labelTag, label="", fragment, dataType, advanced=false, enabled=true}) {
- super({tag});
-
- this.clearAlerts = this.clearAlerts.bind(this);
-
- this.dataType = dataType;
- this.enabled = enabled;
- this.advanced = advanced;
-
- if (this.advanced === true) this.hidden = true;
+ super({fragment});
this.labelText = label;
if (labelTag === undefined) {
this.labelTag = document.createElement("label");
this.labelTag.appendChild(document.createTextNode(this.labelText));
+ this.fragment.appendChild(this.labelTag);
+ this.fragment.appendChild(tag);
} else {
this.labelTag = labelTag;
}
- if (fragment === undefined) {
- this.fragment = new DocumentFragment();
- if (this.labelTag !== undefined) {
- this.fragment.appendChild(this.labelTag);
- }
- this.fragment.appendChild(this.handle);
- } else {
- this.fragment = fragment;
- }
+
+
+ this.clearAlerts = this.clearAlerts.bind(this);
+
+ this.handle = tag;
+ this.dataType = dataType;
+ this.enabled = enabled;
+ this.advanced = advanced;
+
+ if (this.advanced === true) this.hidden = true;
}
get value() {
diff --git a/style.css b/style.css
index 06efdcc..e9f7556 100644
--- a/style.css
+++ b/style.css
@@ -30,6 +30,11 @@ input {
height: 100%;
}
+input:not([type]), input[type=password] {
+ width: 20em;
+ font-family: monospace;
+}
+
label, input, button, textarea {
display: block;
margin-top: 1em;
@@ -56,6 +61,7 @@ textarea:disabled, input:disabled {
.checkbox-container {
list-style: none;
+ height: fit-content;
}
.checkbox-container label {
display: inline;
@@ -81,27 +87,6 @@ textarea:disabled, input:disabled {
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 {
text-align: justify;
}
@@ -143,3 +128,25 @@ button:active {
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;
+ }
+}