So this time around, I want to look at our login screen and I want to address something that is a common
occurrence, a user forgets his or her password.
And what we're going to do this time around is start the process of implementing password resets.
So password resets are pretty straightforward.
We can't send users a password because we don't store the password in the database.
We just story hash of the password.
And that's really good security practice.
So what we'll do instead is add a link right here below the login button that just says forgot password.
That'll take them to a page where they can enter their password they submitted.
And we'll have that submission take place using fetch calling.
The backend API will verify that we have that email address somewhere in the database and then we'll
generate and send a one time use email that with an expiry date.
So it expires after, say, 60 Minutes and the user can then click on that link in their email.
They'll be taken to a page where they can reset their password.
So it'll take a few steps to make this happen.
But let's get started.
So I want to go back to my idea.
And because I'm going to be making changes to this page, I'm going to stop everything.
Stop, start just the back end.
So make start to underscore back.
And it's going and now on air, so I can make changes really quickly and just refresh my Web page to
see how the changes look.
So I'm in the login page time out and underneath this, where we have our A graph that links to the
valve function, I'll create a little paragraph tag and I'll give it a class of, say, margin talk
to and I'll close that and I'll put a link in here.
Very simple one and I'll make it small, small a equals and we'll go to a route that doesn't exist yet
called Forgot
Password and we'll just say forgot password
and close that and save it and go back and see how it looks.
So I refresh this page that looks great.
So of course we need to create that route and the associated page on the front end.
So let's go do that.
So back to our ID.
The first thing I'll do is go to my roots, which are right here, somewhere there, and I'll create
a new route and I'll put it right here in the Roots and it will be a get root and get request to slash
forgot the password and that will go to something that doesn't exist yet.
App Dot forgot password.
So let's go create that handler.
So we'll open up our handlers and at the very bottom of this file will create a function.
Funk with a receiver of application, pointed out application, and it's called Forgot Password, it's
right there and give it its to require parameters.
And all this is going to do is render a page so I can just come up here and find one that renders a
page like this.
Copy it, come all the way down here, paste it in, make sure that it has no template data.
It doesn't and we're going to say render the forgot password page that doesn't exist.
So let's go to our templates and create it.
A file called Forgot Password Page Dot and go HTML.
OK.
This is going to be a pretty simple template, it'll use our base template, so template base and we'll
hand it data even though it doesn't have any.
We might at some point in the future give it a title defined title, and that's just going to be forgot
password.
We'll close that off,
then we'll have some content.
So define content and we'll close that off.
So I don't forget now I'm going to make this a little narrower.
So I'll put it in its own relative class equals row and then div class equals call and six to take up
half of the available width of the page and then offset it in the three.
So it's centered and close those two divs do it.
Now this is going to be a form and it's going to be almost identical to our login form.
It's just going to be shorter.
So let's go copy our login for the whole thing.
So form right up to here, including the alert div, so I'll copy that from login page dutko HTML and
then I'll just paste it in here and make whatever changes we have to make.
So to start with, let's format a little bit better.
And this forum closes that form, so let's move everything over one
and let's move everything inside of that div over one.
OK, so this is not going to have an action.
We're not going to be calling the front end at all here just to render this page.
We're not going to call it login form.
We'll call it, say, forgot form
both the name and the ID.
We don't need this class charged form, which I don't believe does anything anyway.
But that's OK.
We'll change the title to Forgot Password and you can put instructions under that if you want to.
I'm not going to bother.
We're not going to need a password.
We just need the place to type in their email.
OK, so we don't need this.
Obviously we don't need a link to ourself so that can go away.
All right, let's see how that looks.
So let's go back and try all we have to restart our application.
Of course, I think I'm going to make sure.
Yeah, if you're confused.
So I'll just run Aragón.
Here goes now let's relive this and see how this looks, a reload this page to make sure it's current
click on Forgot Password and there it is.
So we have our phone.
All right.
Now, we need some JavaScript, first of all, to validate to make sure that they enter an email or
enter something in here.
And then we have to call a back end API root.
That doesn't exist yet, but we can do that easily enough.
Let's get started anyway.
So back over to Visual Studio count and I'll hide my terminal window and we're going to have a JavaScript
section.
So define jazz.
And that's what it's called in our template, our base template.
And we're going to have some script tags in here, script and a closing script tag.
Now, a lot of what's going to take place here will be identical to what takes place in login page in
terms of the kinds of things we're using in JavaScript.
So, for example, we're going to want this login messages.
We're going to want show error and show show success, and we're going to want to function.
So let's just copy the whole thing.
And this starts with that.
So this is right up to here to the whole contents of the script, and we'll just change it and make
it simpler because not as much is going on here.
So let's play starting now.
We don't have a log in messages, do we?
We do, but I'm going to call it messages instead, which I think is a better name because we're not
actually logging in here.
So we'll change the idea of the alert to messages, which means I can come down here and change this
to messages.
I can change them all at once by saying change all occurrences to messages.
That looks better.
OK, and there's a little formatting issue here.
So let's move this over a little bit and come down to Val.
So we didn't call it a login form.
We called it forgot form.
So that gives me a reference to the form and we do our validation.
Great.
We are going to create a payload, but we don't have a password so we can get rid of that.
And down here, I request options are going to be post.
We're going to string a fire our payload.
So that doesn't change.
Now we're going to call a different route.
What I'm going to call is API forgot dush password.
OK, so assuming that route exists and it doesn't yet, but when it does, we're going to get data back.
We convert it to Jason and then we go to data and all of this.
So we're not going to be sending anything in local storage here and we're not going to submit the form
so that can go away.
We are going to show success.
So what are we saying?
And show success?
We're saying log successful.
That's not a good message.
Let's change it to password reset email set.
And I think the rest of that is going to stay pretty much the same.
OK, so now obviously, although this actually is probably the final form of the JavaScript for this
page, we still have to go setup that route API slash forgot password and do something in there.
So we'll get started on that in the next lecture.