diff options
Diffstat (limited to 'ui/app/components/main_panel/account_list.js')
-rw-r--r-- | ui/app/components/main_panel/account_list.js | 52 |
1 files changed, 49 insertions, 3 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> |