Hello Devs,
This feature is the latest issue of my newsletter where I am building one complex frontend feature every week.
And share the breakdown of the thought process and design behind it.
Join the newsletter: https://diaryofadev.ck.page/
Today we are building a simple “Password Strength Indicator” in React.
So, let’s dive in to build our second front-end feature.
What are we building?
Live Preview: https://stackblitz.com/edit/vitejs-vite-usrrut?file=src%2FApp.jsx
Let the coding begin.
If you have built anything in React previously, this one will be fairly simple for you.
I would suggest you go ahead and try to build this feature on your own first, then come back and check my solution.
First thing first, let’s show an input element and a strength indicator text on the screen.
<small>Password strength:</small>
Cool, now let’s make it a controlled component by adding a state for the input value. Along with that, we will add a state to store the strength of the password.
const [strength, setStrength] = useState(“”);
return (
<input
type=“password”
placeholder=“Enter your password”
value={password}
onChange={(event) => setPassword(event.target.value)}
/>
<small>Password strength: {strength}</small>
)
Now this is a controlled component with input being handled by a local state. We also added strength value in the strength indicator text.
But wait, How are we gonna calculate the strength of the password entered by the user?
First, let’s decide what we consider as a strong password. A password is strong if it has the following features.
Minimum 8 characters.
Contains lowercase letters.
Contains uppercase letters.
Contains number.
Contains special characters.
So, let’s write a function that will evaluate the strength of a given password based on the above points.
let score = 0;
if (!password) return ”;
// Check password length
if (password.length > 8) score += 1;
// Contains lowercase
if (/[a-z]/.test(password)) score += 1;
// Contains uppercase
if (/[A-Z]/.test(password)) score += 1;
// Contains numbers
if (/d/.test(password)) score += 1;
// Contains special characters
if (/[^A-Za-z0-9]/.test(password)) score += 1;
}
The above function adds 1 to the score for each password feature available. The more the score stronger the password. To check for features like lowercase, uppercase, number, and special characters we are using regex.
Regex is a tool to identify patterns in a string. If you are not familiar with it just google and read the basics of it. It is not that tough. And most of the time your desired regex pattern is just a search away.
Score: 0-2 (Weak password)
Score: 3 (Medium password)
Score: 4-5 (Strong password)
Next, we determine and set the strength state based on the above points.
….
switch (score) {
case 0:
case 1:
case 2:
return “Weak“;
case 3:
return “Medium“;
case 4:
case 5:
return “Strong“;
}
}
In the onChange callback where we set the password value, we will also set the strength state to the value that is returned from evaluatePasswordStrength function.
….
onChange={(event) => {
setPassword(event.target.value);
setStrength(evaluatePasswordStrength(event.target.value));
}}
/>
And, that is it. Our password strength indicator is ready.
There is a small addition we can make, but we won’t do it here. I give it to you as a challenge to solve. You can check the solution in the final preview link.
Challenge
Add a feature to the strength indicator text so that it changes its color based on the strength.
Weak passwords shows in red color.
Medium password shows in orange color.
Strong password shows in green color.
Alright!
That was neat. I will bring more complex features to our future issues.
Reply/comment to this email/post, if you have any suggestions on which feature should I build in future issues.
If you enjoyed this issue, you will love other issues of building complex frontend features every week
Check Here: https://diaryofadev.ck.page/
Thank You!
