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>
<body>
<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/aes.js"></script>
</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 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),

54
scripts/interface.js
View File

@ -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() {

49
style.css
View File

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