## Setup

* Empty `app.css`.
* Run `npm install nativescript-explosionfield --save`.
* Run `npm install nativescript-pulltorefresh --save`.
* Have the iOS simulator running.
* Have the Android app running and livesync running.
* Have the Groceries web app running.
* Verify the grocery list is appropriate in the default account.
* Paste this in for `login.component.ts`:

``` TypeScript
import {Component} from "angular2/core";

@Component({
  selector: "login",
  template: "<Label text='Hello NativeScript'></Label>"
})
export class LoginPage {}
```

* Paste this in for `login-common.css`:

``` css
#container {
  margin-left: 30;
  margin-right: 30;
  padding-bottom: 15;
  background-color: white;
}
#logo {
  margin-top: 5;
  margin-bottom: 20;
}
Button, TextField {
  margin-left: 16;
  margin-right: 16;
  margin-bottom: 10;
}
#submit-button {
  background-color: #CB1D00;
  color: white;
  margin-top: 20;
}
```

* Paste this in for `login.html`:

``` html
<GridLayout>

  <GridLayout id="background" scaleX="1.6" scaleY="1.6"></GridLayout>

  <StackLayout id="container" height="350">
    <Image [src]="isLoggingIn ? 'res://logo_login' : 'res://logo_signup'" id="logo" stretch="none" horizontalAlignment="center"></Image>

    <TextField [(ngModel)]="user.email" id="email" hint="Email" keyboardType="email" autocorrect="false" autocapitalizationType="none" [color]="isLoggingIn ? 'black' : 'white'"></TextField>
    <TextField [(ngModel)]="user.password" id="password" secure="true" hint="Password" [color]="isLoggingIn ? 'black' : 'white'"></TextField>

    <Button [text]="isLoggingIn ? 'Sign in' : 'Sign up'" id="submit-button" (tap)="submit()"></Button>
    <Button [text]="isLoggingIn ? 'Sign up' : 'Back to login'" (tap)="toggleDisplay()"></Button>
  </StackLayout>

</GridLayout>
```

* Paste this in for `app.component.ts`:

``` TypeScript
import {Component} from "angular2/core";
import {RouteConfig} from "angular2/router";
import {NS_ROUTER_DIRECTIVES} from "nativescript-angular/router";

import {LoginPage} from "./pages/login/login.component";
import {ListPage} from "./pages/list/list.component";

@Component({
  selector: "main",
  directives: [NS_ROUTER_DIRECTIVES],
  template: "<page-router-outlet></page-router-outlet>"
})
@RouteConfig([
  { path: "/Login", component: LoginPage, as: "Login", useAsDefault: true },
  { path: "/List", component: ListPage, as: "List" }
])
export class AppComponent {}
```

## ng1

``` TypeScript
template: `
  <StackLayout>
    <TextField hint="Email Address" id="email" keyboardType="email"
      autocorrect="false" autocapitalizationType="none"></TextField>
    <TextField hint="Password" id="password" secure="true"></TextField>

    <Button text="Sign in"></Button>
    <Button text="Sign up"></Button>
  </StackLayout>
`
```

## ng2

``` css
@import url("~/platform.css");

Page {
  background-color: white;
  font-size: 15;
}
ActionBar {
  background-color: black;
  color: white;
}
TextField {
  padding: 10;
  font-size: 13;
}
.small-spacing {
  margin: 5;
}
.medium-spacing {
  margin: 10;
}
```

## ng3

``` TypeScript
import {Component, OnInit} from "angular2/core";
import {topmost} from "ui/frame";
import {Page} from "ui/page";

import {User} from "../../shared/user/user";

@Component({
  selector: "login",
  templateUrl: "pages/login/login.html",
  styleUrls: ["pages/login/login-common.css", "pages/login/login.css"]
})
export class LoginPage implements OnInit {
  user: User;
  isLoggingIn = true;
  page: Page;

  ngOnInit() {
    this.page = <Page>topmost().currentPage;
    this.page.actionBarHidden = true;
  }
}
```

## ng4

``` TypeScript
import {Component, OnInit} from "angular2/core";
import {topmost} from "ui/frame";
import {Page} from "ui/page";

import {User} from "../../shared/user/user";
import {UserService} from "../../shared/user/user.service";

@Component({
  providers: [UserService],
  selector: "login",
  templateUrl: "pages/login/login.html",
  styleUrls: ["pages/login/login-common.css", "pages/login/login.css"]
})
export class LoginPage implements OnInit {
  user: User;
  isLoggingIn = true;
  page: Page;

  constructor(private _userService: UserService) {
    this.user = new User();
    this.user.email = "nativescriptrocks@telerik.com";
    this.user.password = "password";
  }

  ngOnInit() {
    this.page = <Page>topmost().currentPage;
    this.page.actionBarHidden = true;
  }

  submit() {
    this._userService.login(this.user)
      .subscribe(
        () => alert("success!"),
        (error) => alert("Unfortunately we could not find your account.")
      );
  }
}
```

## ng5

``` TypeScript
import {Component, OnInit} from "angular2/core";
import {topmost} from "ui/frame";
import {Page} from "ui/page";
import {Router} from "angular2/router";

import {User} from "../../shared/user/user";
import {UserService} from "../../shared/user/user.service";

@Component({
  providers: [UserService],
  selector: "login",
  templateUrl: "pages/login/login.html",
  styleUrls: ["pages/login/login-common.css", "pages/login/login.css"]
})
export class LoginPage implements OnInit {
  user: User;
  isLoggingIn = true;
  page: Page;

  constructor(private _userService: UserService, private _router: Router) {
    this.user = new User();
    this.user.email = "nativescriptrocks@telerik.com";
    this.user.password = "password";
  }

  ngOnInit() {
    this.page = <Page>topmost().currentPage;
    this.page.actionBarHidden = true;
  }

  submit() {
    this._userService.login(this.user)
      .subscribe(
        () => this._router.navigate(["List"]),
        (error) => alert("Unfortunately we could not find your account.")
      );
  }
}
```

## ng6

``` TypeScript
var background = this.page.getViewById("background");
background.backgroundImage = this.page.ios ? "res://bg_login.jpg" : "res://bg_login";
background.animate({
  scale: { x: 1.2, y: 1.2 },
  duration: 8000
});
```

## ng7

``` TypeScript
var explosion = require("nativescript-explosionfield");
```

``` TypeScript
firstTime = true;
submit() {
  if (this.firstTime) {
    explosion.explode(this.page.getViewById("logo"));
    this.firstTime = false;
  } else {
    explosion.explode(this.page.getViewById("container"));
    setTimeout(() => {
      explosion.explode(this.page.getViewById("background"));
    }, 5000);
  }

  /*this._userService.login(this.user)
    .subscribe(
      () => this._router.navigate(["List"]),
      (error) => alert("Unfortunately we could not find your account.")
    );*/
}
```