feat: Delete account (#528)

* Add menu

* Add correct screens

* Remove from localStorage

* Update packages/fether-react/src/i18n/locales/en.json

Co-Authored-By: Thibaut Sardan <33178835+Tbaut@users.noreply.github.com>

* german

packages/fether-react/src/App/App.js

@@ -19,6 +19,7 @@ import { version } from '../../package.json';
 import i18n, { packageNS } from '../i18n';
 import Accounts from '../Accounts';
 import BackupAccount from '../BackupAccount';
+import DeleteAccount from '../DeleteAccount';
 import Onboarding from '../Onboarding';
 import * as postMessage from '../utils/postMessage';
 import RequireParityVersion from '../RequireParityVersion';
@@ -178,6 +179,10 @@ class App extends Component {
                     path='/backup/:accountAddress'
                     component={BackupAccount}
                   />
+                  <Route
+                    path='/delete/:accountAddress'
+                    component={DeleteAccount}
+                  />
                   <Route
                     path='/send/:tokenAddress/from/:accountAddress'
                     component={Send}

packages/fether-react/src/DeleteAccount/DeleteAccount.js

@@ -0,0 +1,187 @@
+// Copyright 2015-2019 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+import React, { Component } from 'react';
+import { AccountHeader, Card, Form as FetherForm } from 'fether-ui';
+import localForage from 'localforage';
+import { observer, inject } from 'mobx-react';
+import { Link, withRouter } from 'react-router-dom';
+
+import i18n, { packageNS } from '../i18n';
+import localForage$ from '../utils/localForage';
+import RequireHealthOverlay from '../RequireHealthOverlay';
+import { SIGNER_ACCOUNTS_LS_KEY } from '../stores/createAccountStore';
+import withAccount from '../utils/withAccount';
+
+@withRouter
+@withAccount
+@inject('parityStore')
+@observer
+class DeleteAccount extends Component {
+  state = {
+    isLoading: false,
+    password: '',
+    message: ''
+  };
+
+  deleteParityAccount = event => {
+    const {
+      account: { address },
+      parityStore: { api },
+      history
+    } = this.props;
+    const { password } = this.state;
+
+    event && event.preventDefault();
+
+    this.setState({ isLoading: true });
+
+    api.parity
+      .killAccount(address, password)
+      .then(() => {
+        history.push(`/accounts`);
+      })
+      .catch(err => {
+        this.setState({
+          message: err.text + ' Please check your password and try again.'
+        });
+        this.setState({ isLoading: false });
+      });
+  };
+
+  deleteSignerAccount = () => {
+    const {
+      account: { address: currentAddress },
+      history
+    } = this.props;
+
+    localForage$(SIGNER_ACCOUNTS_LS_KEY).subscribe(async accounts => {
+      const removed = accounts.filter(
+        ({ address }) => address !== currentAddress
+      );
+
+      await localForage.setItem(SIGNER_ACCOUNTS_LS_KEY, removed);
+
+      history.push(`/accounts`);
+    });
+  };
+
+  handlePasswordChange = ({ target: { value } }) => {
+    this.setState({ password: value });
+  };
+
+  render () {
+    const {
+      account: { name, address, type }
+    } = this.props;
+
+    return (
+      <RequireHealthOverlay require='node'>
+        <div>
+          <AccountHeader
+            address={address}
+            copyAddress
+            i18n={i18n}
+            name={name}
+            packageNS={packageNS}
+            type={type}
+            left={
+              <Link to='/accounts' className='icon -back'>
+                {i18n.t(`${packageNS}:navigation.back`)}
+              </Link>
+            }
+          />
+          <br />
+          <Card className='-space-around'>
+            {type === 'signer'
+              ? this.renderSignerAccount()
+              : this.renderParityAccount()}
+          </Card>
+        </div>
+      </RequireHealthOverlay>
+    );
+  }
+
+  renderParityAccount () {
+    const { history } = this.props;
+    const { isLoading, message, password } = this.state;
+
+    return (
+      <form onSubmit={this.deleteParityAccount}>
+        <div className='text'>
+          <p>{i18n.t(`${packageNS}:account.delete.warning_parity_account`)}</p>
+        </div>
+        <br />
+
+        <div className='text'>
+          <p>
+            {i18n.t(`${packageNS}:account.delete.label_msg_password_unlock`)}
+          </p>
+        </div>
+
+        <FetherForm.Field
+          label={i18n.t(`${packageNS}:account.delete.label_password_unlock`)}
+          onChange={this.handlePasswordChange}
+          autoFocus
+          required
+          type='password'
+          value={password}
+        />
+
+        <p className='error'> {message} </p>
+
+        <nav className='form-nav -space-around'>
+          <button
+            className='button -back'
+            onClick={history.goBack}
+            type='button'
+          >
+            {i18n.t(`${packageNS}:navigation.back`)}
+          </button>
+          <button
+            autoFocus
+            className='button'
+            disabled={!password || isLoading}
+          >
+            {i18n.t(`${packageNS}:account.delete.button_confirm`)}
+          </button>
+        </nav>
+      </form>
+    );
+  }
+
+  renderSignerAccount () {
+    const { history } = this.props;
+
+    return (
+      <React.Fragment>
+        <div className='text'>
+          <p>{i18n.t(`${packageNS}:account.delete.warning_signer_account`)}</p>
+        </div>
+
+        <br />
+
+        <nav className='form-nav -space-around'>
+          <button
+            className='button -back'
+            onClick={history.goBack}
+            type='button'
+          >
+            {i18n.t(`${packageNS}:navigation.back`)}
+          </button>
+          <button
+            autoFocus
+            className='button'
+            onClick={this.deleteSignerAccount}
+          >
+            {i18n.t(`${packageNS}:account.delete.button_confirm`)}
+          </button>
+        </nav>
+      </React.Fragment>
+    );
+  }
+}
+
+export default DeleteAccount;

packages/fether-react/src/DeleteAccount/index.js

@@ -0,0 +1,8 @@
+// Copyright 2015-2019 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+//
+// SPDX-License-Identifier: BSD-3-Clause
+
+import DeleteAccount from './DeleteAccount';
+
+export default DeleteAccount;

packages/fether-react/src/Tokens/Tokens.js

@@ -50,6 +50,10 @@ class Tokens extends PureComponent {
       {
         name: i18n.t(`${packageNS}:tokens.tokens.menu_items.add_tokens`),
         onClick: () => history.push(`/whitelist/${address}`)
+      },
+      {
+        name: i18n.t(`${packageNS}:tokens.tokens.menu_items.delete_account`),
+        onClick: () => history.push(`/delete/${address}`)
       }
     ];
 

packages/fether-react/src/i18n/locales/de.json

@@ -12,6 +12,13 @@
         "msg4": "Wenn jemand Ihren geheimen Satz ergreift, kann er Ihr Konto belasten."
       }
     },
