Login Validation & Authentication, Javascript Tutorial - #74

today we're going to use vanilla.js to validate and authenticate into a login form [Music] hey guys welcome back to a new episode of dev drawer today we're going to be building out a login authentication system uh just a simplified version use vanilla js html and sas so in the previous tutorials i've kind of showed you how to build out like a fully functional crud opera crud application using php this one won't involve any php but it may be something where in the future we could kind of add on to it and maybe add an api call that's built in php or something like that but this tutorial is essentially going to be going over how to do login validation using vanilla javascript without using jquery or frameworks or any kind of you know plugins for jquery just straight vanilla js and how we can actually build it out using application sessions you know stuff like that so uh before i do get started if you like this kind of tutorial or you're interested in other kind of tutorials that are you know php based or wordpress based or server brace i have a few of them i think i have 70 something videos on my channel now uh where kind of goes over a wide variety of topics so if you're interested in that you know definitely hit the subscribe uh hit the bell notification so you can hear about new videos that i push out try to push them out once a week so with that let's go ahead and get started so first thing i'm going to do is just create the structure that i need so i've already created our index.html page and i'm also going to be building out the css so i'm going to create a sas folder and then inside of this i'm going to create a let's say login.js [Music] and let's also create a initialize.js um actually you know what i'm going to take this login.js i'm going to put it in a new folder and this is going to be our js folder so let's go ahead and move that to there okay so now we kind of have our folder structure set up the way that we want it to be um so let's go ahead and start working on building out the html so that whenever we get to the point where we need to do the javascript it won't be too difficult so i'm just going to add an html5 and let's title this uh let's do login and i'm going to reference the sas that's going to be built here so let me go ahead and create that file and we're just going to say style dot s c s s and then i'm going to watch the sas so it's being generated here so we have our css and our min.css so we don't really need this right now so i'm going to go ahead and get out of that but i do want to add a reference to that style sheet so we're going to do link rail equals style sheet and let's do href equals css style.min.css so right now there's nothing in it so it's not going to do anything so that's fine let's also add a script reference so we're going to do script defer source and this is going to be js login dot js okay so that should kind of get us started let me go ahead and push this to the live server just so we have something on there let's start adding our script so let's for this we're gonna have a specific css style that's just for the login page um so we're going to just set this as the body class to be login and inside of that we're going to create our own container so again this isn't using bootstrap um but we will be able to control this in the sas whenever we get to that part all right so let's do h2 and we're going to do class equals text center this is going to be a login screen okay and then let's add a break tag so i'm just going to be adding um a form with a username and password and then a login button so let me do that real quick so we're going to do form action i'm going to make this redirect on success to dashboard.html and let's do login form as the class there we go and let me close this so it stops wrapping all right so let's create div input group and input group then inside of this i want to do label class label and this is going to be for the username and let's just pass a username then let's do input and let's do class input and it's going to be text id we're just going to do username as well and then finally let's put a span that is going to be our error message okay now i'm going to take this and i'm going to copy it and paste it here so for instead of username this is now going to become password and i'm just going to put this in a few different places that it needs so password and then the type of field is also going to be password all right so and let's change this to password all right so i think that's all we need for the login so now i'm just going to add in a break tag below that and then we're going to do input type equals submit class and we're just going to create a button class and the value is going to be login actually why am i doing input here button button class button and let's see type equals submit then we're just going to have this as login and close the button okay so now we have our generic screen so what i want to do is inside of this login js i'm going to create a class that has some functions that we can call from the initialize js so let's do class login and let's build our constructor for it so we're going to do construct so constructor and then we're going to pass the form and the fields so that way the uh the script knows what it needs to um to run it again so i'm gonna go ahead and open up the initialize.js just so we can um actually know what we're going to add that in the bottom under here so inside of the login we want to create this variable for the form so we're going to do const form equals document dot query selector and i think we called it login form and that has to be or it needs to be a class okay so now we have this constant form so if the form is if it is set then we want to pass these two fields for it so we're going to do const fields equals an array and the first one is going to be username so username and then password so that's going to be our const field so it's basically we're passing these two fields or these two variables so also while i'm in here let's go ahead and do const validator equals new login and then we're going to pass form fields okay so now this will hit this for us now we just need to make this do something okay so let's go ahead and create some variables so we're going to do this form equals form that way we can pass it between functions this fields equals fields and then i want to create a function here that whenever it is submitted it runs this function so let's do valid validate on submit and then that's just going to be a function so i need to take this function and we're going to call it whenever this script is called so this validate on submit okay so inside of here let's go ahead and add a let's do let's equals this [Music] not left let self equals this and then this dot form and then we're going to add an event listener so add event listener and it's going to be looking for the submit event and then we're just going to use the short code for the function all right so inside of this let's go ahead and do e prevent default just so it doesn't submit the form so e prevent default and then i want to do a console.log just so we can see what we're getting from this form um so i'm going to do a console.log and let's see what did we name them again let's see id password um actually you know what instead of doing the console log this way and trying to pull it individually what i'm gonna do is we're gonna do self because we've already declared self so self dot fields for each so basically the fields that were sent over we're going to loop through those into a for each statement and then we're going to pull and make it do what we want it to do from inside of this for each statement so we're going to say for each field not for each yeah so [Music] our um what is it called our result is going to be a field from the fields array okay sorry i'm just thinking as i'm doing it kind of hard to do this in real time okay so for each field for each fields produce a field that we can interact with all right so let's do const input equals document document.queryselector and then we're going to pass that field to this so we're going to do hashtag dollar sign field and that should allow us to define this input for each one of these fields that we are passing here so username and password should be get passed to hashtag username hashtag password which is essentially what i was going to do in the console log okay so let's do uh input dot all right let's try input dot value and i want to do a console so we can see what that value is so in this screen i'm going to do inspect let's open up the console and if i put in admin password click login we have admin password okay so our our javascript is grabbing what we want it to based on this array that we're creating so that's good um all right so now that we have that we need to do some stuff with it so the first part is let's create another function so underneath this validate on submit we're going to create a function called validate fields and then we're going to pass the field to it and each one of these is going to be put through a basically whatever requirements we want to put on it so in this case we just want to make sure that they're not blank so that way we can say that you know it is required um so let's go ahead and take this validate field here and i want to sit on my console log i want to do if self dot validate fields and then we're going to pass the input here and if this is equal to false we're going to create a number that increments which is going to be our error so if there's an error then it's going to give us the ability to flag it so we also need to define this up here so we're going to do var error error equals zero okay so now if it doesn't validate we're going to say that it's um it's going to increase this error and then increasing that error is going to prevent us from displaying something so let's go ahead and do like if error equals zero and then let's just say console.log success so right now there is no validation that goes on um so it should technically validate uh just because it's not doing anything at all right now um but let's make it do something so we have this here so let's do if field dot value dot trim is not equal to blank we want to one this now what is that yeah that's equal to blank double equal i'll think about this in a second let me write down what i wanted to do so if it is um blank we want it to display something what we wanted to display let's do this dot set status and i'm going to create this function to go along with it and it's just going to pass a message so we're going to do the field what the message needs to be [Music] so we're going to do dollar sign field so it uses that field um the field input and it's going to use the label that's associated with it so we're going to do previous element sibling dot inner text and this is going to say cannot be blank that's going to be our error message and then we're just going to notate it as an error let's go ahead and make this double click so we stay concise with it and then we're just going to return false okay so now let's create this set status function so let's come down here and do set status and we're going to pass the field first and then the message and then the status all right so let's create a query selector constant variable so we're going to const error message equals field dot parent element dot query selector and then in the beginning we put error message as the error message class okay so now we have our error message defined script down a little bit and let's say if we have a if [Music] yeah let's do if status equals error then we want it to show an error message so we're going to do field dot parent element dot query selector again actually you know what i have this constant variable here i'll have to rewrite that again so let's do error message so we got error message dot inner text is going to be equal to message and then we're going to do field dot we're going to add a class to it so classlist.ad and it's going to be input error so we are going to not only show an error message but we're also going to show a uh where it's like the boxes read around it so you know which specific uh text box is showing an error okay so all right um i think that would be good so let's test it so if i do login right now cannot read undefined reading enter text login 30. and let's see what did i do here so it cannot be blank field dot previous element sib sibling not sibling okay now let's try it again okay now that works i just misspelled sibling um so if we also inspect these we can see that now it has an input error and then the error message is showing this information here um so what happens if we add something here and then we go to hits okay well we don't have any validation where it's a success so it wouldn't do anything anyway but we can see that it is adding what we wanted to add here so let's add in some other stuff so right now we're checking to see if it is blank so let's also check to see if it's not blank we are going to run something for the password so if the field dot type equals password so if it equals to a password we want to make sure that password has x amount of uh variables let me get rid of this so you can see that better okay so if it is a password then we want to check to see if it has a certain amount of variables so let's do if field dot value dot length is let's say less than eight we want it to show an error message so i'm going to copy this entire block and we're just going to rewrite that error message so this dot set status pretty much everything stays the same over here but what we need to put here is must be at least eight characters eight characters and then this is an error and it's going to return false if it is over eight characters let's run an else statement and we're gonna do this dot set status and then field and then we're just going to pass a null message but it's going to be labeled as success all right so let's scroll down so you can see that and then we're going to return let's see return true and we also need to close this one off so if it's not the password type but it's it has a value in it we want to go ahead and do else and we're going to basically just return this same status because it is successful okay so now let's test that out so if we come over here and we do a login so the password cannot be blank so this one's no longer showing that error message so if we do here now it says password must be eight characters so if we do this okay i gotta make it count the actual characters all right let's see what is going on here so if it's password if it's filled type password if it has less than eight characters then we set the status return false otherwise we set the status field null success that's correct set status return true set status return true all right well let's try this let's come down here and since we're passing a success status let's add one here so if status equals success then we want it to let's say if error message then we're going to have error message dot okay so this should remove if there's like a leftover error message inside of it and then we're also going to come over here and say dot class list dot remove and then we're going to remove this input error where did i put that at input error message class that we put in we're going to remove that okay so let's try this again so if we come over here and we do this click login now get we got four characters so that's eight characters all right so now it removes itself um okay so now we have this let me just look through and see if there's anything else that we need to do [Music] so it's going to show an error here if it's successful if it's successful let's go ahead and do this we're going to do this dot form dot um submit and i guess i should have been looking at the console log to see if it was actually uh sending over this success message but let's try this so let's add something here there's four eight we hit log in it brings us to our dashboard all right so that's working so now if we try to hit login now let's refresh and we hit log in it won't let us do anything here because it's not letting us uh hmm okay that's an issue that i need to take a look at all right so let's look at the code so for each error oh okay so what's happening is this error actually needs to be outside of the for each loop because what it was doing is basically this one if you put in the username it was going to validate true which would as soon as the error equals zero so starts off at zero if it validates true hits zero exits out comes down here so what it was doing is before it was able to exit out of the username being true it was submitting the form because it didn't see any errors because it was inside of that loop now that it's outside of the loop we should be able to see it actually work here so if we hit log in now there we go so now this can't be blank must be at least eight characters once you have eight characters then it submits it okay all right so that's good to know um yeah i just had it in the wrong place um i think for the the login class i think that's all we need to do there so let's come over here and start styling this to make it look a little prettier so let's go into our style.sass and i'm going to go ahead and i'm going to speed run through this so basically i'm going to create it how i want to create it you'll be able to see it in the code that i have attached to the tutorial but i'm not going to sit here and make you wait for me to create these styles the way that i want them to be created so just uh watch as the magic of video editing happens okay so through the magic of editing the sas is done um and basically we should be able to see all of our changes now it highlights it in red password can be blank username cannot be blank so if we change this it goes away um let's come over here and i'm going to add a break tag in between these just to split them up a little bit and if we do this and this password must be at least eight characters there we go okay so now we have our login screen done let's do some stuff with it so whenever they go to log in not only do we want to submit the form but i also want to potentially this is where you would add in your you know login api information so let's do login api here basically once you get to this point and everything's validated out the way that you want it to be then you can essentially just pass the username and password to your api script um get your tokens whatever you need to do and then if everything you know according to plan you would do if you know whatever you need and then submit the form and then it passes that form to it so whenever it does that we also want to do local storage dot set item and we're going to pass a auth variable of one and essentially what that's going to do is it's going to store a application variable uh so let's get rid of that so let me just fill this out here and we hit log in now we're authenticated that way we can use this authentication on this page too so if you're not authenticated it won't let you see this page it'll redirect you back to the login screen or if you want to log out you would click a button it would remove this application variable here so having said that what you would do with your api is that you would take kind of the same approach maybe you would save first name or last name or username email address you know don't save the password obviously but save the username save the user id whatever's coming back to you from that api and then you would set it inside of these items however you want to set it so they can be used throughout the rest of your site so speaking of the rest of our site i'm going to now create a dashboard.html page so we're going to new file we're going to say dashboard.html and i'm going to copy all of this over we're going to remove this form and we're going to also remove this body class here and let's go ahead and change this we're just going to say dashboard so right now you're able to hit this page uh what we want to actually do is control that a little bit better so we have our login.js i'm going to create another file and this is going to be auth.js this is going to be a very very simple script basically it's going to say that if you're authenticated great if you're not kick you out so in order to hit that i want to also be able to do something to this initialize so in the dashboard instead of doing login.js we are going to do auth.js because we don't need that login script anymore so let's do auth.js and then let's also just do our initialization script as well because that initialization script is going to be what controls this so let's go ahead and add some text in here so let's do h1 um class equals text center and then welcome to the dashboard and let's just go ahead and do p class equals text center then we're going to do h ref goes nowhere the class is going to be log out because this is going to be a log out link that we will again destroy this authentication applicator storage variable okay so let's go over to our auth.js and write some simple script for it so let's do class auth let's do our constructor we don't need to pass anything to this constructor so what we do need to do is create a validation script so let's do auth equals local storage dot get item and then we named it auth so now we have this constant variable that's getting brought in from our local storage so let's do this validate auth then we're just going to pass this so we need to create a function called validate auth and we need to pass in whether that is a one or it doesn't exist so we're gonna do if auth is not equal to one then we want to do window dot location so location dot replace and it's just going to basically redirect them back to the main screen which is our login screen else we're going to do something here um let's also go ahead and create the log out so let's do log out and we're going to do local storage i'm just going to change this instead of being get item it's going to be remove item and then again we want to do window location replace to make them go back to the main screen so if i click on log out now it's not going to do anything but if i do go over here and remove this and refresh the page just don't do anything because it's not actually being called yet so inside of this initialize.js this is where we're going to have that magic work so we're going to do const auth equals new auth and this does not need to be proper case so constoth knew author you see it just redirected because now it's doing exactly what it needs to do so if we try to access that dashboard so slash dashboard.html you see it just kind of redirects us back to the home screen because this variable doesn't exist but if we come in here and do off one and then we try to access the dashboard now it'll let us in so now that we know that's working let's come in here and create something for the log out so we're going to do document dot query selector and we called it log out and then we're going to add an event listener to this so add event listener and we're going to listen for a click and then we're going to pass e i don't think we'll actually use it but let's just pass it just in case and then we're going to do auth dot log out and that should give us the ability to come over here and click this and it logs us out it removes that variable okay so close to being done not quite uh just you know number one we don't have anything that's validating again so you can log in with whatever as long as it matches our criteria but there is something that i have noticed in some of the testing that i've done for systems like this is that even though you're not logged in if you try to go to slash dashboard okay well it didn't show it there but sometimes there's like a small glimpse of the page that you're trying to hit which we don't want okay well it's not going to show it on this one just because i'm recording the video but there is a way to fix it so that you don't have to worry about that in the future so inside of our constructor i'm going to create a document dot query selector and i chose the right one that time and on the body we're going to do style dot display equals none and this would just make it where that page does show up for a micro second it basically there's nothing there it won't be able to see anything and it gets run before any of the other authentication stuff gets run so it's kind of ensuring that once that page is hit if they do see anything it's just going to be a whites flash while it's replacing it and removing it um so having said that we now have the body style turned off so if we log in and it's successful it's a blank page because we don't have it turned on so what i want to do is if it is authenticated we come down here and we put this display to block so now if it's authenticated it shows you that actual screen which is what we want it to do so now if we log out goes back to the page that we started with if we enter in any information here it logs us in if we don't enter information it shows us these error messages and you can show different error messages based on the input there's also a way that you can do these on blur so that it while you're typing it shows you an error message however in the logon script because of the error validation the way i have it set up right here if we did it on blur this would be kind of doing the same thing that 4-h did earlier where it's going to [Music] it's going to show it as a true when it's not supposed to so right now that's why i have it only on validate on submit but you can you know you can write a blur on there and then just not worry about this error message that's coming here and just make it where it just shows these and then have it actually run on the submit where it actually submits the form so you can do all that kind of stuff but i'm not going to get into that so i think that's going to do it for this tutorial but i think i want to expand on this a little bit more and maybe build either build an api or use one of the apis i've already built that has user authentication that we can utilize to be able to log in and out of the system based on an external api that's php driven so for now i think that's going to do it if you like this kind of tutorial you know hit the thumbs up for me hit the like for me leave a comment if you want to see other things that are like this but um it's a fun project and it kind of gives you a well-rounded solution to be able to do some validation and authentication and storage and stuff like that using vanilla js so there's no bootstrap no jquery no kind of plugins or frameworks that you have to deal with this is just pure css pure javascript and pure html so again i hope you liked it um now that's it for now so i guess i will talk to you later you

Channel: Dev Drawer

Views: 1,391

Keywords: Login Form Validation using HTML CSS & Javascript login form in html and css, WordPress, form validation, form validation in javascript, form validation using html css javascript, how to create a login page with html css and javascript, html, javascript form validation, login form, login form html css javascript, login form in html and css, login form in html and css and javascript, login html css javascript, login javascript, login javascript html, simple login form html css

Id: Rrbwrk79WTw

Length: 40min 56sec (2456 seconds)

Published: Fri Sep 17 2021