View part completed with minor UI changes

themaybhatti · Apr 9, 2021 · 8c2c94c · 8c2c94c
1 parent 58836fa
commit 8c2c94c
Show file tree

Hide file tree

Showing 18 changed files with 111 additions and 90 deletions.
diff --git a/electron/main.js b/electron/main.js
@@ -3,7 +3,35 @@ const isDev = require('electron-is-dev');
 const path = require('path');
 const fs = require('fs');
 const crypto = require("crypto");
+const { shell } = require('electron');
 let mainWindow;
+const { Notification } = require('electron')
+
+function showNotification() {
+    const notification = {
+        title: 'Welcome to Crypt-It',
+        body: 'Get started with it and keep your files safe!'
+    }
+    new Notification(notification).show()
+}
+
+app.whenReady().then(showNotification);
+
+function encryptNotification() {
+    const notification = {
+        title: 'Encryption Competed',
+        body: 'Your file has been encrypted successfully!!'
+    }
+    new Notification(notification).show()
+}
+
+function decryptNotification(outFilePath) {
+    const notification = {
+        title: 'Decryption Competed',
+        body: 'Your file has been decrypted successfully and has been stored to ' + outFilePath
+    }
+    new Notification(notification).show()
+}
 
 function createWindow() {
     mainWindow = new BrowserWindow({
@@ -21,9 +49,17 @@ function createWindow() {
     const startURL = isDev ? 'http://localhost:3000/' : `file://${path.join(__dirname, '../build/index.html')}`;
 
     mainWindow.loadURL(startURL);
-
+    mainWindow.setIcon(path.join(__dirname, '../public/favicon.ico'));
+    mainWindow.maximize();
     mainWindow.once('ready-to-show', () => mainWindow.show());
     mainWindow.on('closed', () => {
+        try {
+            fs.rmdirSync(viewDir, { recursive: true });
+
+            console.log(`${viewDir} is deleted!`);
+        } catch (err) {
+            console.error(`Error while deleting ${viewDir}.`);
+        }
         mainWindow = null;
     });
 }
@@ -87,6 +123,7 @@ function Encrypt(key, inFilePath, outFilePath) {
     output.on('finish', function () {
         // ipcRenderer.send('encryption', output);
         console.log('Encrypted file written to disk!');
+        encryptNotification();
     });
     fs.unlinkSync(inFilePath, (err) => {
         if (err) throw err;
@@ -128,6 +165,7 @@ function Decrypt(key, inFilePath, outFilePath) {
     output.on('finish', function () {
         console.log(outFilePath);
         console.log('Decrypted file written to disk!');
+        decryptNotification(outFilePath);
     });
 
     // fs.unlinkSync(inFilepPath);
@@ -172,16 +210,34 @@ function viewDecrypt(key, inFilePath, outFilePath) {
         console.log('Decrypted file written to disk!');
     });
 
-    shell.exec(outFilePath);
+    shell.openPath(outFilePath);
+    // del(outFilePath);
+
 }
 
-ipcMain.on('close', (event, arg) => {
-    try {
-        fs.rmdirSync(viewDir, { recursive: true });
+// var delInterval = setInterval(del(), 1000);
+
+// function del(filePath){
+//     fs.open(filePath, 'r+', function(err, fd){
+//         if (err && err.code === 'EBUSY'){
+//             //do nothing till next loop
+//         } else if (err && err.code === 'ENOENT'){
+//             console.log(filePath, 'deleted');
+//             clearInterval(delInterval);
+//         } else {
+//             fs.close(fd, function(){
+//                 fs.unlink(filePath, function(err){
+//                     if(err){
+//                     } else {
+//                     console.log(filePath, 'deleted');
+//                     clearInterval(delInterval);
+//                     }
+//                 });
+//             });
+//         }
+//     });
+// }
 
-        console.log(`${viewDir} is deleted!`);
-    } catch (err) {
-        console.error(`Error while deleting ${viewDir}.`);
-    }
+ipcMain.on('close', (event, arg) => {
     app.quit();
 });
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
     "react-scripts": "4.0.3",
     "sass": "^1.32.8",
     "shell.js": "^3.2.3",
+    "shelljs": "^0.8.4",
     "styled-components": "^5.2.1",
     "wait-on": "^5.2.1",
     "web-vitals": "^1.1.0"

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -27,7 +27,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-  <title>CRYPT-IT - File Vault!!</title>
+  <title>CRYPT-IT</title>
 </head>
 
 <body>

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -13,7 +13,7 @@
       "sizes": "192x192"
     },
     {
-      "src": "logo512.png",
+      "src": "logo192.png",
       "type": "image/png",
       "sizes": "512x512"
     }

diff --git a/src/App.js b/src/App.js
@@ -1,11 +1,11 @@
 import React from 'react';
-//import Form from './components/registration/Form';
+import Form from './components/registration/Form';
 import Files from './components/Files/Files';
 
 
 function App() {
-  //return <Form />;
-  return <Files />;
+  return <Form />;
+  // return <Files />;
 }
 
 export default App;
diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
@@ -11,7 +11,7 @@ export default function Card(props) {
     const info_style = {
         borderBottomLeftRadius: "12px",
         borderBottomRightRadius: "12px",
-        padding: "16px 24px 24px 24px",
+        padding: "16px 24px 24px 24px"
         // objectFit: "contain"
     };
     const card_category = {
@@ -20,64 +20,38 @@ export default function Card(props) {
         fontSize: "1.5vh",
         letterSpacing: "2px",
         fontWeight: "500",
-        color: "#868686",
+        color: "#868686"
     };
     const card_title = {
         marginTop: "5px",
         marginBottom: "20px",
         fontSize: "17px",
         fontFamily: "Arial, Helvetica, sans-serif",
-        maxHeight: "25px",
-    };
-    const button = {
-        padding: "5px 8px",
-        textTransform: "uppercase",
-        fontSize: "2.5vh",
-        letterSpacing: "1px",
-        fontWeight: "500",
-        color: "#868686",
-        backgroundColor: "#fff",
-        outline: "none",
-        width: "100%",
-        border: "1px solid black",
-        borderRadius: "5px",
-        cursor: "pointer"
+        maxHeight: "25px"
     };
+
     const cards = {
 
         marginTop: "4.4em",
-        marginLeft: "6em",
+        marginLeft: "6em"
     };
     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" }, { height: "40vh" }} onMouseOver={changeCursor} onDoubleClick={viewfile}>
+                <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.name}</h3>
-                        {/* <a href={props.link} target="_blank">
-                            <button class="button" style={button} onClick={() => {
-                                dialog.showOpenDialog(
-                                    {
-                                        title: 'Select Location To Decrypt',
-                                        message: 'First Dialog',
-                                        buttonLabel: "Decrypt",
-                                        //pass 'openDirectory' to strictly open directories
-                                        properties: ['openDirectory']
-                                    }
-                                )
-                            }}>View</button>
-                        </a> */}
                     </div>
                 </div>
             </div>

diff --git a/src/components/Card/View.jsx b/src/components/Card/View.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { NavigationBar } from '../Dashboard/NavigationBar';
 import Sidebar from '../Dashboard/Sidebar';
-import styled from 'styled-components';
 import Card from './Card';
 
 import ai from "../Images/ai.png";
@@ -40,21 +39,6 @@ import zip from "../Images/zip.png";
 
 const { ipcRenderer } = window.require('electron');
 
-
-const GridWrapper = styled.div`
-  ${'' /* display: grid;
-  grid-gap: 10px; */}
-  margin-top: 4.4em;
-  margin-left: 0em;
-  margin-right: 0em;
-  ${'' /* grid-template-columns: repeat(12, 1fr);
-  grid-auto-rows: minmax(25px, auto);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh; */}
-`;
-
 class View extends React.Component {
 
     constructor(props) {
@@ -188,6 +172,7 @@ class View extends React.Component {
             this.setState({ CardList: cardList });
         })
     }
+
     render() {
         return (
             <>

diff --git a/src/components/Dashboard/NavigationBar.jsx b/src/components/Dashboard/NavigationBar.jsx
@@ -1,8 +1,6 @@
 import React from 'react';
-import { Nav, Navbar, Form, FormControl, Button, Container } from 'react-bootstrap';
+import { Navbar, Form, FormControl} from 'react-bootstrap';
 import styled from 'styled-components';
-const obrackets ="<";
-const cbrackets =">";
 const { ipcRenderer } = window.require('electron');
 const Styles = styled.div`
   .form-center {
@@ -14,7 +12,7 @@ const Styles = styled.div`
 `;
 export const NavigationBar = () => (
   <Navbar fixed="top" bg="dark" variant="dark">
-    <Navbar.Brand onClick={()=>{ipcRenderer.send('close','none');}} style={{fontSize: '100px' } , {marginLeft: -7}}>Crypt-it</Navbar.Brand>
+    <Navbar.Brand onClick={()=>{ipcRenderer.send('close','none')}} style={{fontSize: '100px' } ,{marginLeft: -7}}>Crypt-it</Navbar.Brand>
     {/* <Navbar.Brand style={{fontSize: '100px' } , {marginLeft: -7}}>X</Navbar.Brand> */}
     <Styles>
       <Form className="form-center">

diff --git a/src/components/Dashboard/Sidebar.jsx b/src/components/Dashboard/Sidebar.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { BrowserRouter as Router, Route, Link, withRouter } from "react-router-dom";
+import {  Link, withRouter } from "react-router-dom";
 
 const StyledSideNav = styled.div`   
     position: fixed;     /* Fixed Sidebar (stay in place on scroll and position relative to viewport) */

diff --git a/src/components/Files/FileCard.jsx b/src/components/Files/FileCard.jsx
@@ -1,7 +1,5 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import "../Card/Display.css";
-import Sidebar from '../Dashboard/Sidebar';
-import { NavigationBar } from '../Dashboard/NavigationBar';
 const electron = window.require('electron');
 const remote = electron.remote
 const { dialog } = remote
@@ -58,12 +56,12 @@ export default function Card(props) {
     return (
         <>
             <div className="cards" style={cards}>
-                <div className="card" style={{ backgroundColor: "white" }, { height: "45vh" }}>
+                <div className="card" style={{ backgroundColor: "white" , height: "45vh" }}>
                     <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.name}</h3>
-                        <a href={props.link} target="_blank">
+                        <a href={props.link} >
                             <button class="button" style={button} onClick={() => {
                                 dialog.showOpenDialog(
                                     {

diff --git a/src/components/Files/Files.jsx b/src/components/Files/Files.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { NavigationBar } from '../Dashboard/NavigationBar';
 import Sidebar from '../Dashboard/Sidebar';
-import styled from 'styled-components';
 import Card from './FileCard';
 
 import ai from "../Images/ai.png";
@@ -41,19 +40,6 @@ import zip from "../Images/zip.png";
 const { ipcRenderer } = window.require('electron');
 
 
-const GridWrapper = styled.div`
-  ${'' /* display: grid;
-  grid-gap: 10px; */}
-  margin-top: 4.4em;
-  margin-left: 0em;
-  margin-right: 0em;
-  ${'' /* grid-template-columns: repeat(12, 1fr);
-  grid-auto-rows: minmax(25px, auto);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh; */}
-`;
 
 class Files extends React.Component {