+    "delete": {
+      "label_msg_password_unlock": "Entsperren Sie Ihr Konto, um es zu löschen:",
+      "label_password_unlock": "Passwort",
+      "button_confirm": "Löschen",
+      "warning_parity_account": "Beachten Sie, dass Ihr Konto und Ihr Cryptowährungen definitiv verloren gehen, wenn Sie kein Backup (über JSON oder über die Wiederherstellungssatz) erstellt haben!",
+      "warning_signer_account": "Das Konto wird aus Fether entfernt. Sie können es jedoch jederzeit wieder hinzufügen, indem Sie es erneut aus Parity Signer importieren."
+    },
     "existing": {
       "no_name": "(kein Name}"
     },
@@ -198,7 +205,8 @@
     "tokens": {
       "menu_items": {
         "backup_account": "Sicherungskonto",
-        "add_tokens": "Token hinzufügen"
+        "add_tokens": "Token hinzufügen",
+        "delete_account": "Konto löschen"
       }
     }
   },

packages/fether-react/src/i18n/locales/en.json

@@ -20,6 +20,13 @@
       "label_password_unlock": "Password",
       "button_confirm": "Confirm backup"
     },
+    "delete": {
+      "label_msg_password_unlock": "Unlock your account to delete it:",
+      "label_password_unlock": "Password",
+      "button_confirm": "Delete",
+      "warning_parity_account": "Please note that if you haven't made any backup (via JSON or via recovery phrase), your account and its funds will be definitely lost!",
+      "warning_signer_account": "The account will be removed from Fether, but you can add it back anytime by importing it again from Parity Signer."
+    },
     "import": {
       "error_msg_existing_address": "Account {{address}} already listed",
       "signer": {
@@ -198,7 +205,8 @@
     "tokens": {
       "menu_items": {
         "backup_account": "Backup Account",
-        "add_tokens": "Add Tokens"
+        "add_tokens": "Add Tokens",
+        "delete_account": "Delete Account"
       }
     }
   },