After we've implemented the Login Activity (at least the UI part) for Android Native application, it's time to do the same in Ionic2. We'll again focus on the UI part, making sure that the Ionic2 version looks similar to the Native one, and we'll leave the authentication logic for some other time. Let's get started.

Let's start first by adding the new project folder called loginPage that we'll add inside the app/pages folder. We will follow the same project structure, that the default Ionic2 project has set for us, by adding the three files called loginPage.html,loginPage.js and loginPage.scss. Below you'll see the initial code for all three documents:

loginPage.html

<ion-navbar *navbar primary>
  <ion-title>
    Ionic
  </ion-title>
</ion-navbar>

<ion-content padding class="loginPage">
</ion-content>

loginPage.js

import {Component} from '@angular/core';

@Component({
  templateUrl: 'build/pages/loginPage/loginPage.html'
})
export class LoginPage {
  constructor() {
  }
}

loginPage.scss

.loginPage {
}

In future, we'll pretty much always add the same code initially for every page that we want to add, just changing the title of the page.

One more thing regarding the last file we added called loginPage.scss. Before we can use this file in the app, we need to import it to app.core.scss in order for it to get compiled correctly and for the changes in the loginPage.scss to affect the app. This is something I forgot to do initially, which made me run in circles for over an hour, not understanding why the changes to the loginPage.scss weren't affecting the actual Login Page.

We import the loginPage.scss to the app.core.scss with the following line:

@import "../pages/loginPage/loginPage";

Ok, so we are getting ready to start customizing this code, but first we want to make this Login Page be the first page that shows up when we open the application. We'll make this happen by importing the page to the app.js file with

import {LoginPage} from './pages/loginPage/loginPage';

and assigning it as the rootPage of the application.

this.rootPage = LoginPage;

Now, we can proceed with LoginPage customizaton.

Similarly as with the Native Android app, on our Login Page we want to show a welcome message and the 3 social login buttons for Facebook, Google+, and LinkedIn. Here's the HTML code for the layout:

Source Code

<ion-navbar *navbar primary>
  <ion-title>
    Ionic
  </ion-title>
</ion-navbar>

<ion-content padding class="loginPage">

<div class="Aligner">
  <div class="Aligner-item">
    <h4 text-center style="margin-bottom:15vh;">Welcome to Ionic</h4>
    <h4 text-center>Sign In With:</h4>
    <button facebook full (click)="login()">Facebook</button>
    <button googleplus full (click)="login()">Google+</button>
    <button linkedin full (click)="login()">LinkedIn</button>
  </div>
</div>

</ion-content>

A few interesting things in this code, let's go one by one.

Firstly, the margin-bottom:15vh;. I don't know about you, but I didn't know about the vh and vw units of measurements in css before today. I checked if these measurements are supported across different browsers, and they are for all except for Opera Mini, which is fine by me.

Now, what do these measurements mean? They are short for viewport height and viewport width. So, when I set my margin-bottom at 15vh, this actually means that the margin should be 15% of the viewport's height. Handy.

Based on previous posts, you probably realized that facebook, googleplus, and linkedin stand for specific brand color variables that I defined in app.variables.scss.

The (click)="login()" part simply attaches the click handler on the buttons that trigger the login() function that we'll implement in the controller.

I needed a way to vertically align all those labels and buttons at the center of the Login Page. After some research I found out that Ionic2 uses Flexbox internally. Then after some more research I found a piece of css code that will align my content to the center of the page using the flexbox, and here's the code that I added inside the loginPage.scss:

Source Code

.loginPage {

  .Aligner {
    display: flex;
    align-items: center;
    min-height: 100%;
    // min-height: 24em;
    justify-content: center;
  }

  .Aligner-item {
    flex: 1;
  }
}

I must admit that I'm still new to flexbox and that I'll give it some more research in the coming days, but for now, this code does the job for me. Also, by adding these classes within the .loginPage css class, I can be sure that it will be contained within my loginPage.html, since this means that the .Aligner css class will only be applied if it's added to an element, that is a child of another element that has the .loginPage css class applied to it.

Here's the end result of the code so far:

Alright, so now that the layout is in place, let's make the 3 buttons navigate to the other pages we had implemented before. Here's the updated code for the loginPage.js:

Source Code

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {Page1} from '../page1/page1';

@Component({
  templateUrl: 'build/pages/loginPage/loginPage.html'
})
export class LoginPage {
  static get parameters() {
    return [[NavController]];
  }

  constructor(nav) {
    this.nav = nav;
    this.nextPage = Page1;
  }

  login(){
    this.nav.setRoot(Page1);
  }
}

We needed to import the Page1 so that we have the reference to navigate to. We are also importing the NavController component, and are injecting it inside the constructor with the static get parameters() function. We don't need to instantiate the NavController since it has already been instantiated in the app.hmtl with the following line of code:

<ion-nav id="nav" #content [root]="rootPage" ></ion-nav>

In order to navigate to the Page1, we are adding the following line of code to the login() function: this.nav.setRoot(Page1);'. This will set the Page1as the root page of theNavController, making the LoginPagefall outside of the navigation loop, so the user cannot use the back button to access theLoginPage` again, which is how we intended it to be.

Usually, with NavController, you don't want to lose the ability to go back to the previous page with the back button, so you usually do not use the above syntax to handle navigation. Instead, you should use the this.nav.push(NextPage) and this.nav.pop(PreviousPage) to navigate forward and backwards between pages respectively. NavController maintains a page stack that you push to when you want to go to next (child) page, and pop from if you want to go back to the parent page.

Adding the Login Page in Ionic2 was again simpler, faster, and required less code than with native Android approach. The only problem I had, and I already mentioned this, was the issue with me forgetting to import the loginPage.scss to the app.core.scss, which ended up costing me over an hour. You can go back to the description of the Native Android implementation of the Login Page and compare the source codes, and you'll realize that Ionic2 looks much cleaner, and easier to read.

In the end, here's how the two screens look like (left:Android Native, right:Android Ionic2):

They are similar, but not quite the same out of the box. However, only a minimal effort would be required to make one look the same as the other one, if you really wanted to be nitpicky.

• Navigation