gistfile1.txt

main.ts

import {provide} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS, LocationStrategy, PathLocationStrategy, APP_BASE_HREF } from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import {Notification} from './scripts/services/notifications';
import {SessionService} from './scripts/services/session.service';
import {UUHttp} from './scripts/services/uuHttp';
import {AppCmp} from './scripts/views/app';
import {TranslateService} from 'ng2-translate/ng2-translate';

bootstrap(AppCmp, [
  HTTP_PROVIDERS,
  ROUTER_PROVIDERS,
  UUHttp,
  Notification,
  SessionService,
  provide(LocationStrategy, { useClass: PathLocationStrategy }),
  provide(APP_BASE_HREF, { useValue: '/' }),
  TranslateService
]);

app.ts

import {
  Component,
  ViewEncapsulation,
  OnInit
} from 'angular2/core';
import {
  RouteConfig,
  ROUTER_DIRECTIVES
} from 'angular2/router';
import {TranslateService} from 'ng2-translate/ng2-translate';

import {AppIcons} from '../components/icons/icons';
import {HomeCmp}  from './home/home';
import {LoginFormCmp}  from '../components/login-form/login-form.component';
import {TopNav}   from './top_nav/top_nav';
import {EN, FR}   from '../i18n';
import {SystemHealthCmp} from './system/health';

@Component({
  selector: 'app',
  templateUrl: '/dist/dev/scripts/views/app.html',
  encapsulation: ViewEncapsulation.None,
  directives: [ROUTER_DIRECTIVES, AppIcons, TopNav]
})

@RouteConfig([
    { path: '/login', name: 'Login', component: LoginFormCmp, useAsDefault: true  },
    { path: '/home', name: 'Home', component: HomeCmp},
	{ path: '/system/health', name: 'SystemHealth', component: SystemHealthCmp }
])

export class AppCmp implements OnInit {

  constructor(private translate: TranslateService) {}

  ngOnInit() {

    let userLang:string = navigator.language.split('-')[0];
    userLang = /(fr|en)/gi.test(userLang) ? userLang : 'en';

    this.translate.setTranslation('en', EN);
    this.translate.setTranslation('fr', FR);
    this.translate.setDefaultLang('en');

    this.translate.use(userLang);
  }
}

top-nav.ts
import {Component, ElementRef} from 'angular2/core';
import {RouterLink, Router}    from 'angular2/router';
import {BrowserDomAdapter}     from 'angular2/platform/browser';
import {Icon}                  from '../../components/icons/icons';
import {UUAvatar}              from '../../components/avatar/avatar';
import {DROPDOWN_DIRECTIVES}   from 'ng2-bootstrap/ng2-bootstrap';
import {TranslatePipe}         from 'ng2-translate/ng2-translate';
import {SessionService}        from '../../services/session.service';

@Component({
  selector:    'top-nav',
  providers:   [BrowserDomAdapter],
  pipes:       [TranslatePipe],
  templateUrl: '/dist/dev/scripts/views/top_nav/top_nav.html',
  directives:  [RouterLink, Icon, DROPDOWN_DIRECTIVES, UUAvatar]
})

export class TopNav {
  navbarTop: number;
  navbarEl:  HTMLElement;
  navOpen:   boolean = false;

  constructor(private myElement: ElementRef,
              private dom: BrowserDomAdapter,
              private router: Router,
              private sessionService: SessionService
              ) {}

  ngOnInit() {
    document.addEventListener('scroll', (e) => {
      this.onScroll(e);
    });

    this.navbarEl = this.dom.querySelector(this.myElement.nativeElement, '#main-nav');
    this.navbarTop = this.navbarEl.offsetTop;
    this.onScroll(null);

    this.router.subscribe( (value) => {
      this.navOpen = false;
    });
  }

  onScroll(e) {
    if (window.scrollY > this.navbarTop) {
      this.dom.addClass(this.navbarEl, 'fixed');
    } else {
      this.dom.removeClass(this.navbarEl, 'fixed');
    }
  }

  toggleNav() {
    this.navOpen = !this.navOpen;
  }

  logOut() {
    this.sessionService.clearSession();

    this.router.navigate(['Login']);
  }

}


login-form.component.ts
import {Component} from 'angular2/core';
import {Router}    from  'angular2/router';
import {LoginService} from './login.service';
import {Notification} from '../../services/notifications';
import {SessionService} from '../../services/session.service';

@Component({
    selector: 'uu-login-form',
    template: `
    <form #f="ngForm" (ngSubmit)="onSubmit(email.value, password.value)">
      <input #email class="form-control" type="email" placeholder="Email" required>
      <input #password class="form-control" type="text" placeholder="Password" required>
      <button type="submit" [disabled]="!f.valid">Submit</button>
    </form>
    `,
    providers: [LoginService, Notification]
})
export class LoginFormCmp {

  constructor(private loginService: LoginService, private sessionService: SessionService, private router: Router) {}

  onSubmit(email, password) {
    let sessionParams = {user_session: {login: email, password: password}};

    this.loginService.create(sessionParams).subscribe(
        response => this.onSuccess(response)
    );
  }

  onSuccess(response) {
      let authObj = response.data.auth;

      this.sessionService.setSession(authObj);
      alert('Successfully Logged In');
      this.router.navigate(['Home']);
  }

}