Add password strength meter

frontend/client/__tests__/reset-password.test.js

@@ -33,14 +33,14 @@ jest.mock('../src/store/firebase', () => {
 
 describe('reset password', () => {
   it.each([
-    ['Changes password succesfully (ResetPasswordModal)', ResetPasswordModal, 'password1', 'password1'],
+    ['Changes password succesfully (ResetPasswordModal)', ResetPasswordModal, 'horsebattery123', 'horsebattery123'],
     [
       'Does not change password when confirmation does not match (ResetPasswordModal)',
       ResetPasswordModal,
       'password1',
       'password2',
     ],
-    ['Changes password succesfully (ChangePasswordModal)', ChangePasswordModal, 'password1', 'password1'],
+    ['Changes password succesfully (ChangePasswordModal)', ChangePasswordModal, 'horsebattery123', 'horsebattery123'],
     [
       'Does not change password when confirmation does not match (ChangePasswordModal)',
       ChangePasswordModal,
@@ -68,7 +68,7 @@ describe('reset password', () => {
     }
     wrapper
       .find('#new-password')
-      .at(1)
+      .at(2)
       .simulate('change', {
         target: {
           name: 'new-password',

frontend/client/src/components/ChangePasswordModal.js

@@ -4,6 +4,7 @@ import ModalInput from '../components/ModalInput'
 import PendingOperationButton from '../components/PendingOperationButton'
 import { withStore } from '../store'
 import Logging from '../util/logging'
+import PasswordStrengthModalInput from './PasswordStrengthModalInput'
 
 class ChangePasswordModalBase extends React.Component {
   constructor(props) {
@@ -38,7 +39,6 @@ class ChangePasswordModalBase extends React.Component {
       }
       if (fieldName === 'new-password') {
         newState.password = fieldContent
-        newState.passwordIsValid = newState.password && newState.password.length >= 6
         newState.passwordsMatch = newState.password === state.confirmPassword
       }
       if (fieldName === 'confirm-password') {
@@ -107,19 +107,16 @@ class ChangePasswordModalBase extends React.Component {
         <p>{this.state.subHeading}</p>
         {this.state.showNewPasswordInputs && (
           <form className="change-password-form">
-            <ModalInput
+            <PasswordStrengthModalInput
               label="New Password"
               id="new-password"
               required={true}
-              password={true}
               value={this.state.password}
               onChange={this.onChange}
-              validation={!this.state.passwordIsValid && this.state.formHasBeenEdited}
-              validationMessage={
-                this.state.password.length > 0
-                  ? 'Password must be at least 6 characters long'
-                  : 'New password cannot be blank'
-              }
+              validation={this.state.formHasBeenEdited}
+              notifyValidationResult={(valid) => {
+                this.setState({ passwordIsValid: valid })
+              }}
             />
 
             <ModalInput

frontend/client/src/components/ModalInput.js

@@ -26,7 +26,9 @@ const ModalInput = (props) => {
         value={props.value}
         onChange={props.onChange}
       />
-      <div className="validationResult">{props.validation && props.validationMessage}</div>
+      <div className="validationResult" style={{ color: props.validationColor }}>
+        {props.validation && props.validationMessage}
+      </div>
     </div>
   )
 }

frontend/client/src/components/PasswordStrengthModalInput.js

@@ -0,0 +1,62 @@
+import React, { useState } from 'react'
+import zxcvbn from 'zxcvbn'
+import ModalInput from '../components/ModalInput'
+
+/**
+ * A component combining a ModalInput with a password strength meter.
+ * @param {*} props.label                  the label for the component
+ * @param {*} props.id                     the component ID
+ * @param {*} props.required
+ * @param {*} props.value                  the current value of the form field
+ * @param {*} props.validation             whether to display a validation message
+ * @param {*} props.onChange               called when the contents of the parent modal's form change
+ * @param {*} props.notifyValidationResult called to notify the parent of a validation result
+ */
+const PasswordStrengthModalInput = (props) => {
+  const [validationResult, setValidationResult] = useState({})
+
+  const estimatePasswordStrength = (password) => {
+    let result = zxcvbn(password)
+    return result.score
+  }
+
+  const validation = (password) => {
+    if (password.length < 6) {
+      return { valid: false, message: 'Password is too short', color: '#f05452' }
+    } else {
+      let score = estimatePasswordStrength(password)
+      switch (score) {
+        case 0:
+        case 1:
+          return { valid: false, message: 'Password strength: weak', color: '#f05452' }
+        case 2:
+          return { valid: true, message: 'Password strength: okay', color: '#43c4d9' }
+        case 3:
+          return { valid: true, message: 'Password strength: good', color: '#388ec5' }
+        case 4:
+          return { valid: true, message: 'Password strength: great', color: '#2c58b1' }
+      }
+    }
+  }
+
+  return (
+    <ModalInput
+      label={props.label}
+      id={props.id}
+      required={props.required}
+      password={true}
+      value={props.value}
+      onChange={(e) => {
+        props.onChange(e)
+        let newValidationResult = validation(props.value)
+        setValidationResult(newValidationResult)
+        props.notifyValidationResult(newValidationResult.valid)
+      }}
+      validation={props.validation}
+      validationMessage={validationResult.message}
+      validationColor={validationResult.color}
+    />
+  )
+}
+
+export default PasswordStrengthModalInput

frontend/client/src/components/ResetPasswordModal.js

@@ -6,6 +6,7 @@ import { auth } from '../store/firebase'
 import { withStore } from '../store'
 import Logging from '../util/logging'
 import firebase from 'firebase'
+import PasswordStrengthModalInput from './PasswordStrengthModalInput'
 
 class ResetPasswordModalBase extends React.Component {
   constructor(props) {
@@ -45,7 +46,6 @@ class ResetPasswordModalBase extends React.Component {
         case 'new-password':
           newState.newPasswordHasBeenEdited = true
           newState.password = fieldContent
-          newState.passwordIsValid = newState.password && newState.password.length >= 6
           newState.passwordsMatch = newState.password === state.confirmPassword
           break
         case 'confirm-password':
@@ -116,19 +116,16 @@ class ResetPasswordModalBase extends React.Component {
             validationMessage="Current password cannot be blank"
           />
 
-          <ModalInput
-            label="New password"
+          <PasswordStrengthModalInput
+            label="New Password"
             id="new-password"
             required={true}
-            password={true}
             value={this.state.password}
             onChange={this.onChange}
-            validation={!this.state.passwordIsValid && this.state.newPasswordHasBeenEdited}
-            validationMessage={
-              this.state.password.length > 0
-                ? 'Password must be at least 6 characters long'
-                : 'New password cannot be blank'
-            }
+            validation={this.state.formHasBeenEdited}
+            notifyValidationResult={(valid) => {
+              this.setState({ passwordIsValid: valid })
+            }}
           />
 
           <ModalInput

frontend/package.json

@@ -62,7 +62,7 @@
     "react-redux": "^7.2.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
-    "redux": "^4.0.5"
+    "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
     "@babel/core": "^7.9.0",