4.29

Author: webdevtut

server/db-data.ts

@@ -878,8 +878,8 @@ export const LESSONS = {
 export const USERS = {
   1: {
     id: 1,
-    email: 'test@angular-university.io',
-    password: 'test',
+    email: 'cognito@inc.com',
+    password: 'localstorage',
     pictureUrl: 'https://lh3.googleusercontent.com/-1pUNnTB3vaA/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rdn4uEc0ti8YE4Uuw6_Kz04tVe2Mg.CMID/s32-c/photo.jpg'
   }
 

src/app/app.component.html

@@ -22,12 +22,12 @@
         <span>Register</span>
       </a>
 
-      <a mat-list-item routerLink="login">
+      <a mat-list-item routerLink="login" *ngIf="auth.isLoggedOut$ | async">
         <mat-icon>account_circle</mat-icon>
         <span>Login</span>
       </a>
 
-      <a mat-list-item (click)="logout()">
+      <a mat-list-item (click)="logout()" *ngIf="auth.isLoggedIn$ | async">
         <mat-icon>exit_to_app</mat-icon>
         <span>Logout</span>
       </a>

src/app/app.component.ts

@@ -1,6 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import { LoadingService } from './loading.service';
 import { MessagesService } from './messages/messages.service';
+import { AuthStore } from './services/auth.store';
 
 
 
@@ -11,7 +12,7 @@ import { MessagesService } from './messages/messages.service';
 })
 export class AppComponent implements  OnInit {
 
-    constructor() {
+    constructor(public auth : AuthStore) {
 
     }
 
@@ -21,6 +22,7 @@ export class AppComponent implements  OnInit {
     }
 
   logout() {
+    this.auth.logout();
 
   }
 

src/app/login/login.component.ts

@@ -3,6 +3,7 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
 
 
 import {Router} from '@angular/router';
+import { AuthStore } from '../services/auth.store';
 
 @Component({
   selector: 'login',
@@ -15,11 +16,12 @@ export class LoginComponent implements OnInit {
 
   constructor(
     private fb: FormBuilder,
-    private router: Router) {
+    private router: Router,
+    private auth : AuthStore) {
 
     this.form = fb.group({
-      email: ['test@angular-university.io', [Validators.required]],
-      password: ['test', [Validators.required]]
+      email: ['cognito@inc.com', [Validators.required]],
+      password: ['localstorage', [Validators.required]]
     });
 
   }
@@ -32,7 +34,15 @@ export class LoginComponent implements OnInit {
 
     const val = this.form.value;
 
-
+    this.auth.login(val.email, val.password)
+      .subscribe(
+        () => {
+          this.router.navigateByUrl('/courses');
+        },
+        err => {
+          alert("login has failed");
+        }
+      );
 
   }
 

src/app/services/auth.store.ts

@@ -3,6 +3,10 @@ import { Injectable } from "@angular/core";
 import { BehaviorSubject, Observable } from "rxjs";
 import { map, shareReplay, tap } from "rxjs/operators";
 import { User } from "../model/user";
+import {Router} from '@angular/router';
+
+
+const AUTH_DATA = "auth_data";
 
 @Injectable({
     providedIn: 'root'
@@ -16,23 +20,32 @@ export class AuthStore {
     isLoggedIn$: Observable<boolean>;
     isLoggedOut$: Observable<boolean>;
 
-    constructor(private http: HttpClient) {
+    constructor(private http: HttpClient,private router: Router) {
         this.isLoggedIn$ = this.user$.pipe(map(user => !!user));
         this.isLoggedOut$ = this.isLoggedIn$.pipe(map(loggedIn => !loggedIn));
+        const user = localStorage.getItem(AUTH_DATA);
+        if(user){
+            this.subject.next(JSON.parse(user));
+        }
     }
 
     login(email: string, password: string): Observable<User> {
 
         return this.http.post<User>("/api/login", { email, password })
             .pipe(
-                tap(user => this.subject.next(user)),
+                tap(user => {
+                    this.subject.next(user);
+                    localStorage.setItem(AUTH_DATA, JSON.stringify(user));
+                }),
                 shareReplay()
             );
 
     }
 
     logout() {
         this.subject.next(null);
+        localStorage.removeItem(AUTH_DATA);
+        this.router.navigateByUrl('/login');
     }
 
 }