From 395612dffea06b52153b7a6acf22ab33207c9346 Mon Sep 17 00:00:00 2001 From: elijah Date: Tue, 8 Nov 2016 11:04:15 -0800 Subject: ui: allow removing accounts --- ui/app/app.js | 4 +-- ui/app/components/confirmation.js | 43 ++++++++++++++++++++++++++++ ui/app/components/login.js | 2 +- ui/app/components/main_panel/account_list.js | 30 +++++++++++++++++-- ui/app/components/main_panel/index.js | 25 ++++++++++++---- ui/app/models/account.js | 32 +++++++++++++++++---- 6 files changed, 119 insertions(+), 17 deletions(-) create mode 100644 ui/app/components/confirmation.js diff --git a/ui/app/app.js b/ui/app/app.js index 75c7cb8a..a27cba6c 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -21,12 +21,12 @@ class Application { start() { Provider.list(false).then(domains => { - Account.initialize_list(domains) + Account.initializeList(domains) Account.active().then(account => { if (account == null) { this.show('greeter') } else { - Account.add_primary(account) + Account.addPrimary(account) this.show('main', {initialAccount: account}) } }, error => { 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 ( + + + {this.props.title} + + + + + + + + + ) + } +} + 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 { - @@ -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 = ( + + ) + } + 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 (
@@ -105,6 +130,7 @@ export default class AccountList extends React.Component { {plusminusButtons} {expandButton} + {removeModal}
) } 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 (
- +
{vpnSection} diff --git a/ui/app/models/account.js b/ui/app/models/account.js index 412ee56a..cb008cc0 100644 --- a/ui/app/models/account.js +++ b/ui/app/models/account.js @@ -99,7 +99,7 @@ export default class Account { return account } - static find_or_add(address) { + static findOrAdd(address) { let account = Account.find(address) if (!account) { account = new Account(address) @@ -129,10 +129,30 @@ export default class Account { } } + // + // For now, accounts are really just providers. Eventually, + // there will be a separate account and provider list. + // + // Returns the account in the list that is closest to the one + // We removed. + // static remove(account) { - Account.list = Account.list.filter(i => { - return i.id != account.id - }) + return bitmask.bonafide.provider.delete(account.domain).then( + response => { + let index = Account.list.findIndex(i => { + return i.id == account.id + }) + Account.list = Account.list.filter(i => { + return i.id != account.id + }) + if (index >= Account.list.length) { + index = index - 1 + } else if (index == -1) { + index = 0 + } + return Account.list[index] + } + ) } static create(address, password, invite=null) { @@ -143,7 +163,7 @@ export default class Account { ) } - static initialize_list(domains) { + static initializeList(domains) { for (let domain of domains) { Account.add(new Account(domain)) } @@ -156,7 +176,7 @@ export default class Account { // this is a temporary hack to support the old behavior // util the backend has a proper concept of an account list. // - static add_primary(account) { + static addPrimary(account) { Account.list = Account.list.filter(i => { return i.domain != account.domain }) -- cgit v1.2.3