Add Navigation Bar (#48)

* Init nav bar component

* Add navigation bar

* Add logo

* Fix spacing issue caused by nav bar

* Update on login

* Fix nav bar not updating on login

* Add access to questions and matching

* oops

---------

Co-authored-by: Samuel Lim <[email protected]>

Author: limcaaarl

frontend/public/logo.png

@@ -21,16 +21,20 @@ export class AuthenticationService extends ApiService {
     ) {
         super();
         const userData = localStorage.getItem('user');
-        this.userSubject = new BehaviorSubject(userData ? JSON.parse(userData) : null);
+        const user: User | null = userData ? JSON.parse(userData) : null;
+        this.userSubject = new BehaviorSubject(user);
         this.user$ = this.userSubject.asObservable();
     }
 
     public get userValue() {
         return this.userSubject.value;
     }
 
+    public get isLoggedIn(): boolean {
+        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`,

frontend/src/_services/authentication.service.ts

@@ -1,4 +1,4 @@
-<div class="flex flex-column h-full w-full justify-content-center align-items-center p-2">
+<div class="flex flex-column h-full w-full justify-content-center align-items-center p-2" style="margin-top: -80px">
     <h2 class="mb-2">Welcome to PeerPrep</h2>
     <router-outlet></router-outlet>
 </div>

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

@@ -13,7 +13,7 @@ import { AuthenticationService } from '../../_services/authentication.service';
     selector: 'app-login',
     standalone: true,
     imports: [RouterLink, FormsModule, InputTextModule, ButtonModule, SelectButtonModule, PasswordModule, ToastModule],
-    providers: [MessageService, AuthenticationService],
+    providers: [MessageService],
     templateUrl: './login.component.html',
     styleUrl: './account.component.css',
 })
@@ -42,29 +42,26 @@ export class LoginComponent {
             this.isProcessingLogin = true;
 
             // 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 });
-                    },
-                });
+            this.authenticationService.login(this.userForm.username, this.userForm.password).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');
         }

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

@@ -28,7 +28,7 @@ import { AuthenticationService } from '../../_services/authentication.service';
         ToastModule,
         ReactiveFormsModule,
     ],
-    providers: [MessageService, AuthenticationService],
+    providers: [MessageService],
     templateUrl: './register.component.html',
     styleUrl: './account.component.css',
 })

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

@@ -1 +1,3 @@
+<app-navigation-bar />
+
 <router-outlet />

frontend/src/app/app.component.html

@@ -2,11 +2,12 @@ import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import { ButtonModule } from 'primeng/button';
 import { PasswordModule } from 'primeng/password';
+import { NavigationBarComponent } from './navigation-bar/navigation-bar.component';
 
 @Component({
     selector: 'app-root',
     standalone: true,
-    imports: [RouterOutlet, ButtonModule, PasswordModule],
+    imports: [NavigationBarComponent, RouterOutlet, ButtonModule, PasswordModule],
     templateUrl: './app.component.html',
     styleUrl: './app.component.css',
 })

frontend/src/app/app.component.ts

@@ -0,0 +1,46 @@
+::ng-deep .p-menubar {
+    border-radius: 0;
+    border-style: none;
+    position: sticky;
+    background-color: rgba(9, 9, 11, 0.8);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+    top: 0;
+    z-index: 100;
+    backdrop-filter: blur(10px);
+    justify-content: center;
+    height: 80px;
+}
+
+:host ::ng-deep p-menubarsub {
+    width: 100%;
+}
+
+::ng-deep .p-submenu-list {
+    right: 0%;
+    left: unset;
+}
+
+a.fill-div {
+    display: block;
+    height: 100%;
+    width: 100%;
+    text-decoration: none;
+}
+
+/* fonts */
+.poppins-thin {
+    font-family: "Poppins", sans-serif;
+    font-weight: 100;
+    font-style: normal;
+  }
+  
+  .poppins-bold {
+    font-family: "Poppins", sans-serif;
+    font-weight: 700;
+    font-style: normal;
+  }
+
+p.logo-font-size {
+    font-size: 28px;
+}
+  

frontend/src/app/navigation-bar/navigation-bar.component.css

@@ -0,0 +1,18 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;700&display=swap" rel="stylesheet" />
+
+<p-menubar [model]="items">
+    <ng-template pTemplate="start">
+        <div class="pl-2 flex align-items-center" style="cursor: pointer" [routerLink]="['/matching']">
+            <img src="/logo.png" alt="logo" style="width: auto; height: 55px" />
+            <p class="pl-2 mr-3 poppins-bold logo-font-size">PeerPrep</p>
+        </div>
+    </ng-template>
+    <ng-template pTemplate="item" let-item>
+        <a [routerLink]="item.route" class="p-menuitem-link">
+            <span [class]="item.icon"></span>
+            <span class="ml-2">{{ item.label }}</span>
+        </a>
+    </ng-template>
+</p-menubar>

frontend/src/app/navigation-bar/navigation-bar.component.html

@@ -0,0 +1,22 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavigationBarComponent } from './navigation-bar.component';
+
+describe('NavigationBarComponent', () => {
+    let component: NavigationBarComponent;
+    let fixture: ComponentFixture<NavigationBarComponent>;
+
+    beforeEach(async () => {
+        await TestBed.configureTestingModule({
+            imports: [NavigationBarComponent],
+        }).compileComponents();
+
+        fixture = TestBed.createComponent(NavigationBarComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});