fix: add a verification before deleting a user or an ESP (#235)

* fix: add a verification before deleting a user or an ESP * fix: hide popover if click on NON Closes: #230
museebolo · Jan 27, 2025 · f92bb33 · f92bb33
1 parent 2d7a6da
commit f92bb33
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 33 deletions.
diff --git a/Dockerfile/Nginx.Dockerfile b/Dockerfile/Nginx.Dockerfile
@@ -9,5 +9,5 @@ RUN sed -i '/location \/adminer\//,/}/d' /etc/nginx/conf.d/default.conf
 COPY ../php/public /var/www/memoires-info/php/public
 
 # copy the nginx certificats
-COPY      ../climateguardian_dev.com.pem /etc/nginx
-COPY      ../climateguardian_dev.com-key.pem /etc/nginx
+COPY      ../climateguardian_dev.com.pem /etc/nginx/climateguardian_dev.com.pem
+COPY      ../climateguardian_dev.com-key.pem /etc/nginx/climateguardian_dev.com-key.pem
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -77,6 +77,8 @@ services:
       - "./nextjs-interface:/var/www/memoires-info/html/"
 
   web:
+    build:
+      dockerfile: Dockerfile/Nginx.Dockerfile
     image: nginx:1.26-alpine-otel
     ports:
       - "80:80"
@@ -86,8 +88,8 @@ services:
       - "./nginx.conf:/etc/nginx/conf.d/default.conf"
       - "./php:/var/www/memoires-info/php/"
         # Nginx certificats
-      - "./climateguardian_dev.com.pem:/etc/nginx"
-      - "./climateguardian_dev.com-key.pem:/etc/nginx"
+      - "./climateguardian_dev.com.pem:/etc/nginx/climateguardian_dev.com.pem"
+      - "./climateguardian_dev.com-key.pem:/etc/nginx/climateguardian_dev.com-key.pem"
     depends_on:
       - php
       - postg-rest

diff --git a/nextjs-interface/src/app/dashboard/users/page.tsx b/nextjs-interface/src/app/dashboard/users/page.tsx
@@ -12,6 +12,7 @@ import {
 } from "@/components/ui/card";
 import { getToken, user } from "@/lib/context";
 import EditUsersData from "@/app/ui/dashboard/EditUsersData";
+import DeleteUsersData from "@/app/ui/dashboard/DeleteUsersData";
 
 export default function Page() {
   const [users, setUsers] = useState<user[]>([]);
@@ -23,34 +24,16 @@ export default function Page() {
     }
   }, [allUsers]);
 
+  const handleUserDelete = (username: string) => {
+    setUsers((prevUsers) =>
+      prevUsers.filter((user) => user.username !== username),
+    );
+  };
+
   if (!allUsers) {
     return <div>Chargement...</div>;
   }
 
