feat: created ErrorHandlingService to intercept HTTP errors

src/app/components/login/login.component.ts

@@ -12,6 +12,7 @@ import { TranslateModule } from '@ngx-translate/core';
 import { LoadingDialogComponent } from './loading-dialog/loading-dialog.component';
 import { OverlayService } from '../../services/overlay.service';
 import { AuthService } from '../../services/auth.service';
+import { ErrorHandlingService } from '../../services/error-handling.service';
 
 @Component({
   selector: 'app-login',
@@ -43,6 +44,7 @@ export class LoginComponent {
     public loginService: LoginService,
     public sharedService: SharedService,
     private overlayService: OverlayService,
+    private errorHandlingService: ErrorHandlingService,
     private route: ActivatedRoute,
     private router: Router
   ) {}
@@ -70,6 +72,8 @@ export class LoginComponent {
         this.router.navigate(['/summary']);
       } catch (error) {
         this.sharedService.isBtnDisabled = false;
+        const errorMessage = this.errorHandlingService.handleHttpError(error);
+        alert(errorMessage);
       }
     }
   }

src/app/services/auth.service.ts

@@ -10,6 +10,8 @@ import {
 import { apiConfig } from '../environments/config';
 import { ApiService } from './api.service';
 import { TokenService } from './token.service';
+import { HttpErrorResponse } from '@angular/common/http';
+import { ErrorHandlingService } from './error-handling.service';
 
 @Injectable({
   providedIn: 'root',
@@ -20,7 +22,8 @@ export class AuthService {
 
   constructor(
     private apiService: ApiService,
-    private tokenService: TokenService
+    private tokenService: TokenService,
+    private errorHandlingService: ErrorHandlingService
   ) {
     this.currentUserIdSubject.next(this.tokenService.getUserId());
   }
@@ -39,7 +42,8 @@ export class AuthService {
       this.currentUserIdSubject.next(data.userId);
     } catch (error) {
       console.error('Login failed:', error);
-      throw error;
+      const errorMessage = this.errorHandlingService.handleHttpError(error);
+      throw new Error(errorMessage);
     }
   }
 
@@ -56,6 +60,8 @@ export class AuthService {
       window.location.href = '/login';
     } catch (error) {
       console.error('Logout failed:', error);
+      const errorMessage = this.errorHandlingService.handleHttpError(error);
+      throw new Error(errorMessage);
     }
   }
 

src/app/services/error-handling.service.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { HttpErrorResponse } from '@angular/common/http';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ErrorHandlingService {
+  handleHttpError(error: unknown): string {
+    if (error instanceof HttpErrorResponse) {
+      switch (error.status) {
+        case 0:
+          return 'Network issue: Unable to reach the server.\nPlease check your internet connection or the server status.';
+        case 401:
+          return 'Invalid login credentials.\nPlease check your email and password.';
+        case 403:
+          return 'You do not have permission to access this resource.';
+        case 404:
+          return 'The requested resource was not found.';
+        case 500:
+          return 'Server error: Please try again later.';
+        default:
+          return `Unknown error: ${error.statusText || error.message}`;
+      }
+    }
+
+    if (error instanceof Error) {
+      return `${error.message || error.toString()}`;
+    }
+
+    return 'An unknown error occurred.';
+  }
+}