- Overview
- Transcript
2.3 Add User Accounts
Of course, we'll need to have user account functionality in our application. Fortunately, Meteor makes it easy to create users. In this lesson, I'll show you just how easy it is.
1.Getting Started3 lessons, 11:39
1.1Introduction00:39
1.2Application Demo05:23
1.3Application Setup05:37
2.First Steps4 lessons, 19:19
2.1Organizing Your Code05:44
2.2Set Up a Router07:24
2.3Add User Accounts03:39
2.4Collections02:32
3.The User List Page3 lessons, 23:41
3.1List Users12:38
3.2Making Friends04:57
3.3Write a First Meteor Method06:06
4.The Game List Page4 lessons, 39:05
4.1Waiting for Data08:15
4.2New Game Form08:35
4.3New Game Method09:42
4.4List the Games12:33
5.The Game Page10 lessons, 1:28:25
5.1Get the Game Data04:53
5.2Display the Game: Prep Work11:40
5.3Display the Game12:00
5.4Style the Chess Board02:50
5.5Making Moves: The Event Handler16:54
5.6Making Moves: The Meteor Method10:00
5.7Listing the Moves06:48
5.8Chat Between Users11:56
5.9Reviewing the Game09:29
5.10Deploy the Application01:55
6.Conclusion1 lesson, 00:44
6.1Conclusion00:44
2.3 Add User Accounts
Next up is user accounts. Of course, pretty much every web application needs a way for users to create accounts to sign in and to sign out. Now, Meteor makes this super simple. We'll start by installing a few packages. Let's do, meteor add. And we'll add the package, accounts-password. Now, Meteor has a bunch of packages that allow you to create user accounts using different sign in services like Google, or Facebook, or GitHub. We're going to create our own local accounts. And so we're going to use the accounts-password package. Now the other package that you would normally use is accounts-ui, which is the default you UI for Meteor sign ins. However, since we're using Bootstrap, we're going to use someone else's package. And this is ian:accounts-ui-bootstrap-3. And this is basically just a little bit of UI that's tailored to work with Bootstrap's navigation. All right, now that we have that installed, let's come back to our layout template here. We have our navigation element here in our code. And we have an unordered list where we can put links. But underneath this unordered list, let's add a div. And this div is going to have a couple of classes here. We're gonna have a div of collapse and navbar-collapse, so that we have a pop up window here for our account sign in. Let's also add an id of navigation. Inside of this let's create an unordered list. And this unordered list will need a couple of classes as well, as you might expect. And we're going to give these the two that we gave to the other unordered list, so nav and navbar-nav. But then we're also going to add navbar-right so that this will be pulled over to the right. And then within here we're just going to render a template. And that is going to be the loginButtons' template. And this will give us the fields and buttons that we need to create user accounts. Now there's one more thing I wanna do, and that's a bit of account configuration. By default Meteor requires that users have an email address to sign up. We don't need to require that. We're just gonna allow a straight username. So we need to configure this. And this is of course client-side code. So in the client directory let's create a main.js file. And let's say Accounts.ui.config. And we will pass this function a configuration object. And we're going to set the property passwordSignupFields. And we're going to set it to USERNAME_ONLY, all uppercase. Okay, so with that in place, the Meteor server will refresh our page. And when we come back to the page here, you can see that in the top right corner of our navigation, we have the Sign in / Join button. And if I click that, a little modal window appears. Now of course, we don't have any accounts yet, so I will click the Create account button. And let me go ahead and create an account. And I click Create, and you can see that we're signed in. And we know this because now this button has our name and not the message to sign in. And of course I can go ahead and sign out. And we can now use the regular sign in process to sign in. And it looks like we can successfully create users. Let's do one more, and I will create a user named, cameron. And actually, I need to create the account, not sign in. So we'll say, cameron, as the username. And I will choose a password, and we'll go ahead and create it. And there we go, you can see now we're signed in as cameron. And we can go ahead and sign out. Okay, that's it. Meteor makes it really easy for us to create our user accounts. So now that we have user data, let's focus on some of the other data that we'll need to be able to store and retrieve for this application.