So let's get started with authenticating our users, and I think the simplest thing to do is to set
up a login page handler and route before we go too much further.
So I'm looking at the route start and go file, which, of course is in the CMD Web folder, and I'll
add a route right here.
So I'll call these off routes and we'll create, first of all, a route that says don't get.
So it's just to get requests and it's just going to display the login page and the aura will just be
slash login, which seems to make sense and will point to a non-existent handler after login page.
And let's go over to our handlers and create the handler.
So I'll go to the very bottom of this file getting along.
We might break these up into individual files in a bit, but OK, so log in what I call the handler
login page.
Login page displays the login page, and it'll be a function app pointer to application and its login
page and I'm just going to copy the rest of this and modify it as necessary, because this is pretty
simple stuff.
So we'll copy this and paste it right here and we'll make it go to a page named Login.
So we have our handler.
Let's go over to our templates and create a new file called Login Page Dot Go HTML.
And this will use the base template.
So template base and we're going to hand it data and we'll give it a title defined title, which will
just be login.
And now we're content to find content and just to save a bit of time, what I'll do is open up an existing
form and copy the things from that.
So by once, Page has a form on it.
So I'll just copy this entire form and then delete the parts.
I don't want to copy this back to login page and I'll paste the form in there and we'll get rid of it.
We'll just leave the action empty for now.
We don't need the product or hidden ID stuff.
We don't need the widget name,
but we will leave a title in there, we'll just call this in.
And we'll make that an page two, which I think we use pretty much everywhere else.
OK, we don't need first name, we don't need a last name, we do need an email, so I'll get rid of
that.
We're going to log in users by email and some password.
So we'll just call this email.
And the ID will be email and the name is email, and we'll fix the autocomplete just to be consistent
and the name on card will become Password
and we'll change this to password.
And this will be password new.
And the ID will be password.
And the name will be Password.
And of course, the type will be password as well.
And we don't need a credit card give, so let's get rid of the.
And we don't need a pay button, we'll just call this get rid of the paper JavaScript void is fine,
Val is fine and we'll just call this log in.
We don't need any of this stuff.
OK, so there's a start now, we're referring to a JavaScript function called Vele here, so let's just
create an empty function.
Define James.
Script function down and close it.
And and, of course, the closing to.
OK, so now I start my back and make start back.
And then run, er, I should be able to go to log in.
So let's try that a little bi web browser and reload this page and go to slash login and then we have
a login for.
OK, now that's great.
We probably should put something maybe over here in the right hand corner that allows users to log in.
And of course if they're not logged in, they'll see log in and if they're logged in, they'll see log.
But we'll take care of that logic later on.
Let's just go fix up our base template and that menu item.
So based on layout HTML, I'll scroll all the way down here.
So we have this UL, which currently displays all of our menu items.
What I'll do is add another URL here and I'll give it a class equal to burden of moustache, auto and
V Dash to embed M.G. zero.
And of course that's pretty much identical to the classes on this one.
It's just we're changing the M e which is end to M.
S, which is start and actually pull to the right.
So we'll close our ult
and put one line in there.
So lower class equals dash item, which bootstrapped expects to find our closest ally right here and
we'll put in a F in here, a class equals nav dash link and we'll give it an F. equal to log in, log
in and close the ally.
And if I say that and go back and reload this page, I should see the log in and I do.
OK, so that should take us to the login page and it does of home analog.
Perfect.
OK, so that's a good start.
In the next lecture, it looks like I have an unclosed attack there somewhere.
Yes, I do.
Look at that.
Slash, save and let's reload this.
That looks better.
OK, do something look strange there.
So we have a login page.
The next step is going to be to write the JavaScript that calls the back in to authenticate us and give
us a token back and it'll take a few steps to make that happen.
But we'll get started in the next lecture.