added file support

DavidSM100 · Oct 8, 2023 · 743829b · 743829b
1 parent 799ce28
commit 743829b
Show file tree

Hide file tree

Showing 5 changed files with 181 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # CryptoText
 
-Webxdc to encrypt/decrypt text, it's made to use with Delta Chat/Lab
+Webxdc to encrypt/decrypt text and files, it's made to use with Delta Chat/Lab
 
-Just open with Delta and set an encryption key, then you can encrypt/decrypt text whenever you want.
+Just open with Delta and set an encryption key, then you can encrypt/decrypt text and files whenever you want.
diff --git a/assets/imgs/paperclip.svg b/assets/imgs/paperclip.svg
diff --git a/assets/main.css b/assets/main.css
@@ -18,6 +18,7 @@
 }
 
 body {
+  color: orange;
   background-color: var(--bg-color, #fff);
   min-height: 40em;
 }
@@ -38,7 +39,7 @@ button, input, textarea {
   border-radius: 0.8em;
 }
 
-h2, button {
+h2, h3, button {
   color: orange;
 }
 
@@ -96,10 +97,19 @@ button img {
 }
 
 /* Specific */
-#eyeOff {
+#eyeOff, /*#fileDiv, */#fileInput, #addShareText {
   display: none;
 }
 
+#typeDiv {
+  height: 7%;
+}
+
+#typeDiv button {
+  width: 45%;
+  height: 100%;
+}
+
 #encrypt {
   width: 70%;
   height: 7%;

diff --git a/assets/main.js b/assets/main.js
@@ -1,3 +1,19 @@
+function showTextDiv() {
+  fileDiv.style.display = "none";
+  textDiv.style.display = "block";
+  fileBtn.style.borderColor = "grey";
+  textBtn.style.borderColor = "orange";
+}
+
+showTextDiv();
+
+function showFileDiv() {
+  textDiv.style.display = "none";
+  fileDiv.style.display = "block";
+  textBtn.style.borderColor = "grey";
+  fileBtn.style.borderColor = "orange";
+}
+
 // Get Screen height
 var screenHeight = window.innerHeight;
 
@@ -18,21 +34,53 @@ if (passwordData) {
 }
 
 // Encrypt/Decrypt
-function encrypt() {
+function encrypt_decrypt() {
+  if (textDiv.style.display === "block") {
+    if (passwordInput.value !== "" && text.value !== "" && result.value === "") {
 
-  if (passwordInput.value !== "" && text.value !== "" && result.value === "") {
+      var encryptedText = CryptoJS.AES.encrypt(text.value, passwordInput.value).toString();
 
-    var encryptedText = CryptoJS.AES.encrypt(text.value, passwordInput.value).toString();
+      document.getElementById("result").value = encryptedText;
 
-    document.getElementById("result").value = encryptedText;
+    }
 
-  }
+    if (passwordInput.value !== "" && text.value === "" && result.value !== "") {
+
+      var decryptedText = CryptoJS.AES.decrypt(result.value, passwordInput.value).toString(CryptoJS.enc.Utf8);
 
-  if (passwordInput.value !== "" && text.value === "" && result.value !== "") {
+      document.getElementById("text").value = decryptedText;
 
-    var decryptedText = CryptoJS.AES.decrypt(result.value, passwordInput.value).toString(CryptoJS.enc.Utf8);
+    }
+  }
 
-    document.getElementById("text").value = decryptedText;
+  if (fileDiv.style.display === "block") {
+    var file = fileInput.files[0];
+    var fileName = file.name;
+
+    if (fileName.startsWith('AES-')) {
+      var split = fileName.split("AES-");
+      var decryptedName = split[1];
+      var reader = new FileReader();
+      reader.onload = function(e) {
+        var encryptedData = e.target.result;
+        var decryptedData = CryptoJS.AES.decrypt(encryptedData, passwordInput.value).toString(CryptoJS.enc.Utf8);
+        var decryptedFile = base64ToBlob(decryptedData);
+        shareBlob(decryptedFile, decryptedName);
+      };
+
+      reader.readAsText(file);
+
+    } else {
+      var encryptedName = "AES-" + fileName;
+      var reader = new FileReader();
+
+      reader.onload = function(e) {
+        var base64Data = e.target.result;
+        var encryptedFile = CryptoJS.AES.encrypt(base64Data, passwordInput.value).toString();
+        sharePlainText(encryptedFile, encryptedName);
+      };
+      reader.readAsDataURL(file);
+    }
 
   }
 
@@ -53,9 +101,7 @@ function showPassword() {
     eyeOff.style.display = "none";
     eye.style.display = "inline-block";
   }
-
   passwordInput.focus();
-
 }
 
 // Save Password
@@ -67,28 +113,75 @@ function keepPassword() {
   }
 }
 
-// Share
+// Share text
 function share(data) {
-
   location.href = "mailto:?body="+encodeURIComponent(data.value);
-
 }
 
-// Copy
+// Copy text
 function copy(data) {
-
   const temp = document.createElement("textarea");
   temp.innerText = data;
   document.body.appendChild(temp);
   temp.select();
   document.execCommand("copy");
   document.body.removeChild(temp);
-
 }
 
-// Erase
+// Erase text
 function erase(data) {
-
   document.getElementById(data).value = "";
+}
+
+// Convert from base64 to blob
+const base64ToBlob = (base64Data) => {
+  const byteCharacters = atob(base64Data.split(',')[1]);
+  const byteArrays = [];
+  for (let offset = 0; offset < byteCharacters.length; offset += 512) {
+    const slice = byteCharacters.slice(offset, offset + 512);
+    const byteNumbers = new Array(slice.length);
+    for (let i = 0; i < slice.length; i++) {
+      byteNumbers[i] = slice.charCodeAt(i);
+    }
+    const byteArray = new Uint8Array(byteNumbers);
+    byteArrays.push(byteArray);
+  }
+  return new Blob(byteArrays);
+};
+
+// Share encrypted file (PlainText content)
+function sharePlainText(file, fileName) {
+  window.webxdc.sendToChat({
+    file: {
+      plainText: file, name: fileName
+    }
+  });
+}
+
+// Share decrypted file (Blob content)
+function shareBlob(file, fileName) {
+
+  window.webxdc.sendToChat({
+    file: {
+      blob: file, name: fileName
+    }
+  });
 
-}
+}
+
+addFileBtn.addEventListener('click', function() {
+  fileInput.click();
+});
+
+textBtn.addEventListener('click', showTextDiv);
+fileBtn.addEventListener('click', showFileDiv);
+
+fileInput.addEventListener('change', function() {
+  var fileName = fileInput.files[0].name;
+  nameDiv.textContent = fileName;
+  if (fileName.startsWith("AES-")) {
+    nameDiv.style.color = "red";
+  } else {
+    nameDiv.style.color = "green";
+  }
+});
diff --git a/index.html b/index.html
@@ -7,15 +7,19 @@
   <!--App CSS-->
   <link rel="stylesheet" href="assets/main.css">
 
