Temp commit

Trying to figure out how to get status code from HttpClient with
HttpResponse.

Author: LimZiJia

frontend/src/_services/authentication.service.ts

@@ -1,9 +1,9 @@
 // Modified from https://jasonwatmore.com/post/2022/11/15/angular-14-jwt-authentication-example-tutorial#login-component-ts
 import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpResponse } from '@angular/common/http';
 import { BehaviorSubject, Observable } from 'rxjs';
-import { map, switchMap } from 'rxjs/operators';
+import { map, switchMap, tap } from 'rxjs/operators';
 import { environment } from '../_environments/environment';
 import { User } from '../_models/user.model';
 import { UServRes } from '../_models/user.service.response.interface';
@@ -27,19 +27,29 @@ export class AuthenticationService {
 
     login(username: string, password: string) {
         return this.http
-            .post<UServRes>(`${environment.UserServiceApiUrl}/auth/login`, { username: username, password: password })
+            .post<UServRes>(`${environment.UserServiceApiUrl}/auth/login`,
+                { username: username, password: password },
+                { observe: 'response' })
             .pipe(
+                tap(response => {
+                    console.log(response.status);
+                    console.dir(response.body);
+                }),
                 map(response => {
                     // store user details and jwt token in local storage to keep user logged in between page refreshes
-                    const data = response.data;
-                    const user: User = {
-                        id: data.id,
-                        username: data.username,
-                        email: data.email,
-                        accessToken: data.accessToken,
-                        isAdmin: data.isAdmin,
-                        createdAt: data.createdAt,
-                    };
+                    let user: User = {};
+                    if (response.body) {
+                        const body: UServRes = response.body;
+                        const data = body.data;
+                        user = {
+                            id: data.id,
+                            username: data.username,
+                            email: data.email,
+                            accessToken: data.accessToken,
+                            isAdmin: data.isAdmin,
+                            createdAt: data.createdAt,
+                        };
+                    }
                     localStorage.setItem('user', JSON.stringify(user));
                     this.userSubject.next(user);
                     return user;
@@ -49,11 +59,9 @@ export class AuthenticationService {
 
     createAccount(username: string, email: string, password: string) {
         return this.http
-            .post<UServRes>(`${environment.UserServiceApiUrl}/users`, {
-                username: username,
-                email: email,
-                password: password,
-            })
+            .post<UServRes>(`${environment.UserServiceApiUrl}/users`, 
+                { username: username, email: email, password: password},
+                { observe: 'response' })
             .pipe(switchMap(() => this.login(username, password))); // auto login after registration
     }
 

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

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

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

@@ -105,15 +105,15 @@ export class RegisterComponent {
                     },
                     // error handling for registration because we assume there will be no errors with auto login
                     error: error => {
-                        console.error(error);
+                        console.log('A registration error occured');
+                        console.log(error, error.error);
                         this.isProcessingRegistration = false;
                         let errorMessage = 'An unknown error occurred';
-                        if (error.status === 400) {
-                            errorMessage = 'Missing Fields';
-                        } else if (error.status === 401) {
-                            errorMessage = 'There is already an account with that username or email';
-                        } else if (error.status === 500) {
-                            errorMessage = 'Database Server Error';
+                        // 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;
                         }
                         this.messageService.add({ severity: 'error', summary: 'Log In Error', detail: errorMessage });
                     },