Implementation of Better Error Handling on Login

src/app/shared/auth/auth.service.ts

@@ -1,8 +1,8 @@
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { first, firstValueFrom, Observable, Subject, take } from 'rxjs';
+import {first, firstValueFrom, Observable, of, Subject, take} from 'rxjs';
+import { catchError } from 'rxjs/operators';
 import { environment } from 'src/environments/environment';
-import { param } from 'ts-interface-checker';
 import { HttpError } from '../model/httpError/httpError.model';
 import { Token } from '../model/token/token.model';
 import { User } from '../model/user/user.model';
@@ -25,11 +25,11 @@ export class AuthService {
     login(userAuthAtempt: User): void {
         this.validateUser(this.loginUser(userAuthAtempt));
     }
-    
+
     googleLogin() {
         window.open(this.BACKEND_OAUTH_PATH + '/oauth2/authorization/google', '_self');
     }
-    
+
     githubLogin() {
         window.open(this.BACKEND_OAUTH_PATH + '/oauth2/authorization/github', '_self');
     }
@@ -95,9 +95,9 @@ export class AuthService {
 
         return this.http.get<User>(
             this.BACKEND_OAUTH_PATH + '/login/oauth2/code/google',
-            {  
+            {
                 withCredentials: true,
-                params: params 
+                params: params
             },
         ).pipe(
             first()
@@ -114,9 +114,9 @@ export class AuthService {
 
         return this.http.get<User>(
             this.BACKEND_OAUTH_PATH + '/login/oauth2/code/github',
-            {  
+            {
                 withCredentials: true,
-                params: params 
+                params: params
             },
         ).pipe(
             first()
@@ -133,18 +133,6 @@ export class AuthService {
         )
     }
 
-    private validateUser(userAuthAtempt: Observable<User>) {
-        userAuthAtempt.subscribe({
-            next: userAuthentication => {
-                this.userAuthenticated = <User>userAuthentication;
-                this.authSubject.next(this.userAuthenticated);
-            },
-            error: err => {
-                this.authSubject.next(<HttpError>err.error);
-            }
-        });
-    }
-
     private refreshAccessToken() {
         return firstValueFrom(this.http.post(
             this.BACKEND_PATH + "/user/login/refresh",
@@ -157,19 +145,37 @@ export class AuthService {
         return this.http.get<User>(
             this.BACKEND_PATH + '/session/validate',
             { withCredentials: true }
-        ).pipe(
-            first()
         );
     }
 
     private destroySessions() {
-        return this.http.post(
+        return this.http.delete(
             this.BACKEND_PATH + '/session/destroy',
-            {},
             { withCredentials: true }
-        ).pipe(
-            take(1)
         );
     }
 
+    private validateUser(userAuthAtempt: Observable<User>) {
+        userAuthAtempt.pipe(
+            catchError(error => {
+                if (error.status == 0) {
+                    return of(<HttpError>{
+                        title: "Service Unavailable",
+                        status: 500,
+                        details: "Service Unavailable, please try again later.",
+                        developerMessage: "Service Unavailable, please try again later.",
+                        timestamp: new Date().toISOString()
+                    });
+                }
+                return of(<HttpError>error.error);
+            }),
+            first()
+        ).subscribe({
+            next: userAuthentication => {
+                this.userAuthenticated = <User>userAuthentication;
+                this.authSubject.next(this.userAuthenticated);
+            }
+        });
+    }
+
 }

src/app/shared/components/popup/popup.component.css

@@ -64,7 +64,7 @@
 
 .popup-body {
     height: calc(100% - 120px);
-    padding: 0px 60px;
+    padding: 0px 30px;
     width: 100%;
     margin: 0;
 }
@@ -80,4 +80,4 @@
         max-width: unset;
     }
 
-}
+}

src/app/shared/components/popup/popup.component.ts

@@ -17,7 +17,7 @@ import { Component, ElementRef, EventEmitter, Input, Output, ViewEncapsulation }
                 '* => show',
                 group([
                     query(
-                        "@*", 
+                        "@*",
                         animateChild(),
                         { optional: true }
                     ),
@@ -28,7 +28,7 @@ import { Component, ElementRef, EventEmitter, Input, Output, ViewEncapsulation }
                 'show => hide',
                 group([
                     query(
-                        "@*", 
+                        "@*",
                         animateChild(),
                         { optional: true }
                     ),
@@ -51,7 +51,7 @@ export class PopupComponent {
 
     constructor() { }
 
-    get popupState(): string { 
+    get popupState(): string {
         return this.state ? 'show' : 'hide';
     }
 

src/app/shared/shared.module.ts

@@ -8,10 +8,10 @@ import { PopupComponent } from './components/popup/popup.component';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 @NgModule({
-    declarations: [ 
+    declarations: [
         ClickedOutsideDirective,
         SliderItemComponent,
-        PopupComponent
+        PopupComponent,
     ],
     imports: [
         CommonModule,