Connect frontend with user service

compose.yml

@@ -89,4 +89,4 @@ networks:
   question-db-network:
     driver: bridge
   user-db-network:
-    driver: bridge
+    driver: bridge

frontend/package.json

@@ -34,6 +34,7 @@
     "@types/jasmine": "~5.1.0",
     "angular-eslint": "18.3.1",
     "eslint": "^9.9.1",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "jasmine-core": "~5.2.0",
     "karma": "~6.4.0",

frontend/src/_interceptors/error.interceptor.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
+import { Observable, throwError } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+
+@Injectable()
+export class ErrorInterceptor implements HttpInterceptor {
+    intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
+        return next.handle(request).pipe(
+            catchError(err => {
+                console.error(err);
+
+                const errorMessage = err.error.message;
+                return throwError(() => new Error(errorMessage, { cause: err }));
+            }),
+        );
+    }
+}

frontend/src/_interceptors/jwt.interceptor.spec.ts

@@ -0,0 +1,64 @@
+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 { API_CONFIG } from '../app/api.config';
+
+describe('JwtInterceptor', () => {
+    let httpMock: HttpTestingController;
+    let httpClient: HttpClient;
+    let mockAuthService: 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(`${API_CONFIG.baseUrl}/user/test`).subscribe();
+
+        const httpRequest = httpMock.expectOne(`${API_CONFIG.baseUrl}/user/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', () => {
+        mockAuthService = jasmine.createSpyObj('AuthenticationService', ['userValue'], {
+            userValue: {},
+        });
+
+        httpClient.get(`${API_CONFIG.baseUrl}/user/test`).subscribe();
+
+        const httpRequest = httpMock.expectOne(`${API_CONFIG.baseUrl}/user/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/_interceptors/jwt.interceptor.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { AuthenticationService } from '../_services/authentication.service';
+
+@Injectable()
+export class JwtInterceptor implements HttpInterceptor {
+    constructor(private authenticationService: AuthenticationService) {}
+
+    intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
+        // add auth header with jwt if user is logged in and request is to the api url
+        const currentUser = this.authenticationService.userValue;
+        if (currentUser) {
+            const accessToken = currentUser.accessToken;
+            request = request.clone({
+                headers: request.headers.set('Authorization', `Bearer ${accessToken}`),
+            });
+        }
+        return next.handle(request);
+    }
+}

frontend/src/_models/user.model.ts

@@ -0,0 +1,8 @@
+export interface User {
+    id: string;
+    username: string;
+    email: string;
+    isAdmin: boolean;
+    createdAt: string;
+    accessToken: string;
+}

frontend/src/_models/user.service.model.ts

@@ -0,0 +1,11 @@
+import { User } from './user.model';
+
+export interface BaseResponse {
+    status: string;
+    message: string;
+}
+
+export interface UServRes extends BaseResponse {
+    message: string;
+    data: User;
+}

frontend/src/_services/auth.guard.service.ts

@@ -0,0 +1,42 @@
+import { Injectable } from '@angular/core';
+import { CanActivate, Router } from '@angular/router';
+import { AuthenticationService } from './authentication.service';
+import { filter, map, Observable, of, switchMap } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+import { UServRes } from '../_models/user.service.model';
+import { ApiService } from './api.service';
+
+@Injectable()
+export class AuthGuardService extends ApiService implements CanActivate {
+    protected apiPath = 'user';
+    constructor(
+        private authenticationService: AuthenticationService,
+        private http: HttpClient,
+        private router: Router,
+    ) {
+        super();
+    }
+
+    canActivate(): Observable<boolean> {
+        return this.authenticationService.user$.pipe(
+            filter(user => user !== undefined),
+            switchMap(user => {
+                // switchMap to flatten the observable from http.get
+                if (user === null) {
+                    // not logged in so redirect to login page with the return url
+                    this.router.navigate(['/account/login']);
+                    return of(false); // of() to return an observable to be flattened
+                }
+                // call to user service endpoint '/users/{user_id}' to check user is still valid
+                return this.http.get<UServRes>(`${this.apiUrl}/users/${user.id}`, { observe: 'response' }).pipe(
+                    map(response => {
+                        if (response.status === 200) {
+                            return true;
+                        }
+                        return false;
+                    }),
+                );
+            }),
+        );
+    }
+}

frontend/src/_services/authentication.service.ts

@@ -0,0 +1,71 @@
+// 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 { BehaviorSubject, Observable } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
+import { UServRes } from '../_models/user.service.model';
+import { User } from '../_models/user.model';
+import { ApiService } from './api.service';
+
+@Injectable({ providedIn: 'root' })
+export class AuthenticationService extends ApiService {
+    protected apiPath = 'user';
+
+    private userSubject: BehaviorSubject<User | null>;
+    public user$: Observable<User | null>;
+
+    constructor(
+        private router: Router,
+        private http: HttpClient,
+    ) {
+        super();
+        const userData = localStorage.getItem('user');
+        this.userSubject = new BehaviorSubject(userData ? JSON.parse(userData) : null);
+        this.user$ = this.userSubject.asObservable();
+    }
+
+    public get userValue() {
+        return this.userSubject.value;
+    }
+
+    login(username: string, password: string) {
+        console.log('login', `${this.apiUrl}/auth/login`);
+        return this.http
+            .post<UServRes>(
+                `${this.apiUrl}/auth/login`,
+                { username: username, password: password },
+                { observe: 'response' },
+            )
+            .pipe(
+                map(response => {
+                    // store user details and jwt token in local storage to keep user logged in between page refreshes
+                    let user = null;
+                    if (response.body) {
+                        const { id, username, email, accessToken, isAdmin, createdAt } = response.body.data;
+                        user = { id, username, email, accessToken, isAdmin, createdAt };
+                    }
+                    localStorage.setItem('user', JSON.stringify(user));
+                    this.userSubject.next(user);
+                    return user;
+                }),
+            );
+    }
+
+    createAccount(username: string, email: string, password: string) {
+        return this.http
+            .post<UServRes>(
+                `${this.apiUrl}/users`,
+                { username: username, email: email, password: password },
+                { observe: 'response' },
+            )
+            .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(['/account/login']);
+    }
+}

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

@@ -4,7 +4,7 @@ <h2 class="mt-0 align-self-start">Log In</h2>
     <form #loginForm="ngForm" (ngSubmit)="onSubmit()" class="form-container">
         <div class="form-field">
             <label for="username">Username</label>
-            <input pInputText required type="text" id="username" name="username" [(ngModel)]="user.username" />
+            <input pInputText required type="text" id="username" name="username" [(ngModel)]="userForm.username" />
         </div>
 
         <div class="form-field">
@@ -13,7 +13,7 @@ <h2 class="mt-0 align-self-start">Log In</h2>
                 required
                 inputId="password"
                 name="password"
-                [(ngModel)]="user.password"
+                [(ngModel)]="userForm.password"
                 [toggleMask]="true"
                 [feedback]="false"
                 class="p-fluid" />

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

@@ -1,44 +1,70 @@
 import { Component } from '@angular/core';
 import { FormsModule } 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';
 import { ButtonModule } from 'primeng/button';
 import { ToastModule } from 'primeng/toast';
 import { MessageService } from 'primeng/api';
+import { AuthenticationService } from '../../_services/authentication.service';
 
 @Component({
     selector: 'app-login',
     standalone: true,
     imports: [RouterLink, FormsModule, InputTextModule, ButtonModule, SelectButtonModule, PasswordModule, ToastModule],
-    providers: [MessageService],
+    providers: [MessageService, AuthenticationService],
     templateUrl: './login.component.html',
     styleUrl: './account.component.css',
 })
 export class LoginComponent {
-    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(['/']);
+        }
+    }
 
-    user = {
+    userForm = {
         username: '',
         password: '',
     };
 
     isProcessingLogin = false;
 
-    showError() {
-        this.messageService.add({ severity: 'error', summary: 'Log In Error', detail: 'Missing Details' });
-    }
-
     onSubmit() {
-        if (this.user.username && this.user.password) {
+        if (this.userForm.username && this.userForm.password) {
             this.isProcessingLogin = true;
-            this.showError();
-            // Simulate API request
-            setTimeout(() => {
-                this.isProcessingLogin = false;
-                console.log('Form Submitted', this.user);
-            }, 3000);
+
+            // authenticationService returns an observable that we can subscribe to
+            this.authenticationService
+                .login(this.userForm.username, this.userForm.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: error => {
+                        this.isProcessingLogin = false;
+                        const status = error.cause.status;
+                        let errorMessage = 'An unknown error occurred';
+                        if (status === 400) {
+                            errorMessage = 'Missing Fields';
+                        } else if (status === 401) {
+                            errorMessage = 'Invalid username or password';
+                        } else if (status === 500) {
+                            errorMessage = 'Internal Server Error';
+                        }
+                        this.messageService.add({ severity: 'error', summary: 'Log In Error', detail: errorMessage });
+                    },
+                });
         } else {
             console.log('Invalid form');
         }