Remove existence & length checks on passwords & phrases (#3854)

* Allow input to receive FormattedMessage errors

* Only do existence checks on phrases & passwords

* Add missing import

* Remove existence checks, display security reminder

js/src/modals/CreateAccount/NewAccount/index.js

@@ -14,10 +14,4 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
-import { ERRORS } from './newAccount';
-
 export default from './newAccount';
-
-export {
-  ERRORS
-};

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

@@ -21,21 +21,10 @@ import ActionAutorenew from 'material-ui/svg-icons/action/autorenew';
 
 import { Form, Input, IdentityIcon } from '~/ui';
 
+import ERRORS from '../errors';
+
 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 and contain the prefix "0x"',
-  invalidPassword: 'you need to specify a password >= 8 characters',
-  noMatchPassword: 'the supplied passwords does not match'
-};
-
-export {
-  ERRORS
-};
-
 export default class CreateAccount extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired,
@@ -49,15 +38,15 @@ export default class CreateAccount extends Component {
   state = {
     accountName: '',
     accountNameError: ERRORS.noName,
+    accounts: null,
+    isValidName: false,
+    isValidPass: false,
     passwordHint: '',
     password1: '',
-    password1Error: ERRORS.invalidPassword,
+    password1Error: null,
     password2: '',
-    password2Error: ERRORS.noMatchPassword,
-    accounts: null,
-    selectedAddress: '',
-    isValidPass: false,
-    isValidName: false
+    password2Error: null,
+    selectedAddress: ''
   }
 
   componentWillMount () {
@@ -230,60 +219,55 @@ export default class CreateAccount extends Component {
     }, this.updateParent);
   }
 
