blob: ece8d496bc40e02d822acf302d9138e018436aad (
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
|
import React from 'react'
import { Button, Glyphicon, Alert } from 'react-bootstrap'
import SectionLayout from './section_layout'
import Spinner from 'components/spinner'
import bitmask from 'lib/bitmask'
export default class VPNSection extends React.Component {
static get defaultProps() {return{
account: null
}}
constructor(props) {
super(props)
this.state = {
error: null,
expanded: false,
vpn: "down",
}
this.expand = this.expand.bind(this)
this.connect = this.connect.bind(this)
this.disconnect = this.disconnect.bind(this)
this.cancel = this.cancel.bind(this)
this.unblock = this.unblock.bind(this)
this.location = this.location.bind(this)
}
expand() {
this.setState({expanded: !this.state.expanded})
}
connect() {
this.setState({vpn: "up"})
}
disconnect() {
this.setState({vpn: "down"})
}
cancel() {
}
unblock() {
}
location() {
}
render () {
let message = null
let body = null
let button = null
let icon = null
let header = <h1>VPN</h1>
if (this.state.error) {
// style may be: success, warning, danger, info
message = (
<Alert bsStyle="danger">{this.state.error}</Alert>
)
}
if (this.state.expanded) {
body = <div>traffic details go here</div>
}
switch(this.state.vpn) {
case "down":
button = <Button onClick={this.connect}>Turn ON</Button>
icon = "disabled"
break
case "up":
button = <Button onClick={this.disconnect}>Turn OFF</Button>
icon = "on"
break
case "connecting":
button = <Button onClick={this.cancel}>Cancel</Button>
icon = "wait"
break
case "disconnecting":
button = <Button onClick={this.cancel}>Cancel</Button>
icon = "wait"
break
case "failed":
button = <div>
<Button onClick={this.connect}>Turn ON</Button>
<Button onClick={this.unblock}>Unblock</Button>
</div>
icon = "off"
break
}
return (
<SectionLayout icon="planet" buttons={button} status={icon}
onExpand={this.expand} header={header} body={body} message={message} />
)
}
}
|
