- [Instructor] Now that we have the Log In page working,
it's time to work on registering users.
So it's going to be this page right here,
pretty similar to what we did with Log In,
but it does have some additional issues.
So that page happens to be right here,
and I'm going to start off by copying this gist
that I've created for you.
It's pretty much the same as the Log In,
but there are some additional fields,
and I went ahead and prepopulated
most of the fields and the events for you.
So if we take a look at what I copied in here,
you can see that I have the router-link already,
and also that I've already inserted the v-models.
So this will look for a local variable called passTwo.
There are two passwords, passOne and Two,
so we'll work on making sure
that users type them in properly.
And then we also have this model for email,
and then we have one here called displayName.
And finally, we have this submit event
looking for a method called register
when somebody registers the account.
So let's go ahead and work on
what the script is going to look like here,
and we'll start off importing Firebase.
So it's the library itself.
And then, in our export default section,
we'll have to create a data section
to load local variables,
and this is going to return some information,
which is going to be our list of variables.
Right, so we have all the variables from the form.
And now, we're going to validate the form information,
specifically the password data,
so we can do that in addition to the data.
We'll create something called watch in Vue.js,
which essentially lets you monitor
the value of something changing in your application.
In our case, we want to look
for the variable called passTwo whenever it changes.
We're going to execute a function, so that's pretty convenient.
And what we'll do here is just some basic validation,
so we're going to make sure
that the first password is not empty,
and also that the second password
is also not empty.
And then, we're going to check,
and actually, we don't need this if statement here,
then we're going to check,
and I think I got a little bit
literal here with my parentheses, so I just need that.
So we also need to make sure
that password two is not equal to password one.
So these are the tests.
We're going to make sure that password one is not empty,
also that password two is not empty,
and then we want to make sure
that if password two doesn't match password one,
and now, I actually need a parentheses there,
then I'll generate an error,
otherwise, I'm going to reset the error to null.
So let's see how that works.
Let's go ahead and save this,
and let's try filling this form out.
Whenever we tried it, change password two,
we're going to see that it says passwords must match,
and it's just keep on doing that
until we type in passwords that match.
So that's pretty cool.
Then see what it would take to register a new user.
So to do that, we're going to need
to create a method section here.
So, in methods,
we'll create one method called register.
And so, this is the method that we execute
whenever we submit this form,
and notice that I do have that prevent property there
to make sure that it doesn't try to reload the page.
So let's go ahead and make this bigger here.
So here, I'm going to create, just like I did before,
I'll create an info constant here
that just puts all that information
from the form into this variable.
I'm just going to use passOne here, I don't need both of them,
and displayName
from the displayName variable
that we see right here, and it's also being tracked
by this v-model statement right here.
Right, so we put that all into this info variable.
And then, we make sure that there are no errors
so that we can submit this form properly.
So if there are no errors,
then we can try the Firebase authentication method,
and I need to make sure it's a capital there.
And in addition to being able to log in,
Firebase has an even longer method
called createUserWithEmailandPassword.
Holy cow, that's really, really big.
And what we'll do is we'll pass along the email,
as well as the password, right?
And this will generate a promise if it's successful.
So if the creating the user is successful,
then we'll get back some stuff from Firebase.
I'm going to call it userCredentials.
So this is a name that I made up.
You can call it whatever you want.
And what we'll do is just go ahead
and use the router,
and we'll pass this along to meetings.
So we'll pass this along to the meetings route.
And then, if for some reason, this login then fails,
then we will pass along any errors
that we receive from Firebase
into the local error variable.
So whenever you receive an error,
it has a pretty large object,
so we're just going to get the message from that object.
Right, we'll save this,
take a look at our application.
Let's try to register a user.
Right, so we'll hit the Register button,
and I want to hit this Reload Page.
You may have to hit that just to,
whenever you register a new user.
And now you can see the new user
has been added into our application, so that's great.