## Setup

* 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.
* Bump up font size in Sublime.
* Add “WEB” and “NATIVE”.
* Have login.component.ts open on each.

## ng1 (login.component.ts) -ui

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

@Component({
  selector: "login",
  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>
  `
})
export class LoginComponent {}
```

## ng2 (app.css) -styles

``` 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 (login.component.ts) -angular2 templates/styles

``` 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 LoginComponent implements OnInit {
  user: User;
  isLoggingIn = true;
  page: Page;

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

## ng4 (login.component.ts) use a service

``` 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 LoginComponent implements OnInit {
  user: User;
  isLoggingIn = true;
  page: Page;

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

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

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

## ng5 (login.component.ts) - use the router (show app.component.ts)

``` 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 LoginComponent implements OnInit {
  user: User;
  isLoggingIn = true;
  page: Page;

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

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

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

## ng6 (login.common.css)

``` TypeScript
.scaleDown {
  background-image: url("res://bg_login");
  animation-name: scale-down;
  animation-duration: 15;
}
@keyframes scale-down {
  from { transform: scale(1.6, 1.6);  }
  to { transform: scale(1.2, 1.2); }
}
```

## ng7 (login.component.ts)

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

## ng8 (login.component.ts)

``` TypeScript
firstTime = true;
login() {
  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.")
    );*/
}
```