Import raw private key (#2945)

* Initial selection screen

* UI in-place

* Make actual import API calls

* Simplify value checking logic

js/src/modals/CreateAccount/CreationType/creationType.js

@@ -50,6 +50,9 @@ export default class CreationType extends Component {
           <RadioButton
             label='Import account from an Ethereum pre-sale wallet'
             value='fromPresale' />
+          <RadioButton
+            label='Import raw private key'
+            value='fromRaw' />
         </RadioButtonGroup>
       </div>
     );

js/src/modals/CreateAccount/NewAccount/newAccount.js

@@ -26,6 +26,8 @@ import styles from '../createAccount.css';
 const ERRORS = {
   noName: 'you need to specify a valid name for the account',
   noPhrase: 'you need to specify the recovery phrase',
+  noKey: 'you need to provide the raw private key',
+  invalidKey: 'the raw key needs to be hex, 64 characters in length',
   invalidPassword: 'you need to specify a password >= 8 characters',
   noMatchPassword: 'the supplied passwords does not match'
 };

js/src/modals/CreateAccount/RawKey/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 './rawKey';

js/src/modals/CreateAccount/RawKey/rawKey.js

@@ -0,0 +1,189 @@
+// 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 { Form, Input } from '../../../ui';
+
+import styles from '../createAccount.css';
+
+import { ERRORS } from '../NewAccount';
+
+export default class RawKey extends Component {
+  static contextTypes = {
+    api: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    onChange: PropTypes.func.isRequired
+  }
+
+  state = {
+    rawKey: '',
+    rawKeyError: ERRORS.noKey,
+    accountName: '',
+    accountNameError: ERRORS.noName,
+    passwordHint: '',
+    password1: '',
+    password1Error: ERRORS.invalidPassword,
+    password2: '',
+    password2Error: ERRORS.noMatchPassword,
+    isValidPass: false,
+    isValidName: false,
+    isValidKey: false
+  }
+
+  componentWillMount () {
+    this.props.onChange(false, {});
+  }
+
+  render () {
+    const { accountName, accountNameError, passwordHint, password1, password1Error, password2, password2Error, rawKey, rawKeyError } = this.state;
+
+    return (
+      <Form>
+        <Input
+          hint='the raw hex encoded private key'
+          label='private key'
+          error={ rawKeyError }
+          value={ rawKey }
+          onChange={ this.onEditKey } />
+        <Input
+          label='account name'
+          hint='a descriptive name for the account'
+          error={ accountNameError }
+          value={ accountName }
+          onChange={ this.onEditAccountName } />
+        <Input
+          label='password hint'
+          hint='(optional) a hint to help with remembering the password'
+          value={ passwordHint }
+          onChange={ this.onEditPasswordHint } />
+        <div className={ styles.passwords }>
+          <div className={ styles.password }>
+            <Input
+              className={ styles.password }
+              label='password'
+              hint='a strong, unique password'
+              type='password'
+              error={ password1Error }
+              value={ password1 }
+              onChange={ this.onEditPassword1 } />
+          </div>
+          <div className={ styles.password }>
+            <Input
+              className={ styles.password }
+              label='password (repeat)'
+              hint='verify your password'
+              type='password'
+              error={ password2Error }
+              value={ password2 }
+              onChange={ this.onEditPassword2 } />
+          </div>
+        </div>
+      </Form>
+    );
+  }
+
+  updateParent = () => {
+    const { isValidName, isValidPass, isValidKey, accountName, passwordHint, password1, rawKey } = this.state;
+    const isValid = isValidName && isValidPass && isValidKey;
+
+    this.props.onChange(isValid, {
+      name: accountName,
+      passwordHint,
+      password: password1,
+      rawKey
+    });
+  }
+
+  onEditPasswordHint = (event, value) => {
+    this.setState({
+      passwordHint: value
+    });
+  }
+
+  onEditKey = (event) => {
+    const { api } = this.context;
+    const rawKey = event.target.value;
+    let rawKeyError = null;
+
+    console.log(rawKey.length, rawKey);
+
+    if (!rawKey || !rawKey.trim().length) {
+      rawKeyError = ERRORS.noKey;
+    } else if (rawKey.substr(0, 2) !== '0x' || rawKey.substr(2).length !== 64 || !api.util.isHex(rawKey)) {
+      rawKeyError = ERRORS.invalidKey;
+    }
+
+    this.setState({
+      rawKey,
+      rawKeyError,
+      isValidKey: !rawKeyError
+    }, this.updateParent);
+  }
+
+  onEditAccountName = (event) => {
+    const accountName = event.target.value;
+    let accountNameError = null;
+
+    if (!accountName || accountName.trim().length < 2) {
+      accountNameError = ERRORS.noName;
+    }
+
+    this.setState({
+      accountName,
+      accountNameError,
+      isValidName: !accountNameError
+    }, this.updateParent);
+  }
+
+  onEditPassword1 = (event) => {
+    const value = event.target.value;
+    let error1 = null;
+    let error2 = null;
+
+    if (!value || value.trim().length < 8) {
+      error1 = ERRORS.invalidPassword;
+    }
+
+    if (value !== this.state.password2) {
+      error2 = ERRORS.noMatchPassword;
+    }
+
+    this.setState({
+      password1: value,
+      password1Error: error1,
+      password2Error: error2,
+      isValidPass: !error1 && !error2
+    }, this.updateParent);
+  }
+
+  onEditPassword2 = (event) => {
+    const value = event.target.value;
+    let error2 = null;
+
+    if (value !== this.state.password1) {
+      error2 = ERRORS.noMatchPassword;
+    }
+
+    this.setState({
+      password2: value,
+      password2Error: error2,
+      isValidPass: !error2
+    }, this.updateParent);
+  }
+}

js/src/modals/CreateAccount/createAccount.js

@@ -29,6 +29,7 @@ import CreationType from './CreationType';
 import NewAccount from './NewAccount';
 import NewGeth from './NewGeth';
 import NewImport from './NewImport';
+import RawKey from './RawKey';
 import RecoveryPhrase from './RecoveryPhrase';
 
 const TITLES = {
@@ -58,6 +59,7 @@ export default class CreateAccount extends Component {
     passwordHint: null,
     password: null,
     phrase: null,
+    rawKey: null,
     json: null,
     canCreate: false,
     createType: null,
@@ -110,6 +112,11 @@ export default class CreateAccount extends Component {
             <RecoveryPhrase
               onChange={ this.onChangeDetails } />
           );
+        } else if (createType === 'fromRaw') {
+          return (
+            <RawKey
+              onChange={ this.onChangeDetails } />
+          );
         }
 
         return (
@@ -220,6 +227,28 @@ export default class CreateAccount extends Component {
             canCreate: true
           });
 
+          this.newError(error);
+        });
+    } else if (createType === 'fromRaw') {
+      return api.personal
+        .newAccountFromSecret(this.state.rawKey, this.state.password)
+        .then((address) => {
+          this.setState({ address });
+          return api.personal
+            .setAccountName(address, this.state.name)
+            .then(() => api.personal.setAccountMeta(address, { passwordHint: this.state.passwordHint }));
+        })
+        .then(() => {
+          this.onNext();
+          this.props.onUpdate && this.props.onUpdate();
+        })
+        .catch((error) => {
+          console.error('onCreate', error);
+
+          this.setState({
+            canCreate: true
+          });
+
           this.newError(error);
         });
     } else if (createType === 'fromGeth') {
@@ -288,27 +317,35 @@ export default class CreateAccount extends Component {
     });
   }
 
-  onChangeDetails = (valid, { name, passwordHint, address, password, phrase }) => {
+  onChangeDetails = (canCreate, { name, passwordHint, address, password, phrase, rawKey }) => {
     this.setState({
-      canCreate: valid,
+      canCreate,
       name,
       passwordHint,
       address,
       password,
-      phrase
+      phrase,
+      rawKey
+    });
+  }
+
+  onChangeRaw = (canCreate, rawKey) => {
+    this.setState({
+      canCreate,
+      rawKey
     });
   }
 
-  onChangeGeth = (valid, gethAddresses) => {
+  onChangeGeth = (canCreate, gethAddresses) => {
     this.setState({
-      canCreate: valid,
+      canCreate,
       gethAddresses
     });
   }
 
-  onChangeWallet = (valid, { name, passwordHint, password, json }) => {
+  onChangeWallet = (canCreate, { name, passwordHint, password, json }) => {
     this.setState({
-      canCreate: valid,
+      canCreate,
       name,
       passwordHint,
       password,