[MUSIC] In this lecture, we will discuss heading a Navbar tour application giving us the ability to view key information and access core navigations. And that first key information in navigation is our authentication session, where we will have access to logging in and logging out through the server. We won't actually be able to login or logout during this lecture, but we are going to put in place all the components, services, and communications required to do so, and we'll fill in the details in the following lectures. And we will revisit a service that we already have, the authentication service. And start to populate it with capabilities of knowing who the current user is. But of course until we're able to login or logout, that user is not going to change it. Right, to get started implementing our login session, let's implement a very simple test. So as we come in as an anonymous user, let's visit our route path, be able to click on something called login, and then be able to see a login-form, at that point in time. In our assets pipeline tree, one of the first things we're going to need to do, is create a new module and let's call this the layout module. We're going to use this module to host very generic things that really could apply across multiple types of applications and like with every new JavaScript file that we add, we must update the JavaScript manifest. And when we've updated the manifest, lets reload the browser to make sure it can load in all the files we have specified. With our layout module correctly in place, let's go ahead and inject that into the root level module. And then go back to the browser to make sure everything loads correctly. Looks like we're good. All right with our net layout module in place, let's create a new component that'll display the login. Basically a nav bar. Let's start with an html file that comes from Bootstrap which is copy their generic example. And use this as a starting point. Let's add a component, that will be responsible for displaying that html All right, there are no bindings that will be passed in. The key into the hash will be Navbar HTML. We can go over to config and add the Navbar HTML element to the config. All right, so back in the component, we have a controller and let's just leave it at this basic level right now. It's just going to kick out some debug. Now what we need to do is display this nav bar component on the main page. We want the nav bar to show up right at the top of the screen right here. However, before we get that far, I'm going to need to register it in the javascript manifest. Let's check for typos. Everything looks healthy. So now we should be able to come down to the index html page within rails and establish an element that is going to host our nav bar. Let me go over the Navbar component and copy its name. I'm going to have to edit it but that's okay. Okay, so instead of the capital, lowercase sdnavbar. At this point in time we should be able to refresh our main display. And we get our nav bar. Cool, no errors. And we see our controller coming up that's able to print out the scope. Alright, let us do a light amount of clean up. We have these areas on the side. Which are padding. And let's just go ahead and zero those out. All right. To zero them out let's go over into style sheets. We already have a layout CSS. Great. We can just define a full size in there that says padding right and left are set to zero. And apply that styling class to the DIV. And now our nav bar takes up the full screen. Great. All right, we're still not ready to go back to the test just yet because it's looking for this, not to say drop down, but it's looking for it to say login. And then when we do click down it's supposed to be a login form and not this list of elements. Okay in order to implement the login why don't we start from the middle out. And let's build our way out both to the HTML and to the service level. All right what we're going to want to do is get a login label and get it from the controller because it's going to change whether we're logged in or logged out. And the way that we're going to know that we're logged in or logged out is through the injection of the authentication service, Authn. Now we could stub this and say, return "Login" and we could move on. That would actually work for a little bit, obviously. But what we're going to do is we're going to forecast that the service create two methods for us to be able to ask. Are user authenticated? And what is their name? And if their not authenticated then we are return that login. But if they are authenticated, then we'll return the user names. So let's take these two methods over to the authentication service And implement them. Now what the service is going to have is when the user is authenticated, there's going to be a user object set. And let's verify that it's not only set, but it has a uid value inside of it. That's what we're going to expect when the user's authenticated. And then for username, we'll go into that hash make sure it's set. If it is set we'll go ahead and grab the name or we'll return a no. And then while we're at it, let's just have a function to return just the user, entire hash for the user. Let's initialize the user and expose our three methods on the service. And now what should happen is when we come back to our component it's going to say they're not authenticated and you'll return login as what you will display. However, we've got to update our HTML to make that happen. So lets see if we can unclutter this bit. And what we really want to do as you saw earlier, we want to attack this drop down. And let's create a span of our own and we're probably going to start looking for this thing so let's go ahead and style it with an ID so it's easy to find and let's go get our value from the controller, okay? So we refresh, our display now says log in, awesome. But where is our log in. Let's see what we can do. So in order to implement log in, let's go back to authentication and add another component. And let's refer to this as the authentication session component. Okay, this component is not going to have any binding passed. I haven't put the HTML in place. But when I do, let's find it by this key. And since I already have an idea what I'm going to call the HTML file. Let me go ahead and add it ahead of the file. So it's going to be registered under the search in HTML, and that's going to be the name of that file. At this point in time I can create my HTML file for my login form. So I could start by adding a login form, but I'd like this to be the overall session. Let me only display the form if we don't have a current user. The current user is null. Otherwise if we do have a current user, let's go ahead and display the log-out form. Makes sense. Now these forms are going to need some kind of submit button, so let me add a submit button Login form. And let's add a submit button to the logout form. Okay, about ready to save this. Several improvements to be made, but it's a start. So we've got our HTML. We have our HTML registered, we have a component. I don't think we have our component declared. At this point, we ought to be able to refresh and there should be no error about our Javascript. However, we still need to display the component, so let's go back to the nav bar and let's replace all these boiler plate list items, which is star component, our authentication session component. Which is going to show up under the login label. Now when we go back to our page, hit refresh and login. We see what should have been a form. And I bet you what I did is I made a few couple of typos. All sessions should have been authn_session. Should have been an n here. Okay and then over on the JavaScript, that's right. Okay, module, okay. Let's give it a shot. Okay, we've seen this before, where this is not asking for the asset pipeline mangled name, it's just asking for the literal name. And when that occurred last time there was a typo and I thought I corrected all the typos. All right, I have never encountered this error before but this is what it ended up being. After I fixed all the typos there was this drilling space. Once I get rid of that, voila. So look out for trailing spaces getting in the way of your b expansions at the end of the line. Okay, so now I have a log in. Can't really log in but I've got a log in display, and that's probably enough to make this test happy, okay, when an anonymous user comes in we are displaying a log in form, now we need to make sure it's a correct Login form so they can log in. Our minimalistic authentication test should login form passes but you notice that when we run a regression testing that we have broken the manage_foos_spec. And although we're about to delete it pretty soon, it's actually going to teach us a lesson. So what the error is reporting is that now that we have a list in our nav bar, there are some expressions that we did that we didn't account for the fact that there could be other lists on the page. So notice we have a css that just apparently is looking for a global li. And we have some XPath that's doing some things as well. And I think it's the XPath part that's probably the most interesting. Let's take a look. If we look here, we didn't scope this below anything. We just said list elements. Obviously that's not good. And I believe we had an xpath that we could scope that under. Line 65, and let's look a little further up the spec. 71, 72, okay. Now this is the one that I wanted to show you. Notice how we set scope within the list xpath, and then we said slash, slash. What we need to do is make this relative. Dot, slash, slash. Let's see if this occurs elsewhere. Now this time let's hope it's good. So yeah, I mean, it's somewhat reasonable that we ran into this problem because these tests that we're updating were done when we were naive. And we had this very small application, and we put very little bit of work into how things were going. Now that they're starting to be part of a bigger application, we need to tighten them up a little bit. So now our test passed, okay. So at this point, all of our regression tests are passing, and we're ready to move forward. In summary, we added a layout module that's going to host all generic kinds of constructs for our UI. They might be tailored to our particular application, but conceptually they're pretty generic. The first component in our layout module is our navbar, and that will allow us to navigate to core resources in our application. It'll also allow us to view whether we're authenticated or not, and gain access to the authenticated mechanisms. We enhanced our authentication module with a new component, the authentication session component. That is laying the foundation for being able to log in and log out through the authentication service. We added a slight amount of beef to the authentication service to be able to report who the current user is but until we complete this log in thread, that identity's not going to change. So we get some more work to do. And as always when we finish an area of testing we probably ought to go back and do some regression testing. And when we did this time, we found that we broke a test from module two. And there were actually two lessons out of that even though I only list one here. One was to better scope our CSS selectors. So that we can point to exactly what we're looking for and the other was within Xpath. But even if you correctly scope things a relative xpath under within clause needs to start with a period. Slash, slash will really mean anywhere in the document. Dot slash slash will mean under the within scope. So what's next? Successful Login. Let's start filling in the pieces to our login scenario so that we can complete it and authentication.
