diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index d797e70..3b93366 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -14,7 +14,7 @@ ID - + {{element.id}} diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index eac1c28..90f07e6 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -7,6 +7,8 @@ import { MatRow, MatTableModule } from '@angular/material/table'; 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'; @Component({ selector: 'app-dashboard', @@ -18,7 +20,7 @@ export class DashboardComponent { public links: Link[] = []; displayedColumns: string[] = ['id', 'name', 'link', 'shortLink', 'actions']; - constructor(private linkService: LinkService, private router: Router) { }; + constructor(private linkService: LinkService, private router: Router, private dialog: MatDialog) { }; copyLink(id: string) { navigator.clipboard.writeText(this.getShortLink(id)); @@ -28,10 +30,21 @@ export class DashboardComponent { return "https://" + window.location.hostname + '/' + id; } + goToLink(link: Link) { + this.dialog.open(VisitLinkConfirmationComponent, { + data: link.link, + }).afterClosed().subscribe((accepted: Boolean) => { + if (accepted) { + this.router.navigate([link.id]); + } + }); + } + ngOnInit(): void { this.linkService.getLinks().then(links => { this.links = links; }); + } createLink() { diff --git a/src/app/visit-link-confirmation/visit-link-confirmation.component.css b/src/app/visit-link-confirmation/visit-link-confirmation.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/visit-link-confirmation/visit-link-confirmation.component.html b/src/app/visit-link-confirmation/visit-link-confirmation.component.html new file mode 100644 index 0000000..6c37288 --- /dev/null +++ b/src/app/visit-link-confirmation/visit-link-confirmation.component.html @@ -0,0 +1,6 @@ +

Are you sure?

+Are you sure you would like to visit {{link}} now? + + + + diff --git a/src/app/visit-link-confirmation/visit-link-confirmation.component.spec.ts b/src/app/visit-link-confirmation/visit-link-confirmation.component.spec.ts new file mode 100644 index 0000000..609f0d1 --- /dev/null +++ b/src/app/visit-link-confirmation/visit-link-confirmation.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { VisitLinkConfirmationComponent } from './visit-link-confirmation.component'; + +describe('VisitLinkConfirmationComponent', () => { + let component: VisitLinkConfirmationComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [VisitLinkConfirmationComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(VisitLinkConfirmationComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/visit-link-confirmation/visit-link-confirmation.component.ts b/src/app/visit-link-confirmation/visit-link-confirmation.component.ts new file mode 100644 index 0000000..b0d3f1d --- /dev/null +++ b/src/app/visit-link-confirmation/visit-link-confirmation.component.ts @@ -0,0 +1,29 @@ +import { Component, inject } from '@angular/core'; +import { + MatDialog, + MAT_DIALOG_DATA, + MatDialogTitle, + MatDialogContent, + MatDialogActions, + MatDialogRef, +} from '@angular/material/dialog'; +import { MatButtonModule } from '@angular/material/button'; + +@Component({ + selector: 'app-visit-link-confirmation', + imports: [MatDialogTitle, MatDialogContent, MatDialogActions, MatButtonModule], + templateUrl: './visit-link-confirmation.component.html', + styleUrl: './visit-link-confirmation.component.css' +}) +export class VisitLinkConfirmationComponent { + public link: string = inject(MAT_DIALOG_DATA); + constructor(private dialogRef: MatDialogRef) {} + + close() { + this.dialogRef.close(false); + } + + accept() { + this.dialogRef.close(true); + } +} diff --git a/src/styles.scss b/src/styles.scss index 2b30ff0..c0e74c5 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -11,6 +11,10 @@ html { @include mat.color-variants-backwards-compatibility($theme); } +.link { + @apply underline text-blue-500 cursor-pointer; +} + html, body { height: 100%;