added decrypt functionality
parent
26b3ba9b4a
commit
3bac4bbe9a
|
@ -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">
|
||||
<EncryptButton />
|
||||
<div class="container">
|
||||
<EncryptButton />
|
||||
<DecryptButton />
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
Password:
|
||||
<div class="container">
|
||||
<PasswordButton />
|
||||
</div>
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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>
|
|
@ -1,15 +1,9 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { globalPassword } from './pwgen';
|
||||
import { encrypt } from './cryptlib';
|
||||
let filename: string = "";
|
||||
|
||||
let password;
|
||||
globalPassword.subscribe(value => {
|
||||
password = value;
|
||||
})
|
||||
|
||||
|
||||
function convertToBase64(blob: Blob): Promise<string> {
|
||||
function convertToBase64(blob: File): 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>
|
||||
|
|
|
@ -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>
|
Loading…
Reference in New Issue