feat(#139): improve confirmation dialog

frontend/src/app/components/beer-pong-table-overview/beer-pong-table-overview.component.ts

@@ -70,7 +70,14 @@ export class BeerPongTableOverviewComponent implements OnInit {
   }
 
   async openConfirmDialog(id: number): Promise<void> {
-    if (await this.confirmationService.openConfirmationDialog('delete beer pong table')) {
+    if (
+      await this.confirmationService.openConfirmationDialog(
+        'delete beer pong table',
+        'Are you sure you want to delete this beer pong table?',
+        true,
+        'Delete',
+      )
+    ) {
       this.deleteBeerPongTable(id);
     }
   }

frontend/src/app/components/confirm-dialog/confirm-dialog.component.html

@@ -6,25 +6,22 @@
   <p>Are you sure you want to do this?</p>
 </div>
 <div mat-dialog-actions>
+  <button
+    mat-raised-button
+    data-cy="confirm-dialog-btn"
+    [color]="isDeleteDialog() ? 'warn' : 'primary'"
+    aria-label="{{ this.actionButtonText() }} button"
+    [mat-dialog-close]="true"
+    class="center-content"
+  >
+    {{ this.actionButtonText() ?? 'Confirm' }}
+  </button>
   <button
     mat-flat-button
     data-cy="cancel-dialog-btn"
-    color="warn"
     aria-label="cancel-action button"
     [mat-dialog-close]="false"
   >
     Cancel
-    <mat-icon>cancel</mat-icon>
-  </button>
-  <button
-    mat-flat-button
-    data-cy="confirm-dialog-btn"
-    color="primary"
-    aria-label="ok button"
-    [mat-dialog-close]="true"
-    class="center-content"
-  >
-    Confirm
-    <mat-icon>check</mat-icon>
   </button>
 </div>

frontend/src/app/components/confirm-dialog/confirm-dialog.component.ts

@@ -8,4 +8,6 @@ import { Component, signal } from '@angular/core';
 export class ConfirmDialogComponent {
   actionToPerform = signal<string | undefined>(undefined);
   infoNote = signal<string | undefined>(undefined);
+  actionButtonText = signal<string | undefined>(undefined);
+  isDeleteDialog = signal<boolean>(false);
 }

frontend/src/app/components/tournament-teams/tournament-teams.component.ts

@@ -105,7 +105,12 @@ export class TournamentTeamsComponent implements OnInit {
 
   async deleteTeam(team: TeamDto) {
     if (
-      (await this.deleteConfirmationService.openConfirmationDialog(`deleting ${team.name!}`)) &&
+      (await this.deleteConfirmationService.openConfirmationDialog(
+        `deleting ${team.name!}`,
+        undefined,
+        true,
+        'Delete',
+      )) &&
       this.tournamentId() !== undefined
     ) {
       this.tournamentService
@@ -129,6 +134,8 @@ export class TournamentTeamsComponent implements OnInit {
       const answer = await this.deleteConfirmationService.openConfirmationDialog(
         `check in team ${team.name}?`,
         'This action cannot be undone.',
+        false,
+        'Check In',
       );
 
       if (answer) {

frontend/src/app/components/tournament/tournament-card/tournament-card.component.ts

@@ -26,7 +26,14 @@ export class TournamentCardComponent {
   ) {}
 
   async openConfirmDialog(): Promise<void> {
-    if (await this.confirmationService.openConfirmationDialog('delete tournament')) {
+    if (
+      await this.confirmationService.openConfirmationDialog(
+        'delete tournament',
+        'Are you sure you want to delete this tournament?',
+        true,
+        'Delete',
+      )
+    ) {
       this.deleteTournament();
     }
   }

frontend/src/app/components/tournament/tournament-qualification-phase/tournament-qualification-phase.component.ts

@@ -166,6 +166,8 @@ export class TournamentQualificationPhaseComponent implements OnInit, OnDestroy
     const answer = await this.confirmService.openConfirmationDialog(
       `check in team ${team.name}?`,
       'This action cannot be undone.',
+      false,
+      'Check in',
     );
 
     if (answer) {
@@ -192,6 +194,8 @@ export class TournamentQualificationPhaseComponent implements OnInit, OnDestroy
     const answer = await this.confirmService.openConfirmationDialog(
       `mark drinks as picked up for team '${markTeamDrinksPickedUpDto.participantDto.name}?'`,
       'This action cannot be undone.',
+      false,
+      'Mark as picked up',
     );
 
     if (answer) {
@@ -239,6 +243,8 @@ export class TournamentQualificationPhaseComponent implements OnInit, OnDestroy
       const answer = await this.confirmService.openConfirmationDialog(
         `generate qualification matches?`,
         'After you generate the matches, you cannot create or delete any more teams.',
+        false,
+        'Generate',
       );
 
       if (answer) {

frontend/src/app/components/user-detail/user-detail.component.ts

@@ -51,7 +51,12 @@ export class UserDetailComponent implements OnInit {
     console.log('Delete user');
 
     if (
-      await this.confirmationService.openConfirmationDialog(`Delete '${this.details.username}'`)
+      await this.confirmationService.openConfirmationDialog(
+        `Delete '${this.details.username}'`,
+        undefined,
+        true,
+        'Delete',
+      )
     ) {
       this.userService._delete(this.details.username).subscribe({
         next: _ => {

frontend/src/app/components/user-edit-details-form/user-edit-details-form.component.html

@@ -38,13 +38,7 @@
       <mat-error>Passwords do not match!</mat-error>
     }
   </mat-form-field>
-  <button
-    data-cy="submit-button"
-    type="button"
-    (click)="_onSubmit()"
-    mat-raised-button
-    color="primary"
-  >
+  <button data-cy="submit-button" type="submit" mat-raised-button color="primary">
     {{ submitText }}
   </button>
 </form>

frontend/src/app/services/confirmation.service.ts

@@ -14,12 +14,23 @@ export class ConfirmationService {
    * @param actionToPerform The action to perform.
    * @return whether the user answersed positively or negatively
    */
-  async openConfirmationDialog(actionToPerform: string, infoNote?: string): Promise<boolean> {
+  async openConfirmationDialog(
+    actionToPerform: string,
+    infoNote?: string,
+    isDeleteAction?: boolean,
+    actionButtonText?: string,
+  ): Promise<boolean> {
     const dialogRef = this.matDialog.open(ConfirmDialogComponent, { width: '400px' });
     dialogRef.componentInstance.actionToPerform.set(actionToPerform);
     if (infoNote) {
       dialogRef.componentInstance.infoNote.set(infoNote);
     }
+    if (isDeleteAction) {
+      dialogRef.componentInstance.isDeleteDialog.set(isDeleteAction);
+    }
+    if (actionButtonText) {
+      dialogRef.componentInstance.actionButtonText.set(actionButtonText);
+    }
     return (await firstValueFrom(dialogRef.afterClosed())) === true;
   }
 }