Registration Form

[00:00:00]
>> Maximiliano Firtman: So for logging and for registration and logging, we are done on the back end. We still have more things to do when we are talking about seeing private data, okay? So now we need to go back to the client. So let's start with the HTML. So what's idea?

[00:00:21]
The idea is that I will have two new URLs. Account register and account authentication or login. Right now they don't exist in the router, so that's why the router says patient, phone, right? And by the way this is working client side. Because actually if I try forward slash login, I'm getting 404 from the server on forward slash login but not on forward slash account login.

[00:00:53]
I'm not getting a 404 from the server. I'm getting a 404 from the client. The trick happens in main.go. When we were doing this client routes handler, we added an account prefix. So everything is starting with account is sending that back to the client, so to the router in the client.

[00:01:16]
Forward slash logging is not there, so it's handled by the server saying, hey, no 404. Now we need to go to the HTML index.html in the public. Let me close all the go folders that we won't use for a while and public index.html. We'll create more templates, okay?

[00:01:36]
I will do one and the other one will be pretty similar. So probably I will copy and paste it, and then make some changes. You have then ng3 in case you want to copy and paste, but I want to explain something while I'm writing it, so I will do it manually.

[00:01:52]
So I have a template. Let's call this template register first. Like that, and I will have Actually, let's say section. Like that. A section, inside a section, I will have a title, register, a new account, and then a form. And on submit, I will call app.register. So we will need to add later that register function, and then we'll pass the event as an argument.

[00:02:26]
Does anyone know why we doing the event? Prevent submit. For prevent default, that is, prevent submission of this form. Because, if not, it will submit this not by our app, but by the browser. And then we have a pair, a lot of pair of label input. So the label is for the text.

[00:02:51]
It's very important for accessibility to add always a label. So for example, let's start with the input. We have the ID whether, for example, register name, that's the ID. Type text is by default, so I don't need to add it. We can add a place holder if you want, if not you don't need that.

[00:03:10]
We can say if it's required or not for some client side validation. And submitter is important, mostly in registration forms and login forms, is the auto complete thing. This is useful for oral competition, of course, but also for password managers. When you go to a website and that the password manager, that it can be iCloud or the Google password manager, is suggesting you to type a password for you or to save your credentials in your password manager is because the website has set the right order complete values.

[00:03:43]
So in this case, we do have a name. Be careful CC name is not the right one. This is credit card name. KCC is credit card, so that's not the one. So we just need to use name. Also we have nickname, given name. I think name will work here.

[00:03:59]
And label here, I will just say name. And it's important to define their for. I'll say, this is the label for "register-name". Does any one know why the for is important? Well, it's important to specify this label is for that input.
>> Speaker 2: It's for accessibilities.
>> Maximiliano Firtman: For accessibility and also for usability.

[00:04:22]
So that means, for example, when you have a screen reader and you click or you tap with your finger over the input, it will explain, that's the input for the name. So it's looking for the associated label. And also, if you click on Name with your mouth, your pointer, your touch with your finger, it will focus on the input, okay?

[00:04:46]
So they act together as a group. So we have a name, we have another pair for email. Or let me copy this one. So email for the label and also auto complete is gonna be email, and also type is gonna be email. This is important for mobile devices, mostly also for validation, but for mobile devices because it will activate the email keyboard, that has the add symbol and the close to the user, okay?

[00:05:20]
So that's something to have name, email, and then it's a password. Actually, we need two passwords, right? We need a password. And password confirmation. And auto complete is gonna be new password or current password?
>> Speaker 2: New?
>> Maximiliano Firtman: New. What's the difference? This is for the password manager to know that when you click there, it should suggest you a new password.

[00:05:53]
So on the type is password. This is for a mask when you type with asterisk or with circles. And then we need the password confirmation. Repeat your password. Like that. Password confirmation. It has no auto complete, so we don't need that, but we need type password. Like that.

[00:06:26]
And then finally, we will add a button. Oops, that says, register. Do I need to do something with click of the button?
>> Speaker 3: No, because you're gonna do it from the form.
>> Maximiliano Firtman: I'm doing it from the form. And the advantage of that is that it will work with buttons and also with the keyboard.

[00:06:49]
So if you press the Enter key, it will also trigger on submit both keyboard and the button. So I don't need to do anything special. Maybe I will add a paragraph saying that if you already have an account. Actually, yeah, if you already have an account. PLease, log in.

[00:07:15]
And log in will have a link going to account log in. Okay? Will it work without or should I do JavaScript, router, app, router.go? Actually both will work. It's probably gonna be better to use the other one. Because this one will actually reload the page. It will work, okay?

[00:07:49]
Because we have this idea of catching everything on the server, okay? But we can improve that later.