Global debug configuration

src/RunnersMeet.Client/src/app/app-routing.module.ts

@@ -8,12 +8,18 @@ import { HomePageComponent } from './pages/home-page/home-page.component';
 import { TracksPageComponent } from './pages/tracks-page/tracks-page.component';
 import { ViewEventPageComponent } from './pages/view-event-page/view-event-page.component';
 import { ViewTrackPageComponent } from './pages/view-track-page/view-track-page.component';
+import { ProfilePageComponent } from './pages/profile-page/profile-page.component';
 
 const routes: Routes = [
 	{
 		path: '',
 		component: HomePageComponent,
 	},
+	{
+		path: 'profile',
+		component: ProfilePageComponent,
+		canActivate: [AuthGuard],
+	},
 	{
 		path: 'tracks',
 		component: TracksPageComponent,

src/RunnersMeet.Client/src/app/app.module.ts

@@ -38,8 +38,10 @@ import { DistancePipe } from './tracks/distance.pipe';
 import { ElevationPipe } from './tracks/elevation.pipe';
 import { RegistrationStatePipe } from './events/registration-state.pipe';
 import { EventListItemComponent } from './events/event-list-item/event-list-item.component';
-import { IsOwnerPipe } from './users/is-owner.pipe';
+import { IsOwnerPipe } from './users/is-owner.pipe';
 import { MapComponent } from './tracks/map/map.component';
+import { ProfilePageComponent } from './pages/profile-page/profile-page.component';
+import { IsDebugPipe } from './is-debug.pipe';
 
 @NgModule({
 	declarations: [
@@ -66,7 +68,9 @@ import { MapComponent } from './tracks/map/map.component';
 		RegistrationStatePipe,
 		EventListItemComponent,
 		IsOwnerPipe,
-  MapComponent,
+		MapComponent,
+		ProfilePageComponent,
+		IsDebugPipe
 	],
 	imports: [
 		BrowserModule,

src/RunnersMeet.Client/src/app/config.service.ts

@@ -9,6 +9,10 @@ export class ConfigService {
 		return this.config!.apiUri;
 	}
 
+	public get isDebug(): boolean {
+		return this.config!.debug;
+	}
+
 	public initialize(config: AppConfig): void {
 		this.config = config;
 
@@ -19,6 +23,14 @@ export class ConfigService {
 				`${this.config.apiUri}/*`
 			],
 		}
+
+		if (/debug=true/.test(window.location.search)) {
+			this.config.debug = true;
+		}
+
+		(window as any)['toggleDebug'] = (isDebug: boolean) => {
+			this.config!.debug = isDebug;
+		}
 	}
 
 	public auth0Config(): AuthConfig {
@@ -33,4 +45,5 @@ export class ConfigService {
 export interface AppConfig {
 	auth: AuthConfig;
 	apiUri: string;
+	debug: boolean;
 }

src/RunnersMeet.Client/src/app/is-debug.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { ConfigService } from './config.service';
+
+@Pipe({
+	name: 'isDebug'
+})
+export class IsDebugPipe implements PipeTransform {
+	public constructor(private readonly configService: ConfigService) {
+	}
+
+	public transform(input: boolean): boolean {
+		return input === this.configService.isDebug;
+	}
+}

src/RunnersMeet.Client/src/app/pages/profile-page/profile-page.component.html

@@ -0,0 +1,14 @@
+<div *ngIf="true | isDebug">
+	<dl>
+		<dt>isLoading</dt>
+		<dd>{{ authService.isLoading$ | async | json }}</dd>
+		<dt>isAuthenticated</dt>
+		<dd>{{ authService.isAuthenticated$ | async | json }}</dd>
+		<dt>user</dt>
+		<dd><pre><code>{{ authService.user$ | async | json }}</code></pre></dd>
+		<dt>User Display Name</dt>
+		<dd>{{ (authService.user$ | async)?.nickname }}</dd>
+		<dt>User ID</dt>
+		<dd>{{ (authService.user$ | async)?.sub }}</dd>
+	</dl>
+</div>

src/RunnersMeet.Client/src/app/pages/profile-page/profile-page.component.spec.ts

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

src/RunnersMeet.Client/src/app/pages/profile-page/profile-page.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import { AuthService } from '@auth0/auth0-angular';
+
+@Component({
+  selector: 'app-profile-page',
+  templateUrl: './profile-page.component.html',
+  styleUrls: ['./profile-page.component.scss']
+})
+export class ProfilePageComponent {
+	public constructor(
+		public readonly authService: AuthService
+	) {
+	}
+}

src/RunnersMeet.Client/src/app/shell/main-menu/main-menu.component.ts

@@ -1,6 +1,8 @@
 import { Component } from '@angular/core';
 import { AuthService } from '@auth0/auth0-angular';
 import { MenuItem } from 'primeng/api';
+import { ConfigService } from 'src/app/config.service';
+import { PermissionService } from 'src/app/users/permission.service';
 
 @Component({
 	selector: 'app-main-menu',
@@ -12,6 +14,8 @@ export class MainMenuComponent {
 
 	constructor(
 		private readonly authService: AuthService,
+		private readonly permissionService: PermissionService,
+		private readonly configService: ConfigService
 	) {
 		this.menuItems = [
 			{
@@ -43,12 +47,24 @@ export class MainMenuComponent {
 						routerLink: ['/events/edit/new']
 					}
 				],
-			},
-			{
-				label: 'Logout',
-				command: () => this.logout()
 			}
 		];
+
+		this.permissionService.userProfile.then(profile => {
+			this.menuItems = this.menuItems.concat([{
+				label: 'My Profile',
+				items: [
+					{
+						label: 'Details',
+						routerLink: ['/profile']
+					},
+					{
+						label: 'Logout',
+						command: () => this.logout()
+					}
+				]
+			}]);
+		});
 	}
 
 	public logout(): void {

src/RunnersMeet.Client/src/assets/app.config.json

@@ -6,5 +6,6 @@
 		"appUri": "http://localhost:4200",
 		"errorPath": "/error"
 	},
-	"apiUri": "https://localhost:7247"
+	"apiUri": "https://localhost:7247",
+	"debug": false
 }