Let's Create a Modern Login Form on React #02

Key Takeaways

have young guys all were doing welcome to a new or the part two of making a react login form using the modern react in a modern styling using CSS so here we go in the past two and the seven partically if you haven't watch the last part we have implemented that particular things so hopefully about that the login and register boxes and we've put it the inputs in here and the long in all they just solving things up and putting the architecture together and all of that also implemented dbits the toggle or the ability to toggle between both of these boxes like from the login to the register and vice-versa so we can just go ahead into the register and we can register or we can login just from the same page so yeah make sure to go ahead and check this out if you have it already so now what we going to need to do is the validation so from now on it's gonna work interview which is 2 bar works instead of the we just in the login at the same time so because the lord given they're just are pretty much the same thing so we're gonna implement only into the register and everything's just gonna be like saved or the same thing gonna happen for the login so I'm just gonna implement it's only for once and do the register box is gonna have like a little bit more advanced features for just 2 rather than on putting it on the login so what we know once is like whenever we have a validation error under here let's say that we have put it or the user have entered everything like another email or something in here I don't know if put it the password in here or something and you haven't actually put it as the username he forgot or something or he it won't just calm you or something like that anymore and he wants the rejection what we want is whenever we press or tries to reduce you're just gonna prevent him and gonna like give him a message from down here a danger message using a red color telling him that the user name input cannot be empty please fellows first you know to proceed with the legislation and so on and so forth also for the email and the password fuels so all of them gonna have that also for the password just gonna like put a strength bar in here whenever we are typing the pants this drunk bar strength balls gonna visualize us how much thrown our password is so if like the password is too weak it is going to show us the past for this week or medium or very strong password you can rely on that password and you can proceed with the registration as I want to so forth so let's just go ahead and start working with this so the code in this code is actually getting home so if you really needs to go ahead and grab it the link in description below on my website so you can just go ahead and take a look on it or you can use it however you want and as I've said just gonna work into the district box now for the just your box we're gonna need a couple of things in here so we need like branching methods for that first one is we're gonna use show validation another one is the player validation error so two methods Jubran methods so this voltage email errors are gonna take the elements and the elements gonna represent the current element so the current input either the user name input the email password input or the password input so one of these and also this one gonna take the elements also besides the elements we're gonna also give him a message so the message you're gonna show to the user whenever this validation error happens just gonna render a little message just below the inputs that this masked belong belongs to in the red color telling him what is going on actually and which it is in order to be able to fix it and proceed with the registration so a bit of like user experience and user interfaces so here for the elements what we want is to go in and create into the state in here we're gonna create a brand new array so for this array I'm gonna call it an error so under the stage we're gonna call create an array call it errors and it's gonna be first an empty array and here what we want is to push a new element to the array whenever we want to show validation error into the clear we need to remove that particular element from the errors array so therefore in here so for the odd in the erased is going to be very simple you this sad state shall remember we use the set state and gonna grab the previous state so we need to use the stage or the second definition or the second definition of the set state's method which can I take call back the call back takes anon as an argument the previous state or the current States actually so we can grab the previous errors array and we can concatenate it to with the new objects and we can just gonna push everything to the new array so we can grab though the previous array elements or the previous arrows actually and the new errors I'm just going to concatenate them together in order to form the new array so here we're gonna be like the previous stage obviously this is gonna be like this I'm gonna pass in an object so if you not familiar with that make sure you go ahead and take a closer look on this so here we're gonna say errors gonna equals with the ESX syntax or via section you concatenation syntax we're gonna use the three dots and we're gonna tell them to use the previous state doctors and we can push in the new one the new one is gonna be like the new objects so the first one is gonna take the elements the second one is going to be the mess simple as that so this one or the assess thing is just gonna be the key and the value pairs are gonna have the same name in here so yeah that's why I'm gonna put only one instead of putting like in here like elemental elements we're just gonna short out that and put only one single thing in here and just gonna represent both of them so simple easy peasy so this is all we're gonna need to do for this and I'm actually yeah this is like the crunch message you need to transfer and yeah this is it so this is what we need to do for the for the actual setting States not for the clearing that what we want is to set the stage and but we want to like we close things up so here we're gonna use the previous state so let me just go ahead and use this we're gonna use the same state this set state I'm gonna use the same method over there so people state this days so this one's gonna like we can use this method so now what we need is to loop through each ear into this array and we're gonna remove this element in this particular element so just gonna kill with the four and we're gonna say let's turn off so we're gonna use the Alt key word make sure you are actually using es6 in here instead of the end so the all for advanced is going to grant us the current element from the array elements natural elements like a string or a number or an object's or whatever of this array holds and instead of the end the end what it does is just gonna grab us the indices so here we need to grab the actual elements from we're gonna say off previous all gonna say this state's errors or we can like use the previous top errors in here so that's why we have to do today so we can say very stable errors what we want is to create in you ever so let me just go ahead and say and now what we want is to check if this elements that we have passed in or the illness wanna clear exists here so if this element equals error elements while it's not equal to that what we need is to push the current elements to the new array so what we want is just going to take all of the previous errors from this array and we're just gonna push them into the new array if that element is not exist if we found that element that particular element in you're just gonna not pushing it into the new array that's how we can get rid of it and we can delete that element of the array just by creating a new array moving the previous stage or previous errors from the previous array to the new one without removing the element what the actual elements that we want to remove it from the actual lights simple easy peasy now we can do new and here we can push things we can go ahead and push and that simple so as you can see we need to push the error and here in order to tell this stage to update this error state the new array state or with the new analog array the errors array with a new ring what we need is just gonna return some now this is all we're gonna need to do for the pushing things out now this should pretty much work and I haven't changed this to reiax JavaScript let me do that very quickly over here yeah ctrl Z for making everything back to normal and yep here we go now everything should be much looks fine we have the clear and the shell validation errors now what we need is to like whenever we type something in here so whenever we type something into the registration mean ones like we type here my username or something just gonna save that under the current component state which means into the current register box component state so therefore would just go back in here and we can create a brand new phone call this evening email password so although none like equal to an empty string of the beginning so you can change things up with it but we can use like for this one for validation checking whatever we want to submit this form and therefore here when you to like implement the methods not gonna do the job for us so here the message is gonna like only change so whenever we change something in here whenever we change something that means whenever you type in you character into any film of this we need to update the new stage with the new value in here so we can take that value and set it to the new stage whenever the user types and you character in here so we'll just go ahead and increase the the methods gonna be responsible that so change and this is gonna take events [Music] so this one what we want is to set the stage with the curl film so we can call this box and stage and here when you only need the objects and we can update the username with earth D which is the great events for targets we grab the current target element from the Dom and here the target this one we are actually actually artisan accessing the Dom element and we can say grab a set value of that we're gonna do the same thing for all of those so the email or the password so the only thing that we need to change from here is either or password okay and here we go so here we've got all of those but just go ahead and call those into the appropriate places so we can take that and we can put the own change event under each one of these and we can just go ahead and use against the pawn and since you are under the username so we can call it illusion and make up to point the current contacts and here we go just go ahead and let me just tick down together hope yet mmm you can go with the password input and the email so yeah make sure to go ahead and do that for the password as well and here we go now everything is working too much fun and we have the current methods bond into the actual or into the perfect places so we can use one of these or all of them together actually to the right place so here we go now everything's pretty much should be pretty much actually working fine in order to make like everything all just go ahead and use it right now now what we want is like submit register which is gonna like submit our form whenever we click this button we are actually going to submit that so for that for whenever we click this button we're gonna like fire up this submit register method so here it needs to go yeah we have ordained for the dates in the last video tutorial so now what we need is to check for the validation error if there is any validation error we need to tell it that this is a validation error and you see you should actually render it to the user so here we're gonna check if this four states on user name equals empty so the username is or the user name field is empty or Vance if the desktop state don't email the email is empty or the password isn't so we checked all the valves together state password equals an empty thing here what we not need to do is gonna like to concern since we're gonna likely return to stop code execution we can return this stop show validation error the elements not gonna show into that is the user name and which one like usually no unity we can find more appropriate text a bit there but this is all I can find for the moment so yeah I can just go ahead and put that's under old fellows together so yeah and this should be email instead of username this password instead of usually as well as this one okay should just type everything other speed of white and here we go so here we're just gonna check for the validation if there are any politician here what we can do is just gonna go ahead and like show the validation which means gonna like take that and put it into the state so we're just gonna add a new element to the array so from now on we can take this array whenever we try to render our elements remember that we want to access this in here so whenever we try to render things out in here whenever we set the stage actually everything just gonna be like if we render it so the errors or the errors array under our state camp or the component States gonna have like one more element so we can just go ahead and look under this arrange we mean loop through it and we can check if there's any elements we've gone into the username or email or a password we can render it down here and do this tax so for therefore we can go into our render method anything check for things out so here we can just go ahead and usually error equals mole and password [Music] so just gonna be for everything up so it was not as well so create all of those under this one in here we can do the check-in so we can just go ahead I'll look through each one of these so we can go in and say F of this purse okay we go and we can just go ahead and vote on each objects under the errors and we can take a look if this error Dom elements equals user name so that the user name is there else what we need is not else just gonna use an F statement because we use elf spell cell that means we can't like have two validation errors at the same time and that is not that's actually possible so we need to be able to get two validation errors or check for the two validation errors at the same time everything just put in password here we go we don't just go ahead and say that usually error equals something in this case we're gonna email error equals error message the current message so the current error message remember this objects call actually holds the current element which is email password username and the message that the user wants to print out or the actual the user will guess in order to understand what's actually coming on behind the scenes so here we can put another thing and the last thing over there so simple so let me just go and change everything else I'm just gonna put usually mirror password order and here we go just gotta check for things up now for the rendering process we're gonna render and new brand new elements and do that we're gonna use the small image just gonna like render us a very small thing I'm gonna use a specific class they're gonna have or we already have define it into our style she didn't hear if you can go to the style of sass long end of style and you can obviously find that into the github repository can grab it and you can just put it whatever or work with it and we're gonna I believe that we have that the style thing is called let me check that very quick very quickly it is a danger area okay so you can just go ahead and use it successfully and you know what we want is to check if there is any username purse so we can go with usually if there's any user name in here remember this is like an inline if statement if you're not familiar with that obviously you need to go and check your home's else we're just gonna render nothing which means here we're gonna tell if there is an user name error which means if this value of the user name is not equal to no we're gonna render that here else there isn't switch is gonna render nothing and simple easy peasy I just go ahead and put that down there and with the email as well so not right here actually below that you can just take email just go ahead and put it there and here we go no the last one let me just copy that as well put it there password another password it is so here we go here we've got all of them together just gonna shine up together and we can render them directly into the right spot well this is not like actually working pretty much fine and we have an error logging and expected token let me just take closer what is going on obviously there's an expected token here here I'm using an equal sign in building objects so I don't know what's going on actually but here I'm using an equal sign yeah you should have noticed that whenever typing this actually but yeah sometimes this happens especially to me it just always happens we'll just say that again and lets going on so compiling and it has being compliant successfully so everything that was pretty much working fine and we should just go ahead and check everything so here we're gonna go to the register since the logging is not working yet you can go ahead and make it works you can just go ahead and register and you can see we get a username cannot be empty and I know it's the problem why not it's not showing the other overfilled like emails not cannot be empty in password cannot be empty therefore what we need to do is we can remove the returned things so we can just take for multiple things in here we're not gonna return once we find one one error in here we need to check for all the URLs together well actually we are using actually only in else in here why we shouldn't we only need to type just to include an F instead of else else means this not happening that happening else this has happening so we need to check for all of those together at the same time without any like confusion or something without any specific reasons we can go heaven right now refresh things and try to register that and here we go so as you can see we get that a nice thing get it nicely done usually cannot be any email cannot be empty and password cannot be empty so all of them we are getting actually they're very perfectly with no problems so yeah we're getting validation the only thing that we need now is whenever you start typing something in here we need to get that we need to hide it actually so like the usual now the user has typed something in here we need to find this error that there or actually where the clear validation error comes so we need to call it open each time here we set the stage so we can go ahead and install clear validation error and for all of the older ones so we can just go ahead and clear everything together your email so whenever we try to change something or tired something to the feel to the input field just go ahead and like throw everything out before chauvinism here so now going back you've got that first time register I'm just not refreshed completely so here get the registration never we start typing we get that dispirited started that typing again dance or something that typing we get that dispute only one line rate quick notice here we should change from like returning the new era to returning and objects errors and like a key of errors and about you in your error so just gonna like affect the state directly without returning the new error make sure to do that fix this in your code and you are actually ready to go so here we go you've got that with a month in registration you can move this and put it into the login box with no problems you can do a plenty of things with it no I'm actually the last functionally we need to implement is the password strength bar so here whenever we type in a password we need to get like a really nice strength bar like gonna show us if our password is strong enough in order to be saved like we tell us if the password is weak median password or a very strong password just by showing a very nice color like a red color and blue color and obviously another green color so we can go ahead and do that very quickly and here as you can see if you can notice the earth dropped the code for dance it's like I've just made it very quickly the structure of this like it there's a class password state and this Devils in here which holds a class of PWD which means a password and either password weak medium and strong and those like only for coloring things up so these like has a red color of this one blue and this one is green now we can just go ahead and create that very quickly here so what we need is to go ahead and create a new brand new elements under the stage or bring you full of the stage we can call it I'm just it's called P WEC so pwc and like by default is going to be like an MC thing like no just go ahead and put it on so we can render things um and whenever we are into the password what we need is to check for the password so the length of the password if the length of the password is greater than zero we need to put it like on week it was like the links is greater than ten we need to put like a medium if the length is green like about forcing or something we need to put it and do the strong password so here we can check off the lengths or so we can say April targets don't value don't length is greater than about let's say on eight so the end is gonna be like we set the seat off just quickly to the state and we can see these days equals this is gonna be like the medium thing so we can set this is a medium password all cells have your target value mm gonna grab us the length of the actual string and if it is like greater than 12 and your we can just put in strong pretty strong and by default what its gonna be like gonna be like a weak thing so we're gonna be weak a password a weak password so we can PWD and we can put in here a week and about that basic thing so you can do more complicated things and also check for that this is like a very basic thing you can just rely on for checking things off and enter the rendering process right now we need to check for the password so you can create a brand-new errors so PWD unique and equals false PWD see medium equals posed as well and we have PWD strong the course also both all of them actually starts in the false situation and you can just go ahead and wherever you needs to let me just put two : derp or semicolon yeah I can actually distinguish in a caller in a semicolon so ever that but here we need to do the actual checking I'm gonna check if the password state is weak or something so just for making a video tutorial looks a little bit less or not that long enough to be boring so yeah I can just go ahead and copy that from my ready made code since then I'd be like a very simple thing to do and here we go so let me just walk you through about how what it does if checking if this box table PWD state equals week which means if the password is week we're gonna just put there it goes through the week pwt variable which is not right in here so we just put that all over the place just for a second give me a second actually guys and here just check this if that's we're just gonna put in a true if the password is medium what we need is to put the week so we can enable the week in order to show the week bar and also show the medium bar else if the password is strong we need to show all the boss like show the red bar the blue bar in the green box so be doubly true medium true and strong true so all of those we need to use now in order for the rendering process so the render process all we need to do is enter the class so much just give it a space in here and remember that we have done that with the selection thing of toggling between the register on the login box now here what we can do in here we can say week probably if that is week we can use the shell class which means we can add to this class name we have the shell class we can allow it to show the actual bar of the week password else if there isn't that to just render nothing that basic so can just take it let me just use this as well so you're still weak password leaky medium okay we don't need medium is that what it's called yeah that's risk oh okay here is going to speed up the week the last thing you need to think about is the strong password so we can put that in there PWD strong and here we go so although that actually should be much we're pretty fine in here so we're only just gonna check if that if the password is strong just gonna show the password strong which gonna allow us to show all the previous bars between the strong and the weak so if the strong gonna show the medium the weak and the strong bars if only the weak just gonna only show the weak bar the medium is gonna show the medium and the weak box so if you can just go ahead and understand roughly doing here and also we need to add the condition of rendering this one so we can say if thought this box needs dot and we can use this posting of password so the password is not empty actually and we can run do things now so let me just bird which one is that okay we can close the curly braces and here we go now if we try to control us save that very quickly to go back into Chrome we refresh everything up we go to the password we start typing and again Pete Peola key week is not a function well let me just take a look what is a function okay I'm missing a plus sign over his head telling me that it's not a function or something pretty awkward coming back refresh and everything register try to put that as you can see we get that error still getting it as you can see we start typing that and get them are we still getting another we pop PWD is not defined well is that actually coming from week pwe with where is that okay here we go so this is not coming let me just save all the bands I'm just rushing to end the video because I don't want the video to be that long so but test that again I don't know just that we tried to put that let's go see we get whenever we talk more characters in the password we get the medium and the weak password and here we go