Edit link visibility based on ownership

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

@@ -36,8 +36,9 @@ import { ViewEventPageComponent } from './pages/view-event-page/view-event-page.
 import { UiLibraryModule } from './ui-library.module';
 import { DistancePipe } from './tracks/distance.pipe';
 import { ElevationPipe } from './tracks/elevation.pipe';
-import { RegistrationStatePipe } from './events/registration-state.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';
 
 @NgModule({
 	declarations: [
@@ -62,7 +63,8 @@ import { EventListItemComponent } from './events/event-list-item/event-list-item
 		DistancePipe,
 		ElevationPipe,
 		RegistrationStatePipe,
-  EventListItemComponent,
+		EventListItemComponent,
+		IsOwnerPipe,
 	],
 	imports: [
 		BrowserModule,

src/RunnersMeet.Client/src/app/events/event-list-item/event-list-item.component.html

@@ -11,7 +11,7 @@
 	<ng-template pTemplate="footer">
 		<div class="button-group">
 			<a pButton class="p-button-secondary" [routerLink]="['/events/view', groupEvent?.eventId]">View</a>
-			<a pButton class="p-button-secondary" [routerLink]="['/events/edit', groupEvent?.eventId]">Edit</a>
+			<a *ngIf="groupEvent?.owner?.userId | isOwner" pButton class="p-button-secondary" [routerLink]="['/events/edit', groupEvent?.eventId]">Edit</a>
 		</div>
 	</ng-template>
 </p-card>

src/RunnersMeet.Client/src/app/events/event-view/event-view.component.ts

@@ -2,9 +2,8 @@ import { Component, Input } from '@angular/core';
 import { EventsApiService } from 'src/app/events-api.service';
 import { GroupEvent } from '../group-event';
 import { RegistrationState, RegistrationStateItems } from '../registration-state';
-import { Registration } from '../registration';
-import { AuthService } from '@auth0/auth0-angular';
 import { combineLatest, take } from 'rxjs';
+import { PermissionService } from 'src/app/users/permission.service';
 
 interface RegistrationModel {
 	readonly name: string;
@@ -30,7 +29,7 @@ export class EventViewComponent {
 	public currentState = RegistrationState.Unknown;
 
 	public constructor(
-		private readonly authService: AuthService,
+		private readonly permissionService: PermissionService,
 		private readonly eventsApi: EventsApiService
 	) { }
 
@@ -38,10 +37,10 @@ export class EventViewComponent {
 		this.eventsApi.getEvent(this.eventId).then(event => {
 			this.event = event;
 		});
-		combineLatest([this.authService.user$, this.eventsApi.getRegistrations(this.eventId)])
+		combineLatest([this.permissionService.userProfile, this.eventsApi.getRegistrations(this.eventId)])
 			.pipe(take(1))
-			.subscribe(([user, registrations]) => {
-				const currentRegistrationIndex = registrations.findIndex(r => r.owner?.userId === user?.sub);
+			.subscribe(([userProfile, registrations]) => {
+				const currentRegistrationIndex = registrations.findIndex(r => r.owner?.userId === userProfile?.userId);
 
 				this.currentState = (currentRegistrationIndex >= 0 ? registrations.splice(currentRegistrationIndex, 1)[0] : null)?.status ?? RegistrationState.Unknown;
 				this.registrations = registrations

src/RunnersMeet.Client/src/app/events/registration-state.pipe.ts

@@ -2,10 +2,10 @@ import { Pipe, PipeTransform } from '@angular/core';
 import { RegistrationState, RegistrationStateItems } from './registration-state';
 
 @Pipe({
-  name: 'stateDisplay'
+	name: 'stateDisplay'
 })
 export class RegistrationStatePipe implements PipeTransform {
-  transform(value: RegistrationState | undefined): string {
-    return RegistrationStateItems.find(item => item.value === value)?.label ?? '';
-  }
+	public transform(value: RegistrationState | undefined): string {
+		return RegistrationStateItems.find(item => item.value === value)?.label ?? '';
+	}
 }

src/RunnersMeet.Client/src/app/tracks/distance.pipe.ts

@@ -1,10 +1,10 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
-  name: 'distance'
+	name: 'distance'
 })
 export class DistancePipe implements PipeTransform {
-  transform(value: number | undefined): string {
-    return ((value ?? 0) / 1000).toFixed(1) + ' km';
-  }
+	public transform(value: number | undefined): string {
+		return ((value ?? 0) / 1000).toFixed(1) + ' km';
+	}
 }

src/RunnersMeet.Client/src/app/tracks/elevation.pipe.ts

@@ -1,12 +1,10 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
-  name: 'elevation'
+	name: 'elevation'
 })
 export class ElevationPipe implements PipeTransform {
-
-  transform(value: number | undefined, direction: 'up' | 'down' | undefined): unknown {
-    return (value ?? 0).toFixed(0) + ' m';
-  }
-
+	public transform(value: number | undefined, direction: 'up' | 'down' | undefined): unknown {
+		return (value ?? 0).toFixed(0) + ' m';
+	}
 }

src/RunnersMeet.Client/src/app/tracks/track-list-item/track-list-item.component.html

@@ -11,7 +11,7 @@
 	<ng-template pTemplate="footer">
 		<div class="button-group">
 			<a pButton class="p-button-secondary" [routerLink]="['/tracks/view', track?.trackId]">View</a>
-			<a pButton class="p-button-secondary" [routerLink]="['/tracks/edit', track?.trackId]">Edit</a>
+			<a *ngIf="track?.owner?.userId | isOwner" pButton class="p-button-secondary" [routerLink]="['/tracks/edit', track?.trackId]">Edit</a>
 			<a pButton class="p-button-secondary" [href]="downloadUrl" target="_blank">Download</a>
 		</div>
 	</ng-template>

src/RunnersMeet.Client/src/app/users/is-owner.pipe.ts

@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { PermissionService } from './permission.service';
+
+@Pipe({
+	name: 'isOwner'
+})
+export class IsOwnerPipe implements PipeTransform {
+	public constructor(private readonly permissionService: PermissionService) {
+	}
+
+	public transform(userId: string | undefined): boolean {
+		return userId === this.permissionService.userId;
+	}
+}

src/RunnersMeet.Client/src/app/users/permission.service.ts

@@ -1,6 +1,6 @@
 import { Injectable } from "@angular/core";
 import { AuthService, User } from "@auth0/auth0-angular";
-import { BehaviorSubject, firstValueFrom, Subject } from "rxjs";
+import { firstValueFrom } from "rxjs";
 import { UserProfile } from "./user-profile";
 import { UserState } from "./user-state";
 import { UsersApiService } from "./users-api.service";
@@ -10,6 +10,11 @@ import { UserValidationResult } from "./validate-user-result";
 export class PermissionService {
 
 	private readonly _validationResult: Promise<UserValidationResult | null>;
+	private _userId: string = '';
+
+	public get userId(): string {
+		return this._userId;
+	}
 
 	public get user(): Promise<User | null> {
 		return this._validationResult.then(r => r?.user ?? null);
@@ -33,6 +38,7 @@ export class PermissionService {
 					}
 				})
 				.then(result => {
+					this._userId = result?.userProfile.userId ?? '';
 					resolve(result);
 				});
 		});