Add settings pane

10 files changed, 127 insertions, 9 deletions

diff --git a/app/assets/css/style.css b/app/assets/css/style.css
index 3b8706f63e..e7cc339332 100644
--- a/app/assets/css/style.css
+++ b/app/assets/css/style.css
@@ -3,5 +3,6 @@
 @import 'global.css';
 @import '../../components/Login.css';
 @import '../../components/Connect.css';
+@import '../../components/Settings.css';
 @import '../../components/HeaderBar.css';
 @import '../../components/Layout.css';
diff --git a/app/components/Connect.js b/app/components/Connect.js
index 27aaedd4ee..14315ccc5f 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -7,10 +7,14 @@ export default class Connect extends Component {
     logout: PropTypes.func.isRequired
   }
 
+  onSettings() {
+    this.props.router.push('/settings');
+  }
+
   render() {
     return (
       <Layout>
-        <Header />
+        <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>
diff --git a/app/components/HeaderBar.css b/app/components/HeaderBar.css
index 140e64df55..d250cfd968 100644
--- a/app/components/HeaderBar.css
+++ b/app/components/HeaderBar.css
@@ -19,6 +19,10 @@
   background-repeat: no-repeat;
 }
 
+.headerbar--hidden { 
+  padding: 12px 0 0 0;
+}
+
 .headerbar--style-error {
   background-color: #D0021B;
 }
@@ -35,6 +39,12 @@
   background-image: url(../assets/images/app-triangle-success.svg);
 }
 
+.headerbar__container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
 .headerbar__title {
   font-family: DINPro;
   font-size: 24px;
@@ -50,4 +60,23 @@
   height: 50px;
   display: inline-block;
   vertical-align: middle;
+}
+
+.headerbar__left {
+  flex: 1 1 auto;
+}
+
+.headerbar__right {
+  flex: 0 0 auto;
+}
+
+.headerbar__settings {
+  display: block;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  width: 24px;
+  height: 24px;
+  background-color: transparent;
+  background-image: url(../assets/images/icon-settings.svg);
 }
\ No newline at end of file
diff --git a/app/components/HeaderBar.js b/app/components/HeaderBar.js
index ce5d039f1f..decf561f5d 100644
--- a/app/components/HeaderBar.js
+++ b/app/components/HeaderBar.js
@@ -1,4 +1,5 @@
 import React, { Component, PropTypes } from 'react';
