#7 login form with auth guard

product-task/db.json

@@ -27,5 +27,32 @@
       "type": "laptop",
       "id": 6
     }
+  ],
+  "users": [
+    {
+      "id": 1,
+      "email": "rawan",
+      "password": "rawan1234"
+    },
+    {
+      "id": 2,
+      "email": "ahmed",
+      "password": "ahmed"
+    },
+    {
+      "id": 3,
+      "email": "mohamed",
+      "password": "mohamed"
+    },
+    {
+      "id": 5,
+      "email": "yousef",
+      "password": "yousef"
+    },
+    {
+      "id": 37,
+      "email": "osama",
+      "password": "osama"
+    }
   ]
 }

product-task/src/app/app-routing.module.ts

@@ -1,12 +1,15 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
+import { AuthClassGuard } from './components/guard/auth-class.guard';
+import { LoginComponent } from './components/login/login.component';
 import { ProductAngularMaterialComponent } from './components/product-angular-material/product-angular-material.component';
 import { ProductComponent } from './components/product/product.component';
 import { TextComponent } from './components/product/text/text.component';
 
 const routes: Routes = [
   {path:'product',component:ProductComponent},
-  {path:'productAngular',component:ProductAngularMaterialComponent},
+  {path:'productAngular',component:ProductAngularMaterialComponent,canActivate:[AuthClassGuard]},
+  {path:'login',component:LoginComponent}
 
 
 ];

product-task/src/app/app.module.ts

@@ -3,7 +3,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { NavbarComponent } from './layout/navbar/navbar.component';
-import {HttpClient, HttpClientModule} from '@angular/common/http'
+import {HttpClient, HttpClientModule,HTTP_INTERCEPTORS} from '@angular/common/http'
 import { FormsModule, ReactiveFormsModule,FormControl } from '@angular/forms';
 import { ProductComponent } from './components/product/product.component';
 import { TextComponent } from './components/product/text/text.component';
@@ -23,7 +23,8 @@ import { DialogComponent } from './components/dialog/dialog.component';
 import {MatSnackBar, MatSnackBarModule} from '@angular/material/snack-bar';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateHttpLoader } from '@ngx-translate/http-loader';
-
+import { LoginComponent } from './components/login/login.component';
+import { TokenInterceptorService } from './user/services/token-interceptor.service';
 
 export function createTranslateLoader(http:HttpClient){
   return new TranslateHttpLoader(http,'../assets/i18n/','.json');
@@ -36,7 +37,8 @@ export function createTranslateLoader(http:HttpClient){
     ProductComponent,
     TextComponent,
     ProductAngularMaterialComponent,
-    DialogComponent
+    DialogComponent,
+    LoginComponent
 
       ],
   imports: [
@@ -68,7 +70,13 @@ export function createTranslateLoader(http:HttpClient){
 
 
   ],
-  providers: [],
+  providers: [{
+    provide:HTTP_INTERCEPTORS,
+    useClass:TokenInterceptorService,
+    multi:true
+  }
+
+],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

product-task/src/app/components/guard/auth-class.guard.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot, UrlTree } from '@angular/router';
+import { Observable } from 'rxjs';
+import { UserService } from 'src/app/user/services/user.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AuthClassGuard implements CanActivate {
+  constructor(private authUser:UserService){
+
+  }
+  canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
+    {if (this.authUser.isLogged()) {
+      return true;
+    }
+    else{
+      return false
+    }
+
+  }
+
+}

product-task/src/app/components/login/login.component.html

@@ -0,0 +1,39 @@
+<form [formGroup]="RegisterForm" *ngIf="showRegisterForm" class="form container">
+
+  <mat-form-field>
+    <mat-label>ID</mat-label>
+    <input matInput formControlName="id" type="number">
+  </mat-form-field>
+  <mat-form-field>
+    <mat-label>Email</mat-label>
+    <input matInput formControlName="email" type="email">
+  </mat-form-field>
+  <mat-form-field>
+    <mat-label>Password</mat-label>
+    <input matInput formControlName="password">
+  </mat-form-field>
+
+<div>
+  <button mat-raised-button class="m-2"  color="primary" (click)="addUser()" >Register</button>
+  <button mat-raised-button class="m-2"  color="primary" (click)="showLogin()" >Login</button>
+</div>
+
+  </form>
+
+
+
+<form [formGroup]="LoginForm" *ngIf="showLoginForm"  class="form container">
+  <mat-form-field>
+    <mat-label>Email</mat-label>
+    <input matInput formControlName="email" required>
+  </mat-form-field>
+  <mat-form-field>
+    <mat-label>Password</mat-label>
+    <input matInput formControlName="password" required>
+  </mat-form-field>
+<div>
+  <button mat-raised-button class="m-2"  color="primary" (click)="checkRegisteredUser(LoginForm.value.email)" >Login</button>
+  <button mat-raised-button class="m-2"  color="primary" (click)="logoutUser()" >Logout</button>
+</div>
+
+  </form>

product-task/src/app/components/login/login.component.scss

@@ -0,0 +1,8 @@
+.form{
+  margin-top: 40px;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-center;
+  background-color: beige;
+}

product-task/src/app/components/login/login.component.ts

