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

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.3 The Signup Page

In this lesson, we'll finish off the user login functionality with a signup page.

4.3 The Signup Page

Hello everyone, I am Reggie Dawson. Welcome to the NativeScript in Mobile Angular 2 course from Tuts+. In the last video, we created our login component so that we can access our app. Unfortunately, our users don't have a way to sign up for our app. So we will add that functionality now. The good thing about Firebase is that it comes with a full featured authentication system. It will even check that email addresses are in the proper format. So we don't have to worry about that. First, we will create a signup folder in the pages folder. In this folder, create a signup.component.ts, a signup.html, and a signup.css. First, we are going to edit our signup.html file. The first thing we will add is a StackLayout, then we will add the same image that we used on our login page. Then we will add identical text fields to the ones we added on our login page with an additional password field added. Here we have added the extra password field so that our users can confirm their password. After that, we add two buttons, one to sign up and one to cancel. Nothing special here, just two buttons set to execute the register and cancel methods. Then if we go over to signup.component.ts, the first thing we're going to add is our imports. Nothing new here as well ,we're just importing the component, router and the Firebase plugin. All of this should start to become familiar to you now. Here we have our selector, which we really don't need, followed by our template URL and our style URLs. And then after that, we add our class. First we add some properties. Just like we did with our login component, we are capturing the contents of our text fields through the ngModel we have bound to them. After that, we add the constructor. Again here we are pulling in the router. We have to do this anytime we intend on using the router navigate method which is offered by the router service. Then we can add our register method. The first thing we are doing here is making sure that the passwords match. If they don't, we will alert the user and they will have to try again. Then we use the Firebase createUser method provided by the plugin to create a user in Firebase. We are doing the same thing as the login page in supplying the e-mail and password from the text fields. And then after that, we use a arrow function for our success and error functions. First, we alert the user on success and then we navigate to the log in page. Then finally, we add the error function that will alert the user if there's a problem creating the user. The last thing we will add to this file is the cancel method. Now all this method does is navigate to the login page if the user cancels. The last thing we need to do is go over to our app.component.ts and import are SignupComponent. Again, nothing special here. We are just importing like we have done with all of our other components. Then finally, the last thing we need to do is add a route to our component. Now, under normal circumstances, we could preview right now. But if we did, we would probably get an error. The last thing we need to do is go over to Firebase and enable authentication. If we go to our project and then click on the Auth link and then click on the Sign-On Method, as you can see, Firebase offers a lot of different authentication methods. Go ahead and click on the Email/Password option to enable it. After you enable it, make sure you save it. Now once you do that, users will be able to sign up and use password authentication from your app. This is necessary because firebase disables user access for unauthenticated users by default. Your sign up page is now done. As you can see, now that you are familiar with Angular 2, creating the components of our app is very simple. In the next video, we will configure our page where we can add notes.

Back to the top