summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--app/assets/css/style.css1
-rw-r--r--app/components/Connect.js6
-rw-r--r--app/components/HeaderBar.css29
-rw-r--r--app/components/HeaderBar.js25
-rw-r--r--app/components/Layout.js12
-rw-r--r--app/components/Settings.css14
-rw-r--r--app/components/Settings.js26
-rw-r--r--app/containers/ConnectPage.js2
-rw-r--r--app/containers/SettingsPage.js19
-rw-r--r--app/routes.js2
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>
);
Copyright © 2025 - 2026 Wayne Cole. WTFPL. Attribution appreciated. No warranty. Not liable for bodily damages.