I am building one complex frontend feature or solving a complex frontend interview question every week. And breakdown the exact steps, thought process, and system design behind it. Join the newsletter to learn with me.
#2: Build a password strength indicator in ReactJs.
|
Howdy Devs, Las week we built an `Adaptive progress bar text`. Despite the complexity of that feature, I am thrilled to see the response from you all on my first issue. Thanks a lot for that. Today we are building a simple "Password Strength Indicator" in React. So, let's dive in to build our second frontend feature. [Password Strength Indicator] What are we building?Live Preview: https://stackblitz.com/edit/vitejs-vite-usrrut?file=src%2FApp.jsx
Let the coding began.If you have built anything in React previously, this one will be fairly simple for you. In-fact I would suggest you to 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. ```App.jsx
<input type="password" placeholder="Enter your password" />
<small>Password strength:</small>
```
Cool, now let's make it a controlled component by adding state for input value. Along with that we will add a state to store strength of the password. ```App.jsx
const [password, setPassword] = useState("");
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 strength indicator text. But wait, How are we gonna calculate the strength of the password entered by user? First let's decide what we consider as a strong password. A password is strong if it have following features.
So, let's write a function which will evaluate the strength of a given password based on the above points. ```App.jsx
function evaluatePasswordStrength(password) {
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. 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 basics of it. It is not that tough. And most of the time your desired regex pattern is just a search away.
Next we determine and set the strength state based on the above points. ```App.jsx
function evaluatePasswordStrength(password) {
....
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 password value, we will also set the strength state to value which is returned from evaluatePasswordStrength function. ```App.jsx
<input
....
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 final preview link. ChallengeAdd a feature to strength indicator text so that it changes its color based on the strength.
Alright! That was neat. I will bring more complex features in our future issues. That's it for this week's issue of building one complex frontend feature every week. See you next week. Reply to this email, if you have any suggestion on which feature should I build in future issues.
|
Diary Of A Dev
Become better F.E developer in 10 minutes a week.
I am building one complex frontend feature or solving a complex frontend interview question every week. And breakdown the exact steps, thought process, and system design behind it. Join the newsletter to learn with me.
Hello Devs! Welcome back to another Tuesday of building a frontend feature. Today we are solving a very commonly asked Interactive JS feature in an interview setup. [An interactive pie chart]. This one is going to be a quick issue as there isn't many moving parts to this question. What are we building? Live preview with code: https://stackblitz.com/edit/vitejs-vite-psytzb?file=index.html Philosophy Here the task is to create a range slider and a pie chart and bind the `pie chart` value with...
Hello Devs, The feature we are building today is frequently asked in React interviews. But it doesn't test only your React skills, it test your overall JavaScript and basic logic building skills. So, let's dive into building our fourth frontend feature: [Folder/File explorer UI] What are we building? Live preview with code: https://stackblitz.com/edit/vitejs-vite-4bqecn?file=src%2FApp.jsx Philosophy The basic philosophy behind building a "Folder/File explorer UI" is as following: List all the...
Hello Devs, Nowadays, one feature that you will see in almost all sites specially in blogs is theme switching specifically dark mode. And that's what we are building today. [Dark Mode in NextJs page with Tailwind and Shadcn-UI] So, let's dive in to build our third frontend feature. What are we building? Live preview with code: https://stackblitz.com/edit/stackblitz-starters-adalin?file=app%2Fpage.tsx Philosophy. First, let's understand the philosophy and basic system design behind adding dark...