Add profile and settings page placeholders; Expand routing

frontend/src/app/Views/bot-settings/bot-settings.component.html

@@ -0,0 +1 @@
+<p>bot-settings works!</p>

frontend/src/app/Views/bot-settings/bot-settings.component.spec.ts

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

frontend/src/app/Views/bot-settings/bot-settings.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-bot-settings',
+  templateUrl: './bot-settings.component.html',
+  styleUrls: ['./bot-settings.component.scss']
+})
+export class BotSettingsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

frontend/src/app/Views/header/header.component.html

@@ -5,7 +5,18 @@
     mat-icon-button
     class="example-icon favorite-icon"
     aria-label="Example icon-button with heart icon"
+    [matMenuTriggerFor]="menu"
   >
     <mat-icon>settings</mat-icon>
   </button>
+  <mat-menu #menu="matMenu">
+    <button mat-menu-item routerLink="/profile">
+      <mat-icon>account_circle</mat-icon>
+      <span>Profile</span>
+    </button>
+    <button mat-menu-item routerLink="/settings">
+      <mat-icon>ballot</mat-icon>
+      <span>Bot Settings</span>
+    </button>
+  </mat-menu>
 </mat-toolbar>

frontend/src/app/Views/profile/profile.component.html

@@ -0,0 +1 @@
+<p>profile works!</p>

frontend/src/app/Views/profile/profile.component.spec.ts

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

frontend/src/app/Views/profile/profile.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-profile',
+  templateUrl: './profile.component.html',
+  styleUrls: ['./profile.component.scss']
+})
+export class ProfileComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

frontend/src/app/app-routing.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { DashboardComponent } from './Views/dashboard/dashboard.component';
 import { LoginComponent } from './Views/login/login.component';
+import { ProfileComponent } from './Views/profile/profile.component';
 import { RegisterComponent } from './Views/register/register.component';
 
 const routes: Routes = [
@@ -17,6 +18,14 @@ const routes: Routes = [
     path: 'register',
     component: RegisterComponent,
   },
+  {
+    path: 'profile',
+    component: ProfileComponent,
+  },
+  {
+    path: 'settings',
+    component: ProfileComponent,
+  },
 ];
 
 @NgModule({

frontend/src/app/app.component.ts

@@ -33,17 +33,17 @@ export class AppComponent {
           (event as NavigationEnd).url === '/login' ||
           (event as NavigationEnd).url === '/register'
         );
-        if (this.tokenStorage.getToken()) {
-          this.isLoggedIn = true;
-        } else {
-          this.isLoggedIn = false;
-        }
-        if (
-          this.isLoggedIn === false &&
-          (event as NavigationEnd).url != '/register'
-        ) {
-          this.router.navigate(['/login']);
-        }
+        // if (this.tokenStorage.getToken()) {
+        //   this.isLoggedIn = true;
+        // } else {
+        //   this.isLoggedIn = false;
+        // }
+        // if (
+        //   this.isLoggedIn === false &&
+        //   (event as NavigationEnd).url != '/register'
+        // ) {
+        //   this.router.navigate(['/login']);
+        // }
       });
   }
 }

frontend/src/app/app.module.ts

@@ -9,6 +9,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatCardModule } from '@angular/material/card';
 import { MatTableModule } from '@angular/material/table';
+import { MatMenuModule } from '@angular/material/menu';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -17,6 +18,8 @@ import { HeaderComponent } from './Views/header/header.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { DashboardComponent } from './Views/dashboard/dashboard.component';
 import { RegisterComponent } from './Views/register/register.component';
+import { ProfileComponent } from './Views/profile/profile.component';
+import { BotSettingsComponent } from './Views/bot-settings/bot-settings.component';
 
 @NgModule({
   declarations: [
@@ -25,6 +28,8 @@ import { RegisterComponent } from './Views/register/register.component';
     HeaderComponent,
     DashboardComponent,
     RegisterComponent,
+    ProfileComponent,
+    BotSettingsComponent,
   ],
   imports: [
     BrowserModule,
@@ -38,6 +43,7 @@ import { RegisterComponent } from './Views/register/register.component';
     MatTableModule,
     FormsModule,
     HttpClientModule,
+    MatMenuModule,
   ],
   providers: [],
   bootstrap: [AppComponent],