Login Form & Custom Element

[00:00:00]
>> Maximiliano Firtman: So the registration form is already on the screen and ready to use. So let's create also the login one, so we have both, and then we connect the client to the server, that's the last part to make that work. So going back to HTML, icon, again, don't do this at home, but yeah, I'm the teacher, so I have the rights to do that, I will copy and paste, okay?

[00:00:27]
From the template to register and I will create the other template login and make some changes from there. So we have this is the login form, when we log in we won't have a name, we won't have two passwords, only one. The button should say Login, and then the link if you don't have an account register, okay?

[00:00:54]
So we send the user back to the registration. And also change the IDs, so it's not register email, let's call it login email, or authentication email. The same here, the same here, and also we call app login and not app register. That's just the template, remember, that's HTML and I'm sure that you're thinking like early someone asked about this, but everything is in the HTML.

[00:01:27]
Maybe we can separate HTML in separate files, we can do that. And then to do that on the web component, you just need to fetch the HTML for the template instead of getting it from the DOM. So I think that so far we are good, I mean, in terms of the size of the HTML is not really huge.

[00:01:47]
>> Speaker 2: The auto complete attribute needs to be-
>> Maximiliano Firtman: That's correct, yeah, we have to change the auto complete attribute, which one, specifically, the password. In fact, sometimes I'm not sure if you have seen this, we need to use now current password. You go to your website and then the password manager is suggesting to you a new password on the login screen, and you say, why?

[00:02:10]
No, this is a login screen, well, that's because the developer didn't change that, you probably copy and pasted, okay? So anyway, now I need also the component and also add the component to a route. So I will, let's copy and paste the registry page and create the login page.

[00:02:31]
And now I'm going to change login page here, also here at the bottom. And then it's the template login the one that I'm going to read, and I'm going to define this as login page, in case we wanna use the login form somewhere in the HTML. Here is the part where you can load it from an external HTML, so you just do something like this, you fetch this from template forward large login HTML.

[00:03:04]
And when you have it, you'll wait for it because it's a fetch and you get it as text, not as JSON, and then you inject it somehow, okay? That's how that works. Okay, so now [COUGH] I need also the route for this, so I'm going to add one more for the path, account, login, and the component that I wanna render is login page.

[00:03:33]
So, now if I click in Log in, I'm getting the login page, so I can go from register to login, and it just works.