diff options
Diffstat (limited to 'ui/app/components')
| -rw-r--r-- | ui/app/components/confirmation.js | 43 | ||||
| -rw-r--r-- | ui/app/components/login.js | 2 | ||||
| -rw-r--r-- | ui/app/components/main_panel/account_list.js | 30 | ||||
| -rw-r--r-- | ui/app/components/main_panel/index.js | 25 |
4 files changed, 91 insertions, 9 deletions
diff --git a/ui/app/components/confirmation.js b/ui/app/components/confirmation.js new file mode 100644 index 00000000..69186162 --- /dev/null +++ b/ui/app/components/confirmation.js @@ -0,0 +1,43 @@ +// +// A simple diagon that asks if you are sure. +// + +import React from 'react' +import {Button, ButtonGroup, ButtonToolbar, Glyphicon, Modal} + from 'react-bootstrap' + +export default class Confirmation extends React.Component { + + static get defaultProps() {return{ + title: "Are you sure?", + onCancel: null, + onAccept: null, + acceptStr: 'Accept', + cancelStr: 'Cancel' + }} + + constructor(props) { + super(props) + } + + render() { + return ( + <Modal show={true} onHide={this.props.onCancel}> + <Modal.Header closeButton> + <Modal.Title>{this.props.title}</Modal.Title> + </Modal.Header> + <Modal.Body> + <ButtonToolbar> + <Button onClick={this.props.onAccept} bsStyle="success"> + {this.props.acceptStr} + </Button> + <Button onClick={this.props.onCancel}> + {this.props.cancelStr} + </Button> + </ButtonToolbar> + </Modal.Body> + </Modal> + ) + } +} + diff --git a/ui/app/components/login.js b/ui/app/components/login.js index af3dfe8e..9ff6541e 100644 --- a/ui/app/components/login.js +++ b/ui/app/components/login.js @@ -390,7 +390,7 @@ class Login extends React.Component { } doLogin() { - let account = Account.find_or_add(this.state.username) + let account = Account.findOrAdd(this.state.username) account.login(this.state.password).then( account => { this.setState({loading: false}) 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} |