Enhancing Login Forms

[00:00:00]
>> Now it's time to start working in our project. I'm trying not to take anything for granted. I know that many of you may have already seen the basic flow and maybe you have experience doing so, but there may be a lot of people out there that are coming to the web for the first time that they haven't created a login form.

[00:00:18]
So a login form is actually pretty simple. I'm not going to teach you how to create the form in HTML, but there are a couple of things to have in mind. First, the flow typically involves at least three steps, the registration form, so a form to register the user, the login form, and at least recover password, okay, recover or reset the password.

[00:00:45]
And the verb, it depends on if you're storing your passwords in plain text or not. In fact, I mean, during the 90s, everyone was storing the passwords in plain text. It was actually the common situation. So you typically have a website that recovers passwords link, you enter your email address and you receive the password on your email, because security wasn't actually a big problem at that time.

[00:01:13]
So we were not so many users on the web probably. And now if you are hashing in your server, the password, then you don't have the password just sent by email. So the only thing that you have is a way to reset your password. So you know the bit as a user, you get the link on your email, you click on the link, and then you create a new password, okay?

[00:01:33]
So that's the flow. So we will focus today in the registration and login section, because the other one needs email, okay, and we have only one day to cover. So we will leave that as homework, it's actually not difficult to create, all the recover and rest of the password.

[00:01:53]
So we will make the registration flow and the login flow. And also, big warning, big warning, everything that we are going to make today is, let's say, for learning purposes. So we are trying to learn best practices and how to deal with these new flows of authentication, how to improve user experience.

[00:02:14]
The code that we are creating might not be ready for production, okay? So there are still maybe a lot of things and validations to do that we are not going to do today, because maybe a lot of them are really boring in terms of the code that we need to write, simple but boring and large as well.

[00:02:34]
And I want us to focus on the important part today, okay? So that mean there will be a lot of to-dos after today's workshop if you wanna go to production with a full authentication system. And regarding the form itself, as I mentioned before, I mean, I understand that you know HTML enough to create the form, okay, the form tag, the input tag, so that's not what we're going to see.

[00:03:00]
But today in modern browsers, there are some things that we need to do to increase, to enhance the experience of logging in website or registering accounts, and that involves also Password Managers. So it can be the password manager from your browser, Edge, Chrome, Safari, or you might have a plugin, last pass, one pass, one last pathway and another plugins or other third party Password Managers.

[00:03:33]
So because they will appear in your form somehow, we need to do some things to increase the opportunity to have a better user experience, okay? So first, things about accessibility, we need to connect labels for each element, and I will do that in a second, okay? We shouldn't be using placeholder as labels.

[00:03:57]
I still find a lot of websites doing this. So a label is just the label tag. I'm talking about the label element in HTML. Some people say, I don't need the labor,, I can just write in the placeholder. You know what a placeholder is? It's when you have a text appear grayed out within the text field, why you don't have content inside, okay?

[00:04:20]
We will see that in a second. We should use HTML semantics, so what's known as HTML5, so, for example, the require attribute, the type attribute, the pattern attribute to define semantics for that element. If you're using single page applications, I mean if it's React and Angular application, a Vue.js application, just vanilla JS, but single page application.

[00:04:49]
The names of the form for registration and login, and not just the name of the form, also the name of each input type must be different. I know at this point you don't understand why or what's going on here, but because it's a single page application, Password Managers don't know where you are, if it's a login page, a registration page.

[00:05:13]
So if they don't have different names, so if you reuse the same form, it's not gonna work. So another best practice that we typically see these days on forms is to let the user make the password visible with a little eye icon or make it visible. Mostly this is for mobile devices.

[00:05:32]
So you know this deal that if you use an input type password, while you are typing in that input textbox, you see stars or circles, that was optimized for desktop. If anyone is walking around you or behind you, the idea is that they cannot see what you are typing, right?

[00:05:54]
But with a mobile phone, we use a mobile phone, right, it really close to our head. It's actually much difficult for someone being behind you seeing what you're typing on your phone's screen. Not impossible, but not so simple, okay? But in the computer, maybe you have a large monitor, yeah, anyone can see what you are typing, okay?

[00:06:18]
So that's why it's not a big deal if on a mobile phone, the password is visible, okay? I'm pretty sure that you have found yourself counting the characters in a password field, like, okay, how many characters did I type? Or you'll delete everything and you type again, because you are not sure what you typed, mostly on mobile devices.

[00:06:41]
Also, we should help Password Managers with auto-complete HTML attributes. I'm not sure if you have seen this before, we will do that in a minute, okay? Because password managers, they try to guess based on the name of the text box what should be there, like if it's the name, the email, but what happens if you are writing your code in Thai or in Italian?

[00:07:10]
Will Password Manager get the names, will know which one is the email, which one is the username? It's not so simple. So now we have in HTML some attributes under the autocomplete attribute that will actually let us define correctly what are we expecting on that text? Also when you have instructions, for example, you have a text saying, hey, your password must contain one letter, one capital letter, one number or two numbers, well, that instruction is typically a paragraph.

[00:07:48]
It's detached from your input type. Well, for accessibility, you can connect both elements, the input with the instructions with the area described by. In that case, you will find the ID of the paragraph that will describe, for example, the rules for the password, okay? So these are things that you should implement in your HTML forms.

[00:08:14]
And on single page applications, this is also interesting. We should use the submit form event and not the onclick. So typically, you have a form and a login button. So if you're using React or Vue.js and you use the submit, sorry, if you use the click event handler of the button and not the submit event handler of the form, you may have problems with password managers.

[00:08:47]
Because they may not know that actually you submitted the form, because there is no real submission as we did with multi-pages before, okay? Make sense? So we will see this in action in a second. And also, we should do a pushState. What is a pushState? Change the route in case you're using a client side routing system.

[00:09:14]
So after login, after subscribing the user, you should change the route or call pushState. If you don't do that, okay, a lot of password managers will not get that you have just logged in or created account, so they won't save the credentials. It happens to me sometimes that on some websites, maybe the Password Manager is suggesting me a password.

[00:09:38]
So I see the password suggested by the Password Manager, then I register the account and the password is gone. I mean, it's not happening on many websites, but on some websites. So the password manager didn't save that password, why? Because the password manager didn't realize that the operation happened.

[00:10:01]
So it didn't save the value, so next time you get in, you don't have the password, so you need to reset the password, you need to reset it, okay? So for example, for the autocomplete attribute, the values that we are going to use for the form are "new-password" and "current-password".

[00:10:21]
To use the right one is important. You use "new-password" on the registration form. So you're expressing, in this case, to the browser or the Password Manager that here goes a new password, not the password that the user has stored in the current browser or for the current website.

[00:10:43]
Current password is for the login form. It means, hey, here, we should put the password that was already saved before, So I've seen some forms that as autocomplete, they use password, and that's wrong. You need to pick if it's a new password or a current password. And then for your name, you use autocomplete-"name".

[00:11:09]
Autocomplete has a large list of options, like address, you can first name, given name and family name, okay, but just for the simple part name. And for your email, you can use email. But if the email is going to be the ID of the user, so your username, as it's happening on many, many websites, then you shouldn't be using autocomplete email.

[00:11:34]
You should use autocomplete-"username", okay? That's how the Password Manager will know that even if it's an email, the username, okay, it will be part of your credentials. So for example, in a registration form, credentials will be the field with autocomplete-"username' and the field with autocomplete-"new password". And in your login form, it's going to be the same username but with current password.

[00:12:00]
Those are the pairs.