Adding GUI to TorBot :) (#152)

* Adding front-end architecture

* fixing titles

* Adding eslint to hound

* Fixing syntax

* Removing buildJ

* Remvoing build and setting title

* Setting up WS Server for front end

* Adding input and button

* Successful WSMessages!

* Adding ability to use Onion links as well

* Code cleanup

* Adding support for onion

* Adding onion button

* More styling, fixing WS latency issue

* Rendering links from TorBot

* Removing useless enumeration

* Adding home button

* Sending node links, updating function to class attribute

* Adding documentation

* Adding error checking for incorrect URLs

* Returning after error, no need to render page

* Organizing file structure

* Async urls for websocket, results in better performance and smoother transition

* Adding proxy head and actually displaying status of link

* Cleaning up code

* Moving WebSocket to links

* Adding documentation

* Disabling jshint

* Adding documentation

* Minor refactor

* pylint and hound

* Renaming file

* Getting paste event to capture initial paste

* Adding radio buttons for action selection

* Beginning work on get_info feature

* Adding loading screen and renaming folder

.gitignore

@@ -6,6 +6,10 @@ modules/.pytest_cache
 modules/.ropeproject/
 modules/lib/*.so
 
+# JS Ignores
+node_modules
+build
+
 # Tests Ignores
 tests/.pytest_cache
 tests/*.pyc

.hound.yml

@@ -1,2 +1,7 @@
 flake8:
-  enabled: true
+  enabled: true
+eslint:
+  enbaled: true
+  config_file: ./ui/.eslintrc.json
+jshint:
+  enabled: false

dev/run_server.sh

@@ -0,0 +1,6 @@
+if [ -f ../torBot.py ]; then
+  python3 ../torBot.py --server
+fi
+if [ -f torBot.py ]; then
+  python3 torBot.py --server
+fi

front-end/.eslintrc.json

@@ -0,0 +1,33 @@
+{
+    "env": {
+        "node": true,
+        "browser": true,
+        "commonjs": true,
+        "es6": true
+    },
+    "extends": ["plugin:react/recommended","eslint:recommended"],
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "ecmaVersion": 2018,
+        "sourceType": "module"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+        "linebreak-style": [
+            "error",
+            "unix"
+        ],
+        "quotes": [
+            "error",
+            "single"
+        ],
+        "semi": [
+            "error",
+            "always"
+        ]
+    }
+}

front-end/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "torbot",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "electron-reload-webpack-plugin": "^2.0.4",
+    "extract-text-webpack-plugin": "^4.0.0-beta.0",
+    "react": "^16.6.0",
+    "react-dom": "^16.6.0",
+    "react-scripts": "2.0.5"
+  },
+  "scripts": {
+    "start": "webpack --mode development --watch",
+    "build": "webpack --mode production",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "electron": "electron ."
+  },
+  "homepage": "./",
+  "main": "src/electron-main.js",
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "devDependencies": {
+    "@babel/preset-env": "^7.1.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.8",
+    "@fortawesome/free-brands-svg-icons": "^5.5.0",
+    "@fortawesome/free-regular-svg-icons": "^5.5.0",
+    "@fortawesome/free-solid-svg-icons": "^5.5.0",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.4",
+    "css-loader": "^1.0.1",
+    "electron": "^3.0.8",
+    "electron-connect": "^0.6.3",
+    "electron-reload": "^1.2.5",
+    "eslint": "^5.9.0",
+    "eslint-config-prettier": "^3.3.0",
+    "eslint-plugin-prettier": "^3.0.0",
+    "eslint-plugin-react": "^7.11.1",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.4.4",
+    "prettier": "^1.15.2",
+    "webpack-cli": "^3.1.2"
+  }
+}

front-end/src/app.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Home from './components/home';
+import './app.css';
+
+/**
+ * Entrypoint for TorBot app, displays home-page
+ * @class App
+ */
+class App extends React.Component {
+    render() {
+        return <Home/>;
+    }
+}
+
+export default App;

front-end/src/components/home.css

@@ -0,0 +1,32 @@
+body {
+  text-align: center;
+  color: lime;
+  background-color: black;
+}
+form {
+  display: inline-block;
+}
+.search-bar {
+  border-radius: 25px;
+  border-color: lime;
+  padding: 5px;
+  border-width: 5px;
+  margin-right: 5px;
+  background-color: black;
+  color: lime;
+}
+.search-bar:focus {
+  outline: none;
+}
+.submit-button:focus {
+  outline: none;
+}
+.submit-button {
+  font-weight: 900;
+  border-radius: 25px;
+  border-color: lime;
+  width: 70px;
+  height: 30px;
+  background-color: black;
+  color: lime;
+}

front-end/src/components/home.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import Links from './links';
+import Info from './info';
+import './home.css';
+
+/**
+ * Home page of TorBot 
+ * @class Home
+ */
+class Home extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {url: '', action: 'get_links'};
+        this.onSubmit = this.onSubmit.bind(this);
+        this.onUrlChange = this.onUrlChange.bind(this);
+        this.onActionChange = this.onActionChange.bind(this);
+        this.onSelection = this.onSelection.bind(this);
+    }
+
+    /**
+     * Sets state of action when user makes selection from dropdown 
+     * @memberof Home 
+     * @param {object} event - event received from typing
+     */
+    onActionChange(event) {
+        this.setState({action: event.target.value});
+    }
+
+    /**
+     * Sets state of url when user enters text
+     * @memberof Home 
+     * @param {object} event - event received from typing
+     */
+    onUrlChange(event) {
+        event.persist();
+        this.setState({url: event.target.value}, function() {
+            if (event.key === 'Enter') this.onSubmit(event);
+        });
+    }
+
+    /**
+     * Asynchronously displays links from the state's url
+     * @memberof Home
+     * @param {object} event - event received from submitting form
+     */
+    onSubmit(event) {
+        event.preventDefault();
+        switch (this.state.action) {
+            case 'get_links':
+                ReactDOM.render(<Links host='localhost' port='8080' url={this.state.url}/>, document.getElementById('root')); 
+                break;
+            case 'get_info':
+                ReactDOM.render(<Info host='localhost' port='8080' url={this.state.url}/>, document.getElementById('root'));
+                break;
+        }
+    }
+
+    onSelection(event) {
+        this.setState({action: event.target.value});
+    }
+
+    /**
+     * Renders Home 
+     * @memberof Home
+     */
+    render() {
+        return (
+            <React.Fragment>
+                <form>
+                    <h1 align='center'>TorBot</h1>
+                    <input onKeyDown={this.onUrlChange} onPaste={this.onUrlChange} className='search-bar' type='text'/>
+                    <input type='button' onClick={this.onSubmit} value='SELECT' className='submit-button'/>
+                    <br/>
+                    <input 
+                        onChange={this.onSelection} 
+                        type="checkbox" 
+                        value="get_links" 
+                        checked={this.state.action === 'get_links'}
+                    /> Get Links<br/> 
+                    <input 
+                        onChange={this.onSelection} 
+                        type="checkbox" 
+                        value="get_info" 
+                        checked={this.state.action === 'get_info'}
+                    /> Get Info<br/>
+                </form>
+            </React.Fragment>
+        );
+    }
+}
+
+export default Home;

