added decrypt functionality

src/App.svelte

@@ -1,17 +1,18 @@
 <script lang="ts">
   import EncryptButton from './lib/EncryptButton.svelte'
   import PasswordButton from './lib/PasswordButton.svelte';
+  import DecryptButton from './lib/DecryptButton.svelte';
 </script>
 
 <main>
   <h1>Encrypt and decrypt files</h1>
 
-  <div class="card">
+  <div class="container">
-    <EncryptButton />
+      <EncryptButton />
+      <DecryptButton />
   </div>
 
-  <div class="card">
+  <div class="container">
-    Password:
   <PasswordButton />
   </div>
 

src/app.css

@@ -48,6 +48,13 @@ h1 {
   text-align: center;
 }
 
+div.container {
+  display: flex; /* Make the container a flex container */
+  justify-content: center; /* Center the items horizontally */
+  margin-bottom: 2em;
+}
+
+
 button {
   border-radius: 8px;
   border: 1px solid transparent;

src/lib/DecryptButton.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+    import { escape } from 'svelte/internal';
+  import { decrypt, encrypt } from './cryptlib';
+  let filename: string = "";
+  let originalFilename: string;
+  
+  function removeCrpytFileEnding() {
+    if (filename.endsWith(".crypt")) {
+      originalFilename = filename.slice(0, -6);
+      console.log("Original Filename: ", originalFilename)
+    }
+  }
+
+  function readFileContent(file: File): Promise<string> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = (event: ProgressEvent<FileReader>) => {
+          resolve(event.target.result as string);
+      };
+      reader.onerror = (error) => {
+        console.log(error)
+          reject(error);
+      };
+    reader.readAsText(file);
+    });
+  }
+
+  
+  let file: File | undefined;
+
+  function handleDrop(event: DragEvent) {
+    event.preventDefault();
+
+    file = event.dataTransfer.files[0];
+  }
+
+  async function handleSubmit(event: Event) {
+    event.preventDefault();
+    filename = file.name;
+    console.log("Uploaded:", filename)
+
+    if (!file) {
+      return;
+    }
+    readFileContent(file).then((fileContent) => {
+      decrypt(atob(fileContent)).then(decryptedContent => {
+        console.log("Decrypted Base64: ", decryptedContent)
+        console.log(decodeURIComponent(escape(atob((decryptedContent)))));
+        const decodedData = decodeURIComponent(escape(atob((decryptedContent))));
+        const outputArray = new Uint8Array(decodedData.length)
+        for (let i = 0; i < decodedData.length; i++) {
+          outputArray[i] = decodedData.charCodeAt(i); // Populate the array with the decoded data
+        }
+        const outputFile = new Blob([outputArray], { type: 'application/octet-stream'});
+        let url = URL.createObjectURL(outputFile);
+        let a = document.createElement("a");
+        a.href = url;
+        a.download = originalFilename;
+  		  document.body.appendChild(a);
+  		  a.click();
+  		  document.body.removeChild(a);
+      });
+    });
+
+  }
+</script>
+<style>
+  .upload-button {
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: #424242;
+    width: 10em;
+    margin: auto;
+  }
+</style>
+
+
+<form on:submit|preventDefault={handleSubmit}>
+    <div
+    class="upload-button"
+    on:dragenter|preventDefault
+    on:dragover|preventDefault
+    on:drop|preventDefault={handleDrop}
+    >
+    Drag and drop a file here to upload
+    {filename}
+    <button type="submit">Decrypt</button>
+  </div>
+</form>

src/lib/EncryptButton.svelte

@@ -1,15 +1,9 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { globalPassword } from './pwgen';
   import { encrypt } from './cryptlib';
+  let filename: string = "";
   
-  let password;
+  function convertToBase64(blob: File): Promise<string> {
-  globalPassword.subscribe(value => {
-    password = value;
-  })
-
-
-  function convertToBase64(blob: Blob): Promise<string> {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();
       reader.onload = (event: ProgressEvent<FileReader>) => {
@@ -25,7 +19,7 @@
 
 
 
-  let file: Blob | undefined;
+  let file: File | undefined;
 
   function handleDrop(event: DragEvent) {
     event.preventDefault();
@@ -35,20 +29,23 @@
 
   async function handleSubmit(event: Event) {
     event.preventDefault();
-    console.log(file)
-
     if (!file) {
       return;
     }
+    filename = file.name;
+    console.log("Uploaded ", filename)
+    //Encoding file using Base64
     convertToBase64(file).then((base64) => {
+      //encrypting the base64 encoded File
       encrypt(base64).then((encrypted_content => {
-      console.log(encrypted_content)
+      
       let encrypted_b64: string = btoa(unescape(encodeURIComponent(encrypted_content)));
+      console.log("Encrypted Base64: ", encrypted_b64)
       let encrypted_file: Blob = new Blob([encrypted_b64], {type: "text/plain"});
       let url = URL.createObjectURL(encrypted_file);
       let a = document.createElement("a");
       a.href = url;
-      a.download = "Encrypted.txt";
+      a.download = filename + ".crypt";
 		  document.body.appendChild(a);
 		  a.click();
 		  document.body.removeChild(a);
@@ -57,6 +54,20 @@
 
   }
 </script>
+<style>
+  .upload-button {
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: #424242;
+    width: 10em;
+    margin: auto;
+    margin-right: 1em;
+  }
+</style>
 
 
 <form on:submit|preventDefault={handleSubmit}>
@@ -67,6 +78,7 @@
     on:drop|preventDefault={handleDrop}
     >
     Drag and drop a file here to upload
+    {filename}
+    <button type="submit">Encrypt</button>
   </div>
-  <button type="submit">Encrypt</button>
 </form>

src/lib/PasswordButton.svelte

@@ -18,6 +18,42 @@ function copyToClipboard() {
     );
   }
 
+function updatePassword(password) {
+  globalPassword.set(password)
+}
+
 </script>
 
-<button on:click={copyToClipboard}>{password}</button>
+<style>
+  .password-field {
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: #424242;
+    width: flex;
+    margin: auto;
+  }
+  input {
+    text-align: center;
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: #1a1a1a;
+    transition: border-color 0.25s;
+  }
+</style>
+
+<div class=password-field>
+  Password
+<form on:submit|preventDefault={updatePassword}>
+  <input type="text" bind:value={password}>
+  <button type="submit">Update</button>
+  <button on:click={copyToClipboard}>Copy</button>
+</form>
+</div>