Adding icons, auto updates, and ip detection

Author: dfmcphee

Icon.icns

@@ -0,0 +1,6 @@
+{
+  "url": "https://github.com/dfmcphee/simple-proxy/releases/download/0.0.2/SimpleProxy-v0.0.2.zip",
+  "name": "v0.0.2",
+  "notes": "Better IP detection and icons.",
+  "pub_date": "2015-10-21T12:29:53+01:00"
+}

IconTemplate.png

@@ -2,10 +2,6 @@ let ipc = require('ipc');
 let React = require('react');
 let ReactDOM = require('react-dom');
 
-function validPort(port) {
-  return (port > 1023 && port < 65536)
-}
-
 let Settings = React.createClass({
   getInitialState: function() {
     return {
@@ -14,14 +10,18 @@ let Settings = React.createClass({
     };
   },
 
+  validPort: function(port) {
+    return (port > 1023 && port < 65536)
+  },
+
   portChanged: function(event) {
     this.setState({
       port: parseInt(event.target.value) || 0
     });
   },
 
-  saveSettings: function() {
-    if (validPort(this.state.port)) {
+  save: function() {
+    if (this.validPort(this.state.port)) {
       this.props.saveSettings(this.state.port);
     }
     else {
@@ -50,10 +50,17 @@ let Settings = React.createClass({
           {error}
         </section>
         <footer className="toolbar toolbar-footer">
-          <div className="toolbar-actions">
-            <button className="btn btn-primary pull-right" onClick={this.saveSettings}>
-              Save
-            </button>
+          <div className="actions">
+            <div className="actions__left">
+              <button className="btn btn-default" onClick={this.props.cancelSettings}>
+                Cancel
+              </button>
+            </div>
+            <div className="actions__right">
+              <button className="btn btn-primary" onClick={this.save}>
+                Save
+              </button>
+            </div>
           </div>
         </footer>
       </div>

IconTemplate@2x.png

@@ -43,20 +43,26 @@ let SimpleProxy = React.createClass({
   openSettings: function() {
     this.setState({
       settingsOpen: true
-    })
+    });
   },
 
   saveSettings: function(port) {
     this.setState({
       settingsOpen: false,
       port: port
-    })
+    });
+  },
+
+  cancelSettings: function() {
+    this.setState({
+      settingsOpen: false
+    });
   },
 
   render: function() {
     if (this.state.settingsOpen) {
       return (
-        <Settings saveSettings={this.saveSettings} />
+        <Settings saveSettings={this.saveSettings} cancelSettings={this.cancelSettings} />
       );
     }
     else {

auto_updater.json

@@ -5,17 +5,20 @@ body {
 	margin: 0;
 	height: 100%;
 	width: 100%;
+	color: #505050;
 }
 
 body {
-	font-family: -apple-system, 'Helvetica Neue', Helvetica, sans-serif;
 	font-size: 24px;
 	font-weight: 100;
+	font-family: 'SF UI Text', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;
+	letter-spacing: 0.03em;
 }
 
 input,
 button {
-	font-family: -apple-system, 'Helvetica Neue', Helvetica, sans-serif;
+	font-weight: 100;
+	letter-spacing: 0.05em;
 }
 
 input:focus,
@@ -55,7 +58,7 @@ button:focus {
 
 .controls__button {
 	flex: 1 1 auto;
-	height: 38px;
+	height: 42px;
 	border: none;
 }
 
@@ -88,7 +91,29 @@ button:focus {
 	flex: 1 1 auto;
 	font-size: 24px;
 	margin: 0;
+}
+
+.actions {
+	display: flex;
+}
+
+.actions__left {
+	flex: 1 1 auto;
+	font-size: 24px;
+	margin: 0;
 	padding: 0;
+	margin-left: 4px;
+}
+
+.actions__right {
+	flex: 0 0 auto;
+	font-size: 24px;
+	margin: 0;
+	margin-right: 4px;
+}
+
+.btn-primary.pull-right {
+	margin-top: 10px;
 }
 
 /* Info */

components/Settings.js

@@ -1,12 +1,15 @@
 'use strict';
 const app = require('app');
 const BrowserWindow = require('browser-window');
+const NativeImage = require('native-image');
+const gh_releases = require('electron-gh-releases');
+const ip = require('ip');
 
 // report crashes to the Electron project
-require('crash-reporter').start();
+//require('crash-reporter').start();
 
 // adds debug features like hotkeys for triggering dev tools and reload
-require('electron-debug')();
+// require('electron-debug')();
 
 let setup = require('proxy');
 let http = require('http');
@@ -19,18 +22,21 @@ let server;
 let mb = menubar({
   preloadWindow: true,
   width: 400,
-  height: 180
+  height: 180,
+  icon: app.getAppPath() + '/IconTemplate.png'
 });
 
 mb.on('ready', function ready () {
   console.log('app is ready')
   //mb.window.openDevTools();
 });
 
+mb.on('show', function() {
+  mb.window.webContents.send('set-ip', ip.address());
+});
+
 ipc.on('connect', function(event) {
-	dns.lookup(require('os').hostname(), function (err, address, fam) {
-	  event.sender.send('set-ip', address);
-	});
+  event.sender.send('set-ip', ip.address());
 });
 
 ipc.on('start-proxy', function(event, port) {
@@ -46,3 +52,25 @@ ipc.on('stop-proxy', function(event, port) {
 		console.log('proxy stopped')
 	});
 });
+
+let options = {
+  repo: 'dfmcphee/simple-proxy',
+  currentVersion: app.getVersion()
+};
+
+let update = new gh_releases(options, function(auto_updater) {
+  // Auto updater event listener
+  auto_updater.on('update-downloaded', function(e, rNotes, rName, rDate, uUrl, quitAndUpdate) {
+    // Install the update
+    console.log('Update downloaded.');
+    quitAndUpdate()
+  })
+});
+
+// Check for updates
+update.check(function (err, status) {
+  if (!err && status) {
+    console.log('Update downloading.');
+    update.download()
+  }
+});

components/SimpleProxy.js

@@ -1,37 +1,41 @@
 {
   "name": "simple-proxy",
-  "productName": "Simple Proxy",
-  "version": "0.0.1",
+  "productName": "SimpleProxy",
+  "version": "0.0.2",
   "description": "A simple reverse proxy for OS X.",
   "license": "MIT",
-  "repository": "dfmcphee/simple-proxy",
+  "repository": {
+    "url": "dfmcphee/simple-proxy"
+  },
   "author": {
     "name": "Dominic McPhee",
-    "email": "dominic.mcphee@gmail.com",
+    "email": "dominic.mcphee@shopify.com",
     "url": "dfmcphee.com"
   },
   "engines": {
     "node": ">=4"
   },
-  "electronVersion": "0.33.3",
+  "electronVersion": "0.34.0",
   "main": "index.js",
   "scripts": {
     "start": "electron .",
-    "build": "electron-packager . SimpleProxy --out=dist --ignore='^/dist$' --prune --asar --all --platform=darwin --arch=x64 --version=0.33.8"
+    "build": "electron-packager . $npm_package_productName --out=dist --platform=darwin --arch=x64 icon=Icon.icns --ignore='^/dist$' --version=$npm_package_electronVersion --sign=U7937AY495 --overwrite"
   },
   "keywords": [
     "electron-app"
   ],
   "dependencies": {
     "babel": "^5.8.23",
     "electron-debug": "^0.2.1",
+    "electron-gh-releases": "^1.0.1",
+    "ip": "^1.0.1",
     "menubar": "^2.2.1",
     "proxy": "^0.2.3",
     "react": "^0.14.0",
     "react-dom": "^0.14.0"
   },
   "devDependencies": {
-    "electron-packager": "^5.0.0",
-    "electron-prebuilt": "^0.33.3"
+    "electron-packager": "^5.1.0",
+    "electron-prebuilt": "^0.34.0"
   }
 }

index.css

@@ -23,4 +23,4 @@ $ npm start
 $ npm run build
 ```
 
-Builds the app for OS X, Linux, and Windows, using [electron-packager](https://github.com/maxogden/electron-packager).
+Builds the app for OS X using [electron-packager](https://github.com/maxogden/electron-packager).