Password Strength Indicator React Component

Step 1: Create a javascript file call StrengthPw.js with the code Bellow:

 const hasNumber = value => {
  return new RegExp(/[0-9]/).test(value);
};
const hasMixed = value => {
  return new RegExp(/[a-z]/).test(value) && new RegExp(/[A-Z]/).test(value);
};
const hasSpecial = value => {
  return new RegExp(/[!#@$%^&*)(+=._-]/).test(value);
};
export const strengthLevel = count => {
  const levelsTpl = {
    lv1: { color: "#CD5959", text: "Too weak" },
    lv2: { color: "#F26161", text: "Weak" },
    lv3: { color: "#5472DE", text: "Okay" },
    lv4: { color: "#00C246", text: "Good" },
    lv5: { color: "#13A849", text: "Strong" }
  };
  if (count < 2) {
    return [levelsTpl.lv1];
  }
  if (count < 3) {
    return [levelsTpl.lv1, levelsTpl.lv2];
  }
  if (count < 4) {
    return [levelsTpl.lv1, levelsTpl.lv2, levelsTpl.lv3];
  }
  if (count < 5) {
    return [levelsTpl.lv1, levelsTpl.lv2, levelsTpl.lv3, levelsTpl.lv4];
  }
  if (count < 6) {
    return [
      levelsTpl.lv1,
      levelsTpl.lv2,
      levelsTpl.lv3,
      levelsTpl.lv4,
      levelsTpl.lv5
    ];
  }
};
export const strengthIndicator = value => {
  let strengths = 0;
  if (value.length > 6) strengths++;
  if (value.length > 8) strengths++;
  if (hasNumber(value)) strengths++;
  if (hasSpecial(value)) strengths++;
  if (hasMixed(value)) strengths++;
  return strengths;
};

Copy this code


Step 2: Create a React commponent call PwStrengthIndicator.js:

import React from "react";
import PropTypes from "prop-types";
import classNames from "classnames";
import { strengthIndicator, strengthLevel } from "./StrengthPw";

const PwStrengthIndicator = ({ password, className, ...attrs }) => {
  const cardClassNames = classNames("bb-pw-strength-indicator", className);

  const strength = strengthIndicator(password);
  const levels = strengthLevel(strength);
  const levelsDefault = [1, 2, 3, 4, 5];

  return (
    <div className={cardClassNames} {...attrs}>
      <div className="bb-pw-strength-indicator-warning">
        Your password strenght:{" "}
        <span style={{ color: levels[levels.length - 1].color }}>
          {levels[levels.length - 1].text}
        </span>
      </div>
      <div className="bb-pw-strength-indicator-bar">
        <div className="bb-pw-strength-bar-wrp  bb-bar-update">
          {levels.map((level, index) => {
            return (
              <div
                key={index}
                className="bb-pw-strength-bar"
                style={{ backgroundColor: level.color }}
              />
            );
          })}
        </div>
        <div className="bb-pw-strength-bar-wrp">
          {levelsDefault.map(level => {
            return (
              <div
                key={level}
                className="bb-pw-strength-bar"
                style={{ backgroundColor: "#E0E0E0" }}
              />
            );
          })}
        </div>
      </div>
    </div>
  );
};

PwStrengthIndicator.propTypes = {
  /** Custom class name */
  className: PropTypes.string,
  /** Password to check strength */
  password: PropTypes.string
};

PwStrengthIndicator.defaultProps = {};

export default PwStrengthIndicator;


Copy this code


Usage:

import React, { Component } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

import PwStrengthIndicator from "./PwStrengthIndicator";
let value = "";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: "1233"
    };
  }
  PWOnchange = e => {
    this.setState({ value: e.target.value });
  };
  render() {
    const { value } = this.state;
    return (
      <div className="wrp">
        <div className="input">
          <input type="text" value={value} onChange={this.PWOnchange} />
        </div>
        <div className="indicator">
          <PwStrengthIndicator password={value} />
        </div>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);


Copy this code


Demo: