✨ log out implemented

Author: marcode24

src/app/auth/auth.component.ts

@@ -2,6 +2,7 @@ import { Component, ElementRef, HostListener, OnDestroy, OnInit, ViewChild } fro
 import { Subscription } from 'rxjs';
 
 import { AuthService } from '@services/auth.service';
+import { IModalAuth } from '@interfaces/modal.interface';
 
 @Component({
   selector: 'app-auth',
@@ -25,10 +26,18 @@ export class AuthComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.authSubscription = this.authService.isAuthenticatedEmitter.subscribe(isAuth => !isAuth ? this.openModal() : '');
+    this.authSubscription = this.authService.isAuthenticatedEmitter.subscribe(({ to, isAuth }) => !isAuth && to !== 'hide' ? this.openModal({to, isAuth}) : '');
   }
 
-  openModal(): void {
+  openModal(options: IModalAuth): void {
+    const { to } = options;
+    if(to !== 'init') {
+      this.showMore = false;
+      this.showLogin = to === 'login' ? true : false;
+    } else {
+      this.showMore = true;
+      this.showLogin = false;
+    }
     this.bodyElement.classList.add('modal-open');
     this.modalAuth.nativeElement.classList.add('modal-open');
     this.modalOpen = true;

src/app/core/components/sidebar/sidebar.component.css

@@ -154,6 +154,7 @@ nav .profile {
   transition: 0.3s;
   width: 100%;
   transition: 0.5s;
+  gap: 14px;
 }
 
 .profile-details .box-image {
@@ -171,10 +172,9 @@ nav .profile {
 }
 
 .profile-details .username {
-  margin: 0 5px;
   flex-grow: 1;
-  font-size: 14px;
-  font-weight: 400;
+  font-size: 16px;
+  font-weight: 500;
   color: var(--bg-color-secondary);
   white-space: nowrap;
   opacity: 1;
@@ -196,6 +196,21 @@ nav .profile {
   font-size: 24px;
 }
 
+.profile .btn-wrapper {
+  margin-bottom: 1rem;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.btn {
+  max-width: 90%;
+  border-radius: 40px;
+}
+
 @media (max-width: 1280px) {
   nav {
     width: 80px;
@@ -237,6 +252,10 @@ nav .profile {
   .profile-details .box-image {
     justify-content: center;
   }
+
+  .profile .btn-wrapper {
+    display: none;
+  }
 }
 
 @media (max-width: 768px) {

src/app/core/components/sidebar/sidebar.component.html

@@ -33,8 +33,13 @@
       <span class="tooltip">Settings</span>
     </li>
   </ul>
-  <div class="profile" *ngIf="userActive">
-    <div routerLink="/settings" class="profile-details">
+
+  <div class="profile">
+    <div class="btn-wrapper" *ngIf="!isAuthenticated">
+      <button (click)="showModal('login')" class="btn btn-following btn-lg">Sign in</button>
+      <button (click)="showModal('register')" class="btn btn-primary btn-lg">Sign on</button>
+    </div>
+    <div *ngIf="isAuthenticated" routerLink="/settings" class="profile-details">
       <figure class="box-image">
         <img
           src="https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80"

src/app/core/components/sidebar/sidebar.component.ts

@@ -35,11 +35,13 @@ export class SidebarComponent implements OnInit, AfterViewInit, OnDestroy {
 
   ngOnInit(): void {
     this.isAuthenticated = this.authService.isAuthenticated();
-    this.userActiveSubscription = this.authService.isAuthenticatedEmitter.subscribe(resp => {
-      if(resp) {
+    this.userActiveSubscription = this.authService.isAuthenticatedEmitter.subscribe(({isAuth}) => {
+      if(isAuth) {
         this.setUserInfoActive();
         this.isAuthenticated = true;
-      };
+      } else {
+        this.isAuthenticated = false;
+      }
     });
   }
 
@@ -52,4 +54,8 @@ export class SidebarComponent implements OnInit, AfterViewInit, OnDestroy {
     return (name && name?.length > 0) ? `${name} ${lastName || ''}` : email;
   }
 
+  showModal(to: 'login'|'register'): void {
+    this.authService.showModalAuth(to);
+  }
+
 }

src/app/core/guards/is-auth.guard.ts

@@ -17,7 +17,7 @@ export class IsAuthGuard implements CanActivate {
       return this.authService.validateToken().pipe(tap(isAuthenticated => {
         if (!isAuthenticated) {
           this.router.navigateByUrl('/').then(() => {
-            this.authService.showModalAuth();
+            this.authService.showModalAuth('init');
           });
         }
       }));

src/app/core/interfaces/modal.interface.ts

@@ -0,0 +1,4 @@
+export interface IModalAuth {
+  isAuth: boolean;
+  to?: 'login'|'register'|'init'|'hide';
+}

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

@@ -8,6 +8,7 @@ import { IResponseLogin } from '@interfaces/response.interface';
 import Storage from "@utils/storage.util";
 import { User } from '@models/user.model';
 import { SettingService } from './setting.service';
+import { IModalAuth } from '@interfaces/modal.interface';
 
 const base_url = environment.base_url;
 
@@ -16,8 +17,8 @@ const base_url = environment.base_url;
 })
 export class AuthService {
 
-  private userActive: User;
-  public isAuthenticatedEmitter: EventEmitter<boolean> = new EventEmitter();
+  private userActive: User | null;
+  public isAuthenticatedEmitter: EventEmitter<IModalAuth> = new EventEmitter();
 
   constructor(
     private http: HttpClient,
@@ -36,26 +37,32 @@ export class AuthService {
     return (this.userActive) ? true : false;
   }
 
-  showModalAuth(): void {
+  showModalAuth(to: 'login'|'register'|'init'): void {
     const isAuth: boolean = this.userActive ? true : false;
-    this.isAuthenticatedEmitter.emit(isAuth);
+    this.isAuthenticatedEmitter.emit({ isAuth, to });
   }
 
   get getUserActive(): User {
-    return this.userActive;
+    return this.userActive as User;
   }
 
   login(data: ILogin): Observable<IResponseLogin> {
     const url = `${base_url}/auth/login`;
     return this.http.post<IResponseLogin>(url, data).pipe(map(resp => {
       this.setUserActiveInfo(resp);
-      this.isAuthenticatedEmitter.emit(true);
+      this.isAuthenticatedEmitter.emit({isAuth: true});
       const { user } = resp;
       this.settingService.setTheme(user.darkMode ? 'dark' : 'light');
       return resp;
     }));
   }
 
+  logout(): void {
+    Storage.deleteSessionStorage('x-token');
+    this.userActive = null;
+    this.isAuthenticatedEmitter.emit({ isAuth: false, to: 'hide' });
+  }
+
   validateToken() {
     const url = `${base_url}/auth/renew`;
     return this.http.get<IResponseLogin>(url, this.headers).pipe(map(resp => {
@@ -68,21 +75,23 @@ export class AuthService {
     Storage.deleteSessionStorage('x-token');
     Storage.saveSessionStorage('x-token', resp.token);
     this.userActive = resp.user;
-    this.showModalAuth();
+    this.showModalAuth('init');
   }
 
   signIn(data: ILogin): Observable<Boolean> {
     const url = `${base_url}/user`;
     return this.http.post<IResponseLogin>(url, data).pipe(map(resp => {
       this.setUserActiveInfo(resp);
-      this.isAuthenticatedEmitter.emit(true);
+      this.isAuthenticatedEmitter.emit({isAuth: true});
       return resp.ok;
     }))
   }
 
   setNewUserInfo(name: string, lastName: string): void {
-    this.userActive.name = name;
-    this.userActive.lastName = lastName
+    if(this.userActive) {
+      this.userActive.name = name;
+      this.userActive.lastName = lastName
+    }
   }
 
 }

src/app/features/feed/pages/feed/feed.component.ts

@@ -58,7 +58,7 @@ export class FeedComponent implements OnInit {
 
   saveFeed(id: string) {
     if(!this.authService.isAuthenticated()) {
-      return this.authService.showModalAuth();
+      return this.authService.showModalAuth('init');
     }
     this.saveFeedSub.next(id);
   }

src/app/features/home/components/websites-card/websites-card.component.ts

@@ -26,7 +26,7 @@ export class WebsitesCardComponent implements OnInit {
 
   subscribeWebsite(id: string){
     if(!this.isAuthenticated) {
-      return this.authService.showModalAuth();
+      return this.authService.showModalAuth('init');
     }
     this.userService.modifyPreferences(id, 'subscription').subscribe(resp => {
       this.websites.map(website => {

src/app/features/home/home.component.ts

@@ -42,7 +42,7 @@ export class HomeComponent implements OnInit, OnDestroy {
   ngOnInit(): void {
     this.isAuthenticated = this.authService.isAuthenticated();
     this.loadingNews.next(true);
-    this.isAuthenticatedSub = this.authService.isAuthenticatedEmitter.subscribe(resp => resp ? this.resetDataInitial(): '');
+    this.isAuthenticatedSub = this.authService.isAuthenticatedEmitter.subscribe(({isAuth}) => isAuth ? this.resetDataInitial(): '');
   }
 
   resetDataInitial() {
@@ -92,9 +92,9 @@ export class HomeComponent implements OnInit, OnDestroy {
   }
 
   onScroll() {
-    this.skip += this.limit;
+    this. skip += this.limit;
     if(!this.isAuthenticated && this.skip >= this.limit) {
-      return this.authService.showModalAuth();
+      return this.authService.showModalAuth('init');
     }
     this.getFeeds().subscribe(feeds => this.feeds = [...this.feeds, ...feeds]);
   }