From 5ad54cf89e7bc70056b33fd826c2281f7219781f Mon Sep 17 00:00:00 2001 From: Heba Almomani Date: Sun, 23 Jan 2022 16:14:08 +0200 Subject: [PATCH] auth --- src/app/events-app.component.ts | 18 ++++- src/app/user/auth.service.ts | 76 ++++++++++++++++----- src/app/user/login.component.html | 4 ++ src/app/user/login.component.ts | 27 +++++--- src/app/user/profile/profile.component.html | 1 + src/app/user/profile/profile.component.ts | 15 +++- 6 files changed, 110 insertions(+), 31 deletions(-) diff --git a/src/app/events-app.component.ts b/src/app/events-app.component.ts index 76991e8..af48578 100644 --- a/src/app/events-app.component.ts +++ b/src/app/events-app.component.ts @@ -1,4 +1,5 @@ -import { Component } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; +import { AuthService } from './user/auth.service'; @Component({ selector: 'app-root', @@ -18,6 +19,19 @@ import { Component } from '@angular/core'; // selector: 'app-root', // templateUrl:'events-app-component.html', // }) -export class EventsAppComponent { +export class EventsAppComponent{ title = 'our event website'; + + + constructor(private auth: AuthService){} + + + + ngOnInit(): void { + this.auth.checkAuthenticationStatus().subscribe(); + } + + + + } diff --git a/src/app/user/auth.service.ts b/src/app/user/auth.service.ts index c92156d..6097aa4 100644 --- a/src/app/user/auth.service.ts +++ b/src/app/user/auth.service.ts @@ -1,28 +1,72 @@ +import { HttpClient, HttpHeaders } from "@angular/common/http"; import { Injectable } from "@angular/core"; +import { of } from "rxjs"; +import { catchError, tap } from "rxjs/operators"; import { IUser } from "./user.model"; @Injectable() export class AuthService{ - - currentUser!: IUser; + + currentUser: IUser; + + + constructor(private http: HttpClient){} + + + loginUser(userName:string, password: string){ - this.currentUser={ - id:1, - firstName: 'Heba', - lastName: 'Almomani', - userName: userName, + + let options ={headers: new HttpHeaders({'Content-Type': 'application/json'})} + let loginInfo = {username: userName, password: password } + + return this.http.post('/api/login', loginInfo, options) + .pipe(tap(data =>{ + this.currentUser= data['user']; + + })) + .pipe(catchError(err => { + return of(false) + })) + // this.currentUser={ + // id:1, + // firstName: 'Heba', + // lastName: 'Almomani', + // userName: userName, + // } + + } + + isAuthenticated(){ + return !!this.currentUser; } + + + checkAuthenticationStatus() { + return this.http.get('/api/currentIdentity').pipe(tap( + data =>{ + if(data instanceof Object){ + this.currentUser = data; + } + } + )) + + } + + updateCurrentUser(firstname: string, lastname: string){ + this.currentUser.firstName = firstname; + this.currentUser.lastName = lastname; - } + let options ={headers: new HttpHeaders({'Content-Type': 'application/json'})} + return this.http.put(`api/users/${this.currentUser.id}`, this.currentUser, options); - isAuthenticated(){ - return !!this.currentUser; - } + } - updateCurrentUser(firstname: string, lastname: string){ - this.currentUser.firstName = firstname; - this.currentUser.lastName = lastname; - } -} \ No newline at end of file + logout(){ + this.currentUser= undefined; + let options ={headers: new HttpHeaders({'Content-Type': 'application/json'})} + return this.http.post('api/logout', {}, options); + + } + } \ No newline at end of file diff --git a/src/app/user/login.component.html b/src/app/user/login.component.html index 7d990b9..653b6fd 100644 --- a/src/app/user/login.component.html +++ b/src/app/user/login.component.html @@ -18,4 +18,8 @@

Login

+
+
+ Invalid login information +
\ No newline at end of file diff --git a/src/app/user/login.component.ts b/src/app/user/login.component.ts index f5ef38e..59b8318 100644 --- a/src/app/user/login.component.ts +++ b/src/app/user/login.component.ts @@ -16,18 +16,25 @@ export class LoginComponent{ userName: any password: any mouseoverlogin: boolean = false; -constructor(private authService: AuthService , private route: Router){ +loginInvalid = false; -} + constructor(private authService: AuthService , private router: Router){} + -login(formValue: any){ - this.authService.loginUser(formValue.userName, formValue.password) - this.route.navigate(['/events']) - console.log(formValue.userName, formValue.password) -} + login(formValue:any){ + this.authService.loginUser(formValue.userName, formValue.password).subscribe(resp =>{ + if(!resp){ + this.loginInvalid = true; + }else{ + this.router.navigate(['events']) + } + }) + // this.router.navigate(['events']) + // console.log(formValue.userName, formValue.password) + } -cancel(){ - this.route.navigate(['/events']) -} + cancel(){ + this.router.navigate(['events']) + } } diff --git a/src/app/user/profile/profile.component.html b/src/app/user/profile/profile.component.html index 6d1c86f..740ac21 100644 --- a/src/app/user/profile/profile.component.html +++ b/src/app/user/profile/profile.component.html @@ -18,6 +18,7 @@

Edit Your Profile

+ \ No newline at end of file diff --git a/src/app/user/profile/profile.component.ts b/src/app/user/profile/profile.component.ts index 3b4c6a2..8a3a10d 100644 --- a/src/app/user/profile/profile.component.ts +++ b/src/app/user/profile/profile.component.ts @@ -47,9 +47,10 @@ export class ProfileComponent implements OnInit { saveprofile(value: any){ if (this.profileForm.valid) { - this.auth.updateCurrentUser(value.firstName, value.lastName) - this.route.navigate(['/events']) - this.toastr.success('profile saved ') + this.auth.updateCurrentUser(value.firstName, value.lastName).subscribe(() =>{ + this.route.navigate(['/events']) + this.toastr.success('profile saved ') + }) } } @@ -63,4 +64,12 @@ export class ProfileComponent implements OnInit { validatedFirstName(){ return this.firstName.valid || this.firstName.untouched && !this.mouseover } + + + + logout(){ + this.auth.logout().subscribe(() =>{ + this.route.navigate(['/user/login']) + }) + } }