content logo

React Forms:

React Password Strength Check with Show/Hide Option

As you can see in this post we have a form using React. This form has an outer shadow and the background of the form is white. Below the field where you enter the password, there is a line whose length and color indicate the strength of the password. There is also a button that can be hidden by clicking on the password.

#

Password Strength Validation Code

#

Password Form by React JS

#

Show Hide Password Code

#

HTML Password Check Form

<!-- This script got from frontendfreecode.com -->
<form id="react"></form><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
body, html {
  height: 100%;
}
body {
  background: linear-gradient(#607D8B, #455A64);
  font-family: "Roboto", sans-serif;
}
form {
  margin: 3em auto;
  max-width: 320px;
  background: #FFFFFF;
  padding: 40px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
}
.password {
  display: block;
  position: relative;
  text-transform: uppercase;
  font-weight: 700;
  width: 100%;
  color: #727272;
}
.password__input {
  display: block;
  text-transform: none;
  width: 100%;
  height: 42px;
  border-width: 0 0 1px;
  border-style: solid;
  border-color: #B6B6B6;
  font-weight: 400;
  color: #212121;
}
.password__input:focus, .password__input:active {
  border-color: #00BCD4;
  outline: 0;
}
.password__show {
  cursor: pointer;
  position: absolute;
  bottom: 11px;
  height: 16px;
  right: 0;
  background: #727272;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.8em;
}
.password__strength {
  position: absolute;
  width: 0%;
  height: 4px;
  bottom: -8px;
  left: 0;
  background: transparent;
  transition: all 300ms ease-in-out;
}
.password__strength[data-score=null] {
  width: 0;
  background: red;
}
.password__strength[data-score="0"] {
  width: 5%;
  background: #F44336;
}
.password__strength[data-score="1"] {
  width: 25%;
  background: #F44336;
}
.password__strength[data-score="2"] {
  width: 50%;
  background: #FFEB3B;
}
.password__strength[data-score="3"] {
  width: 75%;
  background: #4CAF50;
}
.password__strength[data-score="4"] {
  width: 100%;
  background: #4CAF50;
}
class ShowPassword extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      type: 'input',
      score: 'null' };
    this.showHide = this.showHide.bind(this);
    this.passwordStrength = this.passwordStrength.bind(this);
  }
  showHide(e) {
    e.preventDefault();
    e.stopPropagation();
    this.setState({
      type: this.state.type === 'input' ? 'password' : 'input' });
  }
  passwordStrength(e) {
    if (e.target.value === '') {
      this.setState({
        score: 'null' });
    } else
    {
      var pw = zxcvbn(e.target.value);
      this.setState({
        score: pw.score });
    }
  }
  render() {
    return /*#__PURE__*/(
      React.createElement("label", { className: "password" }, "Password", /*#__PURE__*/
      React.createElement("input", { type: this.state.type, className: "password__input", onChange: this.passwordStrength }), /*#__PURE__*/
      React.createElement("span", { className: "password__show", onClick: this.showHide }, this.state.type === 'input' ? 'Hide' : 'Show'), /*#__PURE__*/
      React.createElement("span", { className: "password__strength", "data-score": this.state.score })));
  }}
ReactDOM.render( /*#__PURE__*/React.createElement(ShowPassword, null), document.getElementById('react'));
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.2.0/zxcvbn.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.2.0/zxcvbn.js'></script>
<style>
body, html {
  height: 100%;
}
body {
  background: linear-gradient(#607D8B, #455A64);
  font-family: "Roboto", sans-serif;
}
form {
  margin: 3em auto;
  max-width: 320px;
  background: #FFFFFF;
  padding: 40px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
}
.password {
  display: block;
  position: relative;
  text-transform: uppercase;
  font-weight: 700;
  width: 100%;
  color: #727272;
}
.password__input {
  display: block;
  text-transform: none;
  width: 100%;
  height: 42px;
  border-width: 0 0 1px;
  border-style: solid;
  border-color: #B6B6B6;
  font-weight: 400;
  color: #212121;
}
.password__input:focus, .password__input:active {
  border-color: #00BCD4;
  outline: 0;
}
.password__show {
  cursor: pointer;
  position: absolute;
  bottom: 11px;
  height: 16px;
  right: 0;
  background: #727272;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.8em;
}
.password__strength {
  position: absolute;
  width: 0%;
  height: 4px;
  bottom: -8px;
  left: 0;
  background: transparent;
  transition: all 300ms ease-in-out;
}
.password__strength[data-score=null] {
  width: 0;
  background: red;
}
.password__strength[data-score="0"] {
  width: 5%;
  background: #F44336;
}
.password__strength[data-score="1"] {
  width: 25%;
  background: #F44336;
}
.password__strength[data-score="2"] {
  width: 50%;
  background: #FFEB3B;
}
.password__strength[data-score="3"] {
  width: 75%;
  background: #4CAF50;
}
.password__strength[data-score="4"] {
  width: 100%;
  background: #4CAF50;
}
</style>

</head>
<body>
<form id="react"></form><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
class ShowPassword extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      type: 'input',
      score: 'null' };
    this.showHide = this.showHide.bind(this);
    this.passwordStrength = this.passwordStrength.bind(this);
  }
  showHide(e) {
    e.preventDefault();
    e.stopPropagation();
    this.setState({
      type: this.state.type === 'input' ? 'password' : 'input' });
  }
  passwordStrength(e) {
    if (e.target.value === '') {
      this.setState({
        score: 'null' });
    } else
    {
      var pw = zxcvbn(e.target.value);
      this.setState({
        score: pw.score });
    }
  }
  render() {
    return /*#__PURE__*/(
      React.createElement("label", { className: "password" }, "Password", /*#__PURE__*/
      React.createElement("input", { type: this.state.type, className: "password__input", onChange: this.passwordStrength }), /*#__PURE__*/
      React.createElement("span", { className: "password__show", onClick: this.showHide }, this.state.type === 'input' ? 'Hide' : 'Show'), /*#__PURE__*/
      React.createElement("span", { className: "password__strength", "data-score": this.state.score })));
  }}
ReactDOM.render( /*#__PURE__*/React.createElement(ShowPassword, null), document.getElementById('react'));
</script>

</body>
</html>
Preview