summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--ui/app/components/main_panel/index.js37
-rw-r--r--ui/app/components/main_panel/vpn_section.js102
-rw-r--r--ui/app/models/account.js14
-rw-r--r--ui/app/models/dummy_account.js33
-rw-r--r--ui/app/models/provider.js8
5 files changed, 146 insertions, 48 deletions
diff --git a/ui/app/components/main_panel/index.js b/ui/app/components/main_panel/index.js
index cac58cbb..83c14cfa 100644
--- a/ui/app/components/main_panel/index.js
+++ b/ui/app/components/main_panel/index.js
@@ -8,12 +8,13 @@ import React from 'react'
import App from 'app'
import Login from 'components/login'
import Account from 'models/account'
-import DummyAccount from 'models/dummy_account'
+import Spinner from 'components/spinner'
import './main_panel.less'
import AccountList from './account_list'
import UserSection from './user_section'
import EmailSection from './email_section'
+import VPNSection from './vpn_section'
export default class MainPanel extends React.Component {
@@ -25,6 +26,7 @@ export default class MainPanel extends React.Component {
super(props)
this.state = {
account: null,
+ provider: null,
accounts: []
}
this.activateAccount = this.activateAccount.bind(this)
@@ -33,17 +35,17 @@ export default class MainPanel extends React.Component {
componentWillMount() {
if (this.props.initialAccount) {
- this.setState({
- account: this.props.initialAccount,
- accounts: Account.list
- })
+ this.activateAccount(this.props.initialAccount)
}
}
activateAccount(account) {
- this.setState({
- account: account,
- accounts: Account.list
+ account.getProvider().then(provider => {
+ this.setState({
+ account: account,
+ provider: provider,
+ accounts: Account.list
+ })
})
}
@@ -53,10 +55,7 @@ export default class MainPanel extends React.Component {
if (newActiveAccount == null) {
App.start()
} else {
- this.setState({
- account: newActiveAccount,
- accounts: Account.list
- })
+ this.activateAccount(newActiveAccount)
}
},
error => {
@@ -66,16 +65,28 @@ export default class MainPanel extends React.Component {
}
render() {
+ if (this.state.account && this.state.provider) {
+ return this.renderPanel()
+ } else {
+ return <Spinner />
+ }
+ }
+
+ renderPanel() {
let emailSection = null
let vpnSection = null
let sidePanel = null
if (this.state.account.authenticated) {
- if (this.state.account.hasEmail) {
+ if (this.state.provider.hasEmail) {
emailSection = <EmailSection account={this.state.account} />
}
}
+ if (this.state.provider.hasVPN) {
+ vpnSection = <VPNSection account={this.state.account} />
+ }
+
sidePanel = (
<AccountList account={this.state.account}
accounts={this.state.accounts}
diff --git a/ui/app/components/main_panel/vpn_section.js b/ui/app/components/main_panel/vpn_section.js
index e69de29b..ece8d496 100644
--- a/ui/app/components/main_panel/vpn_section.js
+++ b/ui/app/components/main_panel/vpn_section.js
@@ -0,0 +1,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} />
+ )
+ }
+
+}
diff --git a/ui/app/models/account.js b/ui/app/models/account.js
index 3656d2c7..14773602 100644
--- a/ui/app/models/account.js
+++ b/ui/app/models/account.js
@@ -4,6 +4,7 @@
//
import bitmask from 'lib/bitmask'
+import Provider from 'models/provider'
export default class Account {
@@ -46,8 +47,17 @@ export default class Account {
return this._authenticated
}
- get hasEmail() {
- return true
+ getProvider() {
+ if (this.provider) {
+ return new Promise((resolve, reject) => {
+ resolve(this.provider)
+ })
+ } else {
+ return Provider.get(this.domain).then(provider => {
+ this.provider = provider
+ return provider
+ })
+ }
}
//
diff --git a/ui/app/models/dummy_account.js b/ui/app/models/dummy_account.js
deleted file mode 100644
index 99fb6623..00000000
--- a/ui/app/models/dummy_account.js
+++ /dev/null
@@ -1,33 +0,0 @@
-//
-// A proxy of an account, but with a different ID. For testing.
-//
-
-import bitmask from 'lib/bitmask'
-
-export default class DummyAccount {
-
- constructor(account) {
- this.account = account
- }
-
- get id() {
- return 'dummy--' + this.account.address
- }
-
- get domain() {return this.account.domain}
- get address() {return this.account.address}
- get userpart() {return this.account.userpart}
- get authenticated() {return this.account.authenticated}
- get hasEmail() {return this.account.hasEmail}
- login(password) {return this.account.login(password)}
-
- logout() {
- return bitmask.bonafide.user.logout(this.address).then(
- response => {
- this._authenticated = false
- this._address = '@' + this.domain
- return this
- }
- )
- }
-}
diff --git a/ui/app/models/provider.js b/ui/app/models/provider.js
index 2ed2dc8c..af634339 100644
--- a/ui/app/models/provider.js
+++ b/ui/app/models/provider.js
@@ -23,6 +23,14 @@ export default class Provider {
return this._description[LOCALE]
}
+ get hasEmail() {
+ return this.services.includes("mx")
+ }
+
+ get hasVPN() {
+ return this.services.includes("openvpn")
+ }
+
static setup(domain) {
return bitmask.bonafide.provider.create(domain).then(
response => {