add ability to delete images

frontend/src/app/routes/images/images.component.html

@@ -1,8 +1,8 @@
 <mat-progress-spinner *ngIf="images === null"></mat-progress-spinner>
 
-<h3 *ngIf="images !== null && images.length <= 0">
+<h2 class="text-center" *ngIf="images !== null && images.length <= 0">
   There are no images to display
-</h3>
+</h2>
 
 <ng-container *ngIf="images !== null && images.length > 0">
   <masonry [columns]="columns">

frontend/src/app/routes/images/images.component.ts

@@ -4,12 +4,14 @@ import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
 import { SupportedMime } from 'picsur-shared/dist/dto/mimes.dto';
 import { EImage } from 'picsur-shared/dist/entities/image.entity';
 import { HasFailed } from 'picsur-shared/dist/types/failable';
+import { SnackBarType } from 'src/app/models/dto/snack-bar-type.dto';
 import { ImageService } from 'src/app/services/api/image.service';
 import { Logger } from 'src/app/services/logger/logger.service';
 import {
   BootstrapService,
   BSScreenSize
 } from 'src/app/util/util-module/bootstrap.service';
+import { UtilService } from 'src/app/util/util-module/util.service';
 
 @Component({
   templateUrl: './images.component.html',
@@ -28,6 +30,7 @@ export class ImagesComponent implements OnInit {
     private readonly route: ActivatedRoute,
     private readonly router: Router,
     private readonly bootstrapService: BootstrapService,
+    private readonly utilService: UtilService,
     private readonly imageService: ImageService
   ) {}
 
@@ -76,8 +79,36 @@ export class ImagesComponent implements OnInit {
     this.router.navigate(['/view', image.id]);
   }
 
-  deleteImage(image: EImage) {
-    this.images = this.images?.filter((i) => i.id !== image.id) ?? null;
+  async deleteImage(image: EImage) {
+    const pressedButton = await this.utilService.showDialog({
+      title: `Are you sure you want to delete the image?`,
+      description: 'This action cannot be undone.',
+      buttons: [
+        {
+          color: 'primary',
+          name: 'cancel',
+          text: 'Cancel',
+        },
+        {
+          color: 'red',
+          name: 'delete',
+          text: 'Delete',
+        },
+      ],
+    });
+
+    if (pressedButton === 'delete') {
+      const result = await this.imageService.DeleteImage(image.id ?? '');
+      if (HasFailed(result)) {
+        this.utilService.showSnackBar(
+          'Failed to delete image',
+          SnackBarType.Error
+        );
+      } else {
+        this.utilService.showSnackBar('Image deleted', SnackBarType.Success);
+        this.images = this.images?.filter((i) => i.id !== image.id) ?? null;
+      }
+    }
   }
 
   gotoPage(page: number) {

frontend/src/app/routes/settings/roles/settings-roles.component.ts

@@ -65,16 +65,16 @@ export class SettingsRolesComponent implements OnInit, AfterViewInit {
       title: `Are you sure you want to delete ${role.name}?`,
       description: 'This action cannot be undone.',
       buttons: [
-        {
-          color: 'red',
-          name: 'delete',
-          text: 'Delete',
-        },
         {
           color: 'primary',
           name: 'cancel',
           text: 'Cancel',
         },
+        {
+          color: 'red',
+          name: 'delete',
+          text: 'Delete',
+        },
       ],
     });
 

frontend/src/app/routes/settings/users/settings-users.component.ts

@@ -63,16 +63,16 @@ export class SettingsUsersComponent implements OnInit {
       title: `Are you sure you want to delete ${user.username}?`,
       description: 'This action cannot be undone.',
       buttons: [
-        {
-          color: 'red',
-          name: 'delete',
-          text: 'Delete',
-        },
         {
           color: 'primary',
           name: 'cancel',
           text: 'Cancel',
         },
+        {
+          color: 'red',
+          name: 'delete',
+          text: 'Delete',
+        },
       ],
     });
 

frontend/src/scss/personal.scss

@@ -20,6 +20,10 @@
   width: 100%;
 }
 
+.text-center {
+  text-align: center;
+}
+
 // Unstyled links
 .link-unstyled {
   &,