auth

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();
+  }
+
+
+
+
 }

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= <IUser>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 = <IUser>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;
-    }
-}
+        logout(){
+            this.currentUser= undefined;
+            let options ={headers: new HttpHeaders({'Content-Type': 'application/json'})} 
+            return this.http.post('api/logout', {}, options);
+
+        }
+    }

src/app/user/login.component.html

@@ -18,4 +18,8 @@ <h1>Login</h1>
     </span>
     <button type="button" class="btn btn-default" (click)="cancel()">Cancel</button>
   </form>
+  <br>
+  <div *ngIf="loginInvalid" class="alert alert-danger">
+    Invalid login information
+  </div>
 </div>

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'])
+    }
 }

src/app/user/profile/profile.component.html

@@ -18,6 +18,7 @@ <h1>Edit Your Profile </h1>
         <button type="submit" class="btn btn-primary" [disabled]="profileForm.invalid">Save</button>
         </span>
         <button type="button" class="btn btn-default" (click)="canceled()">Cancel</button>
+        <button type="button" class="btn btn-warning" style="float: right;" (click)="logout()">Log out</button>
       </form>
     </div>
   </div>

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'])
+    })
+  }
 }