Build a Password Strength Indicator in React | Next.JS

Hello, what's up guys? Today in this video, I will tell you how you can create this password strength indicator in your Next application and in your React application. Yes guys, this video is going to be very important. And here you can see yourself that whenever you write any normal password, how do we write a normal password ? In this manner. Isn't it? Like simple we cannot see it. If you want, you can see it here in this way. But have you ever thought that these indicators which I see, you will see them on many websites. Like at least eight characters should be a minimum of one number. One lower case must be one upper case. So how is this happening here? You just look at it. I mean, it is so awesome that as soon as I wrote, suppose I am writing anything. Ok? Look, as soon as my eight characters were completed, it got ticked. You can see it in green. And this part of mine is complete. He is still telling me, brother, at least write down this number. Ok? Let me add a number. Look, this also happened. And if you see how this strength was some time back. What is its colour now ? Now here an upper case has been mentioned. Even if I do an upper case. Look at this, this entire bar that you are seeing, this indicator is like completely green color, meaning it has become strong. All of them have recovered. And once everything is fine then anyone of yours will like the password. Now you can submit or register. You can show it this way. This is very useful and very important. And today in this video, I will tell you how you can create this in hardly 1 minute with the help of Origin UI. Yes guys there are lots of components inside this Origin UI. And the best part is that he has created this by taking Set Sen only. Meaning, if you are working on Set Sen, then it will be like icing on the cake for you that if you need any extra money over and above what is already there in Set Sen, you will get it here. And all this is based on the plane. So, it means that it has become so amazing for you that now you don't have to do anything. Look at me there is variety of passwords here. I need this password. Ok? And here you can see that I will have an option somewhere, I am going to do this. So it appears to you something like this. Here we have this option called view code over here. You can see. So if I click on this then I will get my code. Bean like set chain had. Sem it is the same. Look inside chain what did we have to do ? Whatever the component, we had to add it. You can see here we have same like ideology like add and then there we just had the name of the component. Here you can see it in this manner only. Ok? In QRL form and rest everything is same. Ok ? How can this be done? Before that I would like to tell you this, guys. There are not many days left now. Only two days are left for our world best JavaScript live classes to begin. Yes guys I am going to teach you every day at 9:30 pm from Monday to Friday the price is only and only 2999 i.e. 3000. I charge 20,000 for private classes, normally I charge 10,000 but guys you all should not have any problem so that you all can afford it, that's why I have kept it only ₹999 if you are interested in learning from me, full on animation, certificate, doubt session, interview session, job placement, everything will be done, then I will share the link below in the description and comment section, you can go there and enroll or register. You will also get the WhatsApp number. You can also make inquiry from me. Ok? I am the one who will teach you. I am the one who gives the reply. One man army. Ok? Allright. Will work. So, now let me tell you how to use it. Look guys. So, guys, I'm back to my VS Code editor. This is of page dot jsx. Basically your normal we are using an app router. So, by default in App Router, this is your page, there I have added this component to display it. Ok? I have added a component called password validator. What am I doing this? I am going to add my component there. You can see that if I go to the component, somewhere you will see this password validator over here, you can see that this is a password validator, here you can see very clearly, okay, if I go on this, no worry, I have not written anything, you should not think that it is not a copy paste, it will be a copy paste only, but I will tell you how to do it, so come here, so first of all, to get whatever I need right now, we need to add right, first of all copy this, come to your terminal over here and then hit enter in this way. So what is it doing? Now whatever we need to create the password indicator, we need that right here, which Origin is already creating and giving it to us. Ok? So, I left it. It will happen here automatically. Now, I will copy this code. I will copy this and simply paste it here. So I pasted it here. If we look at the code a little, first of all let's look at the name of the component, what is there here? So it's a component only but what I need is a password validator. So let me make it a password validator. Ok? Now one more thing you have to keep in mind is this. Here they are using TypeScript. But in our current project we are using JavaScript. So TypeScript will not work in JavaScript. So wherever they have defined this type, I remove it in this way. Not just here, there would be many other places too. Like here also we have this number. Basically the type has been defined and there might be more somewhere or this was all. Ok? So here also we have something a bulania part. I am removing this as well. Ok? Let me type it like this. And so the guys are simple. And yes one thing, whatever you are using, look at this, guys, if you use hook then no doubt we cannot do this in server component. In the next application, when we are using an app router, there we have to create a client component, and to create a client component, we have to use client in this way, which is this keyword or we have to use this directive. Ok? I'm going to save this with Control S. So guys, you can see that this has also been properly installed. My application is already running. If I go here, if I refresh once. Alright look here it is. Meaning, it has come in front of you so easily. Look, it means there is no need to do anything. You see there is no need to do anything. Meaning, I just copied and pasted and my work was done. This was so easy. But here it is important for you to understand a little bit. If you know JavaScript, right? If you knew how to react a little, your life would have been so useful to understand. Because I already have the code now. But I have to move it up and down a little bit. Let's say I need to add some more validation, so JavaScript would be required there. Right? So I am telling you again. That's why guys, I have brought this course. If you have any doubts, I will clear all your doubts in these five weeks. I will definitely make you from beginner to advanced level. I will change your perspective towards coding. You can enroll this. Ok? So now let us look at a little bit here. Like if you look, because what do we have ? It's just this one thing at the most. Let me tell you about the returns. Ok? So after the return whatever you write is what you see in reality. Right? So if I go here. So we have this div and if you look in this div, there is a label Input with Password Strength Indicator which you can see here over here at this place. Ok? So that's something, this is the label. We have given it HTML for ID. And we have already seen what its function is. The ID here and the ID here should both be same. This label is referring or defining our particular input component or both are connected with the help of this ID. Ok? So we have used the input component which set CN is providing you. And that's why we must have added it somewhere for sure. Yes look, we are using both set of CN for input and label components. Then we have this type which if is visible will be true then guys text else password and where is this? This button is here. This button that is visible, look at how many there are, you might be liking it. Oh my God, it is so big, actually this one is it. This button is working. Ok? That toggle is going to go to visibility. Here we are just opposite the previous state of set is visible. And what is this set that is visible? It is visible. And if we go to is visible where is it? It is here. Did you see it? Meaning how they are connected with each other. I mean, I know that if I went to do it, I would have done the same thing. But I had to think. But it is already here. So now I can easily understand how this is happening. Then there's a deep end here by the way if this was a set scene, like here we have a part of a set scene, so I can click on input and what type of input do I need ? I can very easily define here what style I want for my input. But if I go into this password validator. Alright guys I'm really sorry my camera battery is dead so you can't see me. But anyway, no problem, what I wanted to say here is that if you look carefully then we can change this component. Its style can be changed very easily. Rest of the time, this is normal, this is your jsx. Ok? And even if I go to the entire bottom, normal div normal normal normal, meaning there is nothing like that here. You can call this pure your jsx or it is pure your JavaScript. This is a to z. Ok? So there is nothing to worry about. You can check this out. So here we have a something called check icon. Ok? Well, that too is normal. Ok? So ya guys this is it. That's it for this video today. There is nothing much to tell in this video today. Right? It's just like whatever strength check is happening. Right? If you want to change the colour of that strength based on the score, look, once it is red , once it is orange, once it is your aber, basically that green colour is becoming something like this. How is the strength score being met? Here in the requirements and if you see, they have completely used regex. And I have already told that in my video. There isn't much left. So you are seeing guys, now with the help of all these awesome websites your life has become so easy that brother, whatever you do here, your work gets done very easily. Look at this. Is n't it? And I would like to tell you that similarly awesome sets and related awesome cards or components which we keep creating in our day to day life but it takes a lot of time, so I have already uploaded an awesome playlist for that. If you have n't checked it out yet, please do so. And at the end I would like to say again that if you want to learn live classes from me basically of JavaScript then you can enroll by commenting in the link and description given below. Ok? So ya guys this is it. That's it for this video today. If you like the video then please like and share it with your friends and the next target is 8 likers. If you haven't done it yet then please do. I will meet you in the next video. Till then guys thank you so much. Take care. [music]