2 files changed, 76 insertions, 8 deletions

diff --git a/ui/app/components/main_panel/account_list.js b/ui/app/components/main_panel/account_list.js
index 862f7e35..bb3263aa 100644
--- a/ui/app/components/main_panel/account_list.js
+++ b/ui/app/components/main_panel/account_list.js
@@ -5,6 +5,7 @@ import App from 'app'
 import Account from 'models/account'
 import Confirmation from 'components/confirmation'
 import AppButtons from './app_buttons'
+import bitmask from 'lib/bitmask'
 
 export default class AccountList extends React.Component {
 
@@ -21,7 +22,9 @@ export default class AccountList extends React.Component {
 
     this.state = {
       mode: 'expanded',
-      showRemoveConfirmation: false
+      showRemoveConfirmation: false,
+      activeVpnDomain: null,
+      activeVpnStatus: null
     }
 
     // prebind:
@@ -32,6 +35,40 @@ export default class AccountList extends React.Component {
     this.cancelRemove = this.cancelRemove.bind(this)
     this.expand = this.expand.bind(this)
     this.collapse = this.collapse.bind(this)
+    this.statusEvent = this.statusEvent.bind(this)
+  }
+
+  componentWillMount() {
+    // Listen to state changes so we can update the vpn status icon
+    bitmask.events.register("VPN_STATUS_CHANGED", 'account list update', this.statusEvent)
+    this.updateStatus()
+  }
+
+  componentWillUnmount() {
+    bitmask.events.unregister("VPN_STATUS_CHANGED", 'acconut list update')
+  }
+
+  statusEvent() {
+    this.updateStatus()
+  }
+
+  /*
+   * Simple check to update the VPN status icon. We assume that if it's not up or
+   * connecting, it's down.
+   */
+  updateStatus() {
+    bitmask.vpn.status().then(
+      vpn => {
+        this.setState({'activeVpnDomain': vpn.domain})
+        if (vpn.status == "on") {
+          this.setState({'activeVpnState': "up"})
+        } else if (vpn.status == "starting") {
+          this.setState({'activeVpnState': "connecting"})
+        } else {
+          this.setState({'activeVpnState': "down"})
+        }
+      }
+    )
   }
 
   select(e) {
@@ -111,10 +148,19 @@ export default class AccountList extends React.Component {
 
     let items = this.props.accounts.map((account, i) => {
       let className = account == this.props.account ? 'active' : 'inactive'
+      let icon = null;
+      if (account.domain === this.state.activeVpnDomain){
+        icon = <Glyphicon glyph="lock" />
+      }
       return (
         <li key={i} className={className} onClick={this.select} data-id={account.id}>
-          <span className="username">{account.userpart}</span>
-          <span className="domain">{account.domain}</span>
+          <div className="account-details">
+            <span className="username">{account.userpart}</span>
+            <span className="domain">{account.domain}</span>
+          </div>
+          <div className={`vpn-status ${this.state.activeVpnState}`}>
+            {icon}
+          </div>
           <span className="arc top"></span>
           <span className="arc bottom"></span>
         </li>
diff --git a/ui/app/components/main_panel/main_panel.less b/ui/app/components/main_panel/main_panel.less
index 2ec9d059..c530ea8c 100644
--- a/ui/app/components/main_panel/main_panel.less
+++ b/ui/app/components/main_panel/main_panel.less
@@ -70,6 +70,7 @@
   border-top-left-radius: @accounts-corner - 1;
   border-bottom-left-radius: @accounts-corner - 1;
   z-index: 100;
+  display: flex;
   &:hover {
     background-color: #555;
   }
@@ -78,14 +79,14 @@
 .main-panel .accounts li span.domain {
   display: block;
   font-weight: bold;
-  //margin-left: 40px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .main-panel .accounts li span.username {
   display: block;
-  //margin-left: 40px;
-  //line-height: 7px;
-  //margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 /*.main-panel .accounts li span.icon {
@@ -139,13 +140,34 @@
 }
 
 .main-panel .accounts .btn.expander {
-   margin-right: @accounts-padding;
 }
 
 .main-panel .accounts .app-buttons {
   margin-bottom: @accounts-padding;
 }
 
+.main-panel .accounts li .account-details {
+  width: 140px;
+  margin-right: 5px;
+}
+
+.main-panel .accounts li .vpn-status {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.main-panel .accounts li .vpn-status.down {
+  color: #ef5350;
+}
+
+.main-panel .accounts li .vpn-status.connecting {
+  color: #fbc02d;
+}
+
+.main-panel .accounts li .vpn-status.up {
+    color: #66bb6a;
+}
+
 //
 // SECTIONS
 //