- Format account in settings page

- Add links to configuration
- Make links work on Settings page

8 files changed, 52 insertions, 50 deletions

diff --git a/app/actions/user.js b/app/actions/user.js
index ac03bf315c..3e856da294 100644
--- a/app/actions/user.js
+++ b/app/actions/user.js
@@ -15,7 +15,7 @@ const login = (backend, account) => {
       dispatch(loginChange({ status: LoginState.ok }));
 
       // show connection screen after delay
-      setTimeout(() => dispatch(replace('/connect')), 4000);
+      setTimeout(() => dispatch(replace('/connect')), 1000);
     } catch(e) {
       dispatch(loginChange({ status: LoginState.failed, error: e }));
     }
diff --git a/app/components/Connect.js b/app/components/Connect.js
index 14315ccc5f..fb86b7509b 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -1,12 +1,8 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
 import { Layout, Container, Header } from './Layout';
 
 export default class Connect extends Component {
 
-  static propTypes = {
-    logout: PropTypes.func.isRequired
-  }
-
   onSettings() {
     this.props.router.push('/settings');
   }
@@ -17,7 +13,7 @@ export default class Connect extends Component {
         <Header showSettings={ true } onSettings={ ::this.onSettings } />
         <Container>
           <div className="connect">
-            <button style={{ width: '100px', display: 'block', margin: '10px auto' }} onClick={ this.props.logout }>Log out</button>
+          
           </div>
         </Container>
       </Layout>
diff --git a/app/components/Login.js b/app/components/Login.js
index 13dd42aad1..c2ff818bc9 100644
--- a/app/components/Login.js
+++ b/app/components/Login.js
@@ -2,7 +2,8 @@ import { shell } from 'electron';
 import React, { Component, PropTypes } from 'react';
 import { If, Then, Else } from 'react-if';
 import { Layout, Container, Header } from './Layout';
-import { createAccountURL, LoginState } from '../constants';
+import { links, LoginState } from '../constants';
+import { formatAccount } from '../lib/formatters';
 
 export default class Login extends Component {
   static propTypes = {
@@ -35,7 +36,7 @@ export default class Login extends Component {
   }
 
   handleCreateAccount() {
-    shell.openExternal(createAccountURL);
+    shell.openExternal(links.createAccount);
   }
 
   handleInputChange(e) {
@@ -56,16 +57,6 @@ export default class Login extends Component {
     }
   }
 
-  formattedAccount(val) {
-    // display number altogether when longer than 12
-    if(val.length > 12) {
-      return val;
-    }
-
-    // display quartets
-    return val.replace(/([0-9]{4})/g, '$1 ').trim();
-  }
-
   formTitle(s) {
     switch(s) {
     case LoginState.connecting: return 'Logging in...';
@@ -132,7 +123,7 @@ export default class Login extends Component {
     const { account, status, error } = this.props.user;
     const title = this.formTitle(status);
     const subtitle = this.formSubtitle(status, error);
-    const displayAccount = this.formattedAccount(account);
+    const displayAccount = formatAccount(account);
     const isConnecting = status === LoginState.connecting;
     const isFailed = status === LoginState.failed;
     const isLoggedIn = status === LoginState.ok;
diff --git a/app/components/Settings.js b/app/components/Settings.js
index 8089482f02..89b70ec69f 100644
--- a/app/components/Settings.js
+++ b/app/components/Settings.js
@@ -1,6 +1,9 @@
 import React, { Component, PropTypes } from 'react';
 import { Layout, Container, Header } from './Layout';
 import Switch from './Switch';
+import { formatAccount } from '../lib/formatters';
+import { links } from '../constants';
+import { shell } from 'electron';
 
 export default class Settings extends Component {
 
@@ -18,6 +21,14 @@ export default class Settings extends Component {
     this.props.updateSettings({ autoSecure: isOn });
   }
 
+  handleLink(key) {
+    shell.openExternal(links[key]);
+  }
+
+  handleLogout() {
+    this.props.logout();
+  }
+
   render() {
     return (
       <Layout>
@@ -30,7 +41,7 @@ export default class Settings extends Component {
                 <h2 className="settings__title">Settings</h2>
                 <div className="settings__account">
                   <div className="settings__account-label">Account ID</div>
-                  <div className="settings__account-id">{ this.props.user.account }</div>
+                  <div className="settings__account-id">{ formatAccount(this.props.user.account) }</div>
                 </div>
               </div>
               <div className="settings__content">
@@ -44,19 +55,19 @@ export default class Settings extends Component {
                   <div className="settings__cell-footer">
                     When this device connects to the internet it will automatically connect to a secure server
                   </div>
-                  <div className="settings__cell">
+                  <div className="settings__cell" onClick={ () => this.handleLink('faq') }>
                     <div className="settings__cell-label">FAQs</div>
                   </div>
-                  <div className="settings__cell">
+                  <div className="settings__cell" onClick={ () => this.handleLink('guides') }>
                     <div className="settings__cell-label">Guides</div>
                   </div>
-                  <div className="settings__cell">
+                  <div className="settings__cell" onClick={ () => this.handleLink('supportEmail') }>
                     <img className="settings__cell-icon" src="./assets/images/icon-email.svg" />
                     <div className="settings__cell-label">Contact support</div>
                   </div>
                 </div>
                 <div className="settings__footer">
-                  <button className="settings__logout-button">Logout</button>
+                  <button className="settings__logout-button" onClick={ ::this.handleLogout }>Logout</button>
                 </div>
               </div>
             </div>
diff --git a/app/components/Switch.js b/app/components/Switch.js
index 16b64b2211..e2a4b7389d 100644
--- a/app/components/Switch.js
+++ b/app/components/Switch.js
@@ -1,5 +1,8 @@
 import React, { Component, PropTypes } from 'react';
 
+const CLICK_TIMEOUT = 1000;
+const MOVE_THRESHOLD = 10;
+
 export default class Switch extends Component {
 
   static propTypes = {
@@ -28,27 +31,21 @@ export default class Switch extends Component {
   }
   
   handleMouseMove(e) {
-    if(!this.state.isTracking) {
-      return;
-    }
+    if(!this.state.isTracking) { return; }
 
-    const thresholdX = 10, thresholdY = 50;
-    const { x: x0, y: y0 } = this.state.initialPos;
+    const { x: startX } = this.state.initialPos;
     const { pageX: x, pageY: y } = e;
 
-    const dx = Math.abs(x0 - x);
-    const dy = Math.abs(y0 - y);
+    const dx = Math.abs(startX - x);
 
-    if(dx < thresholdX || dy > thresholdY) {
-      return;
-    }
+    if(dx < MOVE_THRESHOLD) { return; }
 
     const isOn = !!this.props.isOn;
     let nextOn = isOn;
 
-    if(x < x0 && isOn) {
+    if(x < startX && isOn) {
       nextOn = false;
-    } else if(x > x0 && !isOn) {
+    } else if(x > startX && !isOn) {
       nextOn = true;
     }
     
@@ -68,14 +65,12 @@ export default class Switch extends Component {
   }
 
   handleChange(e) {
-    console.log('ONCHANGE ' + e.target.checked);
-    const delta = e.timeStamp - this.state.startTime;
-    const threshold = 1000;
+    const dt = e.timeStamp - this.state.startTime;
 
     if(this.state.ignoreChange) {
       e.preventDefault();
       this.setState({ ignoreChange: false });
-    } else if(delta > threshold) {
+    } else if(dt > CLICK_TIMEOUT) {
       e.preventDefault();
     } else {
       this.notify(e.target.checked);
@@ -104,4 +99,4 @@ export default class Switch extends Component {
              onMouseDown={ ::this.handleMouseDown } onChange={ ::this.handleChange } />
     );
   }
-}
\ No newline at end of file
+}
diff --git a/app/constants.js b/app/constants.js
index 4e465dc74f..e8ae43fa4d 100644
--- a/app/constants.js
+++ b/app/constants.js
@@ -3,6 +3,11 @@ import Enum from './lib/enum';
 const LoginState = Enum('none', 'connecting', 'failed', 'ok');
 
 module.exports = {
-  createAccountURL: 'https://mullvad.net/account/create/',
+  links: {
+    createAccount: 'https://mullvad.net/account/create/',
+    faq: 'https://mullvad.net/faq/',
+    guides: 'https://mullvad.net/guides/',
+    supportEmail: 'mailto:support@mullvad.net'
+  },
   LoginState
 };
diff --git a/app/containers/ConnectPage.js b/app/containers/ConnectPage.js
index f366546c4a..5444190609 100644
--- a/app/containers/ConnectPage.js
+++ b/app/containers/ConnectPage.js
@@ -7,13 +7,8 @@ const mapStateToProps = (state) => {
   return state;
 };
 
-const mapDispatchToProps = (dispatch, props) => {
-  const user = bindActionCreators(userActions, dispatch);
-  return {
-    logout: () => {
-      return user.logout(props.backend);
-    }
-  };
+const mapDispatchToProps = (dispatch) => {
+  return {};
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Connect);
diff --git a/app/lib/formatters.js b/app/lib/formatters.js
new file mode 100644
index 0000000000..b850b20393
--- /dev/null
+++ b/app/lib/formatters.js
@@ -0,0 +1,9 @@
+export const formatAccount = (val) => {
+    // display number altogether when longer than 12
+    if(val.length > 12) {
+      return val;
+    }
+
+    // display quartets
+    return val.replace(/([0-9]{4})/g, '$1 ').trim();
+};