AccountCreate updates

js/src/modals/CreateAccount/AccountDetails/accountDetails.js

@@ -14,33 +14,54 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import { Form, Input, InputAddress } from '~/ui';
 
+@observer
 export default class AccountDetails extends Component {
   static propTypes = {
-    address: PropTypes.string,
-    name: PropTypes.string,
-    phrase: PropTypes.string
+    store: PropTypes.object.isRequired
   }
 
   render () {
-    const { address, name } = this.props;
+    const { address, name } = this.props.store;
 
     return (
       <Form>
         <Input
-          readOnly
           allowCopy
-          hint='a descriptive name for the account'
-          label='account name'
+          hint={
+            <FormattedMessage
+              id='createAccount.accountDetails.name.hint'
+              defaultMessage='a descriptive name for the account'
+            />
+          }
+          label={
+            <FormattedMessage
+              id='createAccount.accountDetails.name.label'
+              defaultMessage='account name'
+            />
+          }
+          readOnly
           value={ name }
         />
         <InputAddress
           disabled
-          hint='the network address for the account'
-          label='address'
+          hint={
+            <FormattedMessage
+              id='createAccount.accountDetails.address.hint'
+              defaultMessage='the network address for the account'
+            />
+          }
+          label={
+            <FormattedMessage
+              id='createAccount.accountDetails.address.label'
+              defaultMessage='address'
+            />
+          }
           value={ address }
         />
         { this.renderPhrase() }
@@ -49,18 +70,28 @@ export default class AccountDetails extends Component {
   }
 
   renderPhrase () {
-    const { phrase } = this.props;
+    const { phrase } = this.props.store;
 
     if (!phrase) {
       return null;
     }
 
     return (
       <Input
-        readOnly
         allowCopy
-        hint='the account recovery phrase'
-        label='owner recovery phrase (keep private and secure, it allows full and unlimited access to the account)'
+        hint={
+          <FormattedMessage
+            id='createAccount.accountDetails.phrase.hint'
+            defaultMessage='the account recovery phrase'
+          />
+        }
+        label={
+          <FormattedMessage
+            id='createAccount.accountDetails.phrase.label'
+            defaultMessage='owner recovery phrase (keep private and secure, it allows full and unlimited access to the account)'
+          />
+        }
+        readOnly
         value={ phrase }
       />
     );

js/src/modals/CreateAccount/AccountDetails/accountDetails.spec.js

@@ -0,0 +1,42 @@
+// Copyright 2015, 2016 Parity Technologies (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 { shallow } from 'enzyme';
+import React from 'react';
+
+import { createStore } from '../createAccount.test.js';
+
+import AccountDetails from './';
+
+let component;
+let store;
+
+function render () {
+  store = createStore();
+  component = shallow(
+    <AccountDetails
+      store={ store }
+    />
+  );
+
+  return component;
+}
+
+describe('modals/CreateAccount/AccountDetails', () => {
+  it('renders with defaults', () => {
+    expect(render()).to.be.ok;
+  });
+});

js/src/modals/CreateAccount/AccountDetailsGeth/accountDetailsGeth.css

@@ -14,9 +14,10 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
 .address {
   color: #999;
-  padding-top: 1em;
   line-height: 1.618em;
   padding-left: 2em;
+  padding-top: 1em;
 }

js/src/modals/CreateAccount/AccountDetailsGeth/accountDetailsGeth.js

@@ -14,29 +14,46 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 
 import styles from './accountDetailsGeth.css';
 
+@observer
 export default class AccountDetailsGeth extends Component {
   static propTypes = {
-    addresses: PropTypes.array
+    store: PropTypes.object.isRequired
   }
 
   render () {
-    const { addresses } = this.props;
-
-    const formatted = addresses.map((address, idx) => {
-      const comma = !idx ? '' : ((idx === addresses.length - 1) ? ' & ' : ', ');
-
-      return `${comma}${address}`;
-    }).join('');
+    const { gethAddresses } = this.props.store;
 
     return (
       <div>
-        <div>You have imported { addresses.length } addresses from the Geth keystore:</div>
-        <div className={ styles.address }>{ formatted }</div>
+        <div>
+          <FormattedMessage
+            id='createAccount.accountDetailsGeth.imported'
+            defaultMessage='You have imported {number} addresses from the Geth keystore:'
+            values={ {
+              number: gethAddresses.length
+            } }
+          />
+        </div>
+        <div className={ styles.address }>
+          { this.formatAddresses(gethAddresses) }
+        </div>
       </div>
     );
   }
+
+  formatAddresses (addresses) {
+    return addresses.map((address, index) => {
+      const comma = !index
+        ? ''
+        : ((index === addresses.length - 1) ? ' & ' : ', ');
+
+      return `${comma}${address}`;
+    }).join('');
+  }
 }

js/src/modals/CreateAccount/AccountDetailsGeth/accountDetailsGeth.spec.js

@@ -0,0 +1,60 @@
+// Copyright 2015, 2016 Parity Technologies (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 { shallow } from 'enzyme';
+import React from 'react';
+
+import { createStore } from '../createAccount.test.js';
+
+import AccountDetailsGeth from './';
+
+let component;
+let store;
+
+function render () {
+  store = createStore();
+  component = shallow(
+    <AccountDetailsGeth
+      store={ store }
+    />
+  );
+
+  return component;
+}
+
+describe('modals/CreateAccount/AccountDetailsGeth', () => {
+  it('renders with defaults', () => {
+    expect(render()).to.be.ok;
+  });
+
+  describe('utility', () => {
+    describe('formatAddresses', () => {
+      let instance;
+
+      beforeEach(() => {
+        instance = component.instance();
+      });
+
+      it('renders a single item', () => {
+        expect(instance.formatAddresses(['one'])).to.equal('one');
+      });
+
+      it('renders multiple items', () => {
+        expect(instance.formatAddresses(['one', 'two', 'three'])).to.equal('one, two & three');
+      });
+    });
+  });
+});

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

@@ -14,50 +14,81 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+import { observer } from 'mobx-react';
 import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
 
 import styles from '../createAccount.css';
 
+@observer
 export default class CreationType extends Component {
   static propTypes = {
-    onChange: PropTypes.func.isRequired
-  }
-
-  componentWillMount () {
-    this.props.onChange('fromNew');
+    store: PropTypes.object.isRequired
   }
 
   render () {
+    const { createType } = this.props.store;
+
     return (
       <div className={ styles.spaced }>
         <RadioButtonGroup
-          defaultSelected='fromNew'
+          defaultSelected={ createType }
           name='creationType'
           onChange={ this.onChange }
         >
           <RadioButton
-            label='Create new account manually'
+            label={
+              <FormattedMessage
+                id='createAccount.creationType.fromNew.label'
+                defaultMessage='Create new account manually'
+              />
+            }
             value='fromNew'
           />
           <RadioButton
-            label='Recover account from recovery phrase'
+            label={
+              <FormattedMessage
+                id='createAccount.creationType.fromPhrase.label'
+                defaultMessage='Recover account from recovery phrase'
+              />
+            }
             value='fromPhrase'
           />
           <RadioButton
-            label='Import accounts from Geth keystore'
+            label={
+              <FormattedMessage
+                id='createAccount.creationType.fromGeth.label'
+                defaultMessage='Import accounts from Geth keystore'
+              />
+            }
             value='fromGeth'
           />
           <RadioButton
-            label='Import account from a backup JSON file'
+            label={
+              <FormattedMessage
+                id='createAccount.creationType.fromJSON.label'
+                defaultMessage='Import account from a backup JSON file'
+              />
+            }
             value='fromJSON'
           />
           <RadioButton
-            label='Import account from an Ethereum pre-sale wallet'
+            label={
+              <FormattedMessage
+                id='createAccount.creationType.fromPresale.label'
+                defaultMessage='Import account from an Ethereum pre-sale wallet'
+              />
+            }
             value='fromPresale'
           />
           <RadioButton
-            label='Import raw private key'
+            label={
+              <FormattedMessage
+                id='createAccount.creationType.fromRaw.label'
+                defaultMessage='Import raw private key'
+              />
+            }
             value='fromRaw'
           />
         </RadioButtonGroup>
@@ -66,6 +97,8 @@ export default class CreationType extends Component {
   }
 
   onChange = (event) => {
-    this.props.onChange(event.target.value);
+    const { store } = this.props;
+
+    store.setCreateType(event.target.value);
   }
 }