firebase auth login

package.json

@@ -21,9 +21,11 @@
     "@angular/platform-browser": "^4.0.0",
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@angular/router": "^4.0.0",
+    "angularfire2": "^4.0.0-rc.1",
+    "firebase": "^4.3.0",
     "core-js": "^2.4.1",
     "rxjs": "^5.4.1",
-    "zone.js": "^0.8.14"
+    "zone.js": "^0.8.17"
   },
   "devDependencies": {
     "@angular/cli": "1.2.7",

src/app/app.component.html

@@ -1,20 +1,4 @@
-<!--The content below is only a placeholder and can be replaced.-->
-<div style="text-align:center">
-  <h1>
-    Welcome to {{title}}!
-  </h1>
-  <img width="300" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxOS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiDQoJIHZpZXdCb3g9IjAgMCAyNTAgMjUwIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyNTAgMjUwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KCS5zdDB7ZmlsbDojREQwMDMxO30NCgkuc3Qxe2ZpbGw6I0MzMDAyRjt9DQoJLnN0MntmaWxsOiNGRkZGRkY7fQ0KPC9zdHlsZT4NCjxnPg0KCTxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iMTI1LDMwIDEyNSwzMCAxMjUsMzAgMzEuOSw2My4yIDQ2LjEsMTg2LjMgMTI1LDIzMCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAJIi8+DQoJPHBvbHlnb24gY2xhc3M9InN0MSIgcG9pbnRzPSIxMjUsMzAgMTI1LDUyLjIgMTI1LDUyLjEgMTI1LDE1My40IDEyNSwxNTMuNCAxMjUsMjMwIDEyNSwyMzAgMjAzLjksMTg2LjMgMjE4LjEsNjMuMiAxMjUsMzAgCSIvPg0KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik0xMjUsNTIuMUw2Ni44LDE4Mi42aDBoMjEuN2gwbDExLjctMjkuMmg0OS40bDExLjcsMjkuMmgwaDIxLjdoMEwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMUwxMjUsNTIuMQ0KCQlMMTI1LDUyLjF6IE0xNDIsMTM1LjRIMTA4bDE3LTQwLjlMMTQyLDEzNS40eiIvPg0KPC9nPg0KPC9zdmc+DQo=">
-</div>
-<h2>Here are some links to help you start: </h2>
-<ul>
-  <li>
-    <h2><a target="_blank" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
-  </li>
-  <li>
-    <h2><a target="_blank" href="https://blog.angular.io//">Angular blog</a></h2>
-  </li>
-</ul>
-
+<div class="container">
+  <app-navbar></app-navbar>
+  <router-outlet></router-outlet>
+</div>

src/app/app.component.ts

@@ -6,5 +6,5 @@ import { Component } from '@angular/core';
   styleUrls: ['./app.component.css']
 })
 export class AppComponent {
-  title = 'app';
+  title = 'Angular Firebase Sample';
 }

src/app/app.module.ts

@@ -1,16 +1,42 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { FormsModule } from '@angular/forms';
+import { environment } from '../environments/environment';
+
+import { AngularFireModule } from 'angularfire2';
+import { AngularFireDatabaseModule } from 'angularfire2/database';
+import { AngularFireAuthModule } from 'angularfire2/auth';
 
 import { AppComponent } from './app.component';
+import { NavbarComponent } from './navbar/navbar.component';
+import { GalleryComponent } from './gallery/gallery.component';
+import { LoginComponent } from './login/login.component';
+
+import { AuthenticationService } from './services/authentication.service';
+import { AuthguardService } from './services/authguard.service';
+
+import { appRoutes } from '../routes';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    NavbarComponent,
+    GalleryComponent,
+    LoginComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    FormsModule,
+    RouterModule.forRoot(appRoutes),
+    AngularFireModule.initializeApp(environment.firebase),
+    AngularFireDatabaseModule,
+    AngularFireAuthModule
+  ],
+  providers: [
+    AuthenticationService,
+    AuthguardService
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/gallery/gallery.component.html

@@ -0,0 +1,3 @@
+<p>
+  gallery works!
+</p>

src/app/gallery/gallery.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GalleryComponent } from './gallery.component';
+
+describe('GalleryComponent', () => {
+  let component: GalleryComponent;
+  let fixture: ComponentFixture<GalleryComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ GalleryComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GalleryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/gallery/gallery.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-gallery',
+  templateUrl: './gallery.component.html',
+  styleUrls: ['./gallery.component.css']
+})
+export class GalleryComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/login/login.component.css

@@ -0,0 +1,29 @@
+.container{
+  color: #111;
+  margin-top: 12%;
+  background-color: #fbfbfb; 
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  width: 60%;
+  padding: 5%;
+  border-radius: 3px;
+}
+
+h1.login-title {
+  padding-bottom: 50px;
+  font-family: "Cabin";
+  font-size: 32px;
+  color: #111;
+  text-align:center;
+}
+
+button{
+  height: 60px;
+  margin-top: 20px;
+  width: 100%;
+}
+
+input {
+  font-size: 20px;
+  line-height: 60px;
+  height: 60px;
+}

