added decrypt functionality
parent
26b3ba9b4a
commit
3bac4bbe9a
|
@ -1,17 +1,18 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import EncryptButton from './lib/EncryptButton.svelte'
|
import EncryptButton from './lib/EncryptButton.svelte'
|
||||||
import PasswordButton from './lib/PasswordButton.svelte';
|
import PasswordButton from './lib/PasswordButton.svelte';
|
||||||
|
import DecryptButton from './lib/DecryptButton.svelte';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<h1>Encrypt and decrypt files</h1>
|
<h1>Encrypt and decrypt files</h1>
|
||||||
|
|
||||||
<div class="card">
|
<div class="container">
|
||||||
<EncryptButton />
|
<EncryptButton />
|
||||||
|
<DecryptButton />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card">
|
<div class="container">
|
||||||
Password:
|
|
||||||
<PasswordButton />
|
<PasswordButton />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -48,6 +48,13 @@ h1 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
div.container {
|
||||||
|
display: flex; /* Make the container a flex container */
|
||||||
|
justify-content: center; /* Center the items horizontally */
|
||||||
|
margin-bottom: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
button {
|
button {
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
border: 1px solid transparent;
|
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">
|
<script lang="ts">
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { globalPassword } from './pwgen';
|
|
||||||
import { encrypt } from './cryptlib';
|
import { encrypt } from './cryptlib';
|
||||||
|
let filename: string = "";
|
||||||
let password;
|
|
||||||
globalPassword.subscribe(value => {
|
function convertToBase64(blob: File): Promise<string> {
|
||||||
password = value;
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
function convertToBase64(blob: Blob): Promise<string> {
|
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
reader.onload = (event: ProgressEvent<FileReader>) => {
|
reader.onload = (event: ProgressEvent<FileReader>) => {
|
||||||
|
@ -25,7 +19,7 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
let file: Blob | undefined;
|
let file: File | undefined;
|
||||||
|
|
||||||
function handleDrop(event: DragEvent) {
|
function handleDrop(event: DragEvent) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
@ -35,20 +29,23 @@
|
||||||
|
|
||||||
async function handleSubmit(event: Event) {
|
async function handleSubmit(event: Event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
console.log(file)
|
|
||||||
|
|
||||||
if (!file) {
|
if (!file) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
filename = file.name;
|
||||||
|
console.log("Uploaded ", filename)
|
||||||
|
//Encoding file using Base64
|
||||||
convertToBase64(file).then((base64) => {
|
convertToBase64(file).then((base64) => {
|
||||||
|
//encrypting the base64 encoded File
|
||||||
encrypt(base64).then((encrypted_content => {
|
encrypt(base64).then((encrypted_content => {
|
||||||
console.log(encrypted_content)
|
|
||||||
let encrypted_b64: string = btoa(unescape(encodeURIComponent(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 encrypted_file: Blob = new Blob([encrypted_b64], {type: "text/plain"});
|
||||||
let url = URL.createObjectURL(encrypted_file);
|
let url = URL.createObjectURL(encrypted_file);
|
||||||
let a = document.createElement("a");
|
let a = document.createElement("a");
|
||||||
a.href = url;
|
a.href = url;
|
||||||
a.download = "Encrypted.txt";
|
a.download = filename + ".crypt";
|
||||||
document.body.appendChild(a);
|
document.body.appendChild(a);
|
||||||
a.click();
|
a.click();
|
||||||
document.body.removeChild(a);
|
document.body.removeChild(a);
|
||||||
|
@ -57,6 +54,20 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</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}>
|
<form on:submit|preventDefault={handleSubmit}>
|
||||||
|
@ -67,6 +78,7 @@
|
||||||
on:drop|preventDefault={handleDrop}
|
on:drop|preventDefault={handleDrop}
|
||||||
>
|
>
|
||||||
Drag and drop a file here to upload
|
Drag and drop a file here to upload
|
||||||
|
{filename}
|
||||||
|
<button type="submit">Encrypt</button>
|
||||||
</div>
|
</div>
|
||||||
<button type="submit">Encrypt</button>
|
|
||||||
</form>
|
</form>
|
||||||
|
|
|
@ -18,6 +18,42 @@ function copyToClipboard() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function updatePassword(password) {
|
||||||
|
globalPassword.set(password)
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</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