-  // Fonction de suppression d'un utilisateur
-  const handleDelete = async (username: string) => {
-    try {
-      const response = await fetch(`/postgrest/users?username=eq.${username}`, {
-        method: "DELETE",
-        headers: {
-          "Content-Type": "application/json",
-          Authorization: `Bearer ${getToken()}`,
-        },
-      });
-
-      if (!response.ok) {
-        console.error("Erreur à la suppression de l'utilisateur");
-        console.error(await response.json());
-        return;
-      }
-
-      // Remove user from local state after successful deletion
-      setUsers(users.filter((user) => user.username !== username));
-    } catch (error) {
-      console.error("Error:", error);
-    }
-  };
-
   return (
     <>
       <Card>
@@ -74,9 +57,9 @@ export default function Page() {
                   password={user.password}
                 />
 
-                <Trash2
-                  className="delete-icon cursor-pointer"
-                  onClick={() => handleDelete(user.username)}
+                <DeleteUsersData
+                  username={user.username}
+                  onDelete={handleUserDelete}
                 />
               </div>
             </div>

diff --git a/nextjs-interface/src/app/ui/dashboard/AddUserElement.tsx b/nextjs-interface/src/app/ui/dashboard/AddUserElement.tsx
@@ -44,7 +44,7 @@ export function AddUserElement({
         setUsername("");
         setPassword("");
       } else {
-        setMessage("Erreur à l'ajout 'un utilisateur. Veuillez réessayer.");
+        setMessage("Erreur à l'ajout de l'utilisateur. Veuillez réessayer.");
       }
     } catch (error: any) {
       setMessage("Error: " + error.message);

diff --git a/nextjs-interface/src/app/ui/dashboard/DeleteEsp.tsx b/nextjs-interface/src/app/ui/dashboard/DeleteEsp.tsx
@@ -1,7 +1,25 @@
 import { Trash2 } from "lucide-react";
 import { getToken } from "@/lib/context";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
 
 export default function DeleteEsp({ id }: { id: string }) {
+  // Function to hide the delete popup
+  const [isOpen, setIsOpen] = useState(false);
+
+  const hidePopover = () => {
+    setIsOpen(false);
+  };
+
+  const openPopover = () => {
+    setIsOpen(true);
+  };
+
   const deleteEsp = async (id: string) => {
     // Get the id in the URL of the page
 
@@ -29,14 +47,39 @@ export default function DeleteEsp({ id }: { id: string }) {
       } else {
         console.log("ESP supprimé avec succés");
       }
+
+      setIsOpen(false);
     } catch (error) {
       console.error("Error: ", error);
     }
   };
 
   return (
     <div className="flex cursor-pointer gap-2">
-      <Trash2 onClick={() => deleteEsp(id)} />
+      <Popover open={isOpen} onOpenChange={setIsOpen}>
+        <PopoverTrigger>
+          <Trash2 />
+        </PopoverTrigger>
+
+        <PopoverContent className="mr-5 mt-2 flex w-fit flex-col gap-2 dark:bg-zinc-800">
+          <p>Supprimer cet ESP ?</p>
+          <Button
+            onClick={async () => {
+              try {
+                await deleteEsp(id);
+              } catch (e) {
+                console.error(e);
+              }
+            }}
+            className="w-72"
+          >
+            OUI
+          </Button>
+          <Button onClick={hidePopover} className="w-72">
+            NON
+          </Button>
+        </PopoverContent>
+      </Popover>
     </div>
   );
 }
diff --git a/nextjs-interface/src/app/ui/dashboard/DeleteUsersData.tsx b/nextjs-interface/src/app/ui/dashboard/DeleteUsersData.tsx
@@ -0,0 +1,78 @@
+import React, { useEffect, useState } from "react";
+import { getToken, user } from "@/lib/context";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useAllUsers } from "@/lib/data";
+
+export default function DeleteUserData({
+  username,
+  onDelete,
+}: {
+  username: string;
+  onDelete: (username: string) => void;
+}) {
+  // Function to hide the delete popup
+  const [isOpen, setIsOpen] = useState(false);
+
+  const hidePopover = () => {
+    setIsOpen(false);
+  };
+
+  const openPopover = () => {
+    setIsOpen(true);
+  };
+
+  // Function to delete a user
+  const [users, setUsers] = useState<user[]>([]);
+
+  const handleDelete = async () => {
+    try {
+      const response = await fetch(`/postgrest/users?username=eq.${username}`, {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${getToken()}`,
+        },
+      });
+
+      if (!response.ok) {
+        return;
+      }
+
+      onDelete(username);
+      // Remove user from local state after successful deletion
+      setUsers(users.filter((user) => user.username !== username));
+      setIsOpen(false);
+    } catch (error) {
+      console.error("Error:", error);
+    }
+  };
+
+  return (
+    <div className="flex cursor-pointer gap-2">
+      <Popover open={isOpen} onOpenChange={setIsOpen}>
+        <PopoverTrigger>
+          <Trash2 />
+        </PopoverTrigger>
+
+        <PopoverContent className="mr-5 mt-2 flex w-fit flex-col gap-2 dark:bg-zinc-800">
+          <p>Supprimer {username} ?</p>
+          <Button onClick={handleDelete} className="w-72">
+            OUI
+          </Button>
+          <Button
+            onClick={hidePopover}
+            className="w-72 data-[state=closed]:animate-out"
+          >
+            NON
+          </Button>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}