Registration Page Custom Element

[00:00:00]
>> Maximiliano Firtman: So pretty quickly, I'm going to create a web component for that one, so let's create the registration page or register page, whatever you wanna call that. That we know the deal, okay? So it's export class, register page, extend from HTMLElement, and then we define, go to customElements, define page, you can say, it's a lot of work, we need to do that every time.

[00:00:39]
Remember, you can create your micro library, and then you can have in one sentence, a way to create a web component that will kind of write this for you. So it's possible to do that pretty easily, okay? And you create your own mini library, and it's fine, and on the connectedCallback.

[00:01:06]
>> Maximiliano Firtman: We need to always do the same, I'm talking about this. So I will just copy and paste, this copy and paste is the one that you say, come on, it's template register, and we are appending that. And actually, to see it in action, I need one more step, does anyone remember which one?

[00:01:31]
Which step am I missing? So I wanna go to account register, and I wanna see that form.
>> Speaker 2: Render?
>> Maximiliano Firtman: Render, no, render is something that you can call if you want, I don't think we need that here. Render also is not mandatory, it's just a method, actually, why isn't it working?

[00:01:47]
So if I do this, I'm not seeing anything.
>> Speaker 2: Do you have to put it in our routes?
>> Maximiliano Firtman: Yeah, we need to have the route, because it's not there, the router is looking at the URL, it says, I don't have any, target for this, so we need to add it.

[00:02:06]
So path/account/register, and component will be, now that we have the RegisterPage, let's check it has the .js, which is okay. So, now if I refresh, I'm still getting, there we are, okay, the name looks weird, right? So let me see why something is wrong with the name, maybe, let's see, input ID maybe because of the type, maybe let's have an explicit text type.

[00:02:45]
Yep, you say, why do I need to set explicitly, because by default it's text? Because of the CSS, so, this CSS is probably applying to input type text, input type password, and input type email. So if you don't have the text, it's not going to apply the CSS.

[00:03:02]
But of course, you can change the CSS. And now I have, like, a pretty nice form, okay? So as I was mentioning before, if you click over the Email world, if you click there, it gets focused there as well, okay, so that's because we have the label four.

[00:03:20]
>> Speaker 3: Do you have an closed tag for the login link?
>> Maximiliano Firtman: Maybe,, everything is possible, let's see, yeah, it's closing the P, and by the way, I haven't had close talk, but seems to be working anyway. I mean, I can go to Login, and it works, and I have not seen any glitch from that and close tag, why is that, does anyone know?

[00:03:45]
I'm gonna solve it anyway, because you want to sleep tonight, if I'm not doing that, but I know, but well, actually, the browser is always trying to do its best. In this case, when you close the paragraph, it says, but we want a link, but anyway, okay, so let's close the link, so it will close the link for you.

[00:04:07]
And this is interesting when you do [INAUDIBLE] Javascript. I don't have it closed in my HTML, but if I look at the DOM representation of that, so if I look talking about here, I'm not sure, I have used this, it's a pretty nice tool. You click there, and then you go and click here, and it goes directly there, actually it's closed, so that's when you see that the browser is closing the tag for me, okay.

[00:04:37]
The thing is that if you don't do that, sometimes it's not closing when or where you were actually expected, so not in every situation, everything will look really nice. So that's why you need to close it, which is fine, so thank you to whoever alerted me to that.

[00:04:54]
But keep in mind, the web is typically always working on the best effort, so it will try to do it anyway, let's render this however we can. Okay, let's dance, anyway. Okay, so we have the form, now the next step is to do something when you click there and just call the app and then the login.