Logout

Reto:
Servicio:

public getUserDetail() {
        return this.angularFireAuth.auth.currentUser.email;
    }

Componente:

constructor(private autorizacionService:AutorizacionService) {
    this.autorizacionService.isLogged()
        .subscribe((result) => {
          if (result && result.uid) {
            this.loggedIn = true;
            this.email = this.autorizacionService.getUserDetail();
          } else {
            this.loggedIn = false;
          }
        }, (error) => {
          this.loggedIn = false;
        })
  }

Vista:

<div *ngIf="loggedIn">
      <a class="navbar-brand" href="#">{{email}}</a>
 </div>

En autorizacion.service.ts declaramos el método :

getMail() {
	this.mail =this.angularFireAuth.auth.currentUser.email
	console.log(this.mail)
	return this.mail
}

En app.component.ts declaramos la variable con que vamos a mostrar el correo y llamamos al método que acabamos de crear en el condicional donde verificamos que efectivamente se ha iniciado sesi+on:

mail = {}

constructor(private autorizacionService:AutorizacionService) {
	//code
	if (result && result.uid) {
		//code
		this.mail = autorizacionService.getMail();
		console.log(this.mail)
		} 
	//code
}

Finalmente en app.component.html agregamos un elemento en la lista donde mostramos el botón de Logout:

<li class="nav-item">
	<a href="" class="nav-link">
		<h3> {{ mail }}</h3>
	</a>
</li>

como puedo re-dirigir a lugares si el usuario ya logeo pero volvio a la vista de login?, intente hacer la validacion en el contructor del login.component.ts, pero no funciono

Las lecciones están mal acomodadas! aqui se está añadiendo el router y en el video anterior de login con facebook el router ya aparece implementado.

OJO AQUI PLATZI. Es confuso.

Solucion Reto:

Yo preferi poner la foto del usuario. Me parecio que se ve mas lindo ✌🏼

Yo agregué la imagen el usuario que realizó el Log In y un dropdown para hacer el Log Out

app.component.html

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" routerLink="#">PlatziSquare</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" routerLink="/lugares" routerLinkActive="active">Inicio<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" routerLink="/contacto" routerLinkActive="active">Contacto</a>
      </li>
    </ul>
    <ul class="nav navbar-nav navbar-right" *ngIf="!loggedIn">
      <li>
        <a class="nav-link" routerLink="/login" routerLinkActive="active">Log In</a>
      </li>
      <li>
        <a class="nav-link" routerLink="/registro" routerLinkActive="active">Registro</a>
      </li>
    </ul>
    <ul class="nav navbar-nav navbar-right nav-item dropdown" *ngIf="loggedIn">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <img [src]="photoURL" width="40" height="40" class="rounded-circle">
        </a>
        <div class="dropdown-menu dropdown-menu-right text-right" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" (click)="logout()">Log Out</a>
        </div>
      </li>
    </ul>
  </div>
</nav>
<router-outlet></router-outlet>

app.component.ts

import { Component } from '@angular/core';
import { AutorizacionService } from './services/autorizacion.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  loggedIn = false;
  photoURL = '';

  constructor(private autorizacionService: AutorizacionService) {
    this.isLoggedIn();
  }

  public isLoggedIn() {
    this.autorizacionService.isLogged()
      .subscribe((result) => {
        if (result && result.uid) {
          this.loggedIn = true;
          this.photoURL = result.photoURL;
        } else {
          this.loggedIn = false;
        }
      }, () => {
        this.loggedIn = false;
      });
  }

  public logout() {
    this.autorizacionService.logout();
  }
}

**NOTA:**deben instalar también popper y jquery, les dejo aqui el link de los pasos a seguir.