Fix guards, redirections and login core

frontend/src/app/_components/table/table.component.ts

@@ -38,7 +38,6 @@ export class TableComponent implements OnInit, OnDestroy {
   loadTableData() {
     if(!this.sourceType) this.sourceType = "list";
     this.api.get(this.sourceType).then((data: any) => {
-      console.log(data);
       this.data = data.filter((row: any) => typeof row.hidden !== 'undefined' ? !row.hidden : true);
       if(this.sourceType === 'list') {
         this.api.availableUsers = this.data.filter((row: any) => row.available).length;
@@ -91,9 +90,7 @@ export class TableComponent implements OnInit, OnDestroy {
   }
 
   deleteService(id: number) {
-    console.log(id);
     this.translate.get(['table.yes_remove', 'table.cancel', 'table.remove_service_confirm', 'table.remove_service_text']).subscribe((res: { [key: string]: string; }) => {
-      console.log(res);
       Swal.fire({
         title: res['table.remove_service_confirm'],
         text: res['table.remove_service_confirm_text'],

frontend/src/app/_guards/authorize.guard.ts

@@ -1,13 +1,23 @@
 import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
-import { Observable } from 'rxjs';
+import { Observable, Subject } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
 import { AuthService } from '../_services/auth.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class AuthorizeGuard implements CanActivate {
+  //https://stackoverflow.com/a/48848557
+  public loader$ = new Subject<boolean>();
+  public loader = false;
+
   constructor(private authService: AuthService, private router: Router) {
+    this.loader$.pipe(
+      debounceTime(250)
+    ).subscribe((loader) => {
+      this.loader = loader;
+    });
   }
 
   checkAuthAndRedirect(
@@ -29,11 +39,18 @@ export class AuthorizeGuard implements CanActivate {
     state: RouterStateSnapshot
   ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
     if(this.authService.authLoaded) {
+      this.loader$.next(false);
+      console.log("Auth already loaded, checking if profile id exists");
       return this.checkAuthAndRedirect(route, state);
     } else {
+      this.loader$.next(true);
+      console.log("Auth not loaded, waiting for authChanged");
       return new Observable<boolean>((observer) => {
         this.authService.authChanged.subscribe({
-          next: () => { observer.next(this.checkAuthAndRedirect(route, state)); }
+          next: () => {
+            this.loader$.next(false);
+            observer.next(this.checkAuthAndRedirect(route, state));
+          }
         })
       });
     }

frontend/src/app/_providers/auth-interceptor.provider.ts

@@ -1,30 +1,25 @@
 import { Injectable } from '@angular/core';
 import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent, HttpErrorResponse } from '@angular/common/http';
-import { AuthService } from '../_services/auth.service';
 import { Observable, throwError } from 'rxjs';
 import { catchError } from 'rxjs/operators';
+import { Router } from "@angular/router";
 
 @Injectable()
 export class AuthInterceptor implements HttpInterceptor {
-  constructor(/*private auth: AuthService*/) { }
-
-  //TODO: fix interceptor and logout (client-side only) if 401 error
+  constructor(private router: Router) { }
 
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<Object>> {
-    return next.handle(req);
-    /*
     return next.handle(req).pipe(catchError(error => {
       console.log(error);
       if (error instanceof HttpErrorResponse && !req.url.includes('login') && !req.url.includes('me') && !req.url.includes('logout')) {
         if(error.status === 400) {
-          this.auth.logout();
+          this.router.navigate(["logout"]);
           return throwError(() => error);
         } else if (error.status === 401) {
-          this.auth.logout();
+          this.router.navigate(["logout"]);
         }
       } 
       return throwError(() => error);
     }));
-    */
   }
 }

frontend/src/app/_routes/login/login.component.ts

@@ -39,6 +39,12 @@ export class LoginComponent {
 
     if(this.authService.isAuthenticated()) {
       this.router.navigate(this.redirectParamsList);
+    } else {
+      this.authService.authChanged.subscribe({
+        next: () => {
+          this.router.navigate(this.redirectParamsList);
+        }
+      });
     }
   }
 

frontend/src/app/app.component.html

@@ -8,7 +8,7 @@
 </div>
 
 <div class="container">
-  <div class="d-flex justify-content-center mt-4 pt-4 mb-3" *ngIf="loadingRoute">
+  <div class="d-flex justify-content-center mt-4 pt-4 mb-3" *ngIf="loadingRoute || (guard.loader$ | async)">
     <div class="spinner spinner-border"></div>
   </div>
 

frontend/src/app/app.component.ts

@@ -6,6 +6,7 @@ import { Router, RouteConfigLoadStart, RouteConfigLoadEnd } from '@angular/route
 import { ApiClientService } from './_services/api-client.service';
 import { ModalAlertComponent } from 'src/app/_components/modal-alert/modal-alert.component';
 import { BsModalService } from 'ngx-bootstrap/modal';
+import { AuthorizeGuard } from './_guards/authorize.guard';
 
 @Component({
   selector: 'app-root',
@@ -25,7 +26,8 @@ export class AppComponent {
     private locationBackService: LocationBackService,
     private router: Router,
     private api: ApiClientService,
-    private modalService: BsModalService
+    private modalService: BsModalService,
+    public guard: AuthorizeGuard
   ) {
     this.revision_datetime_string = new Date(versions.revision_timestamp).toLocaleString(undefined,  { day: '2-digit', month: '2-digit', year: 'numeric', hour: 'numeric', minute: 'numeric', second: 'numeric' });
   }