- Handle app flow in app.js

- Wire up connect() to "Secure connection" button
- Refactor code
- Drop promises in Backend in favor of event based approach

4 files changed, 60 insertions, 78 deletions

diff --git a/app/actions/user.js b/app/actions/user.js
index 3111a0a83a..ef8e67fa37 100644
--- a/app/actions/user.js
+++ b/app/actions/user.js
@@ -3,22 +3,7 @@ import { replace } from 'react-router-redux';
 import { LoginState } from '../constants';
 
 const loginChange = createAction('USER_LOGIN_CHANGE');
-
-const login = (backend, account) => {
-  return (dispatch) => {
-    backend.login(account).then(() => {
-      // show connection screen after delay
-      setTimeout(() => dispatch(replace('/connect')), 1000);
-    });
-  };
-};
-
-const logout = (backend) => {
-  return (dispatch) => {
-    return backend.logout().then(() => {
-      dispatch(replace('/'));
-    });
-  };
-};
+const login = (backend, account) => () => backend.login(account);
+const logout = (backend) => () => backend.logout();
 
 export default { login, logout, loginChange };
diff --git a/app/app.js b/app/app.js
index a7c0aca8f3..f717dc87d0 100644
--- a/app/app.js
+++ b/app/app.js
@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { Router, hashHistory } from 'react-router';
-import { syncHistoryWithStore } from 'react-router-redux';
+import { syncHistoryWithStore, replace } from 'react-router-redux';
 import { webFrame } from 'electron';
 import routes from './routes';
 import configureStore from './store';
@@ -67,6 +67,11 @@ backend.on(Backend.EventType.logging, (account) => {
 backend.on(Backend.EventType.login, (account, error) => {
   const status = error ? LoginState.failed : LoginState.ok;
   store.dispatch(userActions.loginChange({ status, error }));
+  
+  // redirect to main screen after delay
+  if(status === LoginState.ok) {
+    setTimeout(() => store.dispatch(replace('/connect')), 1000);
+  }
 });
 
 backend.on(Backend.EventType.logout, () => {
@@ -75,6 +80,9 @@ backend.on(Backend.EventType.logout, () => {
     account: null,
     error: null
   }));
+
+  // return to login screen
+  store.dispatch(replace('/'));
 });
 
 // helper method for router to pass backend down the component tree
diff --git a/app/components/Connect.js b/app/components/Connect.js
index 578460f76b..0898f28a44 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -1,18 +1,32 @@
-import React, { Component } from 'react';
+import React, { Component, PropTypes } from 'react';
 import { If, Then } from 'react-if';
 import { Layout, Container, Header } from './Layout';
 import { servers } from '../constants';
 
 export default class Connect extends Component {
+  
+  static propTypes = {
+    settings: PropTypes.object.isRequired,
+    onConnect: PropTypes.func.isRequired,
+    onDisconnect: PropTypes.func.isRequired
+  };
 
   onSettings() {
     this.props.router.push('/settings');
   }
 
-  openLocationPicker() {
+  onSelectLocation() {
     this.props.router.push('/select-location');
   }
 
+  onConnect() {
+    this.props.onConnect();
+  }
+
+  onDisconnect() {
+    this.props.onDisconnect();
+  }
+
   serverName(key) {
     switch(key) {
       case 'fastest': return 'Fastest';
@@ -35,7 +49,7 @@ export default class Connect extends Component {
               <div className="connect__footer">
                 
                 <div className="connect__row">
-                  <div className="connect__server" onClick={ ::this.openLocationPicker }>
+                  <div className="connect__server" onClick={ ::this.onSelectLocation }>
                     <div className="connect__server-label">Connect to</div>                    
                     <div className="connect__server-value">
 
@@ -58,7 +72,7 @@ export default class Connect extends Component {
                 </div>
 
                 <div className="connect__row">
-                  <button className="connect__secure-button">Secure my connection</button>
+                  <button className="connect__secure-button" onClick={ ::this.onConnect }>Secure my connection</button>
                 </div>
 
               </div>
diff --git a/app/lib/backend.js b/app/lib/backend.js
index 288ea6d181..8e08ab237c 100644
--- a/app/lib/backend.js
+++ b/app/lib/backend.js
@@ -28,76 +28,51 @@ export default class Backend extends EventEmitter {
   // Public methods
 
   login(account) {
-    return new Promise((resolve, reject) => {
-      this._account = account;
+    this._account = account;
 
-      // emit: logging in
-      this.emit(EventType.logging, account);
+    // emit: logging in
+    this.emit(EventType.logging, account);
 
-      // @TODO: Add login call
-      setTimeout(() => {
-        if(account.startsWith('1111')) {
-          // emit: login
-          this.emit(EventType.login, account);
-
-          resolve(true);
-        } else {
-          const err = new Error('Invalid account number.');
-
-          // emit: login
-          this.emit(EventType.login, account, err);
-
-          reject(err);
-        }
-      }, 2000);
-    });
+    // @TODO: Add login call
+    setTimeout(() => {
+      let err;
+      if(!account.startsWith('1111')) {
+        err = new Error('Invalid account number.');
+      }
+      // emit: login
+      this.emit(EventType.login, account, err);
+    }, 2000);
   }
 
   logout() {
-    return new Promise((resolve, reject) => {
-      this._account = null;
+    this._account = null;
 
-      // emit event
-      this.emit(EventType.logout);
+    // emit event
+    this.emit(EventType.logout);
 
-      // @TODO: Add logout call
-      resolve();
-    });
+    // @TODO: Add logout call
   }
 
   connect(addr) {
-    return new Promise((resolve, reject) => {
-      this._serverAddress = addr;
-      
-      // @TODO: Add connect call
-      setTimeout(() => {
-        if(/se\d+\.mullvad\.net/.test(addr)) {
-
-          // emit: connect
-          this.emit(EventType.connect, addr, err);
-          
-          resolve(true);
-        } else {
-          const err = new Error('Server is unreachable');
-
-          // emit: connect
-          this.emit(EventType.connect, addr, err);
-
-          reject(err);
-        }
-      }, 2000);
-    });
+    this._serverAddress = addr;
+    
+    // @TODO: Add connect call
+    setTimeout(() => {
+      let err;
+      if(!/se\d+\.mullvad\.net/.test(addr)) {
+        err = new Error('Server is unreachable');
+      }
+      // emit: connect
+      this.emit(EventType.connect, addr, err);
+    }, 2000);
   }
 
   disconnect() {
-    return new Promise((resolve, reject) => {
-      this._serverAddress = null;
+    this._serverAddress = null;
 
-      // emit: disconnect
-      this.emit(EventType.disconnect);
+    // emit: disconnect
+    this.emit(EventType.disconnect);
 
-      // @TODO: Add disconnect call
-      resolve();
-    });
+    // @TODO: Add disconnect call
   }
 }