summaryrefslogtreecommitdiff
path: root/ui
diff options
context:
space:
mode:
authorSimon Fondrie-Teitler <simonft@riseup.net>2017-05-15 19:25:24 -0400
committerKali Kaneko (leap communications) <kali@leap.se>2017-05-16 14:18:41 +0200
commit28deb3ba651d7669375c451ca600d6de6ccd1b8f (patch)
tree030d9002359bdfc98444a27ff14ce5605d261fb5 /ui
parente3b7ebde2f40dbb9737c82858a5c13f666b22f58 (diff)
[feat] add icon to account list indicating account with active VPN
This adds a lock icon to the account list next to the account with the currently active VPN. The icon is green if the VPN is connected, yellow if the VPN is connectiong, and red in any other case. - Resolves: #8853
Diffstat (limited to 'ui')
-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
//