import { Component , OnInit } from '@angular/core' ; import { FormGroup , FormControl , Validators } from '@angular/forms' ; import { Store , select } from '@ngrx/store' ; import { AppState } from '../../../reducers/index' ; import * as actions from './../../store/auth.actions' ; import { Observable } from 'rxjs' ; import { getError } from '../../store/auth.selectors' ; import { map } from 'rxjs/operators' ; @ Component ( { selector : 'app-login' , templateUrl : './login.component.html' , styleUrls : [ './login.component.scss' ] } ) export class LoginComponent implements OnInit { loginForm : FormGroup ; error$ : Observable < string | null > ; constructor ( private store ) { } ngOnInit ( ) { this . loginForm = new FormGroup ( { email : new FormControl ( '' , [ Validators . required , Validators . email ] ) , password : new FormControl ( '' , Validators . required ) } ) ; this . error$ = this . store . pipe ( select ( getError ) , map ( ( error ) => { if ( error && ( error . code === 'auth/user-not-found' || error . code === 'auth/wrong-password' ) ) { return 'Invalid login or password' ; } else { return null ; } } ) ) ; } get email ( ) { return this . loginForm . get ( 'email' ) ; } get password ( ) { return this . loginForm . get ( 'password' ) ; } onLogin ( ) { if ( this . loginForm . valid ) { this . store . dispatch ( new actions . LoginRequested ( this . loginForm . value ) ) ; } } onGoogleLogin ( authProvider ) { this . store . dispatch ( new actions . SocialLogin ( { authProvider } ) ) ; } onFacebookLogin ( authProvider ) { this . store . dispatch ( new actions . SocialLogin ( { authProvider } ) ) ; } onTwitterLogin ( authProvider ) { this . store . dispatch ( new actions . SocialLogin ( { authProvider } ) ) ; } }