So we made a bit of progress with the log in functionality, and now I want to make a few changes to
what happens after user logs in.
So the first thing I want to take care of is this logging link.
Once I'm logged in, that should say log out and I should actually log me out in the same way.
I don't think everyone should have access to this menu item, virtual terminal.
So let's started making some of those changes.
So I'm going to go back to my idea and I'm going to, first of all, go to base layout, go HTML.
And I'm going there because I want the functionality I'm about to write to appear on every page of the
site.
So down here at the bottom, just before this block, Gispert, I'm going to put it in another script
just before this.
So what's in between these two tags is available on every page of the site.
And the first thing I'm going to do is I'm going to get a reference to that log in link right here and
also to the virtual terminal.
So I'll give the elai for the virtual terminal, which is on the line.
Twenty nine in my code.
And this is the draw or the menu at the top of the screen.
I'm going to give this an ID and I'll call it VTE Dash.
And in the same way, I'll come down to the log in its ally and I'll give it the idea of log in Daschle.
So now I have an ID, which means I have a means of getting a reference to both of those.
So back there, these new these two new scripts tags I just put in, I'll get a reference to the log
and log in length equal document element by ID and I called it logging link.
Then I'll duplicate that and do the same thing for the virtual terminal and I'll call that Betty Link
VTE Daschle.
So now that I have those references, I'll just write a standard eventless for when the DOM content
has been loaded and do something with those.
So document not add event listener
and the condition is dom content loaded.
In other words, the page is loaded, will execute this function.
And I what I'm going to do in here is check local storage and see if there's an entry in there for the
current site named if local storage, the get item and token.
If that's not exactly equal to null, then there's an entry in there now, that token might have expired,
but we're not going to worry about that right now.
Else,
so in the first case, we have a token so that user might be logged in, they probably are.
As a matter of fact, they have we they have a token in their local storage and there's an expiry there.
And I'm going to do right now is just test for the existence of that token so that local storage does
get item.
If it can't find an item in local storage for the current site named Tolkan, it will return null.
So I'm going to assume for the moment that we actually have a logged in user.
So I'll display for the log link.
I'm going to change its content, enter HTML.
I'm going to make that equal to and I'll put it in single quotes because I'm going to copy and paste
it in a moment.
I will copy all of this.
And paste that in here, and that will change whatever is up there right now to log in, OK, otherwise
log EnLink
HTML is going to be equal to the same thing.
OK, now we obviously don't want users who are logged in to see log in, so let's change that to log
in and let's get rid of the link here to log in and just make that hash back so nothing happens when
you click on it.
And I'm also going to put an unclick handler here.
Unclick will be equal to log a function that doesn't exist yet.
We're about to read it.
The only other thing I want to do here is initially I'm going to make both the logging link and the
virtual terminal link.
I'm going to make those hidden by giving the class details onto that.
And in fact, I'm going to move virtual terminal from where it is to be after this one just so there's
no screen jump when things take place.
So that will initially be hidden in the same way.
I want the login link to be hidden as well.
So we'll give it the class of.
And down here, after I make this determination as to whether or not a user is logged in at that point,
I can simply say logging class list.
Don't remove and I'm going to remove DNA to hide it, in other words, and then the same thing here,
if someone is logged in, I'm going to go to Vrchlický class list, not remove DNA.
OK, now, after this event, listener, let's write that function log out that we referred to back
on line seventy one.
So function log.
And all I have to do here is get rid of those items from local storage and redirect you somewhere.
So I'll say local storage, the remove item.
And I'm going to remove token and duplicate that and remove the token expiry as well,
and then I'll redirect them back to the login screen location that is going to be equal to slash login.
OK, so let's give this a try and see how it works.
So I'll stop my application, make stop.
I'll start my application.
Make start.
Everything seems to be running.
Let's go back to our Web browser and see what we got wrong.
So I go to the home page.
OK, virtual terminal is hidden and it says log in, because apparently I don't have anything in local
storage that's named token.
So let's log in.
I will login as that mean example, dot com and password.
Now, when I log in here, this should stay log because although we're changing local storage and all
that sort of thing, we're not actually going to fire that dumb content loaded.
That's now part of our base template because we don't do a redirect here.
At least we can check this and then go somewhere else.
So click login.
All right.
We've logged in.
Now, if I go to the homepage, I should see virtual terminal over here and that should change the logo.
And there it is.
And if I log out, it should take me back to the login screen.
This should say log in again and that should disappear.
So let's try that one up.
OK, that seemed to work pretty well.
So let's go back to our idea and find the log in page and let's find the part where we've actually authenticated.
And here after we've if data error is exactly the faults that we've logged in, we set our local storage
items.
Let's just to a location of equals, take them to the home page.
And now if I start my application and start it.
It should be much clearer what happened, what's happening to the end user, so I'll refresh this page
to make sure I have a current version and log in with valid credentials.
I mean, at example, dot com password, and we should be redirected to the homepage, see a virtual
terminal.
And this should now say Loga.
Let's find out.
That's perfect.
Now, naturally, this is the illusion of security, that virtual terminal page really needs to be protected.
And if I go to it right now, you can see that it's Yoro is right there.
So I'm going to copy that URL.
I'm going to log and now I'm going to try to go to that virtual terminal just by pasting in the euro.
And of course, once I get return, it'll still show the page because there's no real authentication
taking place here.
There is authentication, but we're not doing anything without authentication.
So what we need to do next is to change this virtual terminal page so that when we request that page,
we actually verify that we're allowed to be there.
So we need to somehow send that token information to the back and verify that we're allowed to be there
and then display the page if we are and if not, perhaps take the user to the login page so we get started
on that in the next lecture.