- Format account in settings page

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

1 files changed, 16 insertions, 5 deletions

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>