blob: acbdb762e3af7a2fe724fbbd75736e7259cdaf69 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
|
import React, { Component, PropTypes } from 'react';
import { Layout, Container, Header } from './Layout';
import { servers } from '../constants';
export default class SelectLocation extends Component {
static propTypes = {
updateSettings: PropTypes.func.isRequired
}
onClose() {
this.props.router.push('/connect');
}
handleSelection(name) {
console.log('Selected: ', name);
}
handleFastest() {
console.log('Selected: FASTEST');
}
handleNearest() {
console.log('Selected: NEAREST');
}
render() {
return (
<Layout>
<Header hidden={ true } style={ Header.Style.defaultDark } />
<Container>
<div className="select-location">
<button className="select-location__close" onClick={ ::this.onClose } />
<div className="select-location__container">
<div className="select-location__header">
<h2 className="select-location__title">Select location</h2>
<div className="select-location__subtitle">
While connected, your real location is masked with a private and secure location in the selected region
</div>
</div>
<div className="select-location__list">
<div>
<div className="select-location__cell" onClick={ ::this.handleFastest }>
<img className="select-location__cell-icon" src="./assets/images/icon-fastest.svg" />
<div className="select-location__cell-label">Fastest</div>
</div>
<div className="select-location__cell" onClick={ ::this.handleNearest }>
<img className="select-location__cell-icon" src="./assets/images/icon-nearest.svg" />
<div className="select-location__cell-label">Nearest</div>
</div>
<div className="select-location__separator"></div>
{
servers.map((name) => (
<div className="select-location__cell" key={ name } onClick={ this.handleSelection.bind(this, name) }>
<div className="select-location__cell-label">{ name }</div>
</div>))
}
</div>
</div>
</div>
</div>
</Container>
</Layout>
);
}
}
|
