JSON Keyfile backup #101

packages/fether-react/package.json

@@ -41,7 +41,8 @@
     "bignumber.js": "^4.1.0",
     "debounce-promise": "^3.1.0",
     "debug": "^3.1.0",
-    "fether-ui": "^0.1.2",
+    "fether-ui": "^0.1.1",
+    "file-saver": "^2.0.0",
     "final-form": "^4.8.3",
     "is-electron": "^2.1.0",
     "localforage": "^1.7.2",

packages/fether-react/src/Accounts/CreateAccount/AccountRewritePhrase/AccountRewritePhrase.js

@@ -5,65 +5,125 @@
 
 import React, { Component } from 'react';
 import { AccountCard, Card, Form as FetherForm } from 'fether-ui';
+
 import { inject, observer } from 'mobx-react';
 
 @inject('createAccountStore')
 @observer
 class AccountRewritePhrase extends Component {
   state = {
     isLoading: false,
+    isFileValid: false,
+    json: null,
     value: ''
   };
 
   handleChange = ({ target: { value } }) => {
     this.setState({ value });
   };
 
+  handleChangeFile = ({ target: { result } }) => {
+    try {
+      const json = JSON.parse(result);
+
+      const isFileValid =
+        json.address.length === 32 &&
+        typeof json.meta === 'object' &&
+        json.crpyto &&
+        json.crypto.cipher === 'aes-128-ctr';
+
+      this.setState({
+        isFileValid,
+        json
+      });
+    } catch (error) {
+      this.setState({
+        isFileValid: false,
+        json: null
+      });
+      console.error(error);
+    }
+  };
+
   handleNextStep = async () => {
     const {
       history,
       location: { pathname },
-      createAccountStore: { isImport, setPhrase }
+      createAccountStore: { isImport, isJSON, setJSON, setPhrase }
     } = this.props;
     const currentStep = pathname.slice(-1);
-    const { value } = this.state;
+    const { json, value } = this.state;
+
+    if (isJSON) {
+      this.setState({ isLoading: true });
+      await setJSON(json);
+    }
 
     // If we're importing, derive address from recovery phrase when we submit
-    if (isImport) {
+    if (isImport && !isJSON) {
       this.setState({ isLoading: true });
       await setPhrase(value);
     }
 
     history.push(`/accounts/new/${+currentStep + 1}`);
   };
 
+  toggleImportMethod = () => {
+    const { createAccountStore } = this.props;
+    createAccountStore.setIsJSON(!createAccountStore.isJSON);
+  };
+
   render () {
     const {
-      createAccountStore: { address, isImport, name },
+      createAccountStore: { address, isImport, isJSON, name },
       history,
       location: { pathname }
     } = this.props;
     const { value } = this.state;
     const currentStep = pathname.slice(-1);
     const body = [
       <div key='createAccount'>
-        <div className='text'>
+        <div className='text -centered'>
           {isImport ? (
-            <p>Type your Recovery phrase</p>
+            isJSON ? (
+              <div>
+                <p> Drop your JSON keyfile below </p>
+                <button onClick={this.toggleImportMethod} className='button'>
+                  Use Seed Phrase
+                </button>
+              </div>
+            ) : (
+              <div>
+                <p> Type your Recovery phrase </p>
+                <button onClick={this.toggleImportMethod} className='button'>
+                  Use JSON Keyfile
+                </button>
+              </div>
+            )
           ) : (
             <p>
               Type your secret phrase to confirm that you wrote it down
               correctly:
             </p>
           )}
         </div>
-        <FetherForm.Field
-          as='textarea'
-          label='Recovery phrase'
-          onChange={this.handleChange}
-          required
-          value={value}
-        />
+
+        {isJSON ? (
+          <FetherForm.InputFile
+            label='JSON Backup Keyfile'
+            onChangeFile={this.handleChangeFile}
+            required
+            value={value}
+          />
+        ) : (
+          <FetherForm.Field
+            as='textarea'
+            label='Recovery phrase'
+            onChange={this.handleChange}
+            required
+            value={value}
+          />
+        )}
 
         <nav className='form-nav -space-around'>
           {currentStep > 1 && (
@@ -91,7 +151,7 @@ class AccountRewritePhrase extends Component {
     const {
       createAccountStore: { isImport, phrase }
     } = this.props;
-    const { isLoading, value } = this.state;
+    const { isLoading, json, value } = this.state;
 
     // If we are creating a new account, the button just checks the phrase has
     // been correctly written by the user.
@@ -111,7 +171,7 @@ class AccountRewritePhrase extends Component {
     return (
       <button
         className='button'
-        disabled={!value.length || isLoading}
+        disabled={(!value.length && !json) || isLoading}
         onClick={this.handleNextStep}
       >
         Next

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

@@ -3,8 +3,8 @@
 //
 // SPDX-License-Identifier: BSD-3-Clause
 
-import React, { PureComponent } from 'react';
-import { AccountHeader } from 'fether-ui';
+import React, { Component } from 'react';
+import { AccountHeader, Form as FetherForm } from 'fether-ui';
 import { accountsInfo$ } from '@parity/light.js';
 import light from '@parity/light.js-react';
 import { Link, Redirect, withRouter } from 'react-router-dom';
@@ -13,17 +13,95 @@ import Health from '../Health';
 import TokensList from './TokensList';
 import withAccount from '../utils/withAccount';
 
+import { inject, observer } from 'mobx-react';
+
 @withRouter
 @withAccount
 @light({
   accountsInfo: accountsInfo$
 })
-class Tokens extends PureComponent {
+@inject('createAccountStore')
+@observer
+class Tokens extends Component {
+  state = {
+    password: '',
+    toggleBackupScreen: false,
+    error: ''
+  };
+
   handleGoToWhitelist = () => {
     this.props.history.push(`/whitelist/${this.props.accountAddress}`);
   };
 
+  handlePasswordChange = ({ target: { value } }) => {
+    this.setState({ password: value });
+  };
+
+  handleSubmit = event => {
+    const { accountAddress, createAccountStore, history } = this.props;
+    const { password } = this.state;
+
+    event.preventDefault();
+
+    const _this = this;
+    // api.parity.exportAccount
+    createAccountStore.backupAccount(accountAddress, password).then(res => {
+      if (res && res.type === 'ACCOUNT_ERROR') {
+        _this.toggleError(
+          res.text + ' Please check your password and try again.'
+        );
+      } else {
+        createAccountStore.clear();
+        history.push(`/accounts`);
+      }
+    });
+  };
+
+  toggleBackupScreen = () => {
+    const { toggleBackupScreen } = this.state;
+    this.setState({ toggleBackupScreen: !toggleBackupScreen });
+  };
+
+  toggleError = err => {
+    this.setState({
+      error: err
+    });
+  };
+
+  renderPasswordFormField = password => {
+    const { error } = this.state;
+
+    return (
+      <div>
+        <div className='text -centered'>
+          <button className='button' onClick={this.toggleBackupScreen}>
+            close
+          </button>
+          <p>Unlock your account:</p>
+        </div>
+        <fieldset className='form_fields -centered'>
+          <form key='createAccount' onSubmit={this.handleSubmit}>
+            <FetherForm.Field
+              label='Password'
+              onChange={this.handlePasswordChange}
+              required
+              type='password'
+              value={password}
+            />
+
+            <p className='error'> {error} </p>
+
+            <button className='button -right' disabled={!password}>
+              Confirm Backup
+            </button>
+          </form>
+        </fieldset>
+      </div>
+    );
+  };
+
   render () {
+    const { password, toggleBackupScreen } = this.state;
     const { accountsInfo, accountAddress } = this.props;
 
     // If the accountsInfo object is empty (i.e. no accounts), then we redirect
@@ -49,6 +127,16 @@ class Tokens extends PureComponent {
           }
         />
 
+        <div className='center-md'>
+          {toggleBackupScreen ? (
+            this.renderPasswordFormField(password)
+          ) : (
+            <button className='button' onClick={this.toggleBackupScreen}>
+              backup account
+            </button>
+          )}
+        </div>
+
         <TokensList />
 
         <nav className='footer-nav'>

packages/fether-react/src/assets/sass/shared/_form.scss

@@ -29,6 +29,24 @@
     word-wrap: break-word;
   }
 
+  .dropzone {
+    &.-sm {
+      height: 3.5rem;
+    }
+
+    &.-md {
+      height: 4.75rem;
+    }
+
+    &.-lg {
+      height: 8rem;
+    }
+
+    &.-xlg {
+      height: 12rem;
+    }
+  }
+
   input[type='text'],
   input[type='number'],
   input[type='tel'],

packages/fether-react/src/stores/createAccountStore.js

@@ -7,15 +7,20 @@ import { action, observable } from 'mobx';
 
 import Debug from '../utils/debug';
 import parityStore from './parityStore';
+import FileSaver from 'file-saver';
 
 const debug = Debug('createAccountStore');
 
 export class CreateAccountStore {
   @observable
   address = null;
   @observable
+  json = {};
+  @observable
   isImport = false; // Are we creating a new account, or importing via phrase?
   @observable
+  isJSON = false; // Are we recovering an account from a JSON backup file/
+  @observable
   name = ''; // Account name
   @observable
   phrase = null; // The 12-word seed phrase
@@ -28,6 +33,27 @@ export class CreateAccountStore {
     this.setName('');
   }
 
+  backupAccount = (address, password) => {
+    debug('Generating Backup JSON');
+
+    return parityStore.api.parity
+      .exportAccount(address, password)
+      .then(res => {
+        console.log('good, ', res);
+
+        const blob = new window.Blob([JSON.stringify(res)], {
+          type: 'application/json; charset=utf-8'
+        });
+
+        console.log(blob);
+        FileSaver.saveAs(blob, `${res.address}.json`);
+      })
+      .catch(err => {
+        console.error('bad, ', err);
+        return err;
+      });
+  };
+
   generateNewAccount = () => {
     debug('Generating new account.');
     return this.setPhrase(null)
@@ -37,6 +63,7 @@ export class CreateAccountStore {
 
   saveAccountToParity = password => {
     debug('Saving account to Parity.');
+    console.log(this.phrase);
     return parityStore.api.parity
       .newAccountFromPhrase(this.phrase, password)
       .then(() =>
@@ -54,11 +81,21 @@ export class CreateAccountStore {
     this.address = address;
   };
 
+  @action
+  setJSON = json => {
+    this.json = json;
+  };
+
   @action
   setIsImport = isImport => {
     this.isImport = isImport;
   };
 
+  @action
+  setIsJSON = isJSON => {
+    this.isJSON = isJSON;
+  };
+
   @action
   setName = name => {
     this.name = name;