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:

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:

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:

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:

Demo

See the Pen Password meter by Vishnuprasad Venugopal (@ovpv) on CodePen.

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

Share this: Twitter

Facebook

WhatsApp

LinkedIn

