Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
FREELessons:19Length:2.2 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

4.9 Managing Users

Now that we have user accounts set up, in this lesson you will learn how to hide and show different options based on who is logged in.

4.9 Managing Users

Now that we've got user accounts set up in our Meteor app, I wanna talk about some things that we can do with those user accounts. And all the changes that we make in this lesson are gonna be saved in this site 14 folder. So one of the things that I wanna do with my user account is I want to customize the name that is saved whenever I create a new post. So let's go back into userposts.js. This is where we define the insert method, and in our insert method right now we're hard coding the username to "Craig". But now that we've installed this accounts package, it's very, very easy to customize the username that shows up here. All we need to do is to type Meteor with a capital M and we can do this as long as we have imported Meteor, so Meteor with the capital M.user().username. And that will store the username of the user who is currently logged in into this username field for our post. We can also save the user ID which is what we're referencing down here in this code that I had you comment out earlier. So we have userpost.owner, this is gonna be our user ID. Let's save that here as well. So we're gonna say comma and then go down to the next line. Again, this is inside Userposts.insert when we're creating a new post here. And I'm gonna create another property here called owner. And the way we get the user ID of the logged in user, is we simply say Meteor.userId, with a capital I, and then open and close parentheses. So just by adding these two new fields here, we're able to store which user is saving this information. So if we save that, go back to our browser and refresh, instead of waiting on it to refresh, let's go ahead and create a new post here and see if this still works. We should still see the name Craig whenever we save it. But let's just say Craig's new post here, hit Enter. And sure enough it still saves it. We got rid of the string Craig and instead we're storing it as our username. So let's log out and I've created another user here called Fred and I'm gonna log in as Fred and save another post. So let's call this Fred's new post and hit Enter. And sure enough, we see the username has been saved appropriately. So let's just save another one, another post by Fred. And now let's say that we wanted our posts to look different based on who they belong to. So if I'm looking at my own post, it's gonna be one color but everybody else's posts are gonna be another color. Well, I've already done something in our CSS under client, main.css. If we scroll down to the very bottom, I've created this class called is owner, and I've set a different background color for that class. So what I wanna do is I wanna go, let's go ahead and close that. I wanna go into our template for our post, so we're gonna go into the imports folder under UI, and I'm gonna open up userpost.html. And what I'm gonna do is for this panel here, I'm gonna insert another class name if I am the current logged in user or if this post belongs to the current logged in user. So I'm gonna type in something here that is not gonna work at first. I'm gonna say if isOwner and then I'm gonna add a class here called is-owner if that turns out to be true, and then we'll put out closing if statement here. Now, the reason this won't work yet is because, isOwner is not a Meteor thing, this is something that I just made up. So what I need to do is I need to go into the JavaScript for this template and I need to define isOwner. I need to define what that is so that I will be able to use it here. So let's go into userpost.js in the UI folder and you will notice I don't have any helpers for this JavaScript file yet. So let's create helpers for this particular template. So template.userpost.helpers and we're gonna create a helper called isOwner. So if you remember, we added a new field to our userposts earlier in userposts.js called owner. And that's gonna store our user ID. So if we come over here and let's go ahead and return a value. This is gonna return a true or false value, a Boolean value. We're gonna say if this.owner is equal to Meteor.userId. So this.owner is pointing to the owner property of this particular userpost that is saved in the database. And if that owner Id is equal to the userId of the current logged in user, which we get to with the Meteor.userId, then it will return true. Otherwise, it's gonna return false. So now, if we save that and save our userpost, now if we say if isOwner this will return a true or false value. So let's jump back into our page, and sure enough, we see a different color for Fred's post. I'm now logged in as Fred, and Fred's posts are a different color. Now, if I log out, and log back in as Craig, you'll see only one of these works. Because remember, these three down here were created before we added the new owner property to our post on the database. So if we just get rid of these last three, and now that I'm logged in as Craig, I can create new posts here. And every one that I create if I'm logged in as Craig, every one that was created by Craig or created by the logged in user is gonna show up with a different color. Another thing we can do is we can hide all of these buttons for users that are not logged in. So let's talk about how to do that. Let's go to our list icons section of our userpost.html section and in order to hide these, we only want these to show up if we are a logged in user. Now at this point, I don't care what logged in user is. We'll talk about that in a second. But first, I just wanna see if the current user exists, if somebody is in fact logged in. And the way that we can check that is inside our double curly brackets, we say, if currentUser, with a Capital U. Then we're going to show all of this, and then after that unordered list, we'll do our /if to end that if statement. So current user is pointing to the current logged in user. But if nobody's logged in then it's just going to return a value of false. And if it returns a value of false, then these icons won't show up. So let's save that and let's go back to our page. And we're currently logged in but I'm going to click here and I'm going to sign out and sure enough, when I sign out, first of all, all of the colors changed to white. And out buttons on the right disappear. So these buttons are only gonna show up if we are logged in. So if we logged in again, let's say this time is Fred, those buttons will show up again where it's logged in. However if I'm Craig, I don't want Fred to be able to edit or delete my posts, so let's go back to our userpost.html. And around our edit and delete buttons, let's just add another if statement here and we've already created the isOwner helper. Let's just point to that isOwner helper here. It's the same one we used up here. So if isOwner, then we'll show those buttons, otherwise, we won't show anything there. So then we'll put our /if after the buttons, we'll save that and we'll wait for our page to reload. And when it does, sure enough, only my posts have this buttons next to them. If I'm logged in as Fred, Craig's posts no longer have those buttons. So those are just a few things that you can do with your logged in users in Meteor. Thank you so much for watching and I'll see you in the next video

Back to the top