Fix error handling

Realised that the error interceptor was mishandling the errors. Now it
will throw an Error object with properties .message and .cause. Where
message is the original error.message, and cause is just the original
error itself.

Author: LimZiJia

frontend/src/_helpers/interceptors/error.interceptor.ts

@@ -12,13 +12,10 @@ export class ErrorInterceptor implements HttpInterceptor {
     intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
         return next.handle(request).pipe(
             catchError(err => {
-                if ([401, 403].includes(err.status)) {
-                    // auto logout if 401 Unauthorized or 403 Forbidden response returned from api
-                    this.authenticationService.logout();
-                }
+                console.error(err);
 
-                const error = err.error.message || err.statusText;
-                return throwError(() => new Error(error));
+                const errorMessage = err.error.message;
+                return throwError(() => new Error(errorMessage, {cause: err}));
             }),
         );
     }

frontend/src/_services/authentication.service.ts

@@ -26,6 +26,7 @@ export class AuthenticationService {
     }
 
     login(username: string, password: string) {
+        console.log('login', `${environment.UserServiceApiUrl}/auth/login`);
         return this.http
             .post<UServRes>(`${environment.UserServiceApiUrl}/auth/login`,
                 { username: username, password: password },

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

@@ -52,16 +52,16 @@ export class LoginComponent {
                         this.router.navigate([returnUrl]);
                     },
                     error: error => {
-                        console.dir(error);
                         this.isProcessingLogin = false;
+                        const status = error.cause.status;
                         let errorMessage = 'An unknown error occurred';
-                        if (error.status === 400) {
+                        if (status === 400) {
                             errorMessage = 'Missing Fields';
                         }
-                        else if (error.status === 401) {
+                        else if (status === 401) {
                             errorMessage = 'Invalid username or password';
                         }
-                        else if (error.status === 500) {
+                        else if (status === 500) {
                             errorMessage = 'Database Server Error';
                         }
                         this.messageService.add({ severity: 'error', summary: 'Log In Error', detail: errorMessage });

frontend/src/app/account/register.component.ts

@@ -105,15 +105,17 @@ export class RegisterComponent {
                     },
                     // error handling for registration because we assume there will be no errors with auto login
                     error: error => {
-                        console.log('A registration error occured');
-                        console.log(error, error.error);
                         this.isProcessingRegistration = false;
+                        const status = error.cause.status;
                         let errorMessage = 'An unknown error occurred';
-                        // Check if error has a message property
-                        if (error && error.error && error.error.message) {
-                            errorMessage = error.error.message;
-                        } else if (error && error.message) {
-                            errorMessage = error.message;
+                        if (status === 400) {
+                            errorMessage = 'Missing Fields';
+                        }
+                        else if (status === 409) {
+                            errorMessage = 'Username or Password already exists';
+                        }   
+                        else if (status === 500) {
+                            errorMessage = 'Database Server Error';
                         }
                         this.messageService.add({ severity: 'error', summary: 'Log In Error', detail: errorMessage });
                     },