Login Form in ReactJS with React Hooks

what's up everybody my name is tyler potts and in today's video we're going to be creating a react login form now well it's just a react form we're going to be looking into how you handle data using uh react hooks fire a form so we're going to be using you stay and we're going to be passing uh props down from different components so that's what we're going to look at today uh and for example let's go look at this so if we just say my name's tyler potts we go into our email and the email has to be admin.admin.com and the password is admin one two three so if we go free and we click login as you can see it logs in now if we log back out and we give him some false information and we just say test and we click login you can see details do not match now we're doing this all locally on our react app now normally you'd want to have a server with a database that actually handles all this um checking of the user and the data but in this tutorial we're just looking at how you actually handle a form so without further ado let's stop this server and let's create a new react [Music] so what we're going to do to see the audi current directory we're going to run npx so if you don't have node or npm installed you're gonna need to install it uh go install node uh you can go to nodejs.org um and you could easily find a tutorial on the internet to do this and then come back to this video once you've done that so we're doing is mpx create react app and then we're going to give it a name we'll just say react login hit enter and that is going to obviously create our react app so i will see you once this app has uh rendered okay guys so the it's now um built the project or uh built the base project for us um i'm just gonna cd into the react login script and we're gonna run yarn start but before i do that i'm to open it up in my text editor which is fies code and then i'm going to run yarn start now that's going to start our surfer our development surfer and we can see that over here so let's drag this up into here close that and there we go so now we don't need half these files we're going to remove app.css we're going to air thinking index.css i don't see one there's two for me personally i prefer keeping everything in one place or using sas and splitting it up that way i'm going to remove that and set tests and there you go so we removed the logo the app.css and the tests um we're going to remove everything from inside this file as well we're going to go over into index and delete effing from in there and that is everything so we don't need to mess with any of this or any of that so we're inside our app now what we need to do is well one as you can see the local server has started so you can see it here and you go through you can see that has now started so what we're going to start with doing is we're going to get you state from react so we get use state we also need to get our we're going to set up some admin details here so we're just going to say admin user and this is where we're going to store our admin um the the thing we're going to check our login details again so normally this will be in a database and on another surfer and then all secure but in our case we're just testing we're just we're just making a quick uh form and that's what we're gonna do so we're gonna say admin one two three hit save and there you go so we've got admin user saved we're gonna remove that well we're gonna create our files first so i just wanna go here we're gonna create a components folder and a file inside it called loginform.js and there you go i just want to create that open that and now we've got all the files we need we won't need any more from those so let's go back to app.js and let's go down to const so we're gonna say const and we're gonna get obviously an array back from our um set state function so we're gonna say set user so this could be where we get our user data so once we've logged in this data is going to be set uh we're going to get a name um we're going to get an email address and that's all we're going to get to actually save inside of our user for now obviously you'd probably have a lot more um you'd have a token and stuff like that for logging off and offend yeah yeah i can't say the word you know what i mean a hurts error and sarah uh we're going to say use state and this one is just going to be a string um because what the error is going to do it's going to catch if ward our details aren't actually correct and it's just going to have a message in there to display um we're then going to create a function and we're going to call this function login so this is the function that's going to be called when we're trying to attempt to log in so we're going to pass through details to this actual login method and we're just going to console.log details for now in the future we'll be setting our user or setting our error but for now we'll just go do that we also need to actually create a log out and we're just going to go const log out and we're going to set this equal to uh for now console.log log out and that's all we're gonna do for this part of uh well this bit we now need to actually get some markup and display on screen so we've got our app uh if we just say hello here and i hit save you'll see it updates here and it says hello now what we want to do is we want to actually do a check we'll run a ternary operator by using the jsx um javascript integration here and just gonna say user dot email i'm gonna say it's not equal to no so up here if this user email is not equal to nothing we will then render we're gonna render a uh welcome screen so i'm just going to say welcome and what would you give it as h2 it's just going to say welcome we're going to have a span and what the spam will have is our user dot name so it's going to just pull through our name we're then going to have a button which says log out and we'll style that up later uh we'll then go say so if we're not logged in we're going to display our login form so we're just going to say login form save and if we go into our login form we're just going to say in we're going to use rfce enter now that's going to create this boilerplate and if you want to be able to do the same and you don't know how to if you go over to extensions and go down to here you can see i have an extension called espn react redux graphql react native snippets and that allows me to quickly create a react functional component so let's go back here we don't need actually and we're gonna remove this and we'll swap this out for a form uh we don't need any method we don't need a form inner for styling later on a h2 which says login or just login uh we're gonna add in our error here so we're going to say error that's where our error is going to go and then we need some form groups and this is just for styling our first form group will have a label which is for the name and this is just going to say name we're then going to have an input of type text um and this will just be name name as we said before let's space that and then we need another form group if i can type and inside here we obviously need a label which is going to be for the email address and we're just going to say email not email email input type email not text email and it's say email email there you go we're then going to create one last group form group and we're just going to say label this one's going to be our password so let's say password and then after this we're just going to do a last input of type passwords obviously password password save and if we go back over here login form is not defined now the reason for that is because we actually need to import in our main app so what we're going to do is say import login form from now we're going to use a relative path so from components and login form we don't need the js at the end because i think it's webpack that knows how to do that and there you go so now we see our login form we actually need a submit button so after our last input or our last form group we're going to create a submit with the value of login hit save and there we go we've now got our login button so if we go back here we can see we've got login now we actually need to pass through the login function to this because we're going to need to be able to call it from inside our form once we submit so what we're going to say here is login we're then going to need to actually pass through the error as well so if we just say error it's equal to and then just goes past through the error um which will obviously if there is an error we'll display an error if there isn't we won't so let's go back to our login form and we're just gonna destructure this um so this would pass through obviously props which would be an object we're just gonna destructure it and uh get the prop straight away so we'll get the login and the error and that's what we're doing here perfect so now we've got that we actually want to create a we need we want to import or get used from react again and under here we actually want to give const and this will be our local details which um are going to be our details for our form so we're just going to go ahead and say new state i'm just going to say name and i'm going to say email and i'll see we need a password as well um so go here i'm just gonna say password oh that's a bar that's not uh blank and there we go so we've got that that's good now we also need a function in here or a method and we're gonna call this submit handler and this is just going to obviously handle our submit and what we're going to do is we're going to prevent defaults we don't want the page to re-render or anything like that and then we're just going to call the login function we've passed through as a prop and just pass through the details and there you go so that's going to pass through the details so if we actually go onto our form we could say on submit is equal to and we called it submit handler and that will call the submit submit handler function so now what we need to do once we've once we call that well let's try it out let's show you what it does so if we go back to here and let's open up our terminal and we click log in you can see it's just console login empty stuff and that's all we've asked it to do we're just asking it to contour log to details so if we was to write here test test test and click log in oh test at test.com dot co login you can see it's still blank and the reason for that is because detail we're not actually updating our details we've created here now to do that we need to bind input to each one of these values in here so the name so what we need to do here is we just got to go on change so anytime a keystroke is in here so when we change anything we're just going to say um we're going to pass through the event so e and then we'll say set details right and that's going to call that function so now we need to grab that we're going to pass through an object and we'll do dot dot detail so we're going to get the same details but we're only going to update the name and we're going to do the name to e.target dot value we don't need to set the value equal to details dot name so what's happened here is we've got this anytime we change it we're calling a function or passing through the event the event holds the target value and all we're doing is we're updating these set details and we're passing through uh the new value for name and that should now update names if we go back and we type in here tyler and we click login you can see it's pass through name tyler password nothing email nothing so now we're getting that through so now we just need to do the same thing three times so we're gonna copy this go down to our email paste it here details this one will now be email and over here will also be email there you go that's that done so for password we need to change this from name to password and the details to password hit save go back and now what if we type in a test test at test.com and test click login you can see it's all in there now we're passing it through which is perfect but now we need to actually handle the actual form so we need to go back into our app and go down to our login here so underneath the console i'm going to keep that in there for now we'll say if details dot email is equal to admin user.email and the details dot password is equal to the admin user dot password then we're logged in we're just gonna say console dot log logged in else so if it comes back oh my god i can't type else um well console.log details do not match um and that's that so let's go back here and let's type in some wrong test test test dot co and test login details do not match but if we get it right so we can put any name remember it doesn't matter what name we put we're actually comparing these but the email address we can say so admin that's admin.com and the password is admin click login tn details do not match did i name that right one sec admin admin.com admin admin one two three my bad it's admin one two three i missed a one two three click login and there you go now we're logged in so we actually need to log in so to do that we're just gonna say set user and we're going to pass through a new array and we'll call it a name it's going to be details dot name and the oh email should i say it's going to be details no not that type of details details dot and you guessed it email cool so that is that done so once we've actually passed those through we can now go back and we can put in our name which doesn't really matter our email address which does matter and our password which is admin one two three click login and you can see we'll take them to the welcome stream party for our name but the log out button the log out button basically all we need to do here is go set user and we just gotta sell it back to its default value so we're literally just gonna grab these um i just remove that and hit enter and it's messing up there we go and hit save so now that has now done so that will just set our user and log us out uh and to call that we need to go on our button say on click we'll go set to log out so that should log us out so if we go back in here oh it's saying there's a data page don't worry it's because we're changing stuff let's go put our name our email address which is admin at admin.com and then admin one two three click login and if we log out it logs us back out perfect so there you go you can now see us logging in and out with the form now it's all good and dandy it looks you know fine but we don't have any errors to start with so our name tylerpot our email address admin at admin.com our password admin one two three but let's say we get that wrong we're just gonna put test log in details do not match it set it in the console but no one has a console we need to actually see it appear here so if we go to our login form we actually now need to display the error will passing so what we're going to do is we'll just literally go do another ternary operator sorry i've just clicked the wrong and we're back we're back i'm sorry about that we're back so what we're gonna do here is go from error we're just gonna say we're gonna check for an error we're gonna say if error is not equal to nothing then we're going to pass through a diff with the class or we'll just do this we're going to say dots error and it doesn't want to work because it hates me dot error just you know what diff class name equal error they nailed it first time every time um and then after here we just need to do that and then pass through an empty string because if if we don't have an error then we don't display anything and what we're going to do is if we have an error we're just going to say error well we're just going to pass the error save and now if we go back and we actually get an error if we click login details do not match nothing happened that is because we are not setting our error we're not saying our error so we need to actually set our error so we're just going to say set error and we're just going to pass through literally what we have here copy oh don't miss save there we go now let's hit this and we just hit login it just says details do not match because we haven't put anything in there now let's put in tyler email admin at admin.com and admin 123 log in and bam we're logged in now for the rest of this um tutorial we're going to be doing some css um and we're going to go through it's quite cool because it's not necessarily a css tutorial but looking good it's always great so we're just going to add some padding um some box sizing i've bought a box and also a font family of monster rats and sans serif well i'm gonna get the input and the button and we're just gonna set the appearance to none uh the background to none the border to none and the outline to none hit save go back everything looks absolutely beautiful now um we then need to go down here just go app we're gonna just basically say height a hundred feet h display flip excuse me display flex uh align item center and justify our content center and we're just gonna give it a background color of five three five three four five five three five six five a nice little gray for you uh a form is going to be equal to display block and it's gonna be positioned relative so if we save and we go back everything's centered that's good let's remove that we don't need that um that's good um we now need to actually do a form after to get that nice sort of board gradient border we'll just go say content well there's a display block position absolute top minus five pixels left minus five pixels right minus five pixels so i'm getting dizzy doing this but minus five pixels there we go all good c index one and a battle that's source not and a background image of linear gradient to bottom right and we're just going to pass through ff ce0 f e that's weird how do i do that fe 4880 oh we missed a hashtag boom so that should give us a pink and if we go back we can see we've just got pink box and it overtakes everything now we actually need to see our form so we actually need to go in here and say form dot or dot inner form and we'll just say position relative display again display block come on stop in line in me background color off white a padding of 30 pixels and finally um a c index of two to pull it ahead of the f1 to put it ahead of the f1 form in it i named it the wrong way around form inner my bad go back and there you go now it's on top which is perfect and we've got this nice little border going around that's what we wanted that's what we're doing with that styling let's style the h2 so let's copy that paste that h2 go here color 888 font size will be 28 pixels font weight will be 500 and margin bottom will be 30 pixels bam so we've got that done we now need a form dot form inner dot form group oh god a lot of forms uh we'll go display again not in line block um so the display block we're gonna have a color of 666 that's a label so we need a width of 300 for this one um we need margin bottom and we'll leave it 15 pixels to save um and let's go over here there we go stuff is starting to look a bit more in shape we're going to form uh we can just do formula we don't need to actually keep messing around with form the front form i'm pretty sure we're not using anything we need an actual label and to start a label we're just going to say we'll put a display block to start with we're going to give it a color of 666. we're going to give it a font size of 12 pixels and a margin bottom of about 5 pixels and then a transition of 0.4 because we're going to have a slight transition when we hover over it now what we're going to do here or not when we traffic when we focus this so when we go focus within so that means once the form is the input is focused inside we're literally going to set the color to fe 4880 perfect and now we just need to style the input so form.form in a dot form group input will display block we're then going to give it a width of 100 although display block does that anyway it doesn't listen for some reason we'll give it 10 pixels and 15 pixels of padding a background color of f a f a f 8 and a border radius of 8 pixels oh and then we'll give it a transition because it's gonna have animation as you know i always add animation to my things to make it look like you're actually doing things uh and that animation is going to be a focus so when we actually focus on this we're going to add a box shadow of zero pixel zero pixels three pixels rgba zero zero zero zero point two save go back and there you go we've got our form looking nice now we just need to do the button at the bottom now we're going to do some fancy stuff here so we're just going to say form dot form inner and then we're just going to input with the type equal to submit and what we're going to do here is just say display inline block inline block uh padding uh is going to be 10 pixels 15 pixels it's about right uh border radius of 8 pixels a background image of a linear gradient and it's gonna be two right and we get this and we're gonna say fifty percent when i'm gonna do the exact same thing again and say fifty oh that needs a double zero and then we're actually just going to pass through the fe4a80 there at the end which is good so now we've got the background image sorted so if we save we go back it looks kind of weird but we'll fix that in a second we need the background size to be 200 we need the background position to be 0 we then need the transition to be 0.4 seconds as you know it needs transition and then we need the color to be white go back and that's looking good now it doesn't look great i know details do not match don't don't mock me um so yeah we've got the color in there we need a font weight of 700 and the cursor off pointer um and then when we actually hover over this button so we'll just go copy this i'm going to say when we hover it we're just going to say background position goes to a hundred percent zero percent save go back and actually hover you can see it now slides in from the right so there you go we now styled our login form now i was gonna style the welcome screen but i'm not sure it's worth it should we just do it uh let's have a look what it looks like when we log in so we'll just say my name's tyler email address is uh admin admin.com and the password is admin123 now if we log in you can see it's here uh and if we click the log out button we log back out so maybe we can quickly style it we'll style it anyway if you want to skip you can skip um we'll do dot welcome we're going to give it a width of 100 a max width of 480 pixels uh background color that's attachment bgc off white perfect thank you and a padding of 15 pixels 30 pixels now the welcome h2 will have a color off gray a font size of 28 pixels a font weight of 500 and a margin bottom of 30 pixels now we've got all this it's it's getting there now we just need to get that span so we're going to say dot welcome h2 span we're going to fit a color and we're just going to say fe4800 and the font weight will obviously be 700 um and that's good now we're actually going to go up to our submit here we're going to put a comma and we're going to pass through uh welcome button and then we'll also do the same thing down here so we're gonna do a comma welcome button hover um so now if we go back and we log in and our email just admin admin dot com and our admin is one two three we log in you can see it's here and everything is styled up and that is it for this video guys so if you enjoyed it and if you learned something new and if it was exciting don't forget to like share and subscribe now i appreciate you all you're awesome i hope you liked the video and i will see you guys in the next one peace out [Music] uh

Channel: Tyler Potts

Views: 83,213

Keywords: webdev, javascript, javascript wizard, wizard, css, sass, scss, js, vuejs, vue, reactjs, website development, website design, app dev, app, app design, app development, mobile app, native, web developer, app developer, developer, programmer, react, react js, react.js

Id: 91qEdc6dSUs

Length: 27min 44sec (1664 seconds)

Published: Wed Oct 07 2020

Reddit Comments

[u/TruthahnLeberwurst]

Seems legit. Well done.

Quick question' Whats your VS Code color theme?