2 files changed, 126 insertions, 13 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} />
+    )
+  }
+
+}