Connect frontend with user service (#47)

LimZiJia · samuelim01 · web-flow · commit fa522fd943e3 · 2024-10-17T22:46:02.000+08:00
* Copy user service https://github.com/CS3219-AY2425S1/PeerPrep-UserService * Dockerise user-service Got user service to work in docker. It can only interface with an atlas cloud server currently. * Dockerise user-service User-service in docker can only communicate with an atlas mongodb server. * Merge with main Some files should have been committed in the previous commit. They are mostly to do with the dockerisation process. The merge with main might have messed with it. * Create .gitignore Somehow .gitignore was not commited with the last commit * Fix POST causing SEGSEGV Apparently bcrypt library cannot run on Docker's architecture. Change bcrypt to bcryptjs for compatibility. * Add test Test does not currently work * Basic user service Not connected to the login interface yet. Commiting to make a clean Pr. * Move user service folder * Fix minor user service issues * Remove orphan history file * Move `index.js` and `server.js` to the correct directory * Reduce use of port * Change login to use username * Fix user env typo * Enable login Frontend is now able to POST to user login endpoint and receive a JWT token and some user details. These are stored in localStorage. * Same commit as before Some new files were untracked. * 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 '/' * Rename files To keep it consistent with main, I have renamed files that are not part of app from filename to "_filename" out of app. I also cleaned up the outdated user-service because it was renamed already. * Fix wrong merge There was a duplicated of "user" in compose.yml. * Init guards Used ng generate guard to generate these. * Implement auth-guard and interceptors Removed those _guards and implemented as a service instead. Added a guard to '/questions' so only logged in users with tokens that have not expired can access it. If they are not logged in, users will be directed to '/login' to log in. * Fix prettier Was magically missing from last commit. * Fix silly issues - Removed user network (errornous merging). - Removed duplicate providers * Fix linting Added interface for user service response. * Temp commit Trying to figure out how to get status code from HttpClient with HttpResponse. * 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. * Fix linting * Minor fixes * Move interceptors into _interceptors * Clean user and user service response models * Fix auth service unhandled cases * Minor phrasing fixes * Clean JWT interceptor * Use API_CONFIG instead of environment.ts * Oops * Tie in gateway changes properly --------- Co-authored-by: samuelim01 <samuelim01@gmail.com>
diff --git a/compose.yml b/compose.yml
@@ -89,4 +89,4 @@ networks:
   question-db-network:
     driver: bridge
   user-db-network:
-    driver: bridge
+    driver: bridge
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/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",
diff --git a/frontend/src/_interceptors/error.interceptor.ts b/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 }));
+            }),
+        );
+    }
+}
diff --git a/frontend/src/_interceptors/jwt.interceptor.spec.ts b/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();
+    });
+});
diff --git a/frontend/src/_interceptors/jwt.interceptor.ts b/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);
+    }
+}
diff --git a/frontend/src/_models/user.model.ts b/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;
+}
diff --git a/frontend/src/_models/user.service.model.ts b/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;
+}
diff --git a/frontend/src/_services/auth.guard.service.ts b/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;
+                    }),
+                );
+            }),
+        );
+    }
+}
diff --git a/frontend/src/_services/authentication.service.ts b/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']);
+    }
+}
diff --git a/frontend/src/app/account/login.component.html b/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" />
diff --git a/frontend/src/app/account/login.component.ts b/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');
         }
diff --git a/frontend/src/app/account/register.component.ts b/frontend/src/app/account/register.component.ts
diff --git a/frontend/src/app/app.config.ts b/frontend/src/app/app.config.ts
diff --git a/frontend/src/app/app.routes.ts b/frontend/src/app/app.routes.ts
