show delete button only to user that uploaded the image

src/app/common/image-full/image-full.component.html

@@ -1,7 +1,7 @@
 <div class="full-container">
   <div class="buttons-row">
     <!-- add check if the user is the author or an admin, else hide the button -->
-    <button mat-icon-button (click)="onDeleteClick()">
+    <button mat-icon-button (click)="onDeleteClick()" *ngIf="currentUser && image.user && currentUser.id === image.user.id">
       <mat-icon>delete</mat-icon>
     </button>
     <button mat-icon-button (click)="onCloseClick()">

src/app/common/image-full/image-full.component.ts

@@ -1,40 +1,50 @@
-import { Component, HostListener, Inject } from '@angular/core';
+import { Component, HostListener, Inject, OnInit } from '@angular/core';
 import {
   MatDialog,
   MatDialogRef,
   MAT_DIALOG_DATA,
 } from '@angular/material/dialog';
 import { MatSnackBar } from '@angular/material/snack-bar';
+import { take } from 'rxjs';
+import { AuthService } from 'src/app/auth/auth.service';
 import { ConfirmationDialogComponent } from 'src/app/shared/components/confirmation-dialog/confirmation-dialog.component';
 import { environment } from 'src/environments/environment';
-import { DeleteImageGQL, Image } from 'src/generated/graphql';
+import { DeleteImageGQL, Image, User } from 'src/generated/graphql';
 
 @Component({
   selector: 'app-image-full',
   templateUrl: './image-full.component.html',
   styleUrls: ['./image-full.component.scss'],
 })
-export class ImageFullComponent {
+export class ImageFullComponent implements OnInit {
   storageUrl = environment.storageUrl;
 
   images: Image[];
 
   currentImageIndex: number;
   image: Image;
+  currentUser: User;
 
   constructor(
     public dialogRef: MatDialogRef<ImageFullComponent>,
     @Inject(MAT_DIALOG_DATA)
     public data: { images: Image[]; currentImageIndex: number },
     private deleteImageGQL: DeleteImageGQL,
     private snackBar: MatSnackBar,
-    private dialog: MatDialog
+    private dialog: MatDialog,
+    private authService: AuthService
   ) {
     this.images = this.data.images;
     this.currentImageIndex = this.data.currentImageIndex;
     this.image = this.images[this.currentImageIndex];
   }
 
+  ngOnInit() {
+    this.authService.currentUser
+      .pipe(take(1))
+      .subscribe((user) => (this.currentUser = user));
+  }
+
   /**
    * Generate renderSizes parameter here, to make it more readable
    * Image is alway rendered 'by width' by the browser.

src/app/pages/crag/crag-by-slug.query.graphql

@@ -92,6 +92,9 @@ query CragBySlug($crag: String!) {
       aspectRatio
       maxIntrinsicWidth
       author
+      user {
+        id
+      }
     }
     user {
       id

src/app/pages/route/route.query.graphql

@@ -65,6 +65,9 @@ query RouteBySlug($cragSlug: String!, $routeSlug: String!) {
       aspectRatio
       maxIntrinsicWidth
       author
+      user {
+        id
+      }
     }
     sector {
       id