login authentication

Author: phpcodebooster

src/app/app.module.ts

@@ -2,13 +2,15 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RouterModule, Routes } from '@angular/router';
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppComponent } from './app.component';
 import { LoginComponent } from './login/login.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { HeaderComponent } from './header/header.component';
 import { FooterComponent } from './footer/footer.component';
 
+import { AuthService } from './services/auth.service';
 
 const routes: Routes = [
     {
@@ -22,7 +24,8 @@ const routes: Routes = [
     },
     {
         path: 'dashboard',
-        component: DashboardComponent
+        component: DashboardComponent,
+        canActivate: [ AuthService ]
     }
 ];
 
@@ -36,10 +39,11 @@ const routes: Routes = [
   ],
   imports: [
     BrowserModule,
+    HttpClientModule,
     ReactiveFormsModule,
     RouterModule.forRoot(routes)
   ],
-  providers: [],
+  providers: [AuthService],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/header/header.component.html

@@ -24,8 +24,9 @@
     </ul>
     <ul class="navbar-nav ml-auto">
       <li class="nav-item">
-        <a class="nav-link" data-toggle="modal" data-target="#exampleModal">
-          <i class="fa fa-fw fa-sign-out"></i>Logout</a>
+        <a class="nav-link" [routerLink]="['/login']">
+          <i class="fa fa-fw fa-sign-out"></i>Logout
+        </a>
       </li>
     </ul>
   </div>

src/app/login/login.component.html

@@ -2,6 +2,9 @@
   <div class="card card-login mx-auto mt-5">
     <div class="card-header">Login</div>
     <div class="card-body">
+      <div class="alert alert-danger" [hidden]="!error">
+        <strong>Error!</strong> Invalid Credentials
+      </div>
       <form (ngSubmit)="onSubmit()" [formGroup]="loginForm">
         <div class="form-group" [ngClass]="{'has-error': loginForm.controls['email'].errors && !loginForm.controls['email'].pristine}">
           <label for="email">Email address</label>

src/app/login/login.component.ts

@@ -1,7 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
 
+import { AuthService } from '../services/auth.service';
+
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
@@ -14,21 +16,36 @@ export class LoginComponent implements OnInit {
     password: ''
   };
 
+  error = false;
+  returnUrl: string;
   loginForm: FormGroup;
 
   constructor(
       private router: Router,
+      private route: ActivatedRoute,
+      private authService: AuthService,
       private formBuilder: FormBuilder
   ) { }
 
   ngOnInit() {
+
+      // logout current user
+      this.authService.logout();
+      this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/dashboard';
+
+      // login form builder
       this.loginForm = this.formBuilder.group({
           email: [null, [Validators.required, Validators.email]],
           password: [null, Validators.required]
       });
   }
 
   onSubmit() {
-    this.router.navigate(['/dashboard']);
+      this.error = false;
+      if ( this.authService.login(this.loginForm.value) ) {
+           this.router.navigate([this.returnUrl]);
+      } else {
+        this.error = true;
+      }
   }
 }

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

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

src/app/services/auth.service.ts

@@ -0,0 +1,34 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
+
+@Injectable()
+export class AuthService implements CanActivate {
+
+    constructor(
+        private router: Router,
+        private http: HttpClient
+    ) {}
+
+    login(data): boolean {
+      window.localStorage.setItem('user', JSON.stringify(data));
+      return true;
+    }
+
+    logout(): void {
+        window.localStorage.removeItem('user');
+    }
+
+    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
+
+        if (localStorage.getItem('user')) {
+            return true;
+        }
+
+        this.router.navigate(['/login'], {
+            queryParams: { returnUrl: state.url }
+        });
+
+        return false;
+    }
+}

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

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

src/app/services/user.service.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class UserService {
+
+  constructor() { }
+
+}