ng g service products/shared/product

ng g class products/shared/product

ng g component products/item-form

ng g component products/item-list
ng g component products/item-detail

npm install ngx-bootstrap --save

ng new ShoppingCart
cd ShoppingCart
npm install firebase angularfire2 --save

ng g module app-routing --flat --module=app
ng g component home

ng g service services/auth

ng g component login

ng g component register

ng g service services/auth-guard

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

import { AuthService } from '../services/auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css'],
  providers: [ AuthService ]
})
export class LoginComponent implements OnInit {
  mail: string;
  password: string;
  state: boolean;

  constructor(private as: AuthService) { }

  ngOnInit() {
    this.logout();
  }

  login(){
    this.as.login(this.mail, this.password);
    console.log('logged on');
    this.mail = '';
    this.password = '';
  }
  
  logout() {
    this.as.logout();
  }
}

<div class="container my-5">
  <div class="row justify-content-center">
    <div class="card col-sm-4 ">
      <h4 class="text-center">網路商城</h4>
      <div class="card-body">
        <span id="reauth-email" class="reauth-email"></span>
        <div class="form-group">
          <label>電子郵件:</label>
          <input type="email" [(ngModel)]="mail" class="form-control" placeholder="Email address" required autofocus>
        </div>
        <div class="form-group">
          <label>密碼:</label>
          <input type="password" [(ngModel)]="password" class="form-control" placeholder="Password" required>
        </div>

        <button (click)="login()" [disabled]="!mail || !password" class="mt-5 btn btn-lg btn-primary btn-block btn-signin" type="submit">登入</button>
      </div>
    </div>
  </div>
</div>

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

import { Observable } from 'rxjs/Observable';

import { AngularFireAuth } from 'angularfire2/auth';
import { Router } from '@angular/router';

@Injectable()
export class AuthService {

  constructor(
    private afAuth: AngularFireAuth,
    private router: Router
  ) {}

  // firestore email login
  login(mail: string, password: string) {
    this.afAuth.auth.signInWithEmailAndPassword(mail, password).then(
      value => {
        console.log(value);
        console.log('login::',this.afAuth.authState);
        this.router.navigate(['/products']);
      }
    ).catch(
      err => {
        console.log("Error::", err.message);
      }
      )
  }

  // firestore email registration
  register(mail: string, password: string) {
    this.afAuth.auth.createUserWithEmailAndPassword(mail, password).then(
      value => {
        console.log('register', value);
        this.router.navigate(['/login']);
      }
    ).catch(
      err => {
        console.log("Error::", err.message);
      }
      )
  }

  // firestore logout
  logout() {
    this.afAuth.auth.signOut();
  }

}

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

import { AuthService } from '../services/auth.service';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css'],
  providers: [ AuthService ]
})
export class RegisterComponent implements OnInit {
  model: any = {};
  loading = false;
  constructor( private as: AuthService) { }

  ngOnInit() {
  }

  register(){
    this.loading = true;
    this.as.register(this.model.email, this.model.password);    
    this.model= {};
  }

}

<div class="container my-5">
  <div class="row justify-content-center">
    <div class="col-6 col-offset-3">
      <h2>註冊新帳號</h2>
      <form name="form" (ngSubmit)="f.form.valid && register()" #f="ngForm" novalidate>
        <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !email.valid }">
          <label for="email">電子郵件</label>
          <input type="text" class="form-control" name="Email" [(ngModel)]="model.email" #email="ngModel" required />
          <div *ngIf="f.submitted && !email.valid" class="alert alert-danger">Email未輸入</div>
        </div>
        <div class="form-group" [ngClass]="{ 'has-error': f.submitted && !password.valid }">
          <label for="password">密碼</label>
          <input type="password" class="form-control" name="password" [(ngModel)]="model.password" #password="ngModel" required />
          <div *ngIf="f.submitted && !password.valid" class="alert alert-danger">密碼未輸入</div>
        </div>        
        <div class="form-group">
          <button [disabled]="loading" class="btn btn-primary">註冊新帳號</button>
          <img *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="
          />
          <a [routerLink]="['/login']" class="btn btn-link">Cancel</a>
        </div>
      </form>
    </div>
  </div>
</div>