Implement login and register

Right now if register is successful, it will auto login.

Login if successful will bring users to the '/' directory.

If user is already logged in, attemptes to reach '/account' will be
immediately redirected to '/'

Author: LimZiJia

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

@@ -33,9 +33,9 @@ export class LoginComponent {
         private route: ActivatedRoute
     ) {
         // redirect to home if already logged in
-        if (this.authenticationService.userValue) { 
-            this.router.navigate(['/']);
-        }
+        // if (this.authenticationService.userValue) { 
+        //     this.router.navigate(['/']);
+        // }
     }
 
     userForm = {
@@ -48,8 +48,8 @@ export class LoginComponent {
     onSubmit() {
         if (this.userForm.username && this.userForm.password) {
             this.isProcessingLogin = true;
+
             // authenticationService returns an observable that we can subscribe to
-            console.log('Logging in');
             this.authenticationService.login(this.userForm.username, this.userForm.password)
             .pipe()
             .subscribe({

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

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
-import { RouterLink } from '@angular/router';
+import { RouterLink, Router, ActivatedRoute } from '@angular/router';
 import { SelectButtonModule } from 'primeng/selectbutton';
 import { InputTextModule } from 'primeng/inputtext';
 import { PasswordModule } from 'primeng/password';
@@ -12,6 +12,7 @@ import { PASSWORD_WEAK, STRONG_PASSWORD_REGEX, weakPasswordValidator } from './_
 import { mismatchPasswordValidator, PASSWORD_MISMATCH } from './_validators/mismatch-password.validator';
 import { invalidUsernameValidator, USERNAME_INVALID } from './_validators/invalid-username.validator';
 import { invalidPasswordValidator, PASSWORD_INVALID } from './_validators/invalid-password.validator';
+import { AuthenticationService } from '../services/authentication.service';
 
 @Component({
     selector: 'app-register',
@@ -27,12 +28,22 @@ import { invalidPasswordValidator, PASSWORD_INVALID } from './_validators/invali
         ToastModule,
         ReactiveFormsModule,
     ],
-    providers: [MessageService],
+    providers: [MessageService, AuthenticationService],
     templateUrl: './register.component.html',
     styleUrl: './account.component.css',
 })
 export class RegisterComponent {
-    constructor(private messageService: MessageService) {}
+    constructor(
+        private messageService: MessageService,
+        private authenticationService: AuthenticationService,
+        private router: Router,
+        private route: ActivatedRoute
+    ) {
+        // redirect to home if already logged in
+        if (this.authenticationService.userValue) { 
+            this.router.navigate(['/']);
+        }
+    }
 
     userForm: FormGroup = new FormGroup(
         {
@@ -82,11 +93,36 @@ export class RegisterComponent {
     onSubmit() {
         if (this.userForm.valid) {
             this.isProcessingRegistration = true;
-            this.showError();
-            setTimeout(() => {
-                this.isProcessingRegistration = false;
-                console.log('Form Submitted', this.userForm.value);
-            }, 3000);
+            
+            this.authenticationService.createAccount(
+                this.userForm.value.username, 
+                this.userForm.value.email, 
+                this.userForm.value.password)
+                .pipe()
+                .subscribe({
+                    next: () => {
+                        // get return url from route parameters or default to '/'
+                        const returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
+                        this.router.navigate([returnUrl]);
+                    },
+                    // error handling for registration because we assume there will be no errors with auto login
+                    error: error => {
+                        console.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';
+                        }
+                        this.messageService.add({ severity: 'error', summary: 'Log In Error', detail: errorMessage });
+                    }
+                })
+
         } else {
             console.log('Invalid form');
         }

frontend/src/app/helpers/interceptors/jwt.interceptor.spec.ts

@@ -0,0 +1,65 @@
+import { TestBed } from '@angular/core/testing';
+import { HttpTestingController, provideHttpClientTesting } from '@angular/common/http/testing';
+import { HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
+import { JwtInterceptor } from './jwt.interceptor';
+import { AuthenticationService } from '../../services/authentication.service';
+import { environment } from '../../environments/environment';
+
+describe('JwtInterceptor', () => {
+    let httpMock: HttpTestingController;
+    let httpClient: HttpClient;
+    let mockAuthService: jasmine.SpyObj<AuthenticationService>;
+    let mockAuthServiceNoUser: jasmine.SpyObj<AuthenticationService>;
+
+    beforeEach(() => {
+        mockAuthService = jasmine.createSpyObj('AuthenticationService', ['userValue'], {
+            userValue: { accessToken: 'fake-jwt-token' }
+        });
+
+        TestBed.configureTestingModule({
+            imports: [HttpClient],
+            providers: [
+                { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
+                { provide: AuthenticationService, useValue: mockAuthService },
+                provideHttpClientTesting()
+            ]
+        });
+
+        httpMock = TestBed.inject(HttpTestingController);
+        httpClient = TestBed.inject(HttpClient);
+    });
+
+    afterEach(() => {
+        // Check if all Http requests were handled
+        httpMock.verify();
+    });
+
+    it('should add an Authorization header', () => {
+        httpClient.get(`${environment.UserServiceApiUrl}/test`).subscribe();
+
+        const httpRequest = httpMock.expectOne(`${environment.UserServiceApiUrl}/test`);
+
+        expect(httpRequest.request.headers.has('Authorization')).toBeTruthy();
+        expect(httpRequest.request.headers.get('Authorization')).toBe('Bearer fake-jwt-token');
+    });
+
+    it('should not add an Authorization header if the user is not logged in', () => {
+        mockAuthServiceNoUser = jasmine.createSpyObj('AuthenticationService', ['userValue'], {
+            userValue: { }
+        });
+
+        httpClient.get(`${environment.UserServiceApiUrl}/test`).subscribe();
+
+        const httpRequest = httpMock.expectOne(`${environment.UserServiceApiUrl}/test`);
+
+        expect(httpRequest.request.headers.has('Authorization')).toBeFalsy();
+    });
+
+    it('should not add an Authorization header for non-API URLs', () => {
+        httpClient.get('https://example.com/test').subscribe();
+
+        const httpRequest = httpMock.expectOne('https://example.com/test');
+
+        expect(httpRequest.request.headers.has('Authorization')).toBeFalsy();
+    });
+});

frontend/src/app/services/authentication.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 import { HttpClient } from '@angular/common/http';
 import { BehaviorSubject, Observable } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
+import { map, switchMap, tap } from 'rxjs/operators';
 import { environment } from '../environments/environment';
 import { User } from '../models/user.model';
 
@@ -24,16 +24,9 @@ export class AuthenticationService {
     }
 
     login(username: string, password: string) {
-        console.log('in authentication service login');
-        console.log(username, password);
-        console.log(`${environment.UserServiceApiUrl}/auth/login`);
         return this.http.post<any>(`${environment.UserServiceApiUrl}/auth/login`, 
             { "username": username, "password": password })
-            .pipe(
-                tap(response => {
-                    console.log('HTTP POST response:', response);
-                }),
-                map(response => {
+            .pipe(map(response => {
                 // store user details and jwt token in local storage to keep user logged in between page refreshes
                 const user = response.data;
                 localStorage.setItem('user', JSON.stringify(user));
@@ -42,10 +35,16 @@ export class AuthenticationService {
             }));
     }
 
+    createAccount(username: string, email: string, password: string) {
+        return this.http.post<any>(`${environment.UserServiceApiUrl}/users`,
+            { "username": username, "email": email, "password": password })
+            .pipe(switchMap(() => this.login(username, password))); // auto login after registration
+    }
+
     logout() {
         // remove user from local storage to log user out
         localStorage.removeItem('user');
         this.userSubject.next(null);
-        this.router.navigate(['/login']);
+        this.router.navigate(['/account/login']);
     }
 }