From 4a5e181138e4ccd324d33426f3903825c178af48 Mon Sep 17 00:00:00 2001 From: elijah Date: Tue, 28 Feb 2017 22:12:09 -0600 Subject: [bug] correctly determine available services in the ui --- ui/app/components/main_panel/index.js | 37 ++++++---- ui/app/components/main_panel/vpn_section.js | 102 ++++++++++++++++++++++++++++ ui/app/models/account.js | 14 +++- ui/app/models/dummy_account.js | 33 --------- ui/app/models/provider.js | 8 +++ 5 files changed, 146 insertions(+), 48 deletions(-) delete mode 100644 ui/app/models/dummy_account.js (limited to 'ui') diff --git a/ui/app/components/main_panel/index.js b/ui/app/components/main_panel/index.js index cac58cb..83c14cf 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 + } + } + + 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 = } } + if (this.state.provider.hasVPN) { + vpnSection = + } + sidePanel = ( VPN + if (this.state.error) { + // style may be: success, warning, danger, info + message = ( + {this.state.error} + ) + } + if (this.state.expanded) { + body =
traffic details go here
+ } + + switch(this.state.vpn) { + case "down": + button = + icon = "disabled" + break + case "up": + button = + icon = "on" + break + case "connecting": + button = + icon = "wait" + break + case "disconnecting": + button = + icon = "wait" + break + case "failed": + button =
+ + +
+ icon = "off" + break + } + + return ( + + ) + } + +} diff --git a/ui/app/models/account.js b/ui/app/models/account.js index 3656d2c..1477360 100644 --- a/ui/app/models/account.js +++ b/ui/app/models/account.js @@ -4,6 +4,7 @@ // import bitmask from 'lib/bitmask' +import Provider from 'models/provider' export default class Account { @@ -46,8 +47,17 @@ export default class Account { return this._authenticated } - get hasEmail() { - return true + getProvider() { + if (this.provider) { + return new Promise((resolve, reject) => { + resolve(this.provider) + }) + } else { + return Provider.get(this.domain).then(provider => { + this.provider = provider + return provider + }) + } } // diff --git a/ui/app/models/dummy_account.js b/ui/app/models/dummy_account.js deleted file mode 100644 index 99fb662..0000000 --- a/ui/app/models/dummy_account.js +++ /dev/null @@ -1,33 +0,0 @@ -// -// A proxy of an account, but with a different ID. For testing. -// - -import bitmask from 'lib/bitmask' - -export default class DummyAccount { - - constructor(account) { - this.account = account - } - - get id() { - return 'dummy--' + this.account.address - } - - get domain() {return this.account.domain} - get address() {return this.account.address} - get userpart() {return this.account.userpart} - get authenticated() {return this.account.authenticated} - get hasEmail() {return this.account.hasEmail} - login(password) {return this.account.login(password)} - - logout() { - return bitmask.bonafide.user.logout(this.address).then( - response => { - this._authenticated = false - this._address = '@' + this.domain - return this - } - ) - } -} diff --git a/ui/app/models/provider.js b/ui/app/models/provider.js index 2ed2dc8..af63433 100644 --- a/ui/app/models/provider.js +++ b/ui/app/models/provider.js @@ -23,6 +23,14 @@ export default class Provider { return this._description[LOCALE] } + get hasEmail() { + return this.services.includes("mx") + } + + get hasVPN() { + return this.services.includes("openvpn") + } + static setup(domain) { return bitmask.bonafide.provider.create(domain).then( response => { -- cgit v1.2.3