From d54ce71f028625acecaf4420220c6d5704d4ca5a Mon Sep 17 00:00:00 2001
From: NicolasCantu <nicolas.cantu@pm.me>
Date: Wed, 19 Mar 2025 16:22:44 +0100
Subject: [PATCH] delete device mocked ok

---
 public/style/account.css     | 49 +++++++++++++++++++++++++-----------
 src/pages/account/account.ts | 46 +++++++++++++++++++++++++++------
 2 files changed, 74 insertions(+), 21 deletions(-)

diff --git a/public/style/account.css b/public/style/account.css
index ff51fe6..09fe0c6 100755
--- a/public/style/account.css
+++ b/public/style/account.css
@@ -427,24 +427,43 @@ body {
 
 /* Style pour la modal de confirmation */
 .confirm-delete-modal {
-    display: none;
     position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background: white;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.confirm-delete-content {
+    background-color: white;
     padding: 20px;
     border-radius: 8px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    z-index: 1100;
+    max-width: 400px;
+    width: 90%;
     text-align: center;
 }
 
+.confirm-delete-content h3 {
+    margin-top: 0;
+    color: #333;
+}
+
+.confirm-delete-content p {
+    margin: 15px 0;
+    color: #666;
+}
+
 .confirm-delete-buttons {
-    margin-top: 20px;
     display: flex;
     justify-content: center;
     gap: 10px;
+    margin-top: 20px;
 }
 
 .confirm-delete-buttons button {
@@ -452,25 +471,27 @@ body {
     border: none;
     border-radius: 4px;
     cursor: pointer;
+    transition: background-color 0.3s;
 }
 
-.confirm-btn {
+.confirm-delete-buttons .confirm-btn {
     background-color: #dc3545;
     color: white;
 }
 
-.cancel-btn {
+.confirm-delete-buttons .confirm-btn:hover {
+    background-color: #c82333;
+}
+
+.confirm-delete-buttons .cancel-btn {
     background-color: #6c757d;
     color: white;
 }
 
-.delete-account-section {
-    border-top: 1px solid #eee;
-    padding-top: 15px;
-    margin-top: 15px;
+.confirm-delete-buttons .cancel-btn:hover {
+    background-color: #5a6268;
 }
 
-
 /*-------------------------------------- Export--------------------------------------*/
 .export-section {
     margin: 20px 0;
diff --git a/src/pages/account/account.ts b/src/pages/account/account.ts
index aac41e4..1ba3a89 100755
--- a/src/pages/account/account.ts
+++ b/src/pages/account/account.ts
@@ -686,21 +686,53 @@ private deleteRowPairing(button: HTMLButtonElement): void {
         return;
     }
 
-    const index = Array.from(table.children).indexOf(row);
-    row.style.transition = 'opacity 0.3s, transform 0.3s';
-    row.style.opacity = '0';
-    row.style.transform = 'translateX(-100%)';
+    // Créer la modal de confirmation
+    const modal = document.createElement('div');
+    modal.className = 'confirm-delete-modal';
+    modal.innerHTML = `
+        <div class="confirm-delete-content">
+            <h3>Confirm Deletion</h3>
+            <p>Are you sure you want to delete this device?</p>
+            <div class="confirm-delete-buttons">
+                <button class="cancel-btn">Cancel</button>
+                <button class="confirm-btn">Delete</button>
+            </div>
+        </div>
+    `;
 
-    setTimeout(() => {
-        row.remove();
+    this.shadowRoot?.appendChild(modal);
 
+    // Gérer les boutons de la modal
+    const confirmBtn = modal.querySelector('.confirm-btn');
+    const cancelBtn = modal.querySelector('.cancel-btn');
+
+    confirmBtn?.addEventListener('click', () => {
+        // Calculer l'index AVANT de supprimer la ligne du DOM
+        const index = Array.from(table.children).indexOf(row);
         const storageKey = STORAGE_KEYS[currentMode];
         const rows = JSON.parse(localStorage.getItem(storageKey) || '[]');
+        
+        // Supprimer du localStorage
         if (index > -1) {
             rows.splice(index, 1);
             localStorage.setItem(storageKey, JSON.stringify(rows));
         }
-    }, 300);
+
+        // Animation et suppression du DOM
+        row.style.transition = 'opacity 0.3s, transform 0.3s';
+        row.style.opacity = '0';
+        row.style.transform = 'translateX(-100%)';
+
+        setTimeout(() => {
+            row.remove();
+        }, 300);
+
+        modal.remove();
+    });
+
+    cancelBtn?.addEventListener('click', () => {
+        modal.remove();
+    });
 }
 
 private editDeviceName(cell: HTMLTableCellElement): void {