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]>
CS3219-AY2425S1 · Oct 19, 2024 · a04cd68 · a04cd68
1 parent fa522fd
commit a04cd68
Show file tree

Hide file tree

Showing 13 changed files with 210 additions and 31 deletions.
diff --git a/frontend/public/logo.png b/frontend/public/logo.png
diff --git a/frontend/src/_services/authentication.service.ts b/frontend/src/_services/authentication.service.ts
@@ -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`,

diff --git a/frontend/src/app/account/layout.component.html b/frontend/src/app/account/layout.component.html
@@ -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>
diff --git a/frontend/src/app/account/login.component.ts b/frontend/src/app/account/login.component.ts
@@ -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');
         }

diff --git a/frontend/src/app/account/register.component.ts b/frontend/src/app/account/register.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',
 })

diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
@@ -1 +1,3 @@
+<app-navigation-bar />
+
 <router-outlet />
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
@@ -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',
 })

diff --git a/frontend/src/app/navigation-bar/navigation-bar.component.css b/frontend/src/app/navigation-bar/navigation-bar.component.css
@@ -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;
+}
+
diff --git a/frontend/src/app/navigation-bar/navigation-bar.component.html b/frontend/src/app/navigation-bar/navigation-bar.component.html
@@ -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>
diff --git a/frontend/src/app/navigation-bar/navigation-bar.component.spec.ts b/frontend/src/app/navigation-bar/navigation-bar.component.spec.ts
@@ -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();
+    });
+});
diff --git a/frontend/src/app/navigation-bar/navigation-bar.component.ts b/frontend/src/app/navigation-bar/navigation-bar.component.ts
@@ -0,0 +1,89 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { MenuItem } from 'primeng/api';
+import { CommonModule, NgFor } from '@angular/common';
+import { MenubarModule } from 'primeng/menubar';
+import { AuthenticationService } from '../../_services/authentication.service';
+import { User } from '../../_models/user.model';
+
+@Component({
+    selector: 'app-navigation-bar',
+    standalone: true,
+    imports: [MenubarModule, CommonModule, NgFor],
+    templateUrl: './navigation-bar.component.html',
+    styleUrl: './navigation-bar.component.css',
+})
+export class NavigationBarComponent implements OnInit {
+    items: MenuItem[] | undefined;
+
+    constructor(
+        private router: Router,
+        private authService: AuthenticationService,
+    ) {}
+
+    ngOnInit() {
+        this.setMenuItems();
+        this.authService.user$.subscribe(() => this.setMenuItems());
+    }
+
+    setMenuItems() {
+        if (this.authService.isLoggedIn) {
+            const user = this.authService.userValue as User;
+            this.items = [
+                {
+                    label: user.username,
+                    icon: 'pi pi-user',
+                    // route: '/profile',
+                    style: { 'margin-left': 'auto' },
+                    items: [
+                        {
+                            label: 'Find Match',
+                            icon: 'pi pi-users',
+                            // route: '',
+                            class: 'p-submenu-list',
+                        },
+                        {
+                            label: 'View Questions',
+                            icon: 'pi pi-file',
+                            route: '/questions',
+                            class: 'p-submenu-list',
+                        },
+                        {
+                            label: 'View Profile',
+                            icon: 'pi pi-user',
+                            // route: '',
+                            class: 'p-submenu-list',
+                        },
+                        {
+                            label: 'View Match History',
+                            icon: 'pi pi-trophy',
+                            // route: '',
+                            class: 'p-submenu-list',
+                        },
+                        {
+                            label: 'Logout',
+                            icon: 'pi pi-sign-out',
+                            class: 'p-submenu-list',
+                            command: () => this.authService.logout(),
+                        },
+                    ],
+                },
+            ];
+        } else {
+            this.items = [
+                {
+                    label: 'Login',
+                    icon: 'pi pi-sign-in',
+                    route: 'account/login',
+                    style: { 'margin-left': 'auto' },
+                },
+                {
+                    label: 'Sign Up',
+                    icon: 'pi pi-pen-to-square',
+                    route: '/account/register',
+                    class: 'border',
+                },
+            ];
+        }
+    }
+}
diff --git a/frontend/src/app/questions/questions.component.html b/frontend/src/app/questions/questions.component.html
@@ -7,7 +7,7 @@
         animationDuration=".5s" />
     <p-toast />
     <ng-container *ngIf="!loading">
-        <p-toolbar styleClass="mb-2 gap-2">
+        <p-toolbar styleClass="mt-4 mb-2 gap-2">
             <div class="p-justify-end">
                 <p-button
                     icon="pi pi-plus"

diff --git a/frontend/src/app/questions/questions.component.ts b/frontend/src/app/questions/questions.component.ts
@@ -38,7 +38,7 @@ import { Column } from './column.model';
         ProgressSpinnerModule,
         QuestionDialogComponent,
     ],
-    providers: [QuestionService, ConfirmationService, MessageService],
+    providers: [ConfirmationService, MessageService],
     templateUrl: './questions.component.html',
     styleUrl: './questions.component.css',
 })