diff options
| -rw-r--r-- | app/actions/connect.js | 2 | ||||
| -rw-r--r-- | app/app.js | 4 | ||||
| -rw-r--r-- | app/components/Connect.css | 17 | ||||
| -rw-r--r-- | app/components/Connect.js | 87 | ||||
| -rw-r--r-- | app/lib/backend.js | 38 | ||||
| -rw-r--r-- | app/reducers/connect.js | 8 |
6 files changed, 124 insertions, 32 deletions
diff --git a/app/actions/connect.js b/app/actions/connect.js index 2d629d8a1c..729de9570f 100644 --- a/app/actions/connect.js +++ b/app/actions/connect.js @@ -3,6 +3,6 @@ import { ConnectionState } from '../constants'; const connectionChange = createAction('CONNECTION_CHANGE'); const connect = (backend, addr) => (dispatch, getState) => backend.connect(addr); -const disconnect = (backend) => (dispatch, getState) => backend.disconect(); +const disconnect = (backend) => (dispatch, getState) => backend.disconnect(); export default { connect, disconnect, connectionChange }; diff --git a/app/app.js b/app/app.js index f717dc87d0..0e3b2c37eb 100644 --- a/app/app.js +++ b/app/app.js @@ -35,6 +35,10 @@ const backend = new Backend(); // Setup events +backend.on(Backend.EventType.updatedIp, (clientIp) => { + store.dispatch(connectActions.connectionChange({ clientIp })); +}) + backend.on(Backend.EventType.connecting, (serverAddress) => { store.dispatch(connectActions.connectionChange({ status: ConnectionState.connecting, diff --git a/app/components/Connect.css b/app/components/Connect.css index 812797ae6b..b494e9ab3c 100644 --- a/app/components/Connect.css +++ b/app/components/Connect.css @@ -74,12 +74,11 @@ margin-left: 8px; } -.connect__secure-button { +.connect__footer-button { display: block; width:100%; border: 0; padding: 7px 12px 9px; - background-color: #44AD4D; border-radius: 4px; font-family: DINPro; font-size: 20px; @@ -89,6 +88,20 @@ color: #FFFFFF; } +.connect__footer-button--connect { + background-color: #44AD4D; +} + +.connect__footer-button--disconnect { + background-color: rgba(208,2,27,0.4); + backdrop-filter: blur(2px); +} + +.connect__footer-button--switch { + background-color: rgba(255,255,255,0.2); + backdrop-filter: blur(2px); +} + .connect__status { padding: 0 24px; margin-top: auto; diff --git a/app/components/Connect.js b/app/components/Connect.js index 6d15d44ee7..83e49e3c2d 100644 --- a/app/components/Connect.js +++ b/app/components/Connect.js @@ -68,6 +68,8 @@ export default class Connect extends Component { const preferredServer = this.props.settings.preferredServer; const serverName = this.serverName(preferredServer); const isConnecting = this.props.connect.status === ConnectionState.connecting; + const isConnected = this.props.connect.status === ConnectionState.connected; + const isDisconnected = this.props.connect.status === ConnectionState.disconnected; return ( <Layout> @@ -88,40 +90,75 @@ export default class Connect extends Component { </If> <div className={ this.networkSecurityClass() }>{ this.networkSecurityMessage() }</div> - <div className="connect__status-location">Gothenburg<br/>Sweden</div> - <div className="connect__status-ipaddress">193.138.219.245</div> + <div className="connect__status-location">{ "City" }<br/>{ serverName }</div> + <div className="connect__status-ipaddress">{ this.props.connect.clientIp }</div> </div> - <div className="connect__footer"> - - <div className="connect__row"> - <div className="connect__server" onClick={ ::this.onSelectLocation }> - <div className="connect__server-label">Connect to</div> - <div className="connect__server-value"> + { /* footer when disconnected */ } + <If condition={ isDisconnected }> + <Then> + <div className="connect__footer"> + <div className="connect__row"> + + <div className="connect__server" onClick={ ::this.onSelectLocation }> + <div className="connect__server-label">Connect to</div> + <div className="connect__server-value"> - <If condition={ preferredServer === 'fastest' }> - <Then> - <img className="connect__server-icon" src="./assets/images/icon-fastest.svg" /> - </Then> - </If> - - <If condition={ preferredServer === 'nearest' }> - <Then> - <img className="connect__server-icon" src="./assets/images/icon-nearest.svg" /> - </Then> - </If> + <If condition={ preferredServer === 'fastest' }> + <Then> + <img className="connect__server-icon" src="./assets/images/icon-fastest.svg" /> + </Then> + </If> + + <If condition={ preferredServer === 'nearest' }> + <Then> + <img className="connect__server-icon" src="./assets/images/icon-nearest.svg" /> + </Then> + </If> - <div className="connect__server-name">{ serverName }</div> + <div className="connect__server-name">{ serverName }</div> + + </div> + </div> + </div> + <div className="connect__row"> + <button className="connect__footer-button connect__footer-button--connect" onClick={ ::this.onConnect }>Secure my connection</button> </div> </div> - </div> + </Then> + </If> + + { /* footer when connecting */ } + <If condition={ isConnecting }> + <Then> + <div className="connect__footer"> + <div className="connect__row"> + <button className="connect__footer-button connect__footer-button--switch" onClick={ ::this.onSelectLocation }>Switch location</button> + </div> - <div className="connect__row"> - <button className="connect__secure-button" onClick={ ::this.onConnect }>Secure my connection</button> - </div> + <div className="connect__row"> + <button className="connect__footer-button connect__footer-button--disconnect" onClick={ ::this.onDisconnect }>Cancel</button> + </div> + </div> + </Then> + </If> + + { /* footer when connected */ } + <If condition={ isConnected }> + <Then> + <div className="connect__footer"> + <div className="connect__row"> + <button className="connect__footer-button connect__footer-button--switch" onClick={ ::this.onSelectLocation }>Switch location</button> + </div> + + <div className="connect__row"> + <button className="connect__footer-button connect__footer-button--disconnect" onClick={ ::this.onDisconnect }>Disconnect</button> + </div> + </div> + </Then> + </If> - </div> </div> </div> </Container> diff --git a/app/lib/backend.js b/app/lib/backend.js index 496194d7d4..095f1a9eba 100644 --- a/app/lib/backend.js +++ b/app/lib/backend.js @@ -1,7 +1,7 @@ import Enum from './enum'; import { EventEmitter } from 'events'; -const EventType = Enum('connect', 'connecting', 'disconnect', 'login', 'logging', 'logout'); +const EventType = Enum('connect', 'connecting', 'disconnect', 'login', 'logging', 'logout', 'updatedIp'); /** * Backend implementation @@ -17,6 +17,10 @@ export default class Backend extends EventEmitter { this._account = null; this._loggedIn = false; this._serverAddress = null; + this._cancellationHandler = null; + + // update IP in background + setTimeout(::this.refreshIp, 0); } // Accessors @@ -60,22 +64,52 @@ export default class Backend extends EventEmitter { this.emit(EventType.connecting, addr); // @TODO: Add connect call - setTimeout(() => { + let timer = null; + + timer = setTimeout(() => { let err; if(!/se\d+\.mullvad\.net/.test(addr)) { err = new Error('Server is unreachable'); } // emit: connect this.emit(EventType.connect, addr, err); + this.refreshIp(); + + // reset timer + timer = null; + this._cancellationHandler = null; }, 5000); + + this._cancellationHandler = () => { + if(timer !== null) { + clearTimeout(timer); + this._timer = null; + } + this._cancellationHandler = null; + } } disconnect() { this._serverAddress = null; + // cancel ongoing connection attempt + if(this._cancellationHandler) { + this._cancellationHandler(); + } else { + this.refreshIp(); + } + // emit: disconnect this.emit(EventType.disconnect); // @TODO: Add disconnect call } + + refreshIp() { + let ip = []; + for(let i = 0; i < 4; i++) { + ip.push(parseInt(Math.random() * 254)); + } + this.emit(EventType.updatedIp, ip.join('.')); + } } diff --git a/app/reducers/connect.js b/app/reducers/connect.js index edd00abb1f..ea830c3c25 100644 --- a/app/reducers/connect.js +++ b/app/reducers/connect.js @@ -1,8 +1,12 @@ import { handleActions } from 'redux-actions'; - +import { ConnectionState } from '../constants'; import actions from '../actions/connect'; -const initialState = {}; +const initialState = { + status: ConnectionState.disconnected, + serverAddress: null, + clientIp: null +}; export default handleActions({ [actions.connectionChange]: (state, action) => { |