ui: allow removing accounts

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}