diff --git a/src/app/visit-link-confirmation/visit-link-confirmation.component.css b/src/app/confirmation-modal/confirmation-modal.component.css similarity index 100% rename from src/app/visit-link-confirmation/visit-link-confirmation.component.css rename to src/app/confirmation-modal/confirmation-modal.component.css diff --git a/src/app/visit-link-confirmation/visit-link-confirmation.component.html b/src/app/confirmation-modal/confirmation-modal.component.html similarity index 56% rename from src/app/visit-link-confirmation/visit-link-confirmation.component.html rename to src/app/confirmation-modal/confirmation-modal.component.html index 6c37288..2bc7aed 100644 --- a/src/app/visit-link-confirmation/visit-link-confirmation.component.html +++ b/src/app/confirmation-modal/confirmation-modal.component.html @@ -1,5 +1,5 @@ -

Are you sure?

-Are you sure you would like to visit {{link}} now? +

{{data.title}}

+{{data.description}} diff --git a/src/app/visit-link-confirmation/visit-link-confirmation.component.spec.ts b/src/app/confirmation-modal/confirmation-modal.component.spec.ts similarity index 54% rename from src/app/visit-link-confirmation/visit-link-confirmation.component.spec.ts rename to src/app/confirmation-modal/confirmation-modal.component.spec.ts index 609f0d1..709b427 100644 --- a/src/app/visit-link-confirmation/visit-link-confirmation.component.spec.ts +++ b/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 fixture: ComponentFixture; + let component: ConfirmationModalComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [VisitLinkConfirmationComponent] + imports: [ConfirmationModalComponent] }) .compileComponents(); - fixture = TestBed.createComponent(VisitLinkConfirmationComponent); + fixture = TestBed.createComponent(ConfirmationModalComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/visit-link-confirmation/visit-link-confirmation.component.ts b/src/app/confirmation-modal/confirmation-modal.component.ts similarity index 54% rename from src/app/visit-link-confirmation/visit-link-confirmation.component.ts rename to src/app/confirmation-modal/confirmation-modal.component.ts index b0d3f1d..d442365 100644 --- a/src/app/visit-link-confirmation/visit-link-confirmation.component.ts +++ b/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', - styleUrl: './visit-link-confirmation.component.css' + templateUrl: './confirmation-modal.component.html', + styleUrl: './confirmation-modal.component.css' }) -export class VisitLinkConfirmationComponent { - public link: string = inject(MAT_DIALOG_DATA); - constructor(private dialogRef: MatDialogRef) {} +export class ConfirmationModalComponent { + public data: ConfirmationModalDto = inject(MAT_DIALOG_DATA); + constructor(private dialogRef: MatDialogRef) {} close() { this.dialogRef.close(false); diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index 90f07e6..1b0989d 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/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, { - data: link.link, + this.dialog.open(ConfirmationModalComponent, { + 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]); diff --git a/src/app/models/confirmation-modal.ts b/src/app/models/confirmation-modal.ts new file mode 100644 index 0000000..790e236 --- /dev/null +++ b/src/app/models/confirmation-modal.ts @@ -0,0 +1,4 @@ +export interface ConfirmationModalDto { + title: string, + description: string, +}