summaryrefslogtreecommitdiffhomepage
path: root/app
diff options
context:
space:
mode:
Diffstat (limited to 'app')
-rw-r--r--app/actions/user.js2
-rw-r--r--app/components/Connect.js8
-rw-r--r--app/components/Login.js17
-rw-r--r--app/components/Settings.js21
-rw-r--r--app/components/Switch.js29
-rw-r--r--app/constants.js7
-rw-r--r--app/containers/ConnectPage.js9
-rw-r--r--app/lib/formatters.js9
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();
+};
Copyright © 2025 - 2026 Wayne Cole. WTFPL. Attribution appreciated. No warranty. Not liable for bodily damages.