React, Redux & Firebase App Tutorial #8 - Login & Signup Components

Key Takeaways

alright then gang so the next couple of components I want to tackle are the authentication components and that is sign in and sign up now each one of these components is going to contain a small form for a user to sign or post signing now I'm going to do the smaller of the two first of all sign in so let's open that up now these two components they are both going to have to be class-based components and the reason is that we want to store in a local state what our user types into the input fields so to create a class-based component using the package I showed you in the last tutorial so we can just use snippets I'm going to type RCE so that's react class export tab and now we get this component now we can delete this export up here because we're exporting it down here as well we don't need to do both alright then so this component right here it's going to have a state right we don't know what's in that state yet so we'll just leave it as blank for now now also we want to down here create a form so let's first of all give this a class name equal to contain and this is materialized to contain all the content in the central column inside that we'll do a form tag and this is going to have a class name of white to give it a white background that will come into effect later on and then we also need to delete the action because we want to handle the submit ourselves and we'll add that on submit event handler and set it equal to something again we'll come back to this later so inside this form we need a few different fields first of all I'm going to do an h5 with a class name of gray - text and then also text - darken by three shades and there I will say sign and so this is just a title inside the form now we need a few input fields and each input field is going to be contained inside a div with a class of input - field just to give them some space that is a materialized CSS class okay so let's do a label first of all and is going to be for the email and the text will be email okay now under that we need an input field and this is going to be a type email now it's gonna have an ID equal to email we'll be using the IDS later on but it also means this can form the Association because we've said for email and it looks for the input with the idea of evil with the ID of email to associate the two so we have the ID we also want an unchanged event handler which is going to fire every time a user type something or delete something from this input field so we'll handle that later on we'll just set it up to begin with now what I'm going to do is just copy this thing right here and I'm going to paste it down below the next field is going to be the password so the logging in with an email and password right so let's change that and also this and also this to password and we'll change this to password as well and now we have at the input field for the password we also have an unchanged event which is going to fire something later on when a user types into this field now at the bottom we just need a button so I'll do another div with a class of input field and inside that div I'll just do a button with a class name of BTN this can be pink and will lighten it by one shade and we'll say the zette - depth is gonna be zero just to take away that drop shadow and inside we'll just say login okay so before we do anything else why don't we just create a route for this component so when a user goes to forward slashes sign in it loads up this component and we can just preview it in the browser so to do that let's go to app KS and create the route down here so we'll say route and then the path is going to be equal to forward slash sign-in and then the components we want to load up is going to be the sign-in component now I've not imported that yet so we'll need to do that now at the top we'll in port sign in from and it's going to be dot forward slash components forward slash off because we're in the auth folder forward slash signing okay so let's try this out let's go to forward slash sign-in and we get an error at the minute and that's because we have this thing right here it's not equaling some kind of function so before we do anything else let's go to the sign-in component and let's just create some functions that can fire when you use either submits or changes the input field so these can be empty functions to begin with but we'll just add them in so when a user changes an input field we'll create a function that will fire called handle change so this function is going to be an arrow function and inside at the minute all we'll do is just say console.log e we don't really want to do anything at the minute and we'll do the same thing for on submit so we'll call this one handle submit for when the user submits the form and we'll just log e to the console again now we need to hook these up inside these listeners so when the form is submitted we want to fire this to reference the component dots handle submit and then oops that didn't go through and I'll submit and then down here we want to say this don't handle change and then on this one this don't handle change so the same function is gonna fire for these two things right here handle change then when we submit it's gonna fire this other function so let's save that now and view this in a browser and we get roots is not defined that's because we've not added the e on the end so let's do that save it and hopefully third time lucky ok so now when we go to forward slash sign-in let's see if this works now we get this form so that's working right and if we look in the console then when we type something into these it should fire that handle change function and log the event to the console which we get every time we tap something in or delete something saying before the password okay so that's all working now all right then now you'll notice that these things right here they're going over the labels and that's a bit of a bad user experience now to combat this what we have to do is load in the JavaScript from materialize so I've come to the getting started guide again and we're gonna grab this link right here you see that now what we want to do is paste that inside index.html at the bottom over here of the body tag so let's paste it right there save it and now this should look better in the browser if we click in one now you see it goes up there and it doesn't cover what we type so we need the JavaScript for materialize for this little thing to work right here okay so anyway now what we're doing is we're creating this form and we're hooking up those events so instead of just logging this to the console how about instead what we do is update the state of this component to keep track of what a user has typed in right so let's do that inside handle change instead of just logging this to the console what we'd like to do is say this dot set state to update the state and then inside we want to update a property which is going to be equal to either email or password now we don't have those properties defined yet so let's do that to begin with I'm gonna say email is an empty string to start with and also password is an empty string to start with now that how do we know which property we want to update when we type into one of these because they both find the same function well we're going to use the ID right here so what we'll do is in square brackets we'll say e dot target to get the target element dots ID and that is going to get this is the ID for whichever input field is being updated so either password or email if a user types into this it's going to be email we update if they type into this is going to be password we update okay so now we want a target value so that we can update the state with the value of whatever the target element is being changed with all right so now we've done that what we'll do on submit is actually the state to the console now before we log it to the console we need to say e dot prevents default so you prevent the default action of the farm being submitted and the page being refreshed when a user clicks on the button or press ENTER to submit the form because that is the default action of a form being submitted we don't want that so after we've done that then we can console dot log this dot state and that will log this thing right here and don't forget that is keeping track of whatever a user is typing into the input fields so let's give this a whirl I go over to the browser and check this out email I'll just say Rio at the net ninja code it UK and then down here password test one two three four so if I submit the form then we get that one log to the console the state awesome so now we kind of have this component created we're not hooking it up to any kind of authentication service at the minute but the basic functionality is here now now I'd like to do the signup component which is similar and it's going to sign up your user so what I'll do is just copy this dude and paste it over in signup to begin with then we can change it so as well as the email and password that your user needs to enter into the signup form I also want them to enter in a first name and last name and ultimately we'll be using those to create initials for the user to show them right here so let us first of all go to the state and say first name so we can keep track of that and then that's going to be an empty string to begin with and also oops also the last name which will be an empty string as well to begin with okay then so these can remain the same because it doesn't matter which input field we update it's going to recognize that from the ID all we need to do is add in these input fields down below in the form so now let's do that I'm going to come down here and I'm going to copy this thing right here and underneath the password right here I'm going to create another input field and this is going to be for the last name so let me just click there and alt click here to change these two which will be last name then we'll change this to last name and this to text because the input type will be 'text okay so we have the last name field now we need the first name so let's copy that and paste it above and this time this will be first name so alt click both of these and we'll change this to first name and we'll change this right here to first name as well so now this should all work as well you should work the same way but we need to hook up this route in APA F to visit it in the browser let's import it first of all imports sign up from and it's going to be dots forward slash components forward slash sign up and I just remembered inside the sign up component we just created we need to change the name from sign in to sign up because we just copied and pasted it and down below where we export it as well we need to update that to sign up okay so now inside here we're importing that sign up component and we need to create a route for it so we'll say route path is going to be equal to forward slash signup and the component we want to load is going to be equal to the sign up component we just import it alright then so save that and give this a whirl in the browser I can already see an error if they don't want to visit it so it says cannot resolve components forward slash signup of course you can't because we've not said forward slash auth because it's in the auth folder save that and view this in a browser now we see this component so now if we go to sign up then we see hopefully the sign up component we need to change the title right there so let's do that inside sign up let's go to the h5 and change this to sign up and save that cool so that's updated over here now then let's try the form out so we'll say Yoshi that's the net ninja code at UK password test once before first name Yoshi I haven't got a clue on his surname mullah Ghani whatever and login okay so now we get that log to the console so we've created these two components now the sign-in and the sign up component and we've linked those up using route tags and now when we click login or signup what we're doing and we need to change this text in a second what we're doing is logging all of that information that user enters into this field to the console later on we'll be signing user up using firebase off or logging them in using firebase off but for now this will do so let's just change that login button down here and change it to sign up like so and now we're done okay so we've created those components next I'd like to move on and create the form to create a new project so we'll do that in the next video