summaryrefslogtreecommitdiff
path: root/ui/app/components/main_panel
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components/main_panel')
-rw-r--r--ui/app/components/main_panel/account_list.js30
-rw-r--r--ui/app/components/main_panel/index.js25
2 files changed, 47 insertions, 8 deletions
diff --git a/ui/app/components/main_panel/account_list.js b/ui/app/components/main_panel/account_list.js
index d0ef092f..36b6c18f 100644
--- a/ui/app/components/main_panel/account_list.js
+++ b/ui/app/components/main_panel/account_list.js
@@ -3,6 +3,7 @@ import {Button, ButtonGroup, ButtonToolbar, Glyphicon} from 'react-bootstrap'
import App from 'app'
import Account from 'models/account'
+import Confirmation from 'components/confirmation'
export default class AccountList extends React.Component {
@@ -18,13 +19,16 @@ export default class AccountList extends React.Component {
super(props)
this.state = {
- mode: 'expanded'
+ mode: 'expanded',
+ showRemoveConfirmation: false
}
// prebind:
this.select = this.select.bind(this)
this.add = this.add.bind(this)
this.remove = this.remove.bind(this)
+ this.askRemove = this.askRemove.bind(this)
+ this.cancelRemove = this.cancelRemove.bind(this)
this.expand = this.expand.bind(this)
this.collapse = this.collapse.bind(this)
}
@@ -43,6 +47,17 @@ export default class AccountList extends React.Component {
}
remove() {
+ this.setState({showRemoveConfirmation: false})
+ if (this.props.onRemove) {
+ this.props.onRemove(this.props.account)
+ }
+ }
+
+ askRemove() {
+ this.setState({showRemoveConfirmation: true})
+ }
+ cancelRemove() {
+ this.setState({showRemoveConfirmation: false})
}
expand() {
@@ -57,6 +72,7 @@ export default class AccountList extends React.Component {
let style = {}
let expandButton = null
let plusminusButtons = null
+ let removeModal = null
if (this.state.mode == 'expanded') {
expandButton = (
@@ -69,7 +85,7 @@ export default class AccountList extends React.Component {
<Button onClick={this.add} className="btn-inverse">
<Glyphicon glyph="plus" />
</Button>
- <Button disabled={this.props.account == null} onClick={this.remove} className="btn-inverse">
+ <Button disabled={this.props.account == null} onClick={this.askRemove} className="btn-inverse">
<Glyphicon glyph="minus" />
</Button>
</ButtonGroup>
@@ -83,6 +99,14 @@ export default class AccountList extends React.Component {
)
}
+ if (this.state.showRemoveConfirmation) {
+ let domain = this.props.account.domain
+ let title = `Are you sure you wish to remove ${domain}?`
+ removeModal = (
+ <Confirmation title={title} onAccept={this.remove} onCancel={this.cancelRemove} />
+ )
+ }
+
let items = this.props.accounts.map((account, i) => {
let className = account == this.props.account ? 'active' : 'inactive'
return (
@@ -95,6 +119,7 @@ export default class AccountList extends React.Component {
)
})
+ expandButton = null // for now, disable expand button
return (
<div className="accounts" style={style}>
@@ -105,6 +130,7 @@ export default class AccountList extends React.Component {
{plusminusButtons}
{expandButton}
</ButtonToolbar>
+ {removeModal}
</div>
)
}
diff --git a/ui/app/components/main_panel/index.js b/ui/app/components/main_panel/index.js
index 775dff61..19485358 100644
--- a/ui/app/components/main_panel/index.js
+++ b/ui/app/components/main_panel/index.js
@@ -28,6 +28,7 @@ export default class MainPanel extends React.Component {
accounts: []
}
this.activateAccount = this.activateAccount.bind(this)
+ this.removeAccount = this.removeAccount.bind(this)
}
componentWillMount() {
@@ -46,11 +47,20 @@ export default class MainPanel extends React.Component {
})
}
- //setAccounts(accounts) {
- // this.setState({
- // accounts: accounts
- // })
- //}
+ removeAccount(account) {
+ Account.remove(account).then(
+ newActiveAccount => {
+ console.log(newActiveAccount)
+ this.setState({
+ account: newActiveAccount,
+ accounts: Account.list
+ })
+ },
+ error => {
+ console.log(error)
+ }
+ )
+ }
render() {
let emailSection = null
@@ -64,7 +74,10 @@ export default class MainPanel extends React.Component {
return (
<div className="main-panel">
- <AccountList account={this.state.account} accounts={this.state.accounts} onSelect={this.activateAccount} />
+ <AccountList account={this.state.account}
+ accounts={this.state.accounts}
+ onSelect={this.activateAccount}
+ onRemove={this.removeAccount}/>
<div className="body">
<UserSection account={this.state.account} onLogin={this.activateAccount} onLogout={this.activateAccount}/>
{vpnSection}