Full Stack React & Firebase: #16 Login Form

hello and welcome back in the last video we started working on the home page we created a scream component and now we're showing our recent screens on the home page now I've I went ahead and added one more scream and some likes and comments which we can't see right now because we're not displaying that data so um but I noticed something if you open up the console window we have a couple of errors that we need a couple of warnings that we need to fix by the way this is the data that we got back from our API endpoint from our request we printed it right here here but I'm gonna remove the print because we don't need to have the data let's look at these errors so first one is react prior to Donald parently doesn't like it when we import link separately so let's fix that so here in the screen here so let's see structure link from the entire library I think we're using it in the home as well no yeah in the navbar we're using in Inaba so here let's remove this slash link and just do like this and by the way my server still run in my development server if yours is not just run NPM install I'm gonna close this window I'm gonna save all files let's go back to our console window that error is gone and here it says each each child in a list should have a unique key oh this is a react thing I think it's in the home yeah here whenever we are looping through an array and we're showing some data each child has to have a unique key property so let's pass this a key property and we know that our screams they have the scream ID property which is unique so let's do scream scream ID and that error should be gone when we save and it is apparently I gave some class a class instead of class name it's in a card content so that's in scream yeah right here so class name instead of class and all the air should be gone and we only get these warnings that we're not using these values cool all right so I want to format this like you see in Facebook and Twitter whenever someone posts something you see like five minutes ago or like two days ago or whatever and for this I'm gonna use a library called dagerous now we could use moment a moment is great but moment has like loads of extra functionality that we're not gonna use and it's adds like more than 50 kilobytes to our bundle size so I'm just gonna use an old a lightweight alternative called they they Jess as my voice is cracking there so NPM install - - saved ajs and as it's installing I'm actually gonna bring it in here I still import date j s from JJ s and not they staged a s so if you were to go to the documentation you'll see it's it follows the same convert all the same format that you would use moment you just called the class or I mean the library and then you pass it the date like here and then you do dot format and you format it like you want but for this one we don't need that format we need actually we need a functionality that comes from a plugin where is the plug-in list right here so I'm gonna search for from now yeah so it's this from now thing we want to show the date like this this relative time plug-in so we need to bring this plug-in just like this so let's copy this let's go here so import relative time from there and the way they J's works is that we need to call this extent function to actually add this plugin so at the start of our code we need to do they are not in the class and the random method so here we say day is not extend and we pass it our plugin so relative time and here where the date is right here we cut this creator that we say day J s and then we pass it to create that date and then we the to dot from now simple as that we save go to our app and we close this console cool we get this was posted an hour ago this was supposed to 17 hour hours ago and this was posted 19 hours ago cool so we get the relative time thing now we could keep working on the buttons that are on the card on the screen cards like like buttons the comment and the expand and the delete button but most of these buttons actually depend on our authentication state so for example the like button if you are not logged in it will if you click it it would love direct you to the login page if you are logged in and then if your likes if you have like this scream it will be a full heart and if you haven't it would be like an empty just outline heart now because all this functionality depends on authentication that means let's actually work on authentication and then come back to continue with the scream cards so let's actually implement the login page because there's nothing there alright so let's go to login and here we're gonna use text fields so let's go to the movie doc let me close this let's go to component demos we're going to use something called text field and it's this thing right here well there's multiple implementation but we just need a simple text field so as you see you just bring in text field and and yeah you just put text field inside of your form which form which is a standard HTML form and you put these properties inside of it alright so let's go to our login let's first implement the with style with styles thing because we're gonna need later we're gonna need to bring in some global styles and access the global theme just to import with styles from material UI / cor / styles / with styles alright let's create a Styles object well now it's gonna be empty let's do export default with styles path pass the styles and then for the second thing past login actually login should be lower case login yeah okay and here we're gonna have inside the render actually will do Const let's take our classes or we have none right now but we will in a moment so let's do equals this so props we do this structure it from props and let's actually use prop types it's a good practice to use prop types which is a way that built-in method in react for type check in it it minimizes like the potential errors that you can get in your application so it's do import prop types and prop - types and here we do login dot prop types camel case so the first P is lower case equals an object and here right now we only have this classes so let's say classes and this will be an object so let's do prop types remember this prop types capital P dot object dot is required because it is required and now we're gonna have our form here but what I want to do is here in the login page I want the form to be in the middle so not to take up the whole space so what I'm gonna do maybe there's a better way of doing that but for now I'm just gonna have a grid and then have three columns and then have the one in the middle have hold our form so let's bring in grid let's do here movie stuff let's import it from material - UI star score slash grid yeah that's all we need right now here let's remove this let's do return grid this is gonna be the container and let's give it a class name even though we haven't created it yet say classes dot I know this is not the form it's the form container but I'm just gonna call it a form for now let's do three grid items so grid item and I'm gonna give this value of small one small they will take up the whole width and lets me copy this and paste it two more times and then here this one is Hana it's gonna have a it's gonna have content so it's gonna have a closing tag like this and for now here let's just say you know you're here we need this form class say form and what the form is gonna well I know we're gonna have a text align we might add some stuff more later i still text align Center on the everything to be aligned to the center like the the title of the page and we're gonna have an icon as well let's save this for now and let's look at it so we get yo and it's in the middle and if we inspect this if we if you see we have three divs and they share exactly like what's cool about material UI is that I don't have to say that this is this has a width of 4 + 4 + 4 by default if you put three elements and you don't give any default any width value I mean any like column width value it will automatically split the by the number of you of the children you have so if you have four grade items it's gonna give them 25% each if you have five is gonna give them 20 etc right now it's giving them 33% but the problem with these divs is that they don't have any padding we need some spacing to push or do we actually we don't it's just like because we're not gonna have other dips from this side on this side I'm not gonna have any content from the left and right so let's leave it like that let's so here at the top I want to have the the monkey image thing let's actually bring it from the public folder so let's copy this icon PNG let's create a folder here called images and let's paste it let's close that let's bring it in let's do import what do we call it app icon doesn't matter we can call it anything we go back one level you go into images and what is it icon dot dot PNG cool here let's put image the source what is that source don't know my tab CID equals what is it up icon I already forgot what I called it yeah app icon and yeah let's give it an alternative property because react warns us if we don't let's just say I don't know monkey image or just monkey close this and under here I'm gonna have a title that one that says typography actually I noticed something here that I made a mistake here I forgot to fix my imported typography and typography and as well here I use typography instead of typography in one of them yet this one just paste this here save cool all right here let's bring in typography typography from from material - ey / KO / typography cool here we're gonna have our title so gonna do typography and variant you have a variant of if you had a one or headed to let's do had a one it's good for search engine optimization to have had a one in each page and let's give this class name of classes it's called this page title and this is gonna say oops it's gonna say login and [Music] let's just look at it right now oh it's massive excuse headed to okay how'd it taste better let's have some padding or margin between this monkey image betwe I want it to like kind of have its own space so let's give this a class name of classes dot image yeah let's do image oops image and margin let's give this so I want to give it 20 on the top Auto on the right and then 20 at the bottom and then Auto on the right on the left go there's some space between it and the title and let's create our form now so under the typography here let's do form I'm gonna give this no valid date because we're gonna have an email here and by default html5 will try to validate the email field and let's give it an on submit this thoughts handles submit which we haven't created yet create this handle oops handle submit we're gonna make it an error function so that we don't have to bind it to it and it's going to take an event and here we're gonna just console.log and Ojai for now and here we're gonna have our text fields so we bring in text field we have it let's bring it in let's do import text field from at material UI / course / text field now if we type text field you can do control space to see all that the stuff you can add to it I already know I'm gonna use I'm gonna give it an ID of email and name of email which we're gonna use later for when we are handling the change a type of email which is to be honest not that important but it's just practice let's just add a label and the label is just gonna say email this is what is written on it before you type anything I'm gonna give it class name of classes dot text field this is a Java JavaScript object so you stick to like we should stick to camel case variable names I'm gonna come here I'm gonna give this a value actually we haven't declared our state yet I'm gonna give us a value of this dot state dot what is this the email the email and here I'm gonna there's two well there's two main ways of handling forms in react one is the references where you create references for your input fields and then you get the values the references and the second one is the more popular one called controlled component which is using the state I mean they're both the same I just prefer the controlled component one so I'm gonna use it actually maybe they're not the same maybe there's different applications for different different you know scenarios but I prefer to use the controlled component one because we can use the react dev tools and check out these states to make sure that everything is working fine so let's do list dot state equal so we're gonna have an email and a password because this is our login form I'm gonna initialize them as empty strings actually we're also gonna have a loading property which is false by default this is when when you press the login button I wanted to show like a spinner as its requesting stuff from the server because we're using cloud functions well in general it's a good practice while using cloud functions sometimes the first execution is kind of slow it's called a cold start so having a spinner actually gives makes the user gives the illusion of the app being more responsive and and actually doesn't it seems like the time it takes loading is less when you see a spinner okay so we're gonna have an errors array in case any errors happen or invalidating the form okay so we're here and what do we well see our own change which we haven't created yet there's gonna be this dot hangul change let's create that so we could actually do a handle change and pass this the name of the field but since we already have a name here we can do it in a in a more generic way by doing a handle change equals so I have an event and here we're gonna say wait what I put the handle submit outside the class all right so handle change is going to take an event and this event will have because we're here well or any on any other text field this event will have a target property and if we're on this text field this target will be this text field or the input actually in the HTML and the input has a couple of things one of them is the name because we gave it here the name and then one of them is the value because it's what's written in it or or what's in the state so what we can do here we can do this dot set state we want to set the value of the input to the value of the to the to its correspondent value on the state so we can say they start the state and we want to set so this is generic it's gonna take an if event dot target the name so if it's if it's the email input it's gonna have email if it's the password input which we haven't create yeah it's gonna be password and the value of this is gonna be event dot target dot value all right so this would work for both of them and yeah okay so we have this one changed and I'm gonna add this full width property which is gonna let this text field take the full width of its containing div and I'm going to close like this and by the way if you wondering how I know this full width thing or anything else you could just go to here a text field go at the bottom to the API reference click on or is it a text field here and you can see all the all the properties that you can actually use this there's tons of different stuff that you can use to make the experience better we're gonna use a couple more later but for now let's let's copy this text input or text field rather and let's paste it and the second one will have the idea of password let's just actually select email and then ctrl D three times or four times or three times rather and the password so yeah ideas password name is password type is password so that we don't see when we are typing and the label is password with capital P class name is that text field value is this dot state password and one change is the same and and for width as well alright so now we need a button to submit this phone and for this we're actually going to bring the material UI button it says to import import button from material UI / core / button oops button alright so we are here so here we say button of type submit' and I'm gonna give it a variant you can go to the material UI dock and go to button not the API the demo and pick any variant you want you can have the this one I don't know what you call this actually what's the variant of this this is the default maybe yeah it's the default but this is called contained so I like the contained one it has the whole color and it has this drop shadow it looks cooler all right so let's give it a variant of contained contained and the color of primary and the class name of classes dot button and we need to create all these styles actually so okay let's close this and let's go here let's do what do we need to start we need to style the the page title so page title I want to have like some margin for the page title so let's give it margin it's still the same for same for the image save let's look at it alright oh this looks weird okay so we have our inputs but there's too much space between the login and the image just just reduce this to control D reduce this to ten let's look at okay this is better actually I want the inputs as well to have some margin on the top and the bottom so let's style that let's do what is it text field yeah thanks to yield text field so I need to give the text field the margin as well skip it let's give it the same as the title let's look at it alright cool I don't know what's wrong with the button why is it doing not oh actually what am I saying of course I know what's wrong with the button because the button needs some text inside of it of course login yeah there we go alright so the text field and what do we do now we need some margin between the button and the input so let's do button margin or just margin top margin top because just say 20 you can do a number and yeah this is it alright let's test this out email at email calm oh of course we didn't write the the handle submit what am I saying okay we need first to prevent default behavior because of course we don't want to show this information here and we don't want to reload the page so let's do here let's do event dot prevent the fault and here what I want to do is we want to send the request to our server and then show any errors or or if it's successful redirected to the home page so we're going to use axe yes so let's bring ul just to import Axios from axe yours and here what we need to do well actually we need to implement the loading thing as well so once the this so the form is submitted we do this dot set state to and then we give loading true and once everything is done we're gonna set it back to false and now we're going to do Axios dot post and it's gonna be at /login and by the way if you if you haven't if you don't matter or if you haven't forgot or if you haven't seen the part for the API this is how the login works you send an email and a password and if it's wrong you like if the email is wrong you get an error actually if anything is wrong get a general error that wrong credentials please try again and if if the email is empty you get an error just for the email so we're going to use this errors object and give just that input the error that corresponds to it and if it's it's like if it's correct we get a token when you get user not users yeah so if it's correct we get a token and of course an okay response which will allow us to redirect to our home page so here so post that login let's get the data so constant user user data let's call it and it's gonna be an object and this will be or have a an email this will be this dot state so remember we bound those values to our state the start state email and the password will be this state but password and then we pass user data here I mean we could put this object here but it looks cleaner like this and this returns a promise so we do then you forget a results so if we get here that means we're successful so this actually console.log our result result oh this is Axia so we the data will be in resulted data so if we're successful we want to redirect so we wanted to always set the loading to false actually first let's do this dot set state loading to false and then here we do this stop props dot history dot push and this is a this is a method we use in react to to push state a URL and then we go to it or a path so here we push slash which is the homepage so this should redirect us to the home page and but if we have any problem if we have any errors so we do catch error and here we need to set the errors of our phone so what we need to do is this dot set state and we want to give the errors the value of error response dot data and we want to set actually this is errors and we want to set the loading to false right now the loading is not being used by anything let's get the loading from from the state let's actually get the errors as well so we can display them so let's get errors and loading from states this dot state using destructor in again and here for the input we're gonna use something called helper text so if you if you click on an input actually not here so if we go to text field yeah this is the helper text this text right here now you can use it to display errors though you can use it to display hints we're gonna use it to display errors if there's any so here what we need to do we need to say help oops help text equals and this will be because this is the email this will be errors dot email and we don't have to worry about if if there is nothing errors if there's no emails if email property is just not gonna show anything and here as well we need to have an error property which sets the field to be read so here we say error and the way we determine whether we have an error or not is because we this is the email we say errors dot email and use a ternary operator so that if we do have this key that means there's an error in the email because we've received an email key in the errors array object so we say true else it's false there's no error that otherwise if we don't have this so let's copy this and give it to the password as well so here let's do there is the password control D and the password like this so now when we get our response and we get errors like this or is the errors like this let me cause an error to happen actually you know I mean have this empty we can have this email and we can show it in the helper text all right so let's save so let's leave them empty and we click login oops it says I cannot find data all right because I misspelled response here response all right so if we sent there we go we get our errors and they are put in the helper texts and the input is invalidated and if I would put an email here so let's say I don't know like something add something whenever I type something random it's like sad what the hell all right so log in that error is gone and if I give like a random password Oh actually we need to show if the credentials are wrong we need to show some error right here so so here I'll show it under the button Oh actually we should show it on top of the button and let's say here we do like a conditional errors dot because if we have wrong credentials we get we get an error called general so let's check for that error leads to errors general so if it's the case so and and if we have errors that general then render this and let's do typography variant give this body two hands will have a class name because we want to change the style of this class's dot custom error I'm gonna call it and here we're gonna have the value of that general key so we do errors dot general and here let's let's get discuss lets style this mmm let's give okay so custom error let's give it a like a red color color red like this and let's give it like a smaller font size font size let's give it like not point eight run yeah I think that's it okay let's try some run all wrong email and some wrong password cool we get wrong credentials please try again let's give it some margin so it's not too close to the to the input so let's give it margin top let's say 10 pixels like this or just 10 like this oh I mean I have to put something yeah there we go much better let's just well add some text here that says if you don't have an account go to sign up and with a link that redirects to sign up let's go here under the button let's say let's give a nice I spit a small and say don't have an account sign up and then put a link here to slash sign up this is the react router down link and it will say here so this will the word here will be a link so let's go and bring in link import link oops link from react route don't alright Oh actually as well I want to do something I want when we click oh this is not cool so I want when we click on login I want to show a spinner inside of it inside of the login button and I want to make it this disabled so we don't we can't click it again alright let's make this actually come down like under the button let's just add a line break so yeah alright it's cool so if you click here it goes to the signup page which has nothing right now alright by the way this looks purple because it's visited you can change the color of that I'll I'll add the login the spinner thing you can go here yeah progress this progress thing we can add the indeterminate progress one so which is just what is it yeah it's circular progress we can copy this let's go here under movie stuff let's bring it in and here it's gonna be inside the login button so here let's do if loading so if we're loading we do we return this circular progress thing and let's do a class name because it's gonna need some styling classes dot progress now the way I want to do it I want to have it in the center of the button so I'm gonna do to the button is okay we give class progress okay so so the button will have a position of relative so that we can give the the spinner a position of absolute so that we can put it in the middle so a position position absolute all right okay we get a spinner for like a fraction of a second it's actually why is it being too fast I want it to be slow all right so let's give a wrong password let's send it's being too fast but oh the spinner is a bit too big you must give it can take actually a size property which is just a number let's give it a size of 20 or 30 and 30 is okay I don't know I can't see it right now but we get a spinner but oh actually it's a mess in the middle let's go that's fine what do we do actually I want to I want to make the button disabled one we're log one we are loading so we will do disabled which is a boolean and we just pass out loading so if it's loading it's disabled if not it's not disabled so let's refresh hit the login button see becomes like disabled for a second cool and if we have the correct credentials so email user at email calm and we get one two three four five six of the password cool we redirect to the home page and of course we're not setting the state to be authenticated or anything we're just redirecting right now alright so this video is getting a bit long in the next video we're gonna work on this forms so yeah look forward to that thank you for watching and I'll see you in the next one bye

Channel: Classsed

Views: 9,564

Keywords: react, redux, firebase, express, materialui, javascript, cloud functions, authentication, crud, web development, single page application, tutorial, course, full stack, react tutorial, learn react

Id: cnwLe9NilUY

Length: 39min 2sec (2342 seconds)

Published: Sat Mar 23 2019