summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
Diffstat
-rw-r--r--app/components/AdvancedSettings.js157
-rw-r--r--app/components/Connect.js3
-rw-r--r--app/components/SelectLocation.js5
-rw-r--r--app/containers/AdvancedSettingsPage.js20
-rw-r--r--app/containers/SelectLocationPage.js4
-rw-r--r--app/lib/backend.js14
-rw-r--r--app/lib/ipc-facade.js2
-rw-r--r--app/redux/settings/actions.js2
-rw-r--r--app/redux/settings/reducers.js17
-rw-r--r--test/components/Connect.spec.js10
-rw-r--r--test/components/SelectLocation.spec.js6
-rw-r--r--test/components/Settings.spec.js6
12 files changed, 134 insertions, 112 deletions
diff --git a/app/components/AdvancedSettings.js b/app/components/AdvancedSettings.js
index 1ba25a924f..37eac1cb5b 100644
--- a/app/components/AdvancedSettings.js
+++ b/app/components/AdvancedSettings.js
@@ -4,87 +4,112 @@ import React from 'react';
import { Layout, Container, Header } from './Layout';
import CustomScrollbars from './CustomScrollbars';
-type Props = {
- onClose: () => void,
- protocol: string,
- port: string|number,
- updateConstraints: (string, string|number) => void,
-};
-export function AdvancedSettings(props: Props) {
+export class AdvancedSettings extends React.Component {
- let portSelector = null;
- let protocol = props.protocol.toUpperCase();
+ props: {
+ onClose: () => void,
+ protocol: string,
+ port: string|number,
+ updateConstraints: (string, string|number) => void,
+ };
- if (protocol === 'AUTOMATIC') {
- protocol = 'Automatic';
- } else {
- portSelector = createPortSelector(props);
- }
+ render() {
+ let portSelector = null;
+ let protocol = this.props.protocol.toUpperCase();
- return <BaseLayout onClose={ props.onClose }>
+ if (protocol === 'AUTOMATIC') {
+ protocol = 'Automatic';
+ } else {
+ portSelector = this._createPortSelector();
+ }
- <Selector
- title={ 'Network protocols' }
- values={ ['Automatic', 'UDP', 'TCP'] }
- value={ protocol }
- onSelect={ protocol => {
- // $FlowFixMe
- props.updateConstraints(protocol, 'Automatic');
- }}/>
+ return <BaseLayout onClose={ this.props.onClose }>
- <div className="settings__cell-spacer"></div>
+ <Selector
+ title={ 'Network protocols' }
+ values={ ['Automatic', 'UDP', 'TCP'] }
+ value={ protocol }
+ onSelect={ protocol => {
+ this.props.updateConstraints(protocol, 'Automatic');
+ }}/>
- { portSelector }
+ <div className="settings__cell-spacer"></div>
- </BaseLayout>;
+ { portSelector }
-}
+ </BaseLayout>;
+ }
-function createPortSelector(props) {
- const protocol = props.protocol.toUpperCase();
- const ports = protocol === 'TCP'
- ? ['Automatic', 80, 443]
- : ['Automatic', 1194, 1195, 1196, 1197, 1300, 1301, 1302];
+ _createPortSelector() {
+ const protocol = this.props.protocol.toUpperCase();
+ const ports = protocol === 'TCP'
+ ? ['Automatic', 80, 443]
+ : ['Automatic', 1194, 1195, 1196, 1197, 1300, 1301, 1302];
- return <Selector
- title={ protocol + ' port' }
- values={ ports }
- value={ props.port }
- onSelect={ port => {
- props.updateConstraints(protocol, port);
- }} />;
+ return <Selector
+ title={ protocol + ' port' }
+ values={ ports }
+ value={ this.props.port }
+ onSelect={ port => {
+ this.props.updateConstraints(protocol, port);
+ }} />;
+ }
}
-function Selector(props) {
- return <div>
- <Cell
- label={ props.title }
- />
- { props.values.map(value => renderCell(value)) }
- </div>;
+class Selector extends React.Component {
- function renderCell(value) {
- const selected = value === props.value;
+ props: {
+ title: string,
+ values: Array<*>,
+ value: *,
+ onSelect: (*) => void,
+ }
+
+ render() {
+ return <div>
+ <div className="settings__cell">
+ <div className="settings__cell-label">{ this.props.title }</div>
+ </div>
+
+ { this.props.values.map(value => this._renderCell(value)) }
+ </div>;
+ }
- let className = 'settings__sub-cell';
- let tick = null;
+ _renderCell(value) {
+ const selected = value === this.props.value;
if (selected) {
- className = 'settings__cell--selected';
- tick = <img src='./assets/images/icon-tick.svg' />;
+ return this._renderSelectedCell(value);
+ } else {
+ return this._renderUnselectedCell(value);
}
- const label = <div className={ 'settings__sub-cell--label' }>
- { tick }
- { value }
+ }
+
+ _renderSelectedCell(value) {
+ const onCellClick = () => this.props.onSelect(value);
+
+ return <div
+ key={ value }
+ className={ 'settings__cell--selected settings__cell' }
+ onClick={ onCellClick } >
+ <div className="settings__cell-label">
+ <div className={ 'settings__sub-cell--label' }>
+ <img src='./assets/images/icon-tick.svg' />
+ { value }
+ </div>
+ </div>
</div>;
+ }
- const onCellClick = () => props.onSelect(value);
+ _renderUnselectedCell(value) {
+ const onCellClick = () => this.props.onSelect(value);
- return <Cell
+ return <div
key={ value }
- label={ label }
- className={ className }
- onClick={ onCellClick } />;
+ className={ 'settings__cell settings__sub-cell' }
+ onClick={ onCellClick } >
+ <div className="settings__cell-label">{ value }</div>
+ </div>;
}
}
@@ -113,15 +138,3 @@ function BaseLayout(props) {
</Layout>;
}
-function Cell(props) {
-
- const className = props.className || '';
- return <div
- className={ className + ' settings__cell' }
- onClick={ props.onClick || null } >
- <div className="settings__cell-label">{ props.label }</div>
- <div className="settings__cell-value">
- { props.value || null }
- </div>
- </div>;
-}
diff --git a/app/components/Connect.js b/app/components/Connect.js
index 531174b464..3b4029fe76 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -104,8 +104,7 @@ export default class Connect extends Component {
};
}
- return this.props.getServerInfo(relayConstraints.host.only);
-
+ return this.props.getServerInfo(relayConstraints.host);
}
renderMap(): React.Element<*> {
diff --git a/app/components/SelectLocation.js b/app/components/SelectLocation.js
index c5180a3ffa..c6325ae2a5 100644
--- a/app/components/SelectLocation.js
+++ b/app/components/SelectLocation.js
@@ -25,10 +25,7 @@ export default class SelectLocation extends Component {
isSelected(server: string) {
const { host } = this.props.settings.relayConstraints;
- if (host === 'any') {
- return false;
- }
- return server === host.only;
+ return server === host;
}
drawCell(key: string, name: string, icon: ?string, onClick: (e: Event) => void): React.Element<*> {
diff --git a/app/containers/AdvancedSettingsPage.js b/app/containers/AdvancedSettingsPage.js
index 22dbdf8ec1..ecb78eb218 100644
--- a/app/containers/AdvancedSettingsPage.js
+++ b/app/containers/AdvancedSettingsPage.js
@@ -5,17 +5,18 @@ import settingsActions from '../redux/settings/actions';
import log from 'electron-log';
const mapStateToProps = (state) => {
+ const contraints = state.settings.relayConstraints;
return {
- protocol: tryOrElse( () => state.settings.relayConstraints.tunnel.openvpn.protocol.only, 'Automatic'),
- port: tryOrElse( () => state.settings.relayConstraints.tunnel.openvpn.port.only, 'Automatic'),
+ protocol: anyToAuto(contraints.protocol),
+ port: anyToAuto(contraints.port),
};
};
-function tryOrElse(toTry, orElse) {
- try {
- return toTry() || orElse;
- } catch (e) {
- return orElse;
+function anyToAuto(constraint) {
+ if (constraint === 'any') {
+ return 'Automatic';
+ } else {
+ return constraint;
}
}
@@ -42,7 +43,10 @@ const mapDispatchToProps = (dispatch, props) => {
};
backend.updateRelayConstraints(update)
- .then( () => dispatch(settingsActions.updateRelay(update)))
+ .then( () => dispatch(settingsActions.updateRelay({
+ port: typeof(portConstraint) === 'object' ? portConstraint.only : portConstraint,
+ protocol: typeof(protConstraint) === 'object' ? protConstraint.only : protConstraint,
+ })))
.catch( e => log.error('Failed updating relay constraints', e.message));
},
};
diff --git a/app/containers/SelectLocationPage.js b/app/containers/SelectLocationPage.js
index 9e5551130c..7ca2f1eb0a 100644
--- a/app/containers/SelectLocationPage.js
+++ b/app/containers/SelectLocationPage.js
@@ -22,7 +22,9 @@ const mapDispatchToProps = (dispatch, props) => {
};
backend.updateRelayConstraints(update)
- .then( () => dispatch(settingsActions.updateRelay(update)))
+ .then( () => dispatch(settingsActions.updateRelay({
+ host: preferredServer,
+ })))
.then( () => backend.connect())
.catch( e => log.error('Failed updating relay constraints', e.message));
diff --git a/app/lib/backend.js b/app/lib/backend.js
index 89a895b4c4..7e5e21708f 100644
--- a/app/lib/backend.js
+++ b/app/lib/backend.js
@@ -317,11 +317,13 @@ export class Backend {
const host = constraints.host === 'any'
? defaultServer
- : constraints.host || defaultServer;
+ : constraints.host.only || defaultServer;
+ const openvpn = constraints.tunnel.openvpn;
this._store.dispatch(settingsActions.updateRelay({
host: host,
- tunnel: constraints.tunnel,
+ port: this._apiToReduxConstraints(openvpn.port),
+ protocol: this._apiToReduxConstraints(openvpn.protocol),
}));
})
.catch( e => {
@@ -329,6 +331,14 @@ export class Backend {
});
}
+ _apiToReduxConstraints(constraint: *): * {
+ if (typeof(constraint) === 'object') {
+ return constraint.only;
+ } else {
+ return constraint;
+ }
+ }
+
/**
* Start reachability monitoring for online/offline detection
* This is currently done via HTML5 APIs but will be replaced later
diff --git a/app/lib/ipc-facade.js b/app/lib/ipc-facade.js
index 9f3f900331..7a71861ae5 100644
--- a/app/lib/ipc-facade.js
+++ b/app/lib/ipc-facade.js
@@ -25,7 +25,7 @@ export type BackendState = {
state: SecurityState,
target_state: SecurityState,
};
-export type RelayConstraints = {
+type RelayConstraints = {
host: 'any' | { only: string },
tunnel: {
openvpn: {
diff --git a/app/redux/settings/actions.js b/app/redux/settings/actions.js
index 041da76389..6bb6b0ed71 100644
--- a/app/redux/settings/actions.js
+++ b/app/redux/settings/actions.js
@@ -1,6 +1,6 @@
// @flow
-import type { RelayConstraints } from '../../lib/ipc-facade';
+import type { RelayConstraints } from './reducers';
export type UpdateRelayAction = {
type: 'UPDATE_RELAY',
diff --git a/app/redux/settings/reducers.js b/app/redux/settings/reducers.js
index 665a4c465e..e16f25a068 100644
--- a/app/redux/settings/reducers.js
+++ b/app/redux/settings/reducers.js
@@ -3,19 +3,22 @@
import { defaultServer } from '../../config';
import type { ReduxAction } from '../store';
-import type { RelayConstraints } from '../../lib/ipc-facade';
+
+export type RelayConstraints = {
+ host: string,
+ port: 'any' | number,
+ protocol: 'any' | 'tcp' | 'udp',
+};
export type SettingsReduxState = {
- relayConstraints: RelayConstraints,
+ relayConstraints: RelayConstraints
};
const initialState: SettingsReduxState = {
relayConstraints: {
- host: { only: defaultServer },
- tunnel: { openvpn: {
- port: 'any',
- protocol: 'any',
- }},
+ host: defaultServer,
+ port: 'any',
+ protocol: 'any',
},
};
diff --git a/test/components/Connect.spec.js b/test/components/Connect.spec.js
index 5c342bff12..4b84b3b8da 100644
--- a/test/components/Connect.spec.js
+++ b/test/components/Connect.spec.js
@@ -108,7 +108,7 @@ describe('components/Connect', () => {
component.setProps({
settings: {
relayConstraints: {
- host: { only: 'se1.mullvad.net' },
+ host: 'se1.mullvad.net',
},
},
});
@@ -187,11 +187,9 @@ const defaultProps = {
accountExpiry: '',
settings: {
relayConstraints: {
- host: { only: 'www.example.com' },
- tunnel: { openvpn: {
- port: 'any',
- protocol: 'any',
- }},
+ host: 'www.example.com',
+ port: 'any',
+ protocol: 'any',
},
},
connection: defaultConnection,
diff --git a/test/components/SelectLocation.spec.js b/test/components/SelectLocation.spec.js
index a3565a6704..28c9299807 100644
--- a/test/components/SelectLocation.spec.js
+++ b/test/components/SelectLocation.spec.js
@@ -12,10 +12,8 @@ describe('components/SelectLocation', () => {
const state: SettingsReduxState = {
relayConstraints: {
host: 'any',
- tunnel: { openvpn: {
- port: 'any',
- protocol: 'any',
- }},
+ port: 'any',
+ protocol: 'any',
},
};
diff --git a/test/components/Settings.spec.js b/test/components/Settings.spec.js
index 2f562051b5..85fd72ece5 100644
--- a/test/components/Settings.spec.js
+++ b/test/components/Settings.spec.js
@@ -34,10 +34,8 @@ describe('components/Settings', () => {
const settingsState: SettingsReduxState = {
relayConstraints: {
host: 'any',
- tunnel: { openvpn: {
- port: 'any',
- protocol: 'any',
- }},
+ port: 'any',
+ protocol: 'any',
},
};
Copyright © 2025 - 2026 Wayne Cole. WTFPL. Attribution appreciated. No warranty. Not liable for bodily damages.