Password strength indicator: Develop component to show the user how strong is the password in React js

Introduction

Many times when you have a register page, you think “It would be nice if the password input field has a strength indicator, won’t it?” Of course. It would be a better UX to let the user know how strong is the password he/she is setting. Let’s see how we can implement such functionality in react js

Logic

user side

When the user enters the password, he/she should be able to see a bar which shows indicates the strength of the password entered in the field. Red color means it’s a weak password, Orange color means the password has medium strength and Green color means the password is strong enough!

Tech side

We need to define a parent component called App in which we will define and declare a Password child component which takes a boolean data for showing the strength meter. On change of data in the password field, a method will be executed which will update the password data state in the component. This data is then processed with the regex pattern to find the password strength. Based on the regex test, the value is passed to the Meter component to add the corresponding class to display the strength color (i.e, red, orange or green) to the end-user.

Define components

The following are the components defined for achieving the functionality:

  • App
    • Password
      • Meter

Add the following code to define the react app:

/*
Password component and Meter components defined here
*/
class Application extends React.Component {
render() {
return (
<div class="container">
<h2 className="text-center mt-5">Password Meter</h2>
<div className="d-md-flex justify-content-center mt-5"><Password meter={true} /></div>
</div>
);
}
}
/*
* Render the above component into the div#app
*/
React.render(<Application />, document.getElementById('app'));
view raw app.js hosted with ❤ by GitHub

Once App is defined, you can see in code that the Password component is given meter attribute as true which is why meter component is displayed. If set to false, it won’t show.

Now, let’s add the Password component which renders the input tag and Meter component. Add the following code:

class Password extends React.Component{
constructor(){
super();
this.state = {
value: 0,
password:""
}
}
updatePasswordvalue = (ev) => {
this.setState({
password: ev.target.value
});
this.changeMeterValue();
}
changeMeterValue = () => {
const StrongPassword = new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#\$%\^&\*])(?=.{8,})");
const MediumPassword = new RegExp("^(((?=.*[a-z])(?=.*[A-Z]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[A-Z])(?=.*[0-9])))(?=.{6,})");
if(this.state.password.length === 1){
this.setState({
value: 0
})
}else{
if(StrongPassword.test(this.state.password)){
this.setState({
value: 100
})
}else{ if(MediumPassword.test(this.state.password)){
this.setState({
value: 50
})
}else{
this.setState({
value: 10
})
}
}
}
}
render(){
return (
<div className="d-md-flex flex-column">
<input type="password" onChange={this.updatePasswordvalue} className="password"/>
{this.props.meter ? <Meter value={this.state.value} /> : <span>No Meter</span>}
{this.state.value}
</div>
)
}
}
view raw password.js hosted with ❤ by GitHub

As you can see in the above code, In the render method, it returns the input tag and the Meter component. Any change in the value of the input and it triggers the “this.updatePasswordvalue” method which maintains the 2-way data binding and in turn triggers the “changeMeterValue()” method.

In the Meter Value method, There are 2 regex defined one for strong password and another medium strength password. The value updated in the component state is then tested with both these regex patterns and the value key in this.state is updated accordingly.

The same value is passed into the Meter component to update the meter color. Add the following code to define the Meter component:

class Meter extends React.Component{
constructor(){
super();
this.state={
status: "low"
}
}
componentDidUpdate(prevprops,state){
this.changeStatus(this.props.value);
}
changeStatus = (value) => {
switch(value){
case 10:
this.setState({
status: "low"
})
break;
case 50:
this.setState({
status: "medium"
})
break;
case 100:
this.setState({
status: "high"
})
break;
}
}
render(){
return (
<span className={`progress ${this.state.status}`}></span>
)
}
}
view raw meter.js hosted with ❤ by GitHub

In the above code, you can see that on componentDidUpdate method, the changeStatus method is triggered which updates the state of “status” in component. This status data is used as a CSS class for an element. As value changes in this.props, the class applied to the element changes accordingly. The following are the css class defined:

.progress{
height: 10px;
width: 0%;
background-color: transparent;
}
.progress.low{
background-color: red;
color:red;
width: 10%;
}
.progress.medium{
background-color: orange;
color: orange;
width: 50%;
}
.progress.high{
color: green;
background-color: green;
width:100%;
}
view raw app.scss hosted with ❤ by GitHub

Demo

Conclusion

If all the code mentioned above is added, you will see the output of input of the type password and the meter below it. Once you start typing, the span tag in Meter component is updated with the corresponding css class and thus its color is updated. If there is any doubt in the above code, you can see the implementation in the codepen demo above. If you still have any doubts, do post a comment below and i will surely help yu with it!

PS: If this article helped you, Do check out another article by me about how to create an accordion in react js. click here to learn it!

11
11