Manually add \r to Windows phrases pre 1.4.5

js/src/modals/CreateAccount/RecoveryPhrase/recoveryPhrase.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { Checkbox } from 'material-ui';
 
 import { Form, Input } from '../../../ui';
 
@@ -37,6 +38,7 @@ export default class RecoveryPhrase extends Component {
     password1Error: ERRORS.invalidPassword,
     password2: '',
     password2Error: ERRORS.noMatchPassword,
+    windowsPhrase: false,
     isValidPass: false,
     isValidName: false,
     isValidPhrase: false
@@ -47,7 +49,7 @@ export default class RecoveryPhrase extends Component {
   }
 
   render () {
-    const { accountName, accountNameError, passwordHint, password1, password1Error, password2, password2Error, recoveryPhrase } = this.state;
+    const { accountName, accountNameError, passwordHint, password1, password1Error, password2, password2Error, recoveryPhrase, windowsPhrase } = this.state;
 
     return (
       <Form>
@@ -86,20 +88,26 @@ export default class RecoveryPhrase extends Component {
               value={ password2 }
               onChange={ this.onEditPassword2 } />
           </div>
+          <Checkbox
+            className={ styles.checkbox }
+            label='Key was created with Parity <1.4.5 on Windows'
+            checked={ windowsPhrase }
+            onCheck={ this.onToggleWindowsPhrase } />
         </div>
       </Form>
     );
   }
 
   updateParent = () => {
-    const { isValidName, isValidPass, isValidPhrase, accountName, passwordHint, password1, recoveryPhrase } = this.state;
+    const { isValidName, isValidPass, isValidPhrase, accountName, passwordHint, password1, recoveryPhrase, windowsPhrase } = this.state;
     const isValid = isValidName && isValidPass && isValidPhrase;
 
     this.props.onChange(isValid, {
       name: accountName,
       passwordHint,
       password: password1,
-      phrase: recoveryPhrase
+      phrase: recoveryPhrase,
+      windowsPhrase
     });
   }
 
@@ -109,22 +117,31 @@ export default class RecoveryPhrase extends Component {
     });
   }
 
+  onToggleWindowsPhrase = (event) => {
+    this.setState({
+      windowsPhrase: !this.state.windowsPhrase
+    }, this.updateParent);
+  }
+
   onEditPhrase = (event) => {
     const recoveryPhrase = event.target.value
       .toLowerCase() // wordlists are lowercase
       .trim() // remove whitespace at both ends
       .replace(/\s/g, ' ') // replace any whitespace with single space
       .replace(/ +/g, ' '); // replace multiple spaces with a single space
 
-    const parts = recoveryPhrase.split(' ');
+    const phraseParts = recoveryPhrase
+      .split(' ')
+      .map((part) => part.trim())
+      .filter((part) => part.length);
     let recoveryPhraseError = null;
 
-    if (!recoveryPhrase || recoveryPhrase.length < 25 || parts.length < 8) {
+    if (!recoveryPhrase || recoveryPhrase.length < 25 || phraseParts.length < 8) {
       recoveryPhraseError = ERRORS.noPhrase;
     }
 
     this.setState({
-      recoveryPhrase,
+      recoveryPhrase: phraseParts.join(' '),
       recoveryPhraseError,
       isValidPhrase: !recoveryPhraseError
     }, this.updateParent);

js/src/modals/CreateAccount/createAccount.css

@@ -14,6 +14,7 @@
 /* You should have received a copy of the GNU General Public License
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
+
 .spaced {
   line-height: 1.618em;
 }
@@ -67,3 +68,7 @@
 .upload>div {
   margin-right: 0.5em;
 }
+
+.checkbox {
+  margin-top: 2em;
+}

js/src/modals/CreateAccount/createAccount.js

@@ -59,6 +59,7 @@ export default class CreateAccount extends Component {
     passwordHint: null,
     password: null,
     phrase: null,
+    windowsPhrase: false,
     rawKey: null,
     json: null,
     canCreate: false,
@@ -200,16 +201,24 @@ export default class CreateAccount extends Component {
   }
 
   onCreate = () => {
-    const { createType } = this.state;
+    const { createType, windowsPhrase } = this.state;
     const { api } = this.context;
 
     this.setState({
       canCreate: false
     });
 
     if (createType === 'fromNew' || createType === 'fromPhrase') {
+      let phrase = this.state.phrase;
+      if (createType === 'fromPhrase' && windowsPhrase) {
+        phrase = phrase
+          .split(' ') // get the words
+          .map((word) => word === 'misjudged' ? word : `${word}\r`) // add \r after each (except last in dict)
+          .join(' '); // re-create string
+      }
+
       return api.parity
-        .newAccountFromPhrase(this.state.phrase, this.state.password)
+        .newAccountFromPhrase(phrase, this.state.password)
         .then((address) => {
           this.setState({ address });
           return api.parity
@@ -326,14 +335,15 @@ export default class CreateAccount extends Component {
     });
   }
 
-  onChangeDetails = (canCreate, { name, passwordHint, address, password, phrase, rawKey }) => {
+  onChangeDetails = (canCreate, { name, passwordHint, address, password, phrase, rawKey, windowsPhrase }) => {
     this.setState({
       canCreate,
       name,
       passwordHint,
       address,
       password,
       phrase,
+      windowsPhrase: windowsPhrase || false,
       rawKey
     });
   }