summaryrefslogtreecommitdiff
path: root/ui/app
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app')
-rw-r--r--ui/app/app.js4
-rw-r--r--ui/app/components/confirmation.js43
-rw-r--r--ui/app/components/login.js2
-rw-r--r--ui/app/components/main_panel/account_list.js30
-rw-r--r--ui/app/components/main_panel/index.js25
-rw-r--r--ui/app/models/account.js32
6 files changed, 119 insertions, 17 deletions
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 (
+ <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}
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
})
generated by cgit v1.2.3 (git 2.25.1) at 2024-12-26 20:30:24 +0000