fix: renamed logout on side bar and implemented functionality

Yash7824 · Aug 31, 2024 · 5ffc794 · 5ffc794
1 parent dd58572
commit 5ffc794
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 4 deletions.
diff --git a/src/app/components/side-bar/side-bar.component.html b/src/app/components/side-bar/side-bar.component.html
@@ -60,11 +60,11 @@
              </a>
           </li>
           <li>
-             <a routerLink="" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
+             <a (click)="logout()" class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700 group">
                 <svg class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 16">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3"/>
                 </svg>
-                <span class="flex-1 ms-3 whitespace-nowrap">Sign In</span>
+                <span class="flex-1 ms-3 whitespace-nowrap">Logout</span>
              </a>
           </li>
           <li>

diff --git a/src/app/components/side-bar/side-bar.component.ts b/src/app/components/side-bar/side-bar.component.ts
@@ -1,6 +1,8 @@
 import { Component } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { InboxComponent } from '../inbox/inbox.component';
+import { CommonService } from 'src/app/services/common.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-side-bar',
@@ -9,7 +11,9 @@ import { InboxComponent } from '../inbox/inbox.component';
 })
 export class SideBarComponent {
 
-  constructor(public dialog: MatDialog) { }
+  constructor(public dialog: MatDialog, 
+    public cs: CommonService,
+  private router: Router) { }
 
   openInbox(): void {
     const dialogRef = this.dialog.open(InboxComponent, {
@@ -20,4 +24,11 @@ export class SideBarComponent {
       console.log(`Dialog result: ${result}`);
     });
   }
+
+  logout(){
+    sessionStorage.clear();
+    localStorage.clear();
+    this.router.navigateByUrl('');
+    this.cs.isLoggedIn = false;
+  }
 }
diff --git a/src/app/pages/login/login.component.ts b/src/app/pages/login/login.component.ts
@@ -3,6 +3,7 @@ import { Router } from '@angular/router';
 import { ApiService } from 'src/app/services/api.service';
 import {ErrorStateMatcher} from '@angular/material/core';
 import { FormControl, FormGroupDirective, NgForm, Validators } from '@angular/forms';
+import { CommonService } from 'src/app/services/common.service';
 
 
 export class MyErrorStateMatcher implements ErrorStateMatcher {
@@ -20,7 +21,8 @@ export class MyErrorStateMatcher implements ErrorStateMatcher {
 export class LoginComponent {
 
   constructor(private apiServ: ApiService,
-    private router: Router
+    private router: Router,
+    private cs: CommonService
   ){}
 
   emailFormControl = new FormControl('', [Validators.required, Validators.email]);
@@ -38,6 +40,7 @@ export class LoginComponent {
     this.apiServ.login(loginForm).subscribe({
       next: (response) => {
         sessionStorage.setItem('authToken', JSON.stringify(response));
+        this.cs.isLoggedIn = true;
         this.router.navigateByUrl('home');
       },
       error: err => console.error('Observable emitted an error: ' + err)

diff --git a/src/app/services/common.service.ts b/src/app/services/common.service.ts
@@ -7,6 +7,7 @@ import { FriendRequest } from '../models/FriendRequest';
 })
 export class CommonService {
 
+  isLoggedIn: boolean = false;
   homeLoaded: boolean = false;
   socialLoaded: boolean = false;
   friendsList: User[] = [];