Now that we've looked at the big chunks of the code, let's dive in and look at some of the details. All right, let's take a look at this sample code in a little bit more detail. Now, I'm assuming that you've gone in and on the case you punched through appendix or exhibit rather see here, and you have a little bit of an idea of what this whole asynchronous execution thing is in JavaScript as well as this observer pattern thing. If you're not familiar with those, you may want to pause the video, go over to those. If you want to just charge ahead, let's do it and you can always pause the video, go back to him. Okay, so we've got that, let's look at the HTML, new stuff in a little more detail first. We've got this script inclusion here which is pulling in all the helper code that helps us write these client functions like Firebase dot, whatever we've got done you're like off sign-in with email password, so we don't have to code all that stuff from scratch. I don't know how they implemented it but almost certainly many lines of at least several lines of code. So then we need a way to talk to my particular Firebase infrastructure on all the gajillion Firebase projects that are up there on Google Firebase, and that's what this second config snippet does. So this is very beautifully, easily given to us as little thing to paste into our code on Google Firebase, and I'll show you that in a separate video because you may want to create your own Firebase project. You don't have to, you can fork this coding and use the same project but you want to have access to it to look at all the users on the Firebase console. You may want to have your own project for various other reasons as you do your own sub-project for the course or maybe in the future. So anyway, that's an optional thing. But, I'll show you how to do it later. Then let's punch down and look at these forms in a little more details. The form is just an HTML item that gives us a way to set something up where you puts in a bunch of things and then presume is going to push a button, and something else is going to happen. So like most big HTML elements like this, it's got an opening and closing tag. The opening tag has an ID, a method and an on-submit parameter. I'm not going to go into the details of these because I think they're a little not core to what we need to learn here, but if you're curious, I would definitely Google them, try changing these parameters and see what happens. Then following along the form here, we've got these various inputs, and they have a type like text or password and that is what for example controls the fact that this is obscured, and then we can give a placeholder, text and ID and we can say whether or not it's required. Then we've got the button which has these various properties and then this stuff is just more or less regular HTML things like forgot password and the register length here. Then likewise, the registration and the forgot password recovery forms are pretty similar. All right, so that is the HTML updates. Let's go back down to the JavaScript and look through these things in a bit more detail. I think that this starter stuff you're likely to be pretty comfortable with based on the work we've done together already with jQuery. But if you're not or if you want to sort of warm up on these, which is a great thing to do, then what I would do is inspect these and go in and find the various IDs and then just like show yourself that indeed the toggle is changing the display properties the way you expect and so forth. All right, so let's pop down to this handle off function. The first question you might ask, "Where's login trigger?" You could search for it up in the code here or you got a notion was here which I do because I'm familiar with this code and one might I suppose. If you go up here and you look you can see okay yep that's the login trigger thing. So what this is doing is whenever this is clicked, jQuery say, "All right, call this handle off function." It doesn't take any inputs, because as you'll see in a moment, we're getting all of that stuff from Google Firebase. So handle outh gets the current user from Firebase. It's a thing that Firebase provides. How does it work? I don't know. They don't make us have to know that which is one of the cool things about using things like Firebase. Here, we've got this thing that says, "If there's no user." What that basically means is that it's in this state, we're logging somebody. So when we click it, we want to see something like this. I mean, there wouldn't be this partial password typed in because I already did that previously. So basically, these statements deal with hiding. Well, this statement deals with bringing up this modal. So this whole thing is, this div is login content. So you can see that there's this div login content and that's what all this other stuff is, is nested inside. Then these other statements deal with hiding and then showing the right form inside of that div. So that's what we want to do for login somebody in, otherwise somebody else has already signed in and it's in this other state that you may remember from the demo where it says log out and we've got a user and they want to sign out. So there's a console statement and then we want to catch the error if there is one and display that to them, and then finally we want to transition the text back to login. Now, you may be wondering, "Hey, if we have that statement here, don't we need an equivalent statement up here?" The answer is, the other case is actually handled down with the observer function. This is our beloved code, did search for parts. outh state changed is our observer function, we'll come back to that and that's what's handling the case where we do login and we want to change this to log out. So that's why we have a login transition for when somebody logs out. But the other transition is actually handled down in the outh stage change function. All right. So then we've got basically three pairs of functions for the various form submissions. So for instance login form, when it submits, jQuery is going to call this function login user and from the elements that have these IDs, it's going to extract the value which is something it can do with for instance form elements, and it's going to pass those down to login user. So this case, this is our e-mail and our password, email serving as like a username thing. Then we're going to do Firebase sign-in with email and password and then, literally then, I don't know why that's so funny but I do, literally then, we're going to chain this then function, and then we're going to deal with clearing the form. So whatever inputs, whether we want to get rid of those because we're done with them now, and other stuff maybe happening with the form layer. Then if there's an error, we want to catch that. Now, this is this asynchronous execution in JavaScript thing. We can't just rely on the order of execution for all this stuff to happen in the right order, or in other words, we can't just rely on the fact that one comes after the other, I guess so that we need to force or specify the order of execution rather than just relying on the sequence that these things appear in the code. So that's what's going on with this dot then, and this is enabled by a thing that the Firebase function returns called a promise, and that's what allows us to chain this together and have all this work. So that's how login works and then register and forgot password work in a very similar way. We get the registration inputs, we pass them to a registration function. Now, we wouldn't want to pass two passwords that don't match out to Firebase because we can just deal with that locally. So we're going to say pass that they don't match. If you remember register, you got to put in the password. Rightly or wrongly, you got to put in the password twice. If there's an error, we want to show that to them. Otherwise, we want to go ahead and create this user. Then change to that that we want to similar set of things of clearing the form and displaying errors if they're any. I don't want to bore you. We've got pretty similar stuff for forgotten form. I will leave this one for you to go through on your own as a practice thing. Finally, we've got this observer function that Google Firebase provides to us that says, you can call this or this will get called whenever somebody logs into logs out, whenever they're outh state changes. So we're using this to say, "Okay if, there is a user, I have a console statement and then that's why we're changing this text to logout." I didn't really have anything I saw that coding will do for the other case. So the case where we don't have users logging out. So I just added this console statement and then wanted to show that at the end here. Those are the [inaudible] the code down here. You'll see our code that we know and love to search and filter the parts. So let's go and look at the case challenges. What do you suppose to do with this code now? Fork it and then, one, I would just make sure you can follow what the code is doing and I would actively do that. So I wouldn't uncomment, I think they're all uncommented. I would look at the console statements and observe that they're working the way you expect, I would inspect the elements and see that they are likewise behaving the way you expect. Try changing things, try breaking it. Remember you won't hurt anything, just fork it, revision it. You can always go back. Then there's a couple of challenges, that are modifications to the code. Let's say Frangelico wants to restrict new users to a specific email domain, how would you do that? The second one is, we're going to add a little more description to error. So we HMAC and Harry has like most companies, all sorts of systems. But this one, this part searching system is, unfortunately I guess you would say probably, is a stand-alone system. So we want to create a special error for that. So hey, if they try to log in and it doesn't work, we want to give them a special descriptive error, "Hey this is a stand-alone system, we're sorry." But you'll need to create a stand-alone account for this so that they understand that. So how would you do those? Good luck, get in the code, just tackle one thing at a time and analytically debug it. I think you'll have a good time playing with this sample code. Good luck.
