feat: add password strength indicator UI

Author: elfiyang16

client/package-lock.json

@@ -35,7 +35,8 @@
     "react-redux": "*",
     "react-scripts": "*",
     "recompose": "*",
-    "typeface-roboto": "*"
+    "typeface-roboto": "*",
+    "zxcvbn": "^4.4.2"
   },
   "scripts": {
     "start": "cross-env PORT=3001 react-scripts start",

client/package.json

@@ -14,6 +14,8 @@ import TextField from '@material-ui/core/TextField'
 import DialogContentText from '@material-ui/core/DialogContentText'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import { AppContext } from './MainFrame'
+import PasswordStrengthMeter from './PasswordStrengthMeter'
+
 import axios from 'axios'
 
 const style = (theme) => ({
@@ -74,6 +76,9 @@ function Account(props) {
   const handleClose = () => {
     setOpenPwdForm(false)
     setErrorMessage('')
+    setOldPassword('')
+    setNewPassword('')
+    setConfirmedPassword('')
   }
 
   const onChangeOldPwd = (e) => {
@@ -264,6 +269,7 @@ function Account(props) {
             onChange={onChangeNewPwd}
             value={newPassword}
           />
+          <PasswordStrengthMeter password={newPassword} />
           <TextField
             variant="outlined"
             margin="normal"

client/src/components/Account.js

@@ -0,0 +1,52 @@
+import React from 'react'
+import zxcvbn from 'zxcvbn'
+import { withStyles } from '@material-ui/core/styles'
+import LinearProgress from '@material-ui/core/LinearProgress'
+import Typography from '@material-ui/core/Typography'
+import classNames from 'classnames'
+
+const styles = (theme) => ({
+  alert: {
+    color: theme.palette.primary.main,
+  },
+})
+
+const PasswordStrengthMeter = (props) => {
+  const { password, classes } = props
+
+  const pwdScore = zxcvbn(password).score
+
+  const pwdAlert = (pwdScore) => {
+    switch (pwdScore) {
+      case 0:
+        return 'Too weak'
+      case 1:
+        return 'Weak'
+      case 2:
+        return 'Fair'
+      case 3:
+        return 'Good'
+      case 4:
+        return 'Strong'
+      default:
+        return 'Weak'
+    }
+  }
+
+  return (
+    <>
+      {password && (
+        <>
+          <LinearProgress
+            variant="determinate"
+            color={classNames(pwdScore > 1 ? 'primary' : 'secondary')}
+            value={pwdScore * 25}
+          />
+          <Typography className={classes.alert}>{pwdAlert(pwdScore)}</Typography>
+        </>
+      )}
+    </>
+  )
+}
+
+export default withStyles(styles)(PasswordStrengthMeter)