@@ -0,0 +1,100 @@
+import { Component } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Iuser } from 'src/app/user/model/iuser';
+import { UserService } from 'src/app/user/services/user.service';
+
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss']
+})
+export class LoginComponent {
+  RegisterForm!: FormGroup ;
+  LoginForm!:FormGroup;
+  userList:Iuser[] =[];
+  user:Iuser[] =[];;
+  showRegisterForm:boolean=true;
+  showLoginForm:boolean=false;
+
+
+
+constructor(private route:ActivatedRoute,private router:Router,private userService:UserService,private _snackBar: MatSnackBar){
+
+}
+
+  createRegisterForm(){
+    this.RegisterForm = new FormGroup({
+      id:new FormControl(''),
+    email: new FormControl(''),
+    password:new FormControl('')
+  });
+  }
+  showLogin(){
+    this.showRegisterForm=false;
+    this.showLoginForm=true;
+  }
+  showRegister(){
+    this.showRegisterForm=true;
+    this.showLoginForm=false;
+  }
+  createLoginForm(){
+    this.LoginForm = new FormGroup({
+    email: new FormControl(''),
+    password:new FormControl('')
+  });
+  }
+
+  ngOnInit(){
+    this.createRegisterForm();
+    this.createLoginForm();
+    this.getAllUsers();
+
+  }
+  openSnackBar(message: string, action: string) {
+    this._snackBar.open(message, action);
+  }
+  addUser(){
+    this.userService.postUsers(this.RegisterForm.value)
+    .subscribe(_=>{
+    this.RegisterForm.reset();
+    this.showLogin();
+    this.openSnackBar('User Registered Successfully', 'OK');
+  })
+  }
+  logoutUser(){
+    localStorage.removeItem('token');
+    this.openSnackBar('Logout Successfully', 'OK');
+
+
+
+  }
+  getAllUsers(){
+
+    this.userService.getUsers().subscribe(data=>{
+      this.user= data;
+  })
+
+  }
+
+  checkRegisteredUser(email:any){
+    for (let i = 0; i < this.user.length; i++) {
+        if (email==this.user[i].email) {
+          this.openSnackBar('User Login Successfully', 'OK');
+          localStorage.setItem('token','1234');
+          this.router.navigate(['productAngular']);
+        }
+        else{
+          this.showRegister();
+        }
+
+    }
+
+  }
+
+  }
+
+
+

product-task/src/app/layout/navbar/navbar.component.html

@@ -8,7 +8,9 @@
       <li class="nav-item active">
         <a class="nav-link" href="#">Home</a>
       </li>
-
+      <li class="nav-item">
+        <a class="nav-link" href="#" [routerLink]="['/login']" >Login</a>
+      </li>
       <li class="nav-item">
         <a class="nav-link" href="#" [routerLink]="['/product']" >Products</a>
       </li>

product-task/src/app/layout/navbar/navbar.component.ts

@@ -1,9 +1,14 @@
 import { Component } from '@angular/core';
+import { UserService } from 'src/app/user/services/user.service';
 
 @Component({
   selector: 'app-navbar',
   templateUrl: './navbar.component.html'
 })
 export class NavbarComponent {
+  constructor(){
+
+  }
+
 
 }

product-task/src/app/product/services/products.service.ts

@@ -8,8 +8,10 @@ import { IProduct } from '../models/iproduct';
 })
 export class ProductsService {
 product:IProduct[];
+
   constructor(private http : HttpClient) {
     this.product=[]
+
     }
   postProducts(data : any){
     return this.http.post<any>("http://localhost:3000/products",data)
@@ -47,4 +49,8 @@ product:IProduct[];
       map((response:[]) => response.map(item => item ['brand']))
       )
   }
+
+
+
+
 }

product-task/src/app/user/model/iuser.ts

@@ -0,0 +1,7 @@
+export interface Iuser {
+    id:number,
+    email:string,
+    password:string
+  }
+
+

product-task/src/app/user/services/token-interceptor.service.ts

@@ -0,0 +1,23 @@
+import { Injectable,Injector } from '@angular/core';
+import{HttpEvent, HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http'
+import { Observable } from 'rxjs';
+import { UserService } from './user.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TokenInterceptorService implements HttpInterceptor{
+
+  constructor(private injector : Injector) { }
+
+  intercept(req:any, next:any){
+    let userService = this.injector.get(UserService);
+    let tokenizedReq = req.clone({
+      setHeaders:{
+        Authorization:`${userService.getToken()}`
+      }
+    })
+    return next.handle(tokenizedReq);
+
+  }
+}

product-task/src/app/user/services/user.service.ts

@@ -0,0 +1,42 @@
+import { HttpClient , HttpHeaders, HttpInterceptor, withInterceptors} from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { map } from 'rxjs';
+import { Iuser } from '../model/iuser';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class UserService {
+  user:Iuser[];
+  constructor(public http : HttpClient) {
+    this.user=[];
+  }
+
+
+  postUsers(data : any){
+    return this.http.post<any>("http://localhost:3000/users",data)
+    .pipe(map((res:any)=>{
+    return res;
+    }))
+  }
+
+  getUsers(){
+
+    return this.http.get<any>("http://localhost:3000/users")
+    .pipe(map((res:any)=>{
+      return res;
+    }))
+  }
+
+
+
+  isLogged(){
+    return (localStorage.getItem('token'))? true:false;
+  }
+
+  getToken(){
+    return localStorage.getItem('token');
+  }
+
+}