Merge branch 'main' into testing

Author: LimZiJia

compose.dev.yml

@@ -48,6 +48,10 @@ services:
       - /app/node_modules
       - ./services/collaboration:/app
 
+  collaboration-db:
+    ports:
+      - 27020:27017
+  
   history:
     command: npm run dev
     ports:

frontend/src/_services/authentication.service.ts

@@ -1,23 +1,28 @@
 // Modified from https://jasonwatmore.com/post/2022/11/15/angular-14-jwt-authentication-example-tutorial#login-component-ts
-import { Injectable } from '@angular/core';
+import { DestroyRef, inject, Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 import { HttpClient } from '@angular/common/http';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { BehaviorSubject, Observable, timer } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { map, switchMap } from 'rxjs/operators';
 import { UServRes } from '../_models/user.service.model';
 import { User } from '../_models/user.model';
 import { ApiService } from './api.service';
+import { ToastService } from './toast.service';
 
 @Injectable({ providedIn: 'root' })
 export class AuthenticationService extends ApiService {
     protected apiPath = 'user';
 
+    private destroyRef = inject(DestroyRef);
+
     private userSubject: BehaviorSubject<User | null>;
     public user$: Observable<User | null>;
 
     constructor(
         private router: Router,
         private http: HttpClient,
+        private toastService: ToastService,
     ) {
         super();
         const userData = localStorage.getItem('user');
@@ -53,6 +58,8 @@ export class AuthenticationService extends ApiService {
                     }
                     localStorage.setItem('user', JSON.stringify(user));
                     this.userSubject.next(user);
+                    this.startTokenExpiryCheck();
+
                     return user;
                 }),
             );
@@ -119,4 +126,41 @@ export class AuthenticationService extends ApiService {
             }),
         );
     }
+
+    displaySessionExpiryWarning(): void {
+        this.toastService.showToast('Your session will expire in less than 5 minutes. Please log in again.');
+    }
+
+    public startTokenExpiryCheck(): void {
+        const tokenExpirationTime = this.getTokenExpiration();
+        if (!tokenExpirationTime) {
+            this.logout();
+            return;
+        }
+
+        const oneMinute = 60 * 1000;
+        const timeLeft = tokenExpirationTime - Date.now();
+        if (timeLeft > 5 * oneMinute) {
+            timer(timeLeft - 5 * oneMinute)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(() => this.displaySessionExpiryWarning());
+        } else {
+            this.displaySessionExpiryWarning();
+        }
+
+        timer(timeLeft)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+                alert('Your session has expired. Please log in again.');
+                this.logout();
+            });
+    }
+
+    private getTokenExpiration() {
+        const user = this.userValue;
+        if (!user || !user.accessToken) return null;
+
+        const tokenPayload = JSON.parse(atob(user.accessToken.split('.')[1]));
+        return tokenPayload.exp ? tokenPayload.exp * 1000 : null;
+    }
 }

frontend/src/_services/history.service.ts

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { historyResponse, MatchingHistory } from '../app/account/history/history.model';
+import { historyResponse, MatchingHistory } from '../app/history/history.model';
 import { ApiService } from './api.service';
 
 @Injectable({
@@ -22,7 +22,8 @@ export class HistoryService extends ApiService {
                     id: item._id,
                     roomId: item.roomId,
                     collaborator: item.collaborator.username,
-                    question: item.question,
+                    title: item.question.title,
+                    description: item.question.description,
                     topics: item.question.topics,
                     difficulty: item.question.difficulty,
                     status: item.status,

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

@@ -5,7 +5,6 @@ import { LoginComponent } from './login/login.component';
 import { RegisterComponent } from './register/register.component';
 import { LayoutComponent } from './layout.component';
 import { ProfileComponent } from './profile/profile.component';
-import { HistoryComponent } from './history/history.component';
 
 const routes: Routes = [
     {
@@ -16,7 +15,6 @@ const routes: Routes = [
             { path: 'login', component: LoginComponent },
             { path: 'register', component: RegisterComponent },
             { path: 'profile', component: ProfileComponent },
-            { path: 'history', component: HistoryComponent },
         ],
     },
 ];

frontend/src/app/account/account.module.ts

@@ -7,7 +7,6 @@ import { RegisterComponent } from './register/register.component';
 import { LayoutComponent } from './layout.component';
 import { AccountRoutingModule } from './account.component';
 import { ProfileComponent } from './profile/profile.component';
-import { HistoryComponent } from './history/history.component';
 
 @NgModule({
     imports: [
@@ -18,7 +17,6 @@ import { HistoryComponent } from './history/history.component';
         LoginComponent,
         RegisterComponent,
         ProfileComponent,
-        HistoryComponent,
     ],
 })
 export class AccountModule {}

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

@@ -1,4 +1,5 @@
 <main>
     <app-navigation-bar />
+    <p-toast></p-toast>
     <router-outlet />
 </main>

frontend/src/app/app.component.html

@@ -1,16 +1,24 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { ButtonModule } from 'primeng/button';
 import { PasswordModule } from 'primeng/password';
+import { ToastModule } from 'primeng/toast';
 import { NavigationBarComponent } from './navigation-bar/navigation-bar.component';
-
+import { AuthenticationService } from '../_services/authentication.service';
+import { MessageService } from 'primeng/api';
 @Component({
     selector: 'app-root',
     standalone: true,
-    imports: [NavigationBarComponent, RouterOutlet, ButtonModule, PasswordModule],
+    imports: [NavigationBarComponent, RouterOutlet, ButtonModule, PasswordModule, ToastModule],
+    providers: [MessageService],
     templateUrl: './app.component.html',
     styleUrl: './app.component.css',
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
     title = 'frontend';
+
+    constructor(private authService: AuthenticationService) {}
+    ngOnInit() {
+        this.authService.startTokenExpiryCheck();
+    }
 }

frontend/src/app/app.component.ts

@@ -5,6 +5,7 @@ import { MatchingComponent } from './matching/matching.component';
 import { HomeComponent } from './home/home.component';
 import { AuthGuardService } from '../_services/auth.guard.service';
 import { CollabGuardService } from '../_services/collab.guard.service';
+import { HistoryComponent } from './history/history.component';
 
 const accountModule = () => import('./account/account.module').then(x => x.AccountModule);
 
@@ -33,6 +34,11 @@ export const routes: Routes = [
         component: HomeComponent,
         canActivate: [AuthGuardService],
     },
+    {
+        path: 'history',
+        component: HistoryComponent,
+        canActivate: [AuthGuardService],
+    },
     {
         path: '**',
         redirectTo: '/home',

frontend/src/app/app.routes.ts

@@ -1,3 +1,12 @@
+.container {
+    min-height: calc(100dvh - 160px); 
+    width: 100%;
+    justify-content: center; 
+    align-items: center; 
+    padding: 1rem;
+    margin-top: auto;
+}
+
 .sliding-panel {
     position: fixed;
     top: 0;
@@ -9,6 +18,7 @@
     box-shadow: -2px 0 5px rgba(0,0,0,0.5);
     transition: right 0.3s ease;
     z-index: 1000;
+    max-width: 90%;
 }
 
 .sliding-panel.open {