Add a password strength component

js/package.json

@@ -189,6 +189,7 @@
     "valid-url": "1.0.9",
     "validator": "6.2.0",
     "web3": "0.17.0-beta",
-    "whatwg-fetch": "2.0.1"
+    "whatwg-fetch": "2.0.1",
+    "zxcvbn": "4.4.1"
   }
 }

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

@@ -15,11 +15,11 @@
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { Component, PropTypes } from 'react';
-import IconButton from 'material-ui/IconButton';
+import { IconButton } from 'material-ui';
 import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
 import ActionAutorenew from 'material-ui/svg-icons/action/autorenew';
 
-import { Form, Input, IdentityIcon } from '~/ui';
+import { Form, Input, IdentityIcon, PasswordStrength } from '~/ui';
 
 import ERRORS from '../errors';
 
@@ -90,6 +90,7 @@ export default class CreateAccount extends Component {
               onChange={ this.onEditPassword2 } />
           </div>
         </div>
+        <PasswordStrength input={ password1 } />
         { this.renderIdentitySelector() }
         { this.renderIdentities() }
       </Form>

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

@@ -16,7 +16,7 @@
 
 import React, { Component, PropTypes } from 'react';
 
-import { Form, Input } from '~/ui';
+import { Form, Input, PasswordStrength } from '~/ui';
 
 import styles from '../createAccount.css';
 
@@ -92,6 +92,7 @@ export default class RawKey extends Component {
               onChange={ this.onEditPassword2 } />
           </div>
         </div>
+        <PasswordStrength input={ password1 } />
       </Form>
     );
   }

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

@@ -17,7 +17,7 @@
 import React, { Component, PropTypes } from 'react';
 import { Checkbox } from 'material-ui';
 
-import { Form, Input } from '~/ui';
+import { Form, Input, PasswordStrength } from '~/ui';
 
 import styles from '../createAccount.css';
 
@@ -88,12 +88,14 @@ 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>
+        <PasswordStrength input={ password1 } />
+        <Checkbox
+          className={ styles.checkbox }
+          label='Key was created with Parity <1.4.5 on Windows'
+          checked={ windowsPhrase }
+          onCheck={ this.onToggleWindowsPhrase }
+        />
       </Form>
     );
   }

js/src/modals/CreateAccount/createAccount.js

@@ -16,6 +16,7 @@
 
 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';
@@ -100,52 +101,54 @@ export default class CreateAccount extends Component {
     switch (stage) {
       case 0:
         return (
-          <CreationType
-            onChange={ this.onChangeType } />
+          <CreationType onChange={ this.onChangeType } />
         );
 
       case 1:
         if (createType === 'fromNew') {
           return (
-            <NewAccount
-              onChange={ this.onChangeDetails } />
+            <NewAccount onChange={ this.onChangeDetails } />
           );
-        } else if (createType === 'fromGeth') {
+        }
+
+        if (createType === 'fromGeth') {
           return (
             <NewGeth
               accounts={ accounts }
-              onChange={ this.onChangeGeth } />
+              onChange={ this.onChangeGeth }
+            />
           );
-        } else if (createType === 'fromPhrase') {
+        }
+
+        if (createType === 'fromPhrase') {
           return (
-            <RecoveryPhrase
-              onChange={ this.onChangeDetails } />
+            <RecoveryPhrase onChange={ this.onChangeDetails } />
           );
-        } else if (createType === 'fromRaw') {
+        }
+
+        if (createType === 'fromRaw') {
           return (
-            <RawKey
-              onChange={ this.onChangeDetails } />
+            <RawKey onChange={ this.onChangeDetails } />
           );
         }
 
         return (
-          <NewImport
-            onChange={ this.onChangeWallet } />
+          <NewImport onChange={ this.onChangeWallet } />
         );
 
       case 2:
         if (createType === 'fromGeth') {
           return (
-            <AccountDetailsGeth
-              addresses={ this.state.gethAddresses } />
+            <AccountDetailsGeth addresses={ this.state.gethAddresses } />
           );
         }
 
         return (
           <AccountDetails
             address={ this.state.address }
             name={ this.state.name }
-            phrase={ this.state.phrase } />
+            phrase={ this.state.phrase }
+          />
         );
     }
   }
@@ -210,11 +213,14 @@ export default class CreateAccount extends Component {
     }
 
     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.' />
-      } />
+      <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.'
+          />
+        }
+      />
     );
   }
 
@@ -371,7 +377,7 @@ export default class CreateAccount extends Component {
   }
 
   onChangeDetails = (canCreate, { name, passwordHint, address, password, phrase, rawKey, windowsPhrase }) => {
-    this.setState({
+    const nextState = {
       canCreate,
       name,
       passwordHint,
@@ -380,7 +386,9 @@ export default class CreateAccount extends Component {
       phrase,
       windowsPhrase: windowsPhrase || false,
       rawKey
-    });
+    };
+
+    this.setState(nextState);
   }
 
   onChangeRaw = (canCreate, rawKey) => {

js/src/modals/PasswordManager/passwordManager.js

@@ -23,7 +23,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 import { newError, openSnackbar } from '~/redux/actions';
-import { Button, Modal, IdentityName, IdentityIcon } from '~/ui';
+import { Button, Modal, IdentityName, IdentityIcon, PasswordStrength } from '~/ui';
 import Form, { Input } from '~/ui/Form';
 import { CancelIcon, CheckIcon, SendIcon } from '~/ui/Icons';
 
@@ -120,7 +120,7 @@ class PasswordManager extends Component {
   }
 
   renderPage () {
-    const { busy, isRepeatValid, passwordHint } = this.store;
+    const { busy, isRepeatValid, newPassword, passwordHint } = this.store;
 
     return (
       <Tabs
@@ -240,6 +240,8 @@ class PasswordManager extends Component {
                     type='password' />
                 </div>
               </div>
+
+              <PasswordStrength input={ newPassword } />
             </div>
           </Form>
         </Tab>

js/src/ui/Form/PasswordStrength/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 './passwordStrength';

js/src/ui/Form/PasswordStrength/passwordStrength.css

@@ -0,0 +1,31 @@
+/* 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/>.
+*/
+
+.strength {
+  margin-top: 1.25em;
+}
+
+.feedback {
+  font-size: 0.75em;
+}
+
+.label {
+  user-select: none;
+  line-height: 18px;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.498039);
+}