src/app/login/login.component.html

@@ -0,0 +1,22 @@
+<form #loginForm="ngForm">
+  <h1 class="login-title">Log In</h1>
+  <div class="form-group">
+    <label>Email</label>
+    <input class="form-control" 
+      #emailControl="ngModel" 
+      placeholder="Email" 
+      [(ngModel)]="email" 
+      name="email" maxlength="70" email required>
+  </div>
+  <div class="form-group">
+    <label>Password</label>
+    <input class="form-control" 
+    #passwordControl="ngModel" 
+    placeholder="Password" 
+    [(ngModel)]="password" 
+    name="password" maxlength="70" type="password" required>
+  </div>
+  <button [disabled]="!loginForm.form.valid" type="submit" class="btn btn-info btn-lg"
+    (click)="signIn()">Sign In</button>
+    <p *ngIf="msg" class="text-danger">{{msg}}</p>
+</form>

src/app/login/login.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginComponent } from './login.component';
+
+describe('LoginComponent', () => {
+  let component: LoginComponent;
+  let fixture: ComponentFixture<LoginComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoginComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/login/login.component.ts

@@ -0,0 +1,26 @@
+import { Component, OnInit } from '@angular/core';
+import { AuthenticationService } from '../services/authentication.service';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.css']
+})
+export class LoginComponent {
+
+  email: string;
+  password: string;
+  errorMsg: string;
+
+  constructor(private authService: AuthenticationService, private router: Router) { }
+
+  signIn() {
+    this.authService.login({ email: this.email, password: this.password })
+      .then(resolve => 
+        this.router.navigate(['gallery']))
+      .catch(error => 
+        this.errorMsg = error.message);
+  }
+
+}

src/app/models/user.model.ts

@@ -0,0 +1,5 @@
+export class User {
+  uid?: string;
+  email?: string;
+  password?: string;
+}

src/app/navbar/navbar.component.html

@@ -0,0 +1,18 @@
+<div class="row">
+  <nav class="navbar navbar-inverse navbar-fixed-top">
+    <div class="container">
+      <div class="navbar-header">
+        <a class="navbar-brand logo" href="#">{{ title }}</a>
+      </div>
+      <div id="navbar" class="collapse navbar-collapse">
+        <ul class="nav navbar-nav" *ngIf="(user|async)?.uid">
+          <li><a routerLink="/gallery">Image Gallery</a></li>
+        </ul>
+        <ul class="nav navbar-nav account">
+          <li *ngIf="!(user|async)?.uid"><a routerLink="/login">Log In</a></li>
+          <li *ngIf="(user|async)?.uid"><a href="#" (click)="logOut()">Log Out</a></li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+</div>

src/app/navbar/navbar.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavbarComponent } from './navbar.component';
+
+describe('NavbarComponent', () => {
+  let component: NavbarComponent;
+  let fixture: ComponentFixture<NavbarComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NavbarComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NavbarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/navbar/navbar.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { AuthenticationService } from '../services/authentication.service';
+import { Router } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
+import * as firebase from 'firebase/app';
+
+@Component({
+  selector: 'app-navbar',
+  templateUrl: './navbar.component.html',
+  styleUrls: ['./navbar.component.css']
+})
+export class NavbarComponent implements OnInit {
+
+  title: 'App Titel';
+  user: Observable<firebase.User>;
+
+  constructor(private authService: AuthenticationService, private router: Router) { }
+
+  ngOnInit() {
+    this.user = this.authService.authUser();
+  }
+
+  logOut() {
+    this.authService.logout().then(onResolve => this.router.navigate['/']);
+  }
+
+}

src/app/services/authentication.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { AuthenticationService } from './authentication.service';
+
+describe('AuthenticationService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [AuthenticationService]
+    });
+  });
+
+  it('should be created', inject([AuthenticationService], (service: AuthenticationService) => {
+    expect(service).toBeTruthy();
+  }));
+});

src/app/services/authentication.service.ts

@@ -0,0 +1,28 @@
+import { Injectable } from '@angular/core';
+import { AngularFireAuth } from 'angularfire2/auth';
+import * as firebase from 'firebase/app';
+import { Observable } from 'rxjs/Observable';
+import { User } from '../models/user.model';
+
+@Injectable()
+export class AuthenticationService {
+
+  private user: Observable<firebase.User>;
+
+  constructor(private afAuth: AngularFireAuth) {
+    this.user = afAuth.authState;
+  }
+
+  login(user: User) {
+    return this.afAuth.auth.signInWithEmailAndPassword(user.email, user.password);
+  }
+
+  logout() {
+    return this.afAuth.auth.signOut();
+  }
+
+  authUser() {
+    return this.user;
+  }
+
+}

src/app/services/authguard.service.spec.ts

@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { AuthguardService } from './authguard.service';
+
+describe('AuthguardService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [AuthguardService]
+    });
+  });
+
+  it('should be created', inject([AuthguardService], (service: AuthguardService) => {
+    expect(service).toBeTruthy();
+  }));
+});