-  <!--JS to add back button when using with Delta-Shorcuts-->
-  <script src="/assets/ds.js"></script>
-
 </head>
 
 <body align="middle">
 
   <h2>CryptoText</h2>
 
+  <div id="typeDiv">
+    <button id="textBtn">Text</button>
+    <button id="fileBtn">File</button>
+  </div>
+
+  <br>
+
   <div id="passwordDiv" class="inline">
 
     <input placeholder="Encryption key" type="password" id="password" oninput="keepPassword()">
@@ -35,50 +39,69 @@ <h2>CryptoText</h2>
 
   <br>
 
-  <div class="inline texts">
+  <div id="textDiv">
+
+    <div class="inline texts">
 
-    <textarea placeholder="Text" id="text"></textarea>
+      <textarea placeholder="Text" id="text"></textarea>
 
-    <div class="column">
+      <div class="column">
 
-      <button onclick="erase('text')"><img src="assets/imgs/x.svg"></button>
+        <button onclick="erase('text')"><img src="assets/imgs/x.svg"></button>
 
-      <button onclick="share(text)"><img src="assets/imgs/share.svg"></button>
+        <button onclick="share(text)"><img src="assets/imgs/share.svg"></button>
 
-      <button onclick="copy(text.value)"><img src="assets/imgs/copy.svg"></button>
+        <button onclick="copy(text.value)"><img src="assets/imgs/copy.svg"></button>
+
+      </div>
 
     </div>
 
-  </div>
+    <br>
 
-  <br>
+    <div class="inline texts">
 
-  <div class="inline texts">
+      <textarea placeholder="Encrypted text" id="result"></textarea>
 
-    <textarea placeholder="Encrypted text" id="result"></textarea>
+      <div class="column">
 
-    <div class="column">
+        <button onclick="erase('result')"><img src="assets/imgs/x.svg"></button>
 
-      <button onclick="erase('result')"><img src="assets/imgs/x.svg"></button>
+        <button onclick="share(result)"><img src="assets/imgs/share.svg"></button>
 
-      <button onclick="share(result)"><img src="assets/imgs/share.svg"></button>
+        <button onclick="copy(result.value)"><img src="assets/imgs/copy.svg"></button>
 
-      <button onclick="copy(result.value)"><img src="assets/imgs/copy.svg"></button>
+      </div>
 
     </div>
 
   </div>
 
+  <div id="fileDiv">
+    <input type="file" id="fileInput">
+    <div>
+      <button id="addFileBtn"><img src="assets/imgs/paperclip.svg">Import file</button>
+    </div>
+    <br>
+    <div id="nameDiv">
+
+    </div>
+  </div>
+
   <br>
-
-  <button id="encrypt" onclick="encrypt()">Encrypt/Decrypt</button>
+
+  <button id="encrypt" onclick="encrypt_decrypt()">Encrypt/Decrypt</button>
+
 
   <!--App JS-->
   <script src="assets/main.js"></script>
 
   <!--Module to Encrypt/Decrypt-->
   <script src="assets/aes/aes.js"></script>
 
+  <!--WebXDC API-->
+  <script src="webxdc.js"></script>
+
 </body>
 
 </html>