summaryrefslogtreecommitdiffhomepage
path: root/app/components
diff options
context:
space:
mode:
Diffstat (limited to 'app/components')
-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
4 files changed, 34 insertions, 41 deletions
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
+}
Copyright © 2025 - 2026 Wayne Cole. WTFPL. Attribution appreciated. No warranty. Not liable for bodily damages.