feat(dashboard): add link confirmation dialog before navigation

src/app/dashboard/dashboard.component.html

@@ -14,7 +14,7 @@
           <ng-container matColumnDef="id">
             <th mat-header-cell *matHeaderCellDef> ID </th>
             <td mat-cell *matCellDef="let element">
-              <a href="{{element.id}}">
+              <a (click)="goToLink(element)" class="link">
                 {{element.id}}
               </a>
             </td>

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() {

src/app/visit-link-confirmation/visit-link-confirmation.component.html

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

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<VisitLinkConfirmationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [VisitLinkConfirmationComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(VisitLinkConfirmationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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<VisitLinkConfirmationComponent>) {}
+
+  close() {
+    this.dialogRef.close(false);
+  }
+
+  accept() {
+    this.dialogRef.close(true);
+  }
+}

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%;