Lesson Description

The "My Account Page" Lesson is part of the full, Go & Vanilla JS: Fullstack Without Frameworks course featured in this preview video. Here's what you'd learn in this lesson:

Maximiliano demonstrates how to create an account section for authenticated users in a web application. He also addresses a bug where the account page incorrectly displays a user as logged in even after logging out.

Preview
Close

Transcript from the "My Account Page" Lesson

[00:00:00]
>> Maximiliano Firtman: So now, after log in or registration, we know that the user is going to an account section that doesn't exist. So let's do that account section. So we will create, of course, we know how to do that, a component. So this is actually pretty straightforward. For example, I can just copy the registration part.

[00:00:17]
I will create the account page I copy this because, yes, a basic template. So let's create a template for the account and we will do we will call this the account page,and this is the account page, okay, so then we need the template where in the HTML. So we go to the HTML and we create another template.

[00:00:42]
This is going to be pretty simple. We can say that we have a section ID account, and so far, we're going to just add an HQ saying you are logged in, okay, just to confirm frames the user is logging. And some actions that are only available for logged in users or authenticated users.

[00:01:07]
So we can do that with some buttons, such as log out, because if we can log in, we should be able to log out. And also we will have a link to your favorites and also to your watch list. We also have links somewhere. And then when we click here, well, we have an app.login, we may have an app.logout, we can see that.

[00:01:32]
We need to copy that, and we need to create that and then here, we can just go to the router. And say, I want to go to Account favorites. I think that was the URL we were working or we will do after this. So and the watch list like this app lookout.

[00:01:58]
Let think about that for a second. App login was actually making all the stuff, okay, go into the server. What about logout? From a client's perspective logout is when you check-out your hotel, okay? So you take this and you return it or you throw throw it away, I need to remember to pick it up later.

[00:02:24]
So logout will be just to talk to our store and just say, You know what, I don't have JWT anymore. That will also delete that one from local storage if my proxy works. So from now on, I throw my credentials so I don't have them. So, I'm logged out, okay?

[00:02:49]
And after that, maybe I want to say something like, you know what? I want to go maybe to home or to thanks or whatever. I need to send the user somewhere else. Okay, finally, I need to create the route for this account, so path:/account/, just that, and the component will be the AccountPage.

[00:03:19]
If everything works now, I should be able to refresh here.
>> Maximiliano Firtman: First, if I go to Account, it's not working. See why. If I open the console, it's saying that it can read the content, so it's probably the template ID. I have a problem with my template ID, so account page is trying to read template account, and in my HTML, I didn't add an ID.

[00:03:53]
That's why. So Id template account, okay, cool. Let's go back here, refresh. And it says you are logged in akay, if I click Log Out, it goes to the home. And also, I have no unmatched jwts, so I don't have the credentials. So if I log in again, for now, I need to do it manually for some reason, we will get there.

[00:04:19]
So if I log in again, okay, you are logged in. If I log out, I'm logged out. The problem is that if I'm going to my account, it says that I'm logged in, but that's not true because I logged out. Why is that? Because my router just goes there.

[00:04:40]
If I say so, okay, so we need to add another validation rules in my router, and that's saying that maybe some pages will need being logged in.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now