added decrypt functionality

main
Johannes Bülow 2023-01-04 09:10:46 +01:00
parent 26b3ba9b4a
commit 3bac4bbe9a
5 changed files with 170 additions and 20 deletions

View File

@ -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 />
<DecryptButton />
</div>
<div class="card">
Password:
<div class="container">
<PasswordButton />
</div>

View File

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

View File

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

View File

@ -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
</div>
{filename}
<button type="submit">Encrypt</button>
</div>
</form>

View File

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