-  onEditPasswordHint = (event, value) => {
+  onEditPasswordHint = (event, passwordHint) => {
     this.setState({
-      passwordHint: value
+      passwordHint
     });
   }
 
   onEditAccountName = (event) => {
-    const value = event.target.value;
-    let error = null;
+    const accountName = event.target.value;
+    let accountNameError = null;
 
-    if (!value || value.trim().length < 2) {
-      error = ERRORS.noName;
+    if (!accountName || !accountName.trim().length) {
+      accountNameError = ERRORS.noName;
     }
 
     this.setState({
-      accountName: value,
-      accountNameError: error,
-      isValidName: !error
+      accountName,
+      accountNameError,
+      isValidName: !accountNameError
     }, this.updateParent);
   }
 
   onEditPassword1 = (event) => {
-    const value = event.target.value;
-    let error1 = null;
-    let error2 = null;
+    const password1 = event.target.value;
+    let password2Error = null;
 
-    if (!value || value.trim().length < 8) {
-      error1 = ERRORS.invalidPassword;
-    }
-
-    if (value !== this.state.password2) {
-      error2 = ERRORS.noMatchPassword;
+    if (password1 !== this.state.password2) {
+      password2Error = ERRORS.noMatchPassword;
     }
 
     this.setState({
-      password1: value,
-      password1Error: error1,
-      password2Error: error2,
-      isValidPass: !error1 && !error2
+      password1,
+      password1Error: null,
+      password2Error,
+      isValidPass: !password2Error
     }, this.updateParent);
   }
 
   onEditPassword2 = (event) => {
-    const value = event.target.value;
-    let error2 = null;
+    const password2 = event.target.value;
+    let password2Error = null;
 
-    if (value !== this.state.password1) {
-      error2 = ERRORS.noMatchPassword;
+    if (password2 !== this.state.password1) {
+      password2Error = ERRORS.noMatchPassword;
     }
 
     this.setState({
-      password2: value,
-      password2Error: error2,
-      isValidPass: !error2
+      password2,
+      password2Error,
+      isValidPass: !password2Error
     }, this.updateParent);
   }
 

js/src/modals/CreateAccount/NewGeth/newGeth.js

@@ -47,6 +47,7 @@ export default class NewGeth extends Component {
         <div className={ styles.list }>There are currently no importable keys available from the Geth keystore, which are not already available on your Parity instance</div>
       );
     }
+
     const checkboxes = available.map((account) => {
       const label = (
         <div className={ styles.selection }>

js/src/modals/CreateAccount/NewImport/newImport.js

@@ -21,17 +21,13 @@ import EditorAttachFile from 'material-ui/svg-icons/editor/attach-file';
 
 import { Form, Input } from '~/ui';
 
+import ERRORS from '../errors';
+
 import styles from '../createAccount.css';
 
 const FAKEPATH = 'C:\\fakepath\\';
 const STYLE_HIDDEN = { display: 'none' };
 
-const ERRORS = {
-  noName: 'you need to specify a valid name for the account',
-  noPassword: 'supply a valid password to confirm the transaction',
-  noFile: 'select a valid wallet file to import'
-};
-
 export default class NewImport extends Component {
   static propTypes = {
     onChange: PropTypes.func.isRequired
@@ -40,15 +36,15 @@ export default class NewImport extends Component {
   state = {
     accountName: '',
     accountNameError: ERRORS.noName,
-    passwordHint: '',
-    password: '',
-    passwordError: ERRORS.noPassword,
-    walletFile: '',
-    walletFileError: ERRORS.noFile,
-    walletJson: '',
+    isValidFile: false,
     isValidPass: false,
     isValidName: false,
-    isValidFile: false
+    password: '',
+    passwordError: null,
+    passwordHint: '',
+    walletFile: '',
+    walletFileError: ERRORS.noFile,
+    walletJson: ''
   }
 
   componentWillMount () {
@@ -143,39 +139,34 @@ export default class NewImport extends Component {
     });
   }
 
-  onEditPasswordHint = (event, value) => {
+  onEditPasswordHint = (event, passwordHint) => {
     this.setState({
-      passwordHint: value
+      passwordHint
     });
   }
 
   onEditAccountName = (event) => {
-    const value = event.target.value;
-    let error = null;
+    const accountName = event.target.value;
+    let accountNameError = null;
 
-    if (!value || value.trim().length < 2) {
-      error = ERRORS.noName;
+    if (!accountName || !accountName.trim().length) {
+      accountNameError = ERRORS.noName;
     }
 
     this.setState({
-      accountName: value,
-      accountNameError: error,
-      isValidName: !error
+      accountName,
+      accountNameError,
+      isValidName: !accountNameError
     }, this.updateParent);
   }
 
   onEditPassword = (event) => {
-    let error = null;
-    const value = event.target.value;
-
-    if (!value || !value.length) {
-      error = ERRORS.noPassword;
-    }
+    const password = event.target.value;
 
     this.setState({
-      password: value,
-      passwordError: error,
-      isValidPass: !error
+      password,
+      passwordError: null,
+      isValidPass: true
     }, this.updateParent);
   }
 }

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

@@ -20,7 +20,7 @@ import { Form, Input } from '~/ui';
 
 import styles from '../createAccount.css';
 
-import { ERRORS } from '../NewAccount';
+import ERRORS from '../errors';
 
 export default class RawKey extends Component {
   static contextTypes = {
@@ -32,18 +32,18 @@ export default class RawKey extends Component {
   }
 
   state = {
-    rawKey: '',
-    rawKeyError: ERRORS.noKey,
     accountName: '',
     accountNameError: ERRORS.noName,
+    isValidKey: false,
+    isValidName: false,
+    isValidPass: false,
     passwordHint: '',
     password1: '',
-    password1Error: ERRORS.invalidPassword,
+    password1Error: null,
     password2: '',
-    password2Error: ERRORS.noMatchPassword,
-    isValidPass: false,
-    isValidName: false,
-    isValidKey: false
+    password2Error: null,
+    rawKey: '',
+    rawKeyError: ERRORS.noKey
   }
 
   componentWillMount () {
@@ -138,7 +138,7 @@ export default class RawKey extends Component {
     const accountName = event.target.value;
     let accountNameError = null;
 
-    if (!accountName || accountName.trim().length < 2) {
+    if (!accountName || !accountName.trim().length) {
       accountNameError = ERRORS.noName;
     }
 
@@ -150,38 +150,33 @@ export default class RawKey extends Component {
   }
 
   onEditPassword1 = (event) => {
-    const value = event.target.value;
-    let error1 = null;
-    let error2 = null;
+    const password1 = event.target.value;
+    let password2Error = null;
 
-    if (!value || value.trim().length < 8) {
-      error1 = ERRORS.invalidPassword;
-    }
-
-    if (value !== this.state.password2) {
-      error2 = ERRORS.noMatchPassword;
+    if (password1 !== this.state.password2) {
+      password2Error = ERRORS.noMatchPassword;
     }
 
     this.setState({
-      password1: value,
-      password1Error: error1,
-      password2Error: error2,
-      isValidPass: !error1 && !error2
+      password1,
+      password1Error: null,
+      password2Error,
+      isValidPass: !password2Error
     }, this.updateParent);
   }
 
   onEditPassword2 = (event) => {
-    const value = event.target.value;
-    let error2 = null;
+    const password2 = event.target.value;
+    let password2Error = null;
 
-    if (value !== this.state.password1) {
-      error2 = ERRORS.noMatchPassword;
+    if (password2 !== this.state.password1) {
+      password2Error = ERRORS.noMatchPassword;
     }
 
     this.setState({
-      password2: value,
-      password2Error: error2,
-      isValidPass: !error2
+      password2,
+      password2Error,
+      isValidPass: !password2Error
     }, this.updateParent);
   }
 }

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

@@ -21,7 +21,7 @@ import { Form, Input } from '~/ui';
 
 import styles from '../createAccount.css';
 
-import { ERRORS } from '../NewAccount';
+import ERRORS from '../errors';
 
 export default class RecoveryPhrase extends Component {
   static propTypes = {
@@ -29,19 +29,19 @@ export default class RecoveryPhrase extends Component {
   }
 
   state = {
-    recoveryPhrase: '',
-    recoveryPhraseError: ERRORS.noPhrase,
     accountName: '',
     accountNameError: ERRORS.noName,
-    passwordHint: '',
-    password1: '',
-    password1Error: ERRORS.invalidPassword,
-    password2: '',
-    password2Error: ERRORS.noMatchPassword,
-    windowsPhrase: false,
     isValidPass: false,
     isValidName: false,
-    isValidPhrase: false
+    isValidPhrase: false,
+    passwordHint: '',
+    password1: '',
+    password1Error: null,
+    password2: '',
+    password2Error: null,
+    recoveryPhrase: '',
+    recoveryPhraseError: null,
+    windowsPhrase: false
   }
 
   componentWillMount () {
@@ -99,13 +99,13 @@ export default class RecoveryPhrase extends Component {
   }
 
   updateParent = () => {
-    const { isValidName, isValidPass, isValidPhrase, accountName, passwordHint, password1, recoveryPhrase, windowsPhrase } = this.state;
+    const { accountName, isValidName, isValidPass, isValidPhrase, password1, passwordHint, recoveryPhrase, windowsPhrase } = this.state;
     const isValid = isValidName && isValidPass && isValidPhrase;
 
     this.props.onChange(isValid, {
       name: accountName,
-      passwordHint,
       password: password1,
+      passwordHint,
       phrase: recoveryPhrase,
       windowsPhrase
     });
@@ -134,67 +134,57 @@ export default class RecoveryPhrase extends Component {
       .split(' ')
       .map((part) => part.trim())
       .filter((part) => part.length);
-    let recoveryPhraseError = null;
-
-    if (!recoveryPhrase || recoveryPhrase.length < 25 || phraseParts.length < 8) {
-      recoveryPhraseError = ERRORS.noPhrase;
-    }
 
     this.setState({
       recoveryPhrase: phraseParts.join(' '),
-      recoveryPhraseError,
-      isValidPhrase: !recoveryPhraseError
+      recoveryPhraseError: null,
+      isValidPhrase: true
     }, this.updateParent);
   }
 
   onEditAccountName = (event) => {
-    const value = event.target.value;
-    let error = null;
+    const accountName = event.target.value;
+    let accountNameError = null;
 
-    if (!value || value.trim().length < 2) {
-      error = ERRORS.noName;
+    if (!accountName || !accountName.trim().length) {
+      accountNameError = ERRORS.noName;
     }
 
     this.setState({
-      accountName: value,
-      accountNameError: error,
-      isValidName: !error
+      accountName,
+      accountNameError,
+      isValidName: !accountNameError
     }, this.updateParent);
   }
 
   onEditPassword1 = (event) => {
-    const value = event.target.value;
-    let error1 = null;
-    let error2 = null;
+    const password1 = event.target.value;
+    let password2Error = null;
 
-    if (!value || value.trim().length < 8) {
-      error1 = ERRORS.invalidPassword;
-    }
-
-    if (value !== this.state.password2) {
-      error2 = ERRORS.noMatchPassword;
+    if (password1 !== this.state.password2) {
+      password2Error = ERRORS.noMatchPassword;
     }
 
     this.setState({
-      password1: value,
-      password1Error: error1,
-      password2Error: error2,
-      isValidPass: !error1 && !error2
+      password1,
+      password1Error: null,
+      password2Error,
+      isValidPass: !password2Error
     }, this.updateParent);
   }
 
   onEditPassword2 = (event) => {
-    const value = event.target.value;
-    let error2 = null;
+    const password2 = event.target.value;
+    let password2Error = null;
 
-    if (value !== this.state.password1) {
-      error2 = ERRORS.noMatchPassword;
+    if (password2 !== this.state.password1) {
+      password2Error = ERRORS.noMatchPassword;
     }
 
     this.setState({
-      password2: value,
-      password2Error: error2,
-      isValidPass: !error2
+      password2,
+      password2Error,
+      isValidPass: !password2Error
     }, this.updateParent);
   }
 }

js/src/modals/CreateAccount/createAccount.js

@@ -15,6 +15,7 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
+import { FormattedMessage } from 'react-intl';
 import ActionDone from 'material-ui/svg-icons/action/done';
 import ActionDoneAll from 'material-ui/svg-icons/action/done-all';
 import ContentClear from 'material-ui/svg-icons/content/clear';
@@ -22,7 +23,7 @@ import NavigationArrowBack from 'material-ui/svg-icons/navigation/arrow-back';
 import NavigationArrowForward from 'material-ui/svg-icons/navigation/arrow-forward';
 import PrintIcon from 'material-ui/svg-icons/action/print';
 
-import { Button, Modal } from '~/ui';
+import { Button, Modal, Warning } from '~/ui';
 
 import AccountDetails from './AccountDetails';
 import AccountDetailsGeth from './AccountDetailsGeth';
@@ -86,6 +87,7 @@ export default class CreateAccount extends Component {
         actions={ this.renderDialogActions() }
         current={ stage }
         steps={ steps }>
+        { this.renderWarning() }
         { this.renderPage() }
       </Modal>
     );
@@ -200,6 +202,22 @@ export default class CreateAccount extends Component {
     }
   }
 
+  renderWarning () {
+    const { createType, stage } = this.state;
+
+    if (stage !== 1 || ['fromJSON', 'fromPresale'].includes(createType)) {
+      return null;
+    }
+
+    return (
+      <Warning warning={
+        <FormattedMessage
+          id='createAccount.warning.insecurePassword'
+          defaultMessage='It is recommended that a strong password be used to secure your accounts. Empty and trivial passwords are a security risk.' />
+      } />
+    );
+  }
+
   onNext = () => {
     this.setState({
       stage: this.state.stage + 1

js/src/modals/CreateAccount/errors.js

@@ -0,0 +1,45 @@
+// 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 React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+export default {
+  noFile:
+    <FormattedMessage
+      id='createAccount.error.noFile'
+      defaultMessage='select a valid wallet file to import' />,
+
+  noKey:
+    <FormattedMessage
+      id='createAccount.error.noKey'
+      defaultMessage='you need to provide the raw private key' />,
+
+  noMatchPassword:
+    <FormattedMessage
+      id='createAccount.error.noMatchPassword'
+      defaultMessage='the supplied passwords does not match' />,
+
+  noName:
+    <FormattedMessage
+      id='createAccount.error.noName'
+      defaultMessage='you need to specify a valid name for the account' />,
+
+  invalidKey:
+    <FormattedMessage
+      id='createAccount.error.invalidKey'
+      defaultMessage='the raw key needs to be hex, 64 characters in length and contain the prefix "0x"' />
+};

js/src/ui/Form/Input/input.js

@@ -50,7 +50,7 @@ export default class Input extends Component {
     children: PropTypes.node,
     className: PropTypes.string,
     disabled: PropTypes.bool,
-    error: PropTypes.string,
+    error: nodeOrStringProptype(),
     readOnly: PropTypes.bool,
     floatCopy: PropTypes.bool,
     hint: nodeOrStringProptype(),
@@ -96,8 +96,7 @@ export default class Input extends Component {
 
   render () {
     const { value } = this.state;
-    const { children, className, hideUnderline, disabled, error, label } = this.props;
-    const { hint, multiLine, rows, type, min, max, style } = this.props;
+    const { children, className, disabled, error, hideUnderline, hint, label, max, min, multiLine, rows, style, type } = this.props;
 
     const readOnly = this.props.readOnly || disabled;
 

js/src/ui/Warning/index.js

@@ -0,0 +1,17 @@
+// 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/>.
+
+export default from './warning';

js/src/ui/Warning/warning.css

@@ -0,0 +1,26 @@
+/* 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/>.
+*/
+
+.warning {
+  background: #f80;
+  border-radius: 0.5em;
+  color: white;
+  font-size: 0.75em;
+  margin-bottom: 1em;
+  padding: 0.75em;
+  text-align: center;
+}

js/src/ui/Warning/warning.js

@@ -0,0 +1,41 @@
+// 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 React, { Component } from 'react';
+
+import { nodeOrStringProptype } from '~/util/proptypes';
+
+import styles from './warning.css';
+
+export default class Warning extends Component {
+  static propTypes = {
+    warning: nodeOrStringProptype()
+  };
+
+  render () {
+    const { warning } = this.props;
+
+    if (!warning) {
+      return null;
+    }
+
+    return (
+      <div className={ styles.warning }>
+        { warning }
+      </div>
+    );
+  }
+}

js/src/ui/index.js

@@ -49,6 +49,7 @@ import Tags from './Tags';
 import Tooltips, { Tooltip } from './Tooltips';
 import TxHash from './TxHash';
 import TxList from './TxList';
+import Warning from './Warning';
 
 export {
   Actionbar,
@@ -99,5 +100,6 @@ export {
   Tooltips,
   TxHash,
   TxList,
-  TypedInput
+  TypedInput,
+  Warning
 };