fix: new file to edit the users informations (#209)

* fix: we're now able to edit our information

Add a function to let's the user edit just the username or the password

* fix: Add a function

It's now possible to edit just one data without editing the other

Closes: #185

database/migration/deploy/add_new_permission.sql

@@ -0,0 +1,7 @@
+-- Deploy climat-guardian:add_new_permission to pg
+
+BEGIN;
+
+        grant update on api.users to web_user; -- any user can edit users
+
+COMMIT;

database/migration/revert/add_new_permission.sql

@@ -0,0 +1,7 @@
+-- Revert climat-guardian:add_new_permission from pg
+
+BEGIN;
+
+        revoke update on api.users to web_user; -- any user can edit users
+
+COMMIT;

database/migration/sqitch.plan

@@ -9,3 +9,4 @@ user 2024-06-07T20:47:39Z Nils <nils@fedora> # create a user table to store ever
 esp 2024-06-26T08:20:01Z dylan <dylanbossoku@dylan> # create a esp table to stove every esp data
 2024-07-05 2024-07-05T08:58:10Z Nils <nils@fedora> # Grant user the ability to remove users
 2024-07-10 2024-07-10T08:08:27Z Nils <nils@fedora> # Give the esp permission to know it's id
+add_new_permission 2024-12-17T14:46:26Z Colin <colin@JT-24-11-07-Colin> # Add a permission for the user to edit the user's datas

database/migration/verify/add_new_permission.sql

@@ -0,0 +1,8 @@
+-- Verify climat-guardian:add_new_permission on pg
+
+BEGIN;
+
+        \z api.users
+
+
+ROLLBACK;

nextjs-interface/src/app/dashboard/users/page.tsx

@@ -11,6 +11,7 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { getToken, user } from "@/lib/context";
+import EditUsersData from "@/app/ui/dashboard/EditUsersData";
 
 export default function Page() {
   const [users, setUsers] = useState<user[]>([]);
@@ -26,6 +27,7 @@ export default function Page() {
     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}`, {
@@ -65,7 +67,13 @@ export default function Page() {
                 <User />
                 <span className="text-lg font-bold">{user.username}</span>
               </div>
-              <div>
+
+              <div className="mb-3 flex items-center gap-4">
+                <EditUsersData
+                  username={user.username}
+                  password={user.password}
+                />
+
                 <Trash2
                   className="delete-icon cursor-pointer"
                   onClick={() => handleDelete(user.username)}

nextjs-interface/src/app/ui/dashboard/EditUsersData.tsx

@@ -0,0 +1,122 @@
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import React, { useState } from "react";
+import { getToken } from "@/lib/context";
+import { Edit } from "lucide-react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+
+import bcrypt from "bcryptjs";
+
+export default function EditUsersData({
+  username,
+  password,
+}: {
+  username: string;
+  password: string;
+}) {
+  const [newUsername, setNewUsername] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+
+  const [message, setMessage] = useState("");
+
+  const [confirm, setConfirm] = React.useState(false);
+
+  const updateUsersData = async (newUsername: string, newPassword: string) => {
+    const token = getToken();
+
+    // Construire dynamiquement les données à envoyer
+    const updateData: Record<string, string> = {};
+    if (newUsername.trim() !== "") {
+      updateData.username = newUsername;
+    }
+    if (newPassword.trim() !== "") {
+      updateData.password = await bcrypt.hash(newPassword, 10);
+    }
+
+    // Vérifier qu'il y a au moins une donnée à mettre à jour
+    if (Object.keys(updateData).length === 0) {
+      setMessage("Aucune donnée à mettre à jour");
+      return;
+    }
+
+    try {
+      const response = await fetch(`/postgrest/users?username=eq.${username}`, {
+        method: "PATCH",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify(updateData),
+      });
+
+      if (response.ok) {
+        setMessage("Utilisateur modifié avec succès !");
+        window.location.href = `/dashboard/users`;
+      } else {
+        const errorData = await response.json();
+        console.error(`An error occurred: ${response.status}`, errorData);
+        setMessage("Erreur lors de la modification de l'utilisateur");
+      }
+    } catch (error) {
+      console.error(error);
+      setMessage(
+        "Une erreur s'est produite lors de la modification de l'utilisateur",
+      );
+    }
+  };
+
+  return (
+    <div className="flex cursor-pointer gap-2">
+      <Popover>
+        <PopoverTrigger asChild>
+          <Edit />
+        </PopoverTrigger>
+        <PopoverContent className="mr-5 mt-2 flex w-fit flex-col gap-2 dark:bg-zinc-800">
+          <div className="flex flex-row gap-x-5">
+            <Input
+              type="text"
+              placeholder="Nouveau nom d'utilisateur"
+              value={newUsername}
+              className="dark:bg-zinc-800"
+              onChange={(e) => {
+                setNewUsername(e.target.value);
+                setConfirm(true);
+              }}
+            />
+
+            <Input
+              type="password"
+              placeholder="Nouveau mot de passe"
+              value={newPassword}
+              className="dark:bg-zinc-800"
+              onChange={(e) => {
+                setNewPassword(e.target.value);
+                setConfirm(true);
+              }}
+            />
+
+            {confirm && (
+              <Button
+                onClick={async () => {
+                  try {
+                    await updateUsersData(newUsername, newPassword);
+                    setConfirm(false);
+                  } catch (e) {
+                    console.error(e);
+                  }
+                }}
+                className="p-2 text-white dark:bg-zinc-700 dark:text-white dark:hover:bg-black"
+              >
+                Confirmer
+              </Button>
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}