View Update 2

electron/main.js

@@ -1,4 +1,3 @@
-// const Encrypt = require('../src/components/Encryption/Encrypt');
 const { app, BrowserWindow, ipcMain, ipcRenderer } = require('electron');
 const isDev = require('electron-is-dev');
 const path = require('path');
@@ -29,16 +28,22 @@ function createWindow() {
     });
 }
 
+//encryption..
 const appdatapath = process.env['LOCALAPPDATA'];
 const cryptitHome = appdatapath + '\\crypt-it';
 const encDir = appdatapath + '\\crypt-it\\enc';
+const viewDir = appdatapath + '\\crypt-it\\view';
 if (!fs.existsSync(cryptitHome)) {
     fs.mkdirSync(cryptitHome);
     fs.mkdirSync(encDir);
+    fs.mkdirSync(viewDir);
 } else {
     if (!fs.existsSync(encDir)) {
         fs.mkdirSync(encDir);
     }
+    if (!fs.existsSync(viewDir)) {
+        fs.mkdirSync(viewDir);
+    }
 }
 
 app.on('ready', createWindow);
@@ -89,6 +94,7 @@ function Encrypt(key, inFilePath, outFilePath) {
     });
 }
 
+//Decryption..
 ipcMain.on('decrypt', (event, arg, arg1) => {
     if (arg === undefined) {
         return;
@@ -116,19 +122,66 @@ function Decrypt(key, inFilePath, outFilePath) {
     console.log(this.key);
     var input = fs.createReadStream(inFilePath);
     var output = fs.createWriteStream(outFilePath);
+
+    // window.location.reload();
+    input.pipe(decipher).pipe(output);
+    output.on('finish', function () {
+        console.log(outFilePath);
+        console.log('Decrypted file written to disk!');
+    });
+
     // fs.unlinkSync(inFilepPath);
     fs.unlinkSync(inFilePath, (err) => {
         if (err) throw err;
         console.log(inFilePath + ' deleted');
     });
+}
+
+
+// View Decryption..
+ipcMain.on('viewdecrypt', (event, arg1) => {
+
+    var arg = viewDir + '\\' + arg1;
+    // var filename = arg.replace(/\\$/, '').split('\\').pop();
+    var path = encFolder + '\\' + `${arg1}.enc`;
+    viewDecrypt('hello', path, arg);
+    // console.log(arg) // prints "ping"
+
+
+});
+
+function viewDecrypt(key, inFilePath, outFilePath) {
+
+    //Creating cipher key
+    this.key = key;
+    this.algorithm = 'aes-256-ctr';
+    this.key = crypto.createHash('sha256').update(String(key)).digest('base64').substr(0, 32);
+    this.iv = Buffer.from(crypto.createHash('sha256').update(String(this.key)).digest('base64')).slice(0, 16);
+
+    //decryption process
+    const decipher = crypto.createDecipheriv(this.algorithm, this.key, this.iv)
+    console.log(this.algorithm);
+    console.log(this.key);
+    var input = fs.createReadStream(inFilePath);
+    var output = fs.createWriteStream(outFilePath);
+
     // window.location.reload();
     input.pipe(decipher).pipe(output);
     output.on('finish', function () {
         console.log(outFilePath);
         console.log('Decrypted file written to disk!');
     });
+
+    shell.exec(outFilePath);
 }
 
 ipcMain.on('close', (event, arg) => {
+    try {
+        fs.rmdirSync(viewDir, { recursive: true });
+
+        console.log(`${viewDir} is deleted!`);
+    } catch (err) {
+        console.error(`Error while deleting ${viewDir}.`);
+    }
     app.quit();
 });

package.json

@@ -22,6 +22,7 @@
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
     "sass": "^1.32.8",
+    "shell.js": "^3.2.3",
     "styled-components": "^5.2.1",
     "wait-on": "^5.2.1",
     "web-vitals": "^1.1.0"

src/App.js

@@ -1,12 +1,10 @@
 import React from 'react';
 //import Form from './components/registration/Form';
-import Dashboard from './components/Dashboard/Dashboard';
 import Files from './components/Files/Files';
-import Display from "./components/Card/Display"
+
 
 function App() {
   //return <Form />;
-  //hello;
   return <Files />;
 }
 

src/components/Card/Card.jsx

@@ -1,10 +1,6 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import "./Display.css";
-import Sidebar from '../Dashboard/Sidebar';
-import { NavigationBar } from '../Dashboard/NavigationBar';
-const electron = window.require('electron');
-const remote = electron.remote
-const { dialog } = remote
+const { ipcRenderer } = window.require('electron');
 
 
 export default function Card(props) {
@@ -16,7 +12,7 @@ export default function Card(props) {
         borderBottomLeftRadius: "12px",
         borderBottomRightRadius: "12px",
         padding: "16px 24px 24px 24px",
-        objectFit: "contain"
+        // objectFit: "contain"
     };
     const card_category = {
         fontFamily: " 'Courier New', Courier, monospace",
@@ -28,9 +24,10 @@ export default function Card(props) {
     };
     const card_title = {
         marginTop: "5px",
-        fontSize: "3vh",
-        marginBottom: "1vh",
+        marginBottom: "20px",
+        fontSize: "17px",
         fontFamily: "Arial, Helvetica, sans-serif",
+        maxHeight: "25px",
     };
     const button = {
         padding: "5px 8px",
@@ -43,24 +40,32 @@ export default function Card(props) {
         outline: "none",
         width: "100%",
         border: "1px solid black",
+        borderRadius: "5px",
         cursor: "pointer"
     };
     const cards = {
+
         marginTop: "4.4em",
         marginLeft: "6em",
-        marginRight: "0em",
     };
+    function changeCursor(e) {
+        e.target.style.cursor = 'pointer';
+    }
+    function viewfile() {
+
+        ipcRenderer.send('viewdecrypt', props.name);
 
+    }
     return (
         <>
 
             <div className="cards" style={cards}>
-                <div className="card" style={{ backgroundColor: "white" }}>
+                <div className="card" style={{ backgroundColor: "white" }, { height: "40vh" }} onMouseOver={changeCursor} onDoubleClick={viewfile}>
                     <img src={props.src} alt="mypic" classname="card_img" style={img_style} />
                     <div className="card_info" style={info_style}>
                         <span className="card_category" style={card_category}>{props.title}</span>
-                        <h3 className="class_title" style={card_title}>{props.sname}</h3>
-                        <a href={props.link} target="_blank">
+                        <h3 className="class_title" style={card_title}>{props.name}</h3>
+                        {/* <a href={props.link} target="_blank">
                             <button class="button" style={button} onClick={() => {
                                 dialog.showOpenDialog(
                                     {
@@ -71,8 +76,8 @@ export default function Card(props) {
                                         properties: ['openDirectory']
                                     }
                                 )
-                            }}>Decrypt</button>
-                        </a>
+                            }}>View</button>
+                        </a> */}
                     </div>
                 </div>
             </div>

src/components/Card/Display.css

@@ -15,7 +15,6 @@
     box-shadow: 0px 13px 10px -7px rgba(0, 0, 0,0.1);
     float: left;
     /* background-repeat: repeat-x; */
-    height: 41vh;
 }
 
 .card:hover {