+import { If } from 'react-if';
 import Enum from '../lib/enum';
 
 export default class HeaderBar extends Component {
@@ -7,7 +8,10 @@ export default class HeaderBar extends Component {
   static Style = Enum('default', 'error', 'success');
 
   static propTypes = {
-    style: PropTypes.string
+    style: PropTypes.string,
+    hidden: PropTypes.bool,
+    showSettings: PropTypes.bool,
+    onSettings: PropTypes.func
   };
 
   render() {
@@ -18,10 +22,25 @@ export default class HeaderBar extends Component {
       containerClass.push(`headerbar--style-${style}`);
     }
 
+    if(this.props.hidden) {
+      containerClass.push('headerbar--hidden');
+    }
+
     return (
       <div className={ containerClass.join(' ') }>
-        <img className="headerbar__logo" src="./assets/images/logo-icon.svg" />
-        <h2 className="headerbar__title">MULLVAD VPN</h2>
+        <If condition={ !this.props.hidden }>
+          <div className="headerbar__container">
+            <div className="headerbar__left">
+              <img className="headerbar__logo" src="./assets/images/logo-icon.svg" />
+              <h2 className="headerbar__title">MULLVAD VPN</h2>
+            </div>
+            <If condition={ !!this.props.showSettings }>
+              <div className="headerbar__right">
+                <button className="headerbar__settings" onClick={ this.props.onSettings } />
+              </div>
+            </If>
+          </div>
+        </If>
       </div>
     );
   }
diff --git a/app/components/Layout.js b/app/components/Layout.js
index 50f52e7dca..c4e66aed85 100644
--- a/app/components/Layout.js
+++ b/app/components/Layout.js
@@ -8,7 +8,7 @@ export class Header extends Component {
   render() {
     return (
       <div className="layout__header">
-        <HeaderBar {...this.props} />
+        <HeaderBar { ...this.props } />
       </div>
     );
   }
@@ -22,7 +22,7 @@ export class Container extends Component {
   render() {
     return (
       <div className="layout__container">
-        {this.props.children}
+        { this.props.children }
       </div>
     );
   }
@@ -30,12 +30,16 @@ export class Container extends Component {
 
 export class Layout extends Component {
   static propTypes = {
-    children: PropTypes.arrayOf(PropTypes.node).isRequired
+    children: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.element),
+      PropTypes.element,
+    ])
   };
+  
   render() {
     return (
       <div className="layout">
-        {this.props.children}
+        { this.props.children }
       </div>
     );
   }
diff --git a/app/components/Settings.css b/app/components/Settings.css
new file mode 100644
index 0000000000..2468e972f5
--- /dev/null
+++ b/app/components/Settings.css
@@ -0,0 +1,14 @@
+.settings {
+
+}
+
+.settings__close {
+  display: block;
+  border: 0;
+  padding: 0;
+  margin: 0 0 0 12px;
+  width: 24px;
+  height: 24px;
+  background-color: transparent;
+  background-image: url(../assets/images/icon-close.svg);
+}
diff --git a/app/components/Settings.js b/app/components/Settings.js
new file mode 100644
index 0000000000..6e077356c0
--- /dev/null
+++ b/app/components/Settings.js
@@ -0,0 +1,26 @@
+import React, { Component, PropTypes } from 'react';
+import { Layout, Container, Header } from './Layout';
+
+export default class Settings extends Component {
+
+  static propTypes = {
+    logout: PropTypes.func.isRequired
+  }
+
+  onClose() {
+    this.props.router.push('/connect');
+  }
+
+  render() {
+    return (
+      <Layout>
+        <Header hidden={ true } />
+        <Container>
+          <div className="settings">
+            <button className="settings__close" onClick={ ::this.onClose } />
+          </div>
+        </Container>
+      </Layout>
+    );
+  }
+}
diff --git a/app/containers/ConnectPage.js b/app/containers/ConnectPage.js
index 9802e8b2d8..f366546c4a 100644
--- a/app/containers/ConnectPage.js
+++ b/app/containers/ConnectPage.js
@@ -7,7 +7,7 @@ const mapStateToProps = (state) => {
   return state;
 };
 
-const mapDispatchToProps = (dispatch, props) => { // eslint-disable-line no-unused-vars
+const mapDispatchToProps = (dispatch, props) => {
   const user = bindActionCreators(userActions, dispatch);
   return {
     logout: () => {
diff --git a/app/containers/SettingsPage.js b/app/containers/SettingsPage.js
new file mode 100644
index 0000000000..eb70ad00b8
--- /dev/null
+++ b/app/containers/SettingsPage.js
@@ -0,0 +1,19 @@
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import Settings from '../components/Settings';
+import userActions from '../actions/user';
+
+const mapStateToProps = (state) => {
+  return state;
+};
+
+const mapDispatchToProps = (dispatch, props) => {
+  const user = bindActionCreators(userActions, dispatch);
+  return {
+    logout: () => {
+      return user.logout(props.backend);
+    }
+  };
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(Settings);
diff --git a/app/routes.js b/app/routes.js
index 0a98bba2d2..cff78c9d65 100644
--- a/app/routes.js
+++ b/app/routes.js
@@ -4,10 +4,12 @@ import { Route, IndexRoute } from 'react-router';
 import App from './containers/App';
 import LoginPage from './containers/LoginPage';
 import ConnectPage from './containers/ConnectPage';
+import SettingsPage from './containers/SettingsPage';
 
 export default (
   <Route path="/" component={ App }>
     <IndexRoute component={ LoginPage } />
     <Route path="connect" component={ ConnectPage } />
+    <Route path="settings" component={ SettingsPage } />
   </Route>
 );