feat: Re-organize UI code (#36)

Gruntfile.js

@@ -15,7 +15,7 @@
         },
         dist: {
           files: {
-            'dist/css/app.css': 'scss/app.scss',
+            'dist/ui/css/app.css': 'scss/app.scss',
           },
         },
       },
@@ -25,7 +25,7 @@
         },
         target: {
           files: {
-            'dist/css/app.min.css': ['dist/css/app.css'],
+            'dist/ui/css/app.min.css': ['dist/ui/css/app.css'],
           },
         },
       },

package.json

@@ -15,7 +15,7 @@
   "repository": "https://github.com/kunalnagar/encrypt0r",
   "license": "MIT",
   "author": "Kunal Nagar <[email protected]>",
-  "main": "src/main.js",
+  "main": "dist/electron/main.js",
   "scripts": {
     "prebuild": "rm -rf dist",
     "build": "npm run build:tsc && npm run build:copy && npm run build-grunt && npm run build-mac-x64 && npm run build-win-x86 && npm run build-win-x64 && npm run build-linux-x64 && npm run build-linux-deb",
@@ -25,11 +25,11 @@
     "build-mac-x64": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/icon.icns --prune=true --out=release-builds",
     "build-win-x64": "electron-packager . --overwrite --asar --platform=win32 --arch=x64 --icon=assets/icons/icon.ico --prune=true --out=release-builds",
     "build-win-x86": "electron-packager . --overwrite --asar --platform=win32 --arch=ia32 --icon=assets/icons/icon.ico --prune=true --out=release-builds",
-    "build:copy": "cp src/index.html dist/",
+    "build:copy": "cp src/ui/index.html dist/ui/",
     "build:tsc": "tsc",
     "build:tsc:watch": "tsc --watch",
     "deploy": "sh ./scripts/deploy.sh",
-    "dev": "npm run prebuild && npm run build:tsc && npm run build:copy && npm run build-grunt && electron dist/main.js & npm run build:tsc:watch & grunt watch",
+    "dev": "npm run prebuild && npm run build:tsc && npm run build:copy && npm run build-grunt && electron . & npm run build:tsc:watch & grunt watch",
     "lint": "eslint src/ --ext .ts --max-warnings 0",
     "lint:fix": "eslint --fix src/ --ext .ts --max-warnings 0",
     "release": "npm run prebuild && npm run build:tsc && npm run build:copy && npm run build-grunt && npm run build-mac-x64 && npm run zip-mac-x64 && npm run build-win-x86 && npm run zip-win-x86 && npm run build-win-x64 && npm run zip-win-x64 && npm run build-linux-x64 && npm run zip-linux-x64 && npm run build-linux-deb && npm run zip-linux-deb",
@@ -67,6 +67,7 @@
     "@babel/eslint-parser": "^7.12.1",
     "@types/jquery": "^3.5.5",
     "@types/node": "^14.14.19",
+    "@types/yargs": "^15.0.12",
     "@typescript-eslint/eslint-plugin": "^4.11.1",
     "@typescript-eslint/parser": "^4.11.1",
     "electron": "^11.1.1",
@@ -89,6 +90,7 @@
     "sort-package-json": "^1.48.0",
     "standard-version": "^9.1.0",
     "time-grunt": "^2.0.0",
-    "typescript": "^4.1.3"
+    "typescript": "^4.1.3",
+    "yargs": "^16.2.0"
   }
 }

src/Crypto.ts → src/business-logic/Crypto.ts

@@ -1,15 +1,21 @@
 import { EventEmitter } from 'events';
 import { ReadStream, WriteStream } from 'fs';
+import { pipeline } from 'stream';
 
