+ajout modal confirmation suppresion

src/components/DeleteConfirmationModal/DeleteConfirmationModal.jsx

@@ -0,0 +1,20 @@
+import styles from './DeleteConfirmationModal.module.scss';
+
+const DeleteConfirmationModal = ({ isOpen, onClose, onDelete }) => {
+  if (!isOpen) return null;
+
+  return (
+    <div className={styles.modalOverlay}>
+      <div className={styles.modal}>
+        <h2>Êtes-vous sûr de vouloir supprimer ?</h2>
+        <p>Cette action est irréversible.</p>
+        <div className={styles.modalButtons}>
+          <button className={styles.cancelButton} onClick={onClose}>Annuler</button>
+          <button className={styles.deleteButton} onClick={onDelete}>Supprimer</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DeleteConfirmationModal;

src/components/DeleteConfirmationModal/DeleteConfirmationModal.module.scss

@@ -0,0 +1,62 @@
+.modalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.modal {
+  background-color: white;
+  border-radius: 0.67rem; 
+  padding: 1.67rem; 
+  box-shadow: 0 0.33rem 2.5rem rgba(0, 0, 0, 0.1); 
+  max-width: 33.33rem; 
+  width: 100%;
+  text-align: center;
+}
+
+h2 {
+  margin: 0 0 0.83rem; 
+}
+
+p {
+  margin: 0 0 1.67rem; 
+}
+
+.modalButtons {
+  display: flex;
+  justify-content: space-between;
+}
+
+.cancelButton {
+  background-color: #f0f0f0;
+  color: #333;
+  border: none;
+  padding: 0.83rem 1.25rem; 
+  border-radius: 0.42rem;
+  font-size: 1rem;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #e0e0e0;
+  }
+}
+
+.deleteButton {
+  background-color: #be3939;
+  color: white;
+  border: none;
+  padding: 0.83rem 1.25rem; 
+  border-radius: 0.42rem; 
+  font-size: 1rem;
+  cursor: pointer;
+
+  &:hover {
+    background-color: rgba(255, 59, 59, 0.76);
+  }
+}

src/pages/DashboardPage/DashboardPage.jsx

@@ -7,6 +7,7 @@ import { getUserSubdomain } from "../../service/firebase";
 import serviiApi from "../../service/api.tsx";
 import PropTypes from "prop-types";
 import styles from './DashboardPage.module.scss';
+import DeleteConfirmationModal from '../../components/DeleteConfirmationModal/DeleteConfirmationModal';
 
 const CACHE_KEY_SERVERS = 'cachedServers';
 const CACHE_KEY_TIMESTAMP = 'cacheTimestamp';
@@ -24,6 +25,9 @@ const DashboardPage = ({ user }) => {
   const [searchTerm, setSearchTerm] = useState('');
   const [newSubdomain, setNewSubdomain] = useState(' ');
   
+  const [isModalOpen, setModalOpen] = useState(false);
+  const [serverToDelete, setServerToDelete] = useState(null);
+
   const updateServersFromApi = useCallback(async () => {
     try {
       if (user?.uid) {
@@ -69,13 +73,17 @@ const DashboardPage = ({ user }) => {
     }
   };
 
-  const handleDeleteServer = async (serverName) => {
+  const handleDeleteServer = async () => {
+    if (serverToDelete) {
       try {
-      await serviiApi.serverDelete(serverName);
+        await serviiApi.serverDelete(serverToDelete);
+        setModalOpen(false);
+        setServerToDelete(null);
         updateServersFromApi(); 
       } catch (error) {
         console.error('Error deleting server:', error);
       }
+    }
   };
 
   const handleCopyAddress = () => {
@@ -187,7 +195,10 @@ const DashboardPage = ({ user }) => {
                 countPlayers={favoriteServer.onlinePlayers}
                 onRunClick={() => handleRunServer(favoriteServer.name)}
                 onStopClick={() => handleStopServer(favoriteServer.name)}
-                  onDeleteClick={() => handleDeleteServer(favoriteServer.name)}
+                onDeleteClick={() => {
+                  setServerToDelete(favoriteServer.name);
+                  setModalOpen(true);
+                }}
                 subdomain={subdomain}
                 favoriteServer={true}
               />
@@ -210,13 +221,22 @@ const DashboardPage = ({ user }) => {
                 countPlayers={server.onlinePlayers}
                 onRunClick={() => handleRunServer(server.name)}
                 onStopClick={() => handleStopServer(server.name)}
-                  onDeleteClick={() => handleDeleteServer(server.name)}
+                onDeleteClick={() => {
+                  setServerToDelete(server.name);
+                  setModalOpen(true);
+                }}
                 subdomain={subdomain}
               />
             ))
           ) : null}
         </div>
       </div>
+
+      <DeleteConfirmationModal
+        isOpen={isModalOpen}
+        onClose={() => setModalOpen(false)}
+        onDelete={handleDeleteServer}
+      />
     </div>
   );
 };