7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

3.3 Register User Page and `userService`

In this lesson, I'll show you how to set up a page to register users and a service for managing users.

3.3 Register User Page and `userService`

Hello everyone. This is Reggie Dawson. Welcome to the use Firebase as your backend course for Tuts+. In this video we will set up a page to allow us to register a user. Now that we cannot access the site without being a logged in user. We need a way to register users. The first thing we need to set up will be our register user template. In the templates folder inside the client folder create a file called register.html. The first thing we need to add to this file is something called front matter. Remember we talked about states. Well front matters where we define those states and foundation for rats in a normal angular app we need something called U.I. router to implement state based routing in foundation for apps. They include U.I. router by default on top of that they have built a template based routing system that makes routing`. First we will start with three dashes, then we add our name which also represents our state, after that we have our URL. This corresponds to the path that will be displayed in the address bar when a user navigates to this page, and then finally the controller that is attached to this template. Normally we would specify the controller in the HTML file, but again foundation for apps has streamlined the process. That actually writes this information to a router file that handles the routing based on the front matter. If we don't add a controller foundation for apps will use a default controller, after that we add our closing dashes. Next we will add a div with the class of great container. Then we add the age one tag that says register, and after that we add our form element. Next we will add a text input for our email. You will notice that these are different format from the inputs we use with bootstrap. We set this input up with the place holder of enter email address. Also notice the ng model that we have attached to the input. This ng model serves to make the value of this input available to our controller. Then we add two more inputs for password and to confirm the password. Just like before we are confirming the password to make sure it is typed correctly, again we're using the N G. model to make the inputs available to us then we will add a button. On this button we get have N.G. model but we've also added NG disable. What we're doing here is validating the fields like before but instead of us having to use code, we handle it right here in our button. Ng-disabled will disable this button if the email, password or password confirm boxes are empty. Again, we aren't checking format since Firebase will handle that. You will also notice the ng-click attached, which will execute Queued a function when this button is clicked. Then we add another button to cancel the registration. This will also execute a function when clicked. The last thing we need to do is deal with making sure that the passwords match. Here we are using ng high to display an error message when the passwords do not match. In jihad will not take effect until the condition is true in this case the password box is matching. When the passwords are matching the text will disappear. Now I am not actually preventing users from sending when the passwords do not match, but we could easily add that functionality if we liked. After that are registered .html file is done, but before we create our next service let's create a C.S.S. file for Eric Tex In the assets SCSS folder. Create a file called _custom.css., open up this fall and add this first line to enable our buttons. This is a foundation variable that allows us to use button tags as buttons in Foundation. Foundation normally uses regular links as buttons, so we use this variable since we use button elements. Then we add the error text class we just used and set the color to red. This SCSS file is a SaaS file that has compiled the CSS when we build the project. To use this in our project we need to go to the app.scss file. This is the main file that all as SCSS partials will be compiled to. We will import the custom file into our app.scss, take note that we had our custom dot S.E.'s as partial first so that it takes precedence over other C.S.S. files. Also notice that we don't have to add our underscore or file extension when importing our custom C.S.S. file, after that open up the services that J.S. file here we're going to add another. This is also a factory and it has the Firebase array service injected. Firebase array is one of the ways we can access data from Firebase with the other method being Firebase object. I use Firebase array because like the push method, it will generate a random ID when adding a record to Firebase. Like before we would use this ID to access data from Firebase. This time in addition to authenticating users we are also going to save data to Firebase as a sort of user profile. This profile will also let other users know when a particular user is online. This will all be handled in the user service. First we will add our Firebase reference, notice we are mapping to the user's node which will be where we start user profiles. Then we will add a reference to our firebase a ray, which is how we will get data from firebase, after that we are going to add the user service object. Inside we will add a function called add user this function has arguments of ID and user name, after that we use the add method. This method behaves like the regular fire base push method. We will set the key logon ID which will be set to our ID argument. Then we set the username and finally we set the on line status to false. This is how we are going to track whether user is online or not, after that we need to return the user service object. Our service is done for now. The last thing we need to do is create a controller for our register page, go to controllers.js.. First we set up our controller, we are using the name register controller which is the name we set up on our register page. We have dependencies of scope, state, myOath and user service. Inside this controller we will first add the cancel register function. If the user cancels the registration we will navigate back to the log in page. After that we add the reg user function which is the function that will execute when we click on the register button. Then we are going to use the myauth service with the create user method to create a user with Firebase authentication, then we will supply the email and password. Here we are accessing the email and password fields we set up. As you can see we are grabbing them with the names we set up as the Indian model. That's all we need to access the fields in by adding scope the values are available to us, then we add our success call back. Inside of the success call back we will save our data Firebase. We are using the add user method we just set up to save the data. We are supplying the user data you ID, which is the ID generated by firebase authentication in the email. This data is being written a firebase independent of authentication for our own tracking purposes. After that we will navigate home and then finally in our error callback we will display and after that our register controller is complete. Now all we need to make this work is a login page. In the next video we will finish our user service and configure our login controller.

Back to the top