front-end/src/components/info.js

@@ -0,0 +1,35 @@
+import React from 'react';
+
+class Info extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            url: props.url,
+            host: props.host,
+            port: props.port
+        };
+        this.onMsg = this.onMsg.bind(this);
+        this.initWS();
+    }
+
+    initWS() {
+        this.websocket = new WebSocket('ws://' + this.state.host + ':' + this.state.port);
+        let msg = {'url': this.state.url, 'action': 'get_info'};
+        this.websocket.onopen = () => this.websocket.send(JSON.stringify(msg));
+        this.websocket.onmessage = this.onMsg;
+        this.websocket.onerror = (error) => console.error(error);
+    }
+
+    onMsg(msg) {
+        let info = JSON.parse(msg.data);
+        for (var key in info) {
+            console.log(key + ': ' + info[key]);
+        }
+    }
+
+    render() {
+        return <h1>INFO</h1>
+    }
+}
+
+export default Info;

front-end/src/components/links.css

@@ -0,0 +1,18 @@
+.home-button {
+  font-weight: 900;
+  border-radius: 25px;
+  border-color: lime;
+  width: 70px;
+  height: 30px;
+  background-color: black;
+  color: lime;
+}
+.home-button:focus {
+  outline: none;
+}
+.good-link {
+  color: lime;
+}
+.bad-link {
+  color: red;
+}