-import { getCipher, getDecipher } from './utils/cipher';
-import { compress, decompress } from './utils/compress';
-import { getFileSize } from './utils/file-size';
+import {
+  EVENT_DESTINATION_STREAM_FINISH,
+  EVENT_NOTICE,
+  EVENT_SOURCE_STREAM_PROGRESS,
+} from '../constants';
+import { getCipher, getDecipher } from './helpers/cipher';
+import { compress, decompress } from './helpers/compress';
+import { getFileSize } from './helpers/file-size';
 import {
   getInitializationVector,
   getInitializationVectorStream,
-} from './utils/initialization-vector';
-import { calculateProgress } from './utils/progress';
-import { getDestinationStream, getSourceStream } from './utils/stream';
+} from './helpers/initialization-vector';
+import { calculateProgress } from './helpers/progress';
+import { getDestinationStream, getSourceStream } from './helpers/stream';
 
 export interface ICrypto extends EventEmitter {
   encrypt(): void;
@@ -40,11 +46,19 @@ export default class Crypto extends EventEmitter implements ICrypto {
     const cipher = getCipher(this._passphrase, initializationVector);
     const sourceStream = getSourceStream(this._sourceFilePath);
     const destinationStream = getDestinationStream(this._destinationFilePath);
-    sourceStream
-      .pipe(compress())
-      .pipe(cipher)
-      .pipe(initializationVectorStream)
-      .pipe(destinationStream);
+    pipeline(
+      sourceStream,
+      compress(),
+      cipher,
+      initializationVectorStream,
+      destinationStream,
+      (err) => {
+        if (err) {
+          console.error(err);
+          this.emit(EVENT_NOTICE, 'Oops! Something went wrong!');
+        }
+      },
+    );
     this._handleSourceStream(sourceStream);
     this._handleDestinationStream(destinationStream);
   }
@@ -60,7 +74,18 @@ export default class Crypto extends EventEmitter implements ICrypto {
     initializationVectorStream.on('data', (chunk) => {
       const initializationVector = chunk as Buffer;
       const decipher = getDecipher(this._passphrase, initializationVector);
-      sourceStream.pipe(decipher).pipe(decompress()).pipe(destinationStream);
+      pipeline(
+        sourceStream,
+        decipher,
+        decompress(),
+        destinationStream,
+        (err) => {
+          if (err) {
+            console.error(err);
+            this.emit(EVENT_NOTICE, 'Oops! Something went wrong!');
+          }
+        },
+      );
     });
     this._handleSourceStream(sourceStream);
     this._handleDestinationStream(destinationStream);
@@ -72,15 +97,15 @@ export default class Crypto extends EventEmitter implements ICrypto {
     sourceStream.on('data', (chunk) => {
       currentSize += chunk.length;
       this.emit(
-        'crypto:source_stream:progress',
+        EVENT_SOURCE_STREAM_PROGRESS,
         calculateProgress(currentSize, totalSize),
       );
     });
   }
 
   private _handleDestinationStream(destinationStream: WriteStream) {
     destinationStream.on('finish', () => {
-      this.emit('crypto:destination_stream:finish');
+      this.emit(EVENT_DESTINATION_STREAM_FINISH);
     });
   }
 }

src/constants.ts

@@ -0,0 +1,8 @@
+export const EVENT_LOG = 'encrypt0r:log';
+export const EVENT_ENCRYPT = 'encrypt0r:encrypt';
+export const EVENT_DECRYPT = 'encrypt0r:decrypt';
+export const EVENT_RESET = 'encrypt0r:reset';
+export const EVENT_NOTICE = 'encrypt0r:notice';
+export const EVENT_SOURCE_STREAM_PROGRESS = 'encrypt0r:source_stream:progress';
+export const EVENT_DESTINATION_STREAM_FINISH =
+  'encrypt0r:destination_stream:progress';

src/electron/main.ts

@@ -0,0 +1,102 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { app, BrowserWindow, dialog, ipcMain } from 'electron';
+import { IpcMainEvent } from 'electron/main';
+import log from 'electron-log';
+import path from 'path';
+
+import Crypto from '../business-logic/Crypto';
+import {
+  EVENT_DECRYPT,
+  EVENT_DESTINATION_STREAM_FINISH,
+  EVENT_ENCRYPT,
+  EVENT_LOG,
+  EVENT_NOTICE,
+  EVENT_SOURCE_STREAM_PROGRESS,
+} from '../constants';
+
+const createWindow = (): BrowserWindow => {
+  let mainWindow: BrowserWindow | null = new BrowserWindow({
+    width: 600,
+    height: 600,
+    webPreferences: {
+      devTools: true,
+      nodeIntegration: true,
+    },
+    icon: path.join('../../assets/icons/png/64x64.png'),
+  });
+  mainWindow.loadFile('dist/ui/index.html');
+  mainWindow.on('closed', () => {
+    mainWindow = null;
+  });
+  return mainWindow;
+};
+
+const handleMode = async (eventName: string, event: IpcMainEvent, arg: any) => {
+  const sourceFilePath = arg.filePath as string;
+  let destinationFilePath = `${arg.filePath as string}`;
+  const passphrase = arg.passphrase as string;
+  let verb = '';
+  if (eventName === EVENT_ENCRYPT) {
+    verb = 'Encrypting';
+    destinationFilePath += '.enc';
+  } else if (eventName === EVENT_DECRYPT) {
+    verb = 'Decrypting';
+    destinationFilePath = destinationFilePath.replace('.enc', '');
+  }
+  const file = await dialog.showSaveDialog({
+    defaultPath: destinationFilePath,
+  });
+  if (!file.canceled) {
+    const crypto = new Crypto(
+      sourceFilePath,
+      file.filePath as string,
+      passphrase,
+    );
+    if (eventName === EVENT_ENCRYPT) {
+      crypto.encrypt();
+    } else {
+      crypto.decrypt();
+    }
+    crypto.on(EVENT_NOTICE, (data) => {
+      event.sender.send(EVENT_NOTICE, data);
+    });
+    crypto.on(EVENT_SOURCE_STREAM_PROGRESS, (progress) => {
+      event.sender.send(EVENT_NOTICE, `${verb}...${progress}%`);
+    });
+    crypto.on(EVENT_DESTINATION_STREAM_FINISH, () => {
+      event.sender.send(
+        EVENT_NOTICE,
+        `Done! File has been saved to: ${file.filePath}`,
+      );
+    });
+  }
+};
+
+app.on('ready', () => {
+  console.log('ready');
+  createWindow();
+});
+
+app.on('window-all-closed', () => {
+  console.log('window-all-closed', process.platform);
+  if (process.platform === 'darwin') {
+    app.quit();
+  }
+});
+
+app.on('activate', () => {
+  console.log('activate');
+  createWindow();
+});
+
+ipcMain.on(EVENT_LOG, (e, arg) => {
+  log.debug(arg);
+});
+
+ipcMain.on(EVENT_ENCRYPT, async (e, arg) => {
+  handleMode(EVENT_ENCRYPT, e, arg);
+});
+
+ipcMain.on(EVENT_DECRYPT, async (e, arg) => {
+  handleMode(EVENT_DECRYPT, e, arg);
+});

src/electron/ui-adapter.ts

@@ -0,0 +1,27 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ipcRenderer } from 'electron';
+import $ from 'jquery';
+
+import {
+  EVENT_DECRYPT,
+  EVENT_ENCRYPT,
+  EVENT_LOG,
+  EVENT_NOTICE,
+} from '../constants';
+
+const $window = $(window);
+
+const sendEventToElectron = (eventName: string, data?: any) =>
+  ipcRenderer.send(eventName, data);
+
+$window.on(EVENT_LOG, (e, data) => sendEventToElectron(EVENT_LOG, data));
+$window.on(EVENT_ENCRYPT, (e, data) =>
+  sendEventToElectron(EVENT_ENCRYPT, data),
+);
+$window.on(EVENT_DECRYPT, (e, data) =>
+  sendEventToElectron(EVENT_DECRYPT, data),
+);
+
+ipcRenderer.on(EVENT_NOTICE, (e, data) => {
+  $window.trigger(EVENT_NOTICE, data);
+});