Add a password strength component (#4153)

* Added new PasswordStrength Component

* Added tests

* PR Grumbles

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);
+}

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

@@ -0,0 +1,125 @@
+// 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, PropTypes } from 'react';
+import { debounce } from 'lodash';
+import { LinearProgress } from 'material-ui';
+import { FormattedMessage } from 'react-intl';
+import zxcvbn from 'zxcvbn';
+
+import styles from './passwordStrength.css';
+
+const BAR_STYLE = {
+  borderRadius: 1,
+  height: 7,
+  marginTop: '0.5em'
+};
+
+export default class PasswordStrength extends Component {
+  static propTypes = {
+    input: PropTypes.string.isRequired
+  };
+
+  state = {
+    strength: null
+  };
+
+  constructor (props) {
+    super(props);
+
+    this.updateStrength = debounce(this._updateStrength, 50, { leading: true });
+  }
+
+  componentWillMount () {
+    this.updateStrength(this.props.input);
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.input !== this.props.input) {
+      this.updateStrength(nextProps.input);
+    }
+  }
+
+  _updateStrength (input = '') {
+    const strength = zxcvbn(input);
+    this.setState({ strength });
+  }
+
+  render () {
+    const { strength } = this.state;
+
+    if (!strength) {
+      return null;
+    }
+
+    const { score, feedback } = strength;
+
+    // Score is between 0 and 4
+    const value = score * 100 / 5 + 20;
+    const color = this.getStrengthBarColor(score);
+
+    return (
+      <div className={ styles.strength }>
+        <label className={ styles.label }>
+          <FormattedMessage
+            id='ui.passwordStrength.label'
+            defaultMessage='password strength'
+          />
+        </label>
+        <LinearProgress
+          color={ color }
+          mode='determinate'
+          style={ BAR_STYLE }
+          value={ value }
+        />
+        <div className={ styles.feedback }>
+          { this.renderFeedback(feedback) }
+        </div>
+      </div>
+    );
+  }
+
+  // Note that the suggestions are in english, thus it wouldn't
+  // make sense to add translations to surrounding words
+  renderFeedback (feedback = {}) {
+    const { suggestions = [] } = feedback;
+
+    return (
+      <div>
+        <p>
+          { suggestions.join(' ') }
+        </p>
+      </div>
+    );
+  }
+
+  getStrengthBarColor (score) {
+    switch (score) {
+      case 4:
+      case 3:
+        return 'lightgreen';
+
+      case 2:
+        return 'yellow';
+
+      case 1:
+        return 'orange';
+
+      default:
+        return 'red';
+    }
+  }
+}

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

@@ -0,0 +1,62 @@
+// 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 PasswordStrength from './passwordStrength';
+
+const INPUT_A = 'l33t_test';
+const INPUT_B = 'Fu£dk;s$%kdlaOe9)_';
+const INPUT_NULL = '';
+
+function render (props) {
+  return shallow(
+    <PasswordStrength { ...props } />
+  ).shallow();
+}
+
+describe('ui/Form/PasswordStrength', () => {
+  describe('rendering', () => {
+    it('renders', () => {
+      expect(render({ input: INPUT_A })).to.be.ok;
+    });
+
+    it('renders a linear progress', () => {
+      expect(render({ input: INPUT_A }).find('LinearProgress')).to.be.ok;
+    });
+
+    describe('compute strength', () => {
+      it('has low score with empty input', () => {
+        expect(
+          render({ input: INPUT_NULL }).find('LinearProgress').props().value
+        ).to.equal(20);
+      });
+
+      it('has medium score', () => {
+        expect(
+          render({ input: INPUT_A }).find('LinearProgress').props().value
+        ).to.equal(60);
+      });
+
+      it('has high score', () => {
+        expect(
+          render({ input: INPUT_B }).find('LinearProgress').props().value
+        ).to.equal(100);
+      });
+    });
+  });
+});

js/src/ui/index.js

@@ -43,6 +43,7 @@ import Modal, { Busy as BusyStep, Completed as CompletedStep } from './Modal';
 import muiTheme from './Theme';
 import Page from './Page';
 import ParityBackground from './ParityBackground';
+import PasswordStrength from './Form/PasswordStrength';
 import ShortenedHash from './ShortenedHash';
 import SignerIcon from './SignerIcon';
 import Tags from './Tags';
@@ -91,6 +92,7 @@ export {
   muiTheme,
   Page,
   ParityBackground,
+  PasswordStrength,
   RadioButtons,
   ShortenedHash,
   Select,