Delete account dialog

js/src/modals/DeleteAccount/deleteAccount.css

@@ -0,0 +1,54 @@
+/* Copyright 2015, 2016 Ethcore (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.body {
+  .hero {
+    padding-bottom: 1em;
+  }
+
+  .info {
+    display: inline-block;
+  }
+
+  .icon {
+    display: inline-block;
+  }
+
+  .nameinfo {
+    display: inline-block;
+    text-align: left;
+  }
+
+  .header {
+    text-transform: uppercase;
+    font-size: 1.25em;
+    padding-bottom: 0.25em;
+  }
+
+  .address {
+  }
+
+  .description {
+    padding-top: 1em;
+    font-size: 0.75em;
+    color: #aaa;
+  }
+
+  .password {
+    padding: 1em 5em;
+  }
+}

js/src/modals/DeleteAccount/deleteAccount.js

@@ -0,0 +1,127 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import React, { Component, PropTypes } from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+
+import { ConfirmDialog, IdentityIcon, IdentityName, Input } from '../../ui';
+import { newError } from '../../redux/actions';
+
+import styles from './deleteAccount.css';
+
+class DeleteAccount extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired,
+    router: PropTypes.object
+  }
+
+  static propTypes = {
+    account: PropTypes.object.isRequired,
+    onClose: PropTypes.func,
+    newError: PropTypes.func
+  }
+
+  state = {
+    password: ''
+  }
+
+  render () {
+    const { account } = this.props;
+    const { password } = this.state;
+
+    return (
+      <ConfirmDialog
+        className={ styles.body }
+        title='confirm removal'
+        visible
+        onDeny={ this.closeDeleteDialog }
+        onConfirm={ this.onDeleteConfirmed }>
+        <div className={ styles.hero }>
+          Are you sure you want to remove permanently delete the following account?
+        </div>
+        <div className={ styles.info }>
+          <IdentityIcon
+            className={ styles.icon }
+            address={ account.address } />
+          <div className={ styles.nameinfo }>
+            <div className={ styles.header }>
+              <IdentityName address={ account.address } unknown />
+            </div>
+            <div className={ styles.address }>
+              { account.address }
+            </div>
+          </div>
+        </div>
+        <div className={ styles.description }>
+          { account.meta.description }
+        </div>
+        <div className={ styles.password }>
+          <Input
+            label='account password'
+            hint='provide the account password to confirm the account deletion'
+            type='password'
+            value={ password }
+            onChange={ this.onChangePassword } />
+        </div>
+      </ConfirmDialog>
+    );
+  }
+
+  onChangePassword = (event, password) => {
+    this.setState({ password });
+  }
+
+  onDeleteConfirmed = () => {
+    const { api, router } = this.context;
+    const { account, newError } = this.props;
+    const { password } = this.state;
+
+    api.parity
+      .killAccount(account.address, password)
+      .then((result) => {
+        if (result === true) {
+          router.push('/accounts');
+        } else {
+          newError(new Error('Deletion failed.'));
+        }
+
+        this.closeDeleteDialog();
+      })
+      .catch((error) => {
+        console.error('onDeleteConfirmed', error);
+        newError(new Error(`Deletion failed: ${error.message}`));
+        this.closeDeleteDialog();
+      });
+  }
+
+  closeDeleteDialog = () => {
+    this.props.onClose();
+  }
+}
+
+function mapStateToProps (state) {
+  return {};
+}
+
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({ newError }, dispatch);
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(DeleteAccount);

js/src/modals/DeleteAccount/index.js

@@ -0,0 +1,17 @@
+// Copyright 2015, 2016 Ethcore (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './deleteAccount';

js/src/modals/index.js

@@ -17,6 +17,7 @@
 import AddAddress from './AddAddress';
 import AddContract from './AddContract';
 import CreateAccount from './CreateAccount';
+import DeleteAccount from './DeleteAccount';
 import DeployContract from './DeployContract';
 import EditMeta from './EditMeta';
 import ExecuteContract from './ExecuteContract';
@@ -32,6 +33,7 @@ export {
   AddAddress,
   AddContract,
   CreateAccount,
+  DeleteAccount,
   DeployContract,
   EditMeta,
   ExecuteContract,

js/src/views/Account/account.js

@@ -17,12 +17,13 @@
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
+import ActionDelete from 'material-ui/svg-icons/action/delete';
 import ContentCreate from 'material-ui/svg-icons/content/create';
 import ContentSend from 'material-ui/svg-icons/content/send';
 import LockIcon from 'material-ui/svg-icons/action/lock';
 import VerifyIcon from 'material-ui/svg-icons/action/verified-user';
 
-import { EditMeta, Shapeshift, SMSVerification, Transfer, PasswordManager } from '../../modals';
+import { EditMeta, DeleteAccount, Shapeshift, SMSVerification, Transfer, PasswordManager } from '../../modals';
 import { Actionbar, Button, Page } from '../../ui';
 
 import shapeshiftBtn from '../../../assets/images/shapeshift-btn.png';
@@ -50,6 +51,7 @@ class Account extends Component {
   propName = null
 
   state = {
+    showDeleteDialog: false,
     showEditDialog: false,
     showFundDialog: false,
     showVerificationDialog: false,
@@ -62,8 +64,8 @@ class Account extends Component {
     const { api } = this.context;
     const { address } = this.props.params;
 
-    const store = new VerificationStore(api, address);
-    this.setState({ verificationStore: store });
+    const verificationStore = new VerificationStore(api, address);
+    this.setState({ verificationStore });
   }
 
   render () {
@@ -79,6 +81,7 @@ class Account extends Component {
 
     return (
       <div className={ styles.account }>
+        { this.renderDeleteDialog(account) }
         { this.renderEditDialog(account) }
         { this.renderFundDialog() }
         { this.renderVerificationDialog() }
@@ -131,7 +134,12 @@ class Account extends Component {
         key='passwordManager'
         icon={ <LockIcon /> }
         label='password'
-        onClick={ this.onPasswordClick } />
+        onClick={ this.onPasswordClick } />,
+      <Button
+        key='delete'
+        icon={ <ActionDelete /> }
+        label='delete account'
+        onClick={ this.onDeleteClick } />
     ];
 
     return (
@@ -141,6 +149,20 @@ class Account extends Component {
     );
   }
 
+  renderDeleteDialog (account) {
+    const { showDeleteDialog } = this.state;
+
+    if (!showDeleteDialog) {
+      return null;
+    }
+
+    return (
+      <DeleteAccount
+        account={ account }
+        onClose={ this.onDeleteClose } />
+    );
+  }
+
   renderEditDialog (account) {
     const { showEditDialog } = this.state;
 
@@ -228,6 +250,14 @@ class Account extends Component {
     );
   }
 
+  onDeleteClick = () => {
+    this.setState({ showDeleteDialog: true });
+  }
+
+  onDeleteClose = () => {
+    this.setState({ showDeleteDialog: false });
+  }
+
   onEditClick = () => {
     this.setState({
       showEditDialog: !this.state.showEditDialog