summaryrefslogtreecommitdiff
path: root/ui/app/components
diff options
context:
space:
mode:
authorelijah <elijah@riseup.net>2017-03-15 11:51:02 +0100
committerKali Kaneko (leap communications) <kali@leap.se>2017-03-15 19:11:59 +0100
commit9a4a2576de301759500f4c7b9498a452fb3829a0 (patch)
treeae12eab08af2ea6ddb34059629a85ddc759a2036 /ui/app/components
parent5cbd979690212ac414bd7d399ec5183190fbf6f2 (diff)
[feat] minimal vpn ui
Diffstat (limited to 'ui/app/components')
-rw-r--r--ui/app/components/main_panel/vpn_section.js90
1 files changed, 86 insertions, 4 deletions
diff --git a/ui/app/components/main_panel/vpn_section.js b/ui/app/components/main_panel/vpn_section.js
index ece8d49..400d213 100644
--- a/ui/app/components/main_panel/vpn_section.js
+++ b/ui/app/components/main_panel/vpn_section.js
@@ -16,7 +16,7 @@ export default class VPNSection extends React.Component {
this.state = {
error: null,
expanded: false,
- vpn: "down",
+ vpn: "waiting",
}
this.expand = this.expand.bind(this)
this.connect = this.connect.bind(this)
@@ -26,16 +26,72 @@ export default class VPNSection extends React.Component {
this.location = this.location.bind(this)
}
+ componentWillMount() {
+ bitmask.vpn.status().then(
+ status => {
+ console.log("status: ", status)
+ if (status.VPN == "OFF") {
+ this.setState({vpn: "down"})
+ } else if (status.VPN == "ON") {
+ if (status.domain == this.props.account.domain) {
+ this.setState({vpn: "up"})
+ } else {
+ this.setState({vpn: "down"})
+ }
+ } else {
+ // this.setState({vpn: "????"})
+ }
+ },
+ error => {
+ this.setState({vpn: "failed", error: error})
+ }
+ )
+ }
+
expand() {
this.setState({expanded: !this.state.expanded})
}
+ // turn on button pressed
connect() {
- this.setState({vpn: "up"})
+ this.setState({vpn: "connecting", error: null})
+ bitmask.vpn.check(this.props.account.domain).then(
+ status => {
+ console.log('check: ', status)
+ if (status.vpn_ready == true) {
+ this.startVPN()
+ } else if (status.vpn == "disabled") {
+ this.setState({vpn: "failed", error: "VPN support disabled"})
+ } else {
+ bitmask.vpn.get_cert(this.props.account.id).then(
+ uid => {
+ this.startVPN()
+ },
+ error => {
+ this.setState({vpn: "failed", error: error})
+ }
+ )
+ }
+ },
+ error => {
+ this.setState({vpn: "failed", error: error})
+ }
+ )
}
+ // turn off button pressed
disconnect() {
- this.setState({vpn: "down"})
+ this.setState({vpn: "disconnecting", error: null})
+ bitmask.vpn.stop().then(
+ success => {
+ console.log('stop:')
+ console.log(success)
+ this.setState({vpn: "down"})
+ },
+ error => {
+ this.setState({vpn: "failed", error: error})
+ }
+ )
}
cancel() {
@@ -50,7 +106,25 @@ export default class VPNSection extends React.Component {
}
+ // call startVPN() only when everything is ready
+ startVPN() {
+ bitmask.vpn.start(this.props.account.domain).then(
+ status => {
+ console.log('start: ', status)
+ if (status.result == "started") {
+ this.setState({vpn: "up", error: null})
+ } else {
+ this.setState({vpn: "failed"})
+ }
+ },
+ error => {
+ this.setState({vpn: "failed", error: error})
+ }
+ )
+ }
+
render () {
+ console.log(this.state)
let message = null
let body = null
let button = null
@@ -87,10 +161,18 @@ export default class VPNSection extends React.Component {
case "failed":
button = <div>
<Button onClick={this.connect}>Turn ON</Button>
- <Button onClick={this.unblock}>Unblock</Button>
</div>
+ // <Button onClick={this.unblock}>Unblock</Button>
icon = "off"
break
+ case "disabled":
+ button = <div>Disabled</div>
+ icon = "disabled"
+ break
+ case "waiting":
+ button = <Spinner />
+ icon = "wait"
+ break
}
return (