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 => {