Replace browser confirmations with confirmation dialog

frontend/src/app/components/confirmation-dialog/confirmation-dialog.css

@@ -0,0 +1,23 @@
+:host {
+  display: block;
+}
+
+.confirmation-dialog h2 {
+  margin-bottom: 8px;
+  color: var(--text);
+  font-size: 1.25rem;
+  letter-spacing: -0.025em;
+}
+
+.confirmation-dialog p {
+  margin: 0;
+  color: var(--text-muted);
+  line-height: 1.55;
+}
+
+.confirmation-dialog .confirm-action.mat-mdc-unelevated-button {
+  --mdc-filled-button-container-color: var(--danger);
+  --mdc-filled-button-label-text-color: var(--accent-contrast);
+  border-radius: 12px;
+  font-weight: 700;
+}

frontend/src/app/components/confirmation-dialog/confirmation-dialog.html

@@ -0,0 +1,12 @@
+<div class="confirmation-dialog">
+  <h2 mat-dialog-title>{{ data.title }}</h2>
+  <mat-dialog-content>
+    <p>{{ data.message }}</p>
+  </mat-dialog-content>
+  <mat-dialog-actions align="end">
+    <button mat-button type="button" (click)="cancel()">Annuler</button>
+    <button mat-flat-button type="button" class="confirm-action" (click)="accept()">
+      {{ data.confirmLabel }}
+    </button>
+  </mat-dialog-actions>
+</div>

frontend/src/app/components/confirmation-dialog/confirmation-dialog.spec.ts

@@ -0,0 +1,44 @@
+import { TestBed } from '@angular/core/testing';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { ConfirmationDialog, ConfirmationDialogData } from './confirmation-dialog';
+
+describe('ConfirmationDialog', () => {
+  const data: ConfirmationDialogData = {
+    title: 'Supprimer cet appartement ?',
+    message: 'Êtes-vous sûr de vouloir supprimer cet appartement ?',
+    confirmLabel: 'Supprimer',
+  };
+  const dialogRef = { close: vi.fn() };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    TestBed.configureTestingModule({
+      providers: [
+        { provide: MAT_DIALOG_DATA, useValue: data },
+        { provide: MatDialogRef, useValue: dialogRef },
+      ],
+    });
+  });
+
+  it('shows the destructive action and lets the user cancel', () => {
+    const fixture = TestBed.createComponent(ConfirmationDialog);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.querySelector('[mat-dialog-title]').textContent).toContain(
+      data.title,
+    );
+    expect(fixture.nativeElement.textContent).toContain(data.message);
+    expect(fixture.nativeElement.textContent).toContain(data.confirmLabel);
+
+    fixture.nativeElement.querySelector('button:first-of-type').click();
+    expect(dialogRef.close).toHaveBeenCalledWith(false);
+  });
+
+  it('returns true when the destructive action is selected', () => {
+    const fixture = TestBed.createComponent(ConfirmationDialog);
+    fixture.detectChanges();
+
+    fixture.nativeElement.querySelector('.confirm-action').click();
+    expect(dialogRef.close).toHaveBeenCalledWith(true);
+  });
+});

frontend/src/app/components/confirmation-dialog/confirmation-dialog.ts

@@ -0,0 +1,28 @@
+import { Component, inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
+import { MatButtonModule } from '@angular/material/button';
+
+export interface ConfirmationDialogData {
+  title: string;
+  message: string;
+  confirmLabel: string;
+}
+
+@Component({
+  selector: 'app-confirmation-dialog',
+  imports: [MatButtonModule, MatDialogModule],
+  templateUrl: './confirmation-dialog.html',
+  styleUrl: './confirmation-dialog.css',
+})
+export class ConfirmationDialog {
+  readonly data = inject<ConfirmationDialogData>(MAT_DIALOG_DATA);
+  private readonly dialogRef = inject(MatDialogRef<ConfirmationDialog>);
+
+  cancel(): void {
+    this.dialogRef.close(false);
+  }
+
+  accept(): void {
+    this.dialogRef.close(true);
+  }
+}