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.2 The Login Page

In this lesson, we’ll configure the login component. I’ll also show you how to install the Firebase plugin to handle user authentication and data.

Related Links

4.2 The Login Page

Hello everyone. I am Reggie Dawson. Welcome to the NativeScript and Mobile Angular 2 course from Tut's Plus. In this video, we will build the login page which will be the start page for our app. Before we start on the actual pages that will make up our app, first we need to do some preliminary things. First we need to install the Firebase plugin. Now on this project, I'm going to do something different. Normally I will wire up my own service to handle all of the Firebase backend stuff. Fortunately, there is an official plugin from NativeScript that will handle all of this for us. In this situation, it is redundant to wire in a service on top of this since the plugin will behave the same as if I was calling it from a service. If you look at the plugin page, it looks like the install is easy but there is a little more involved than what was mentioned. We can look at the GitHub Project page to see what we need to do to install the plugin. In the directions it says first we need to sign up for a Firebase account and generate the files that we need. Go to firebase.google.com. Since Firebase is now a Google company, as long as you have a Google account, you can access the firebase console. Go ahead and create a new project and call it noteApp. Once we have that we need to generate our file for our project. At the top of your project Window choose Add, then we're going to choose Add Firebase to Android. If we were building an iOS app, we would use that option. Now if we click on Add, we will be prompted for our package name. Let's go back to our project into the package.JSON filed in our root directory. Go ahead and copy the NativeScript ID and we're going to paste it into the package name. Then click on Add app and this will download google-services.JSON to your computer. After that, go back to our project in a command line and run TNS platform and add Android. Now I know this platform will be added when we preview the app, but we need to copy the google-services.json file to this folder. This way we don't have to supply our Firebase information and the app will pull it from this file. We will just copy the Google services.json to the platform's Android folder. Then we can install the plugin. Make sure you're still in your project folder in the command line. Tns plugin add nativescript-plugin-firebase will install the plugin to make it available to our app. Incidentally, NativeScript has its own plugins as well as being able to use many NPL modules as plugins. After that, type Android in your command line as we need to install Google Play services in the Google repository. Once we do that we need to add our package to the app.gradle file in the app, app resources Android folder. We add this in the default config, beneath the generated densities. This is again the NativeScript ID from our package.JSON file from the root of our app, not the one in the app folder, which is just for our JavaScript project. Then in the platforms, and then the Android folder, let's go to build.gradle. First we add a class path for Google services to the dependencies. And then at the bottom of the file, we will add an apply plugin for Google services. If you have any questions, you can refer to the project page for this plugin on GitHub. I have included the link in the course notes. Now, once we have all of that, we can create a login folder inside of our pages folder. Then create a login.component.ts, a login.css, and a login.html file in this folder. We will use component-based css for any styling we need to do. We can also create independent css files for iOS or Android by creating login.android.css, for example. When we compile our file the Android will be removed from the file name and it will be placed in the correct platform folder. This is how we apply platform-specific styles. Go to login.HTML. Here we're going to edit our template, for this project we're going to use external templates. First we add a stack layout. After that we will add an image. Instead of storing it in the resource folder, I will just save it in the images folder in my app folder. Here we set the image to be centered over the display. After that we will add a text field for email. Here we set the hint to read enter email address. Then we have a keyboard type set to email. NativeScript can display keyboards depending on what the keyboard is being used to enter. In this case the keyboard would be tailored to entering email addresses. If you notice, we have added ng model to our component. This is two way data binding from Angular 2. In this situation the text field's data will be tied to a property of our component. Then we have auto correct set to false so it doesn't try to correct the email we enter. And finally, we turn off auto capitalization so it doesn't automatically capitalize our email address. Then we add another text field for our password. This has the secure tribute which serves to conceal what we type in the text field. Again, we have the NG model which will tie our password into our component. Then finally we add two buttons, one to sign in, the other to sign up. Since this is the start page of the app, you have to log in or sign up to go further. We also have the tap event handler attached to the buttons. Tap is one of the gestures that NativeScript supports. Wrapping this gesture in parentheses tells Angular that we are watching this control for an event that will execute an attach method. After that we can go over to our login component.ts. First we add our imports. Here we are importing the component in router. To this we will add a require for Firebase. This will allow us to use the methods offered by the Firebase plugin. Then we can add our component decorator. Here again we have a selector although we don't need it since this will be loaded by the app component's page router outlet. Then we have a template URL, instead of an inline template which is pointing at the login dot HTML file. After that we have the styles URL's array which is pointing at the login dot CSS file in this folder. Again we can add CSS at multiple levels and this one is here for component level CSS. Then after that we add our login component class. First we add an email and password property. Notice we leave the email public while we restrict the password to private. Remember, this restricts access to this property to this class alone. These properties are the ones that are bound to our text field. After that, we can add our constructor. Here we are pulling in the router service and making it available to our class. After that, we are calling the fbInit method which we use to initialize Firebase. Then we follow our constructor with the fbInit method. We don't need to supply any options to it. We just need to call this before we can access Firebase. After that we can add our login method. Now I'm going to add this method in sections so you can better see what's going on. We first pass in the type of authentication we will use for Firebase, which is Password Authentication. Then we use the email and password properties that are bound to our text fields. Whatever is typed in these fields will be passed on to this logon method. Then in the Success Function we use an arrow function to handle the result returned. Now I'm really using this here to preserve my scope. This method changes the scope with the returned data and this causes the router navigate to fail. Router navigate is what we will do after a successful login and take us to the note listing. Fortunately, the arrow function which is a typescript feature, serves to preserve this scope and it works. After we alert the user that we have successfully logged on, we will use router navigate in order to make this work. We supply an array with the route that we want to navigate to. In this case we will navigate to the list route. Then we add the error function that will log the error as well as return the error to the user. Then finally the last method we will add is the sign up method that is attached to the sign up button. This method will just navigate to the sign up page so that we can sign up and access the notes. After that, our login component is finished. We don't need to add an import statement or route config to our app component since we already added those when we set it up. In the next video we will set up our sign up page

Back to the top