summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--ui/app/components/main_panel/account_list.js52
-rw-r--r--ui/app/components/main_panel/main_panel.less32
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 862f7e3..bb3263a 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 2ec9d05..c530ea8 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
//