💄 home section styles changed

Author: marcode24

src/app/auth/auth.component.ts

@@ -15,7 +15,7 @@ export class AuthComponent implements OnInit, OnDestroy {
   private bodyElement = document.body as HTMLBodyElement;
   public showLogin: boolean = true;
 
-  constructor(private authService: AuthService) { }
+  constructor(private authService: AuthService) {}
 
   ngOnDestroy(): void {
     this.authSubscription.unsubscribe();
@@ -35,8 +35,8 @@ export class AuthComponent implements OnInit, OnDestroy {
     this.modalAuth.nativeElement.classList.remove('modal-open');
   }
 
-  changePage(value: boolean) {
-    this.showLogin = value;
+  changePage(show: boolean) {
+    this.showLogin = show;
   }
 
 }

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

@@ -110,6 +110,7 @@ nav li a {
   text-decoration: none;
   transition: 0.5s ease;
   background: transparent;
+  cursor: pointer;
 }
 
 nav li a:hover,

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

@@ -5,21 +5,21 @@
   </div>
   <ul class="nav-list">
     <li>
-      <a (click)="changeExplore(true)">
+      <a routerLink="/">
         <i class='bx bx-news'></i>
         <span class="links_name">News</span>
       </a>
       <span class="tooltip">News</span>
     </li>
     <li>
-      <a (click)="changeExplore(false)">
+      <a (click)="navigate('/explore')">
         <i class='bx bx-world'></i>
         <span class="links_name">Explore</span>
       </a>
       <span class="tooltip">Explore</span>
     </li>
     <li>
-      <a routerLink="/feed/saved">
+      <a (click)="navigate('/feed/saved')">
         <i class='bx bx-bookmark'></i>
         <span class="links_name">Saved</span>
       </a>

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

@@ -16,6 +16,9 @@ export class SidebarComponent implements OnInit, AfterViewInit, OnDestroy {
   private wrapper: any;
   public userActive: User;
   private userActiveSubscription: Subscription;
+
+  public isAuthenticated: boolean = false;
+
   constructor(
     private authService: AuthService,
     private feedService: FeedService,
@@ -34,10 +37,9 @@ export class SidebarComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngOnInit(): void {
+    this.isAuthenticated = this.authService.isAuthenticated();
     this.userActiveSubscription = this.authService.isAuthenticatedEmitter.subscribe(resp => {
-      if(resp) {
-        this.setUserInfoActive();
-      }
+      if(resp) this.setUserInfoActive();
     });
   }
 
@@ -46,25 +48,15 @@ export class SidebarComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   changeExplore(value: boolean): void {
-    if(!value) {
-      if(!this.authService.isAuthenticated()) {
-        return;
-      }
-    }
     this.router.navigate(['/']);
     this.feedService.changeToExplore(value);
   }
 
-  // toggled(element: any) {
-  //   console.log(this.userActive);
-  //   this.sidebar?.classList.toggle('open');
-  //   this.wrapper.classList.toggle('open');
-  //   console.log(this.sidebar);
-  //   if(this.sidebar?.classList.contains('open')) {
-  //     element.classList.replace('bx-menu', 'bx-menu-alt-right');//replacing the iocns class
-  //   } else {
-  //     element.classList.replace('bx-menu-alt-right','bx-menu');//replacing the iocns class
-  //   }
-  // }
+  navigate(route: string): void {
+    if(!this.isAuthenticated) {
+      return this.authService.showModalAuth();
+    }
+    this.router.navigate([route]);
+  }
 
 }

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

@@ -16,7 +16,7 @@ const base_url = environment.base_url;
 export class AuthService {
 
   private userActive: User;
-  public isAuthenticatedEmitter: Subject<boolean> = new Subject();
+  public isAuthenticatedEmitter: EventEmitter<boolean> = new EventEmitter();
 
   constructor(
     private http: HttpClient,
@@ -31,13 +31,12 @@ export class AuthService {
   }
 
   isAuthenticated(): boolean {
-    const isAuth = (this.userActive) ? true : false;
-    this.emitUserAuthenticated(isAuth);
-    return isAuth;
+    return (this.userActive) ? true : false;
   }
 
-  emitUserAuthenticated(isAuth: boolean): void {
-    this.isAuthenticatedEmitter.next(isAuth);
+  showModalAuth(): void {
+    const isAuth: boolean = this.userActive ? true : false;
+    this.isAuthenticatedEmitter.emit(isAuth);
   }
 
   get getUserActive(): User {
@@ -48,6 +47,7 @@ export class AuthService {
     const url = `${base_url}/auth/login`;
     return this.http.post<IResponseLogin>(url, data).pipe(map(resp => {
       this.setUserActiveInfo(resp);
+      this.isAuthenticatedEmitter.emit(true);
       return resp;
     }));
   }
@@ -56,7 +56,6 @@ export class AuthService {
     const url = `${base_url}/auth/renew`;
     return this.http.get<IResponseLogin>(url, this.headers).pipe(map(resp => {
       this.setUserActiveInfo(resp);
-      console.log(resp);
       return true;
     }), catchError(err => of(false)));
   }
@@ -65,7 +64,7 @@ export class AuthService {
     Storage.deleteSessionStorage('x-token');
     Storage.saveSessionStorage('x-token', resp.token);
     this.userActive = resp.user;
-    this.emitUserAuthenticated(true);
+    this.showModalAuth();
   }
 
 }

src/app/features/features.component.css

@@ -8,9 +8,7 @@
 }
 
 .wrapper .container {
-  padding: 0.8rem 1rem;
   min-height: 100vh;
-  width: 100%;
   margin-left: 250px;
   width: auto;
 }

src/app/features/features.component.html

@@ -1,8 +1,9 @@
-<div class="wrapper">
+<div class="wrapper" *ngIf="!isLoading">
   <app-sidebar></app-sidebar>
   <div class="container">
     <router-outlet></router-outlet>
   </div>
 </div>
 
-<app-auth></app-auth>
+<app-auth></app-auth>
+<app-button-top></app-button-top>

src/app/features/features.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { AuthService } from '@services/auth.service';
 
 @Component({
   selector: 'app-features',
@@ -7,6 +8,14 @@ import { Component, OnInit } from '@angular/core';
 })
 export class FeaturesComponent implements OnInit {
 
+  public isLoading: boolean = true;
+
+  constructor(authService: AuthService) {
+    authService.validateToken().subscribe(() => {
+      this.isLoading = false;
+    });
+  }
+
   ngOnInit() {}
 
 }

src/app/features/feed/feed.routing.ts

@@ -23,6 +23,6 @@ const routes: Routes = [
   ],
   exports: [
     RouterModule
-  ]
+  ],
 })
 export class UsersRoutingModule {}

src/app/features/feed/pages/saved/saved.component.css

@@ -0,0 +1,9 @@
+.saved {
+  max-width: calc(100% - 300px);
+}
+
+@media (max-width: 900px) {
+  .saved {
+    max-width: 100%;
+  }
+}