Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Web app with node express and vue 400x277
  • Overview
  • Transcript

3.5 User Registration

Registering a user is a lot like logging in a user. The forms are almost identical, the logic is almost identical, so this is going to be rather easy to implement and we're going to start with our client. So let's create a view for registration. Now we can take our login view and we can just copy it and rename the copy to register and there´s just a few changes that we need, most of them are cosmetic. So the first thing we will change is the class for the div at the route of our template, we're just doing that to be consistent, let´s also change the heading text to register. Now as far as the fields are concerned, we still need the email and the password. Now we could add a second password field but the modern trend is to just have a single field, so if somebody mistypes their password the first time, well, they're screwed [LAUGH] so we will keep with that new trend. As far as the text for our button we will change that to register and lets also change the method name, that executes whenever we submit the form, we'll change that from login to register and that is it is as far as our template is concerned. And most of our JavaScript is going to remain the same, we still need our API, we still need the EventBus, we have our data, so now we just need to make a few changes to our method. So first of all is the name, it's going to be register, and we're going to create a new method on our API called registeruser, we still pass in the email and the password. If we get a good response from the server, then we emit that login event, otherwise, well we want to do something else here as far as the error is concerned. So if a user already exists we should tell them that but that also kinda contradicts what I talked about as far as logging in. You don't want to supply too much information if somebody attempts to login with the wrong credentials but here for registration you could find a username that was either used or not used but we also want to be user friendly here. So if somebody doesn't supply a valid user name, then we need to tell them that. So what we will do then is we will use our error object and we'll get a response, data, name. Now, this name property would actually be coming from the error given to us from MongoDB. If we attempt to create a user with an existing email then it's going to give us an error, it will have a name property, and the name will be MongoError. So we're just going to assume that if the error is coming from MongoDB that it was because a user already exists. So let's say that a user with and we will specify the email already exists, so that will be fine, otherwise let's just kind of cheap out with saying error.message, so there we go and that's it as far as this view is concerned. So the next thing that we need to do then is set up the route, so that we can navigate to that view, so let's just copy what we have for login and make the necessary changes. So the path will be register, the name will be register and the view will be register, so there we go. Now let's go to our client API, and we will add that register user, which is going to be a lot like our authenticate. The only thing is that it will, of course, have a different name and the URL that we are going to send a request to, it's going to be simply slash register, everything else, should be the same. So now we should be able to just write that route, so let's go to our server, let's go to routes and then login. We will use our login route as a basis, because there is a lot of this that we want to reuse. We do want to go a head and also get to the password, so we will do that here and we're not going to use this findOne method. Instead, we're just going to try to create the user because MongoDB will definitely tell us if that user already exists. So we will attempt to create a user with a given email, we want to encrypt the password, so we're going to use bcrypt and we will use that hashSync method that we used whenever we wrote that setup route. We will pass in our password and we will have our encrypted password. Now I'm going to be explicit as far as setting the is admin flag, I want to say that no, this is not an admin, so that any user that registers is definitely not an admin because we coded it that way. Now, as far as our callback, we don't need a check to see if we have a user or not because, well, if we don't get an error then we have a user. So if we have an error, I want to do something different here I want to return a 400. Now the idea being that you supplied bad information, so it was kind of a bad request. Now that might not be the quote of quote correct thing to do but it makes sense to me, so that's what I'm gonna do. And then we will just pass the error object to the send method, so that will be sent to the client. We don't need a password check, but we do need to create our token because we are going to send back to the client basically everything that we do with the login. So we create our token, then we send the object that contains the token and the user information back to the client and everything should be good to go. So now let's test it, let's go the browser, let's click on the register link, now you'll once again, whenever I copied and pasted the markup for our App view. There is a link for register and it is only displayed when the user is not authenticated, so that is why we see that here. Let's do a check to see if we can go ahead and register our admin users. So we will see what we get and nothing, that's not what I expected to see. So we have an error somewhere, let's see, default.registeruser is not a function. Well it should be a function because we wrote that, let's do a hard refresh. Always whenever I get any client errors, the first thing I typically do is do a hard refresh just to make sure that everything is refreshed. So let's try this again, okay, the request failed with the status of 404, so for some reason we are not seeing our new register routes and as far as the server is concerned we don't have anything there. Okay, so, let's look at our code, let's go back to our login let's make sure that, yeah, we didn't change that URL, okay, that's kind of important to do. Okay, so now we shouldn't need to refresh our client again, let's just resubmit this, what do we get? A user with admin@admin.com already exists, so that's what I expected to see there. So now let's register our user, the email will be user@user.com, we'll use the same password and we will register that user and how, how can that exist? Well, let's look at the database, let's refresh, what do we get? We have just a single user, okay, so let's then look at our network. Let's see what the server is sending back and, let's see, typically a key error, collection portfolio, users index, portfolio, currency, ticker. That, I did not expect. Okay, so for the time being, we're gonna cheat and we are going to get rid of the unique and index. [LAUGH] Really for our currency it's not that important, I mean there are some rare cases where there are some currencies that have the same ticker, so what we will do then is just take that off but that index is still there unfortunately. So what we're gonna have to do is go into our database and somewhere, indexes right here, as we're viewing our collection, we can click on indexes and we will see our indexes. The one that we want to delete then is this one for the currency ticker, so, let's drop that, hello, let's drop that index. Well, what happened there? Why did that, I don't care, good grief, come on man, okay, so, let's try this again. We will drop that index, so that that shouldn't be an issue anymore and let's go back and try to create that user again. So let's clear out all of our errors and all of our network attempts, let's try this again, we will register the user and, there we go, it registered the user. Otherwise we wouldn't have gotten here and we can verify that the user now exists by checking our data store. So once again, we can look at our collections we have our admin user and then we have our normal user. So that's great, we have two types of users, we have the admin and then just a normal user. But now we need to manage our currencies, because we first of all need our currencies available so that we can then start managing our portfolios. And we will start doing that in the next lesson.

Back to the top
Continue watching with Elements