src/app/confirmation-modal/confirmation-modal.component.html

@@ -1,5 +1,5 @@
-<h2 mat-dialog-title>Are you sure?</h2>
+<h2 mat-dialog-title>{{data.title}}</h2>
-<mat-dialog-content>Are you sure you would like to visit {{link}} now?</mat-dialog-content>
+<mat-dialog-content>{{data.description}}</mat-dialog-content>
 <mat-dialog-actions>
   <button mat-flat-button color="warn" (click)="close()">No</button>
   <button mat-flat-button (click)="accept()">Yes</button>

src/app/confirmation-modal/confirmation-modal.component.spec.ts

@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { VisitLinkConfirmationComponent } from './visit-link-confirmation.component';
+import { ConfirmationModalComponent } from './confirmation-modal.component';
 
 describe('VisitLinkConfirmationComponent', () => {
-  let component: VisitLinkConfirmationComponent;
+  let component: ConfirmationModalComponent;
-  let fixture: ComponentFixture<VisitLinkConfirmationComponent>;
+  let fixture: ComponentFixture<ConfirmationModalComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [VisitLinkConfirmationComponent]
+      imports: [ConfirmationModalComponent]
     })
     .compileComponents();
 
-    fixture = TestBed.createComponent(VisitLinkConfirmationComponent);
+    fixture = TestBed.createComponent(ConfirmationModalComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/confirmation-modal/confirmation-modal.component.ts

@@ -8,16 +8,17 @@ import {
   MatDialogRef,
 } from '@angular/material/dialog';
 import { MatButtonModule } from '@angular/material/button';
+import { ConfirmationModalDto } from '../models/confirmation-modal';
 
 @Component({
-  selector: 'app-visit-link-confirmation',
+  selector: 'app-confirmation-modal',
   imports: [MatDialogTitle, MatDialogContent, MatDialogActions, MatButtonModule],
-  templateUrl: './visit-link-confirmation.component.html',
+  templateUrl: './confirmation-modal.component.html',
-  styleUrl: './visit-link-confirmation.component.css'
+  styleUrl: './confirmation-modal.component.css'
 })
-export class VisitLinkConfirmationComponent {
+export class ConfirmationModalComponent {
-  public link: string = inject(MAT_DIALOG_DATA);
+  public data: ConfirmationModalDto = inject(MAT_DIALOG_DATA);
-  constructor(private dialogRef: MatDialogRef<VisitLinkConfirmationComponent>) {}
+  constructor(private dialogRef: MatDialogRef<ConfirmationModalComponent>) {}
 
   close() {
     this.dialogRef.close(false);

src/app/dashboard/dashboard.component.ts

@@ -8,7 +8,7 @@ import { MatCardModule } from '@angular/material/card';
 import { Link } from '../models/link';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
-import { VisitLinkConfirmationComponent } from '../visit-link-confirmation/visit-link-confirmation.component';
+import { ConfirmationModalComponent } from '../confirmation-modal/confirmation-modal.component';
 
 @Component({
   selector: 'app-dashboard',
@@ -31,8 +31,11 @@ export class DashboardComponent {
   }
 
   goToLink(link: Link) {
-    this.dialog.open(VisitLinkConfirmationComponent, {
+    this.dialog.open(ConfirmationModalComponent, {
-      data: link.link,
+      data: {
+        title: "Are you sure?",
+        description: "Are you sure that you want to open " + link.link + " now?",
+      },
     }).afterClosed().subscribe((accepted: Boolean) => {
       if (accepted) {
         this.router.navigate([link.id]);

src/app/models/confirmation-modal.ts

@@ -0,0 +1,4 @@
+export interface ConfirmationModalDto {
+  title: string,
+  description: string,
+}