convert setting modals + associate function

2026-01-30 16:35:48 +01:00
parent 62a88dab83
commit 2389ca88e4
19 changed files with 670 additions and 294 deletions
@@ -0,0 +1,187 @@
+/*import Modal from "../../../../components/ui/modal/modal.jsx";
+import Button from "../../../../components/ui/button/button.jsx";
+import styles from "./SettingsModal.module.css"
+import { useContext, useState } from "react";
+import ThemeSwitcher from "../../../../components/ui/themeSwitcher/ThemeSwitcher.jsx";
+import { AuthContext } from "../../../../contexts/auth/AuthContext.js";
+import TextInput from "../../../../components/ui/input/input.jsx";
+import updateUser from "../../../../utils/users/updateUser.js";
+import deleteUser from "../../../../utils/users/deleteUser.js";
+
+
+export default function SettingsModal() {
+
+    const { user, logout, update } = useContext(AuthContext);
+
+    const [open, setOpen] = useState(false);
+    const [isDelete, setIsDelete] = useState(false);
+
+    const [name, setName] = useState(user?.name);
+    const [lastname, setLastName] = useState(user?.lastname);
+    const [phone, setPhone] = useState(user?.phone);
+
+    const handleLogout = () => {
+        logout();
+    }
+
+    const handleSubmit = async () => {
+        await updateUser(name, lastname, phone);
+        update();
+    }
+
+    const handleDelete = async () => {
+        await deleteUser();
+        update();
+    }
+
+    return (
+        <>
+            <Button variant={"transparent"} onClick={() => setOpen(!open)}>
+                <img src={"/icons/settings-wheel.svg"} alt={"Modify btn"} className={styles.modifyIcon}/>
+            </Button>
+
+            <Modal title={"Paramètres"} open={open} onClose={() => setOpen(false)}>
+                <div className={styles.content}>
+
+                    <div className={styles.section}>
+                        <h3>Compte</h3>
+                        <Button variant={"danger"} onClick={handleLogout}> Déconnexion </Button>
+                        <Button variant={"danger"} onClick={() => setIsDelete(true)}> Supprimer le compte </Button>
+
+                        <div className={styles.section}>
+                            <h4>Changer de Prénom</h4>
+                            <TextInput value={name} onChange={e => setName(e.target.value)} type={"text"} />
+                        </div>
+
+                        <div className={styles.section}>
+                            <h4>Changer de nom</h4>
+                            <TextInput value={lastname} onChange={e => setLastName(e.target.value)} type={"text"} />
+                        </div>
+
+                        <div className={styles.section}>
+                            <h4>Changer de numéro de téléphone</h4>
+                            <TextInput value={phone} onChange={e => setPhone(e.target.value)} type={"text"} />
+                        </div>
+
+                        <Button className={styles.submitBtn} onClick={handleSubmit}>Confirmer</Button>
+
+                    </div>
+
+                    <div className={styles.section}>
+                        <h3>Apparence</h3>
+                        <ThemeSwitcher />
+                    </div>
+                </div>
+            </Modal>
+
+
+            <Modal title={"Validation"} open={isDelete} onClose={() => setIsDelete(false)}>
+                <div className={styles.section}>
+                    <p className={styles.alignText}> Êtes vous vraiment sûr de vouloir supprimer votre compte ?</p>
+                    <Button variant={"danger"} className={styles.submitBtn} onClick={handleDelete}>Confirmer</Button>
+                </div>
+            </Modal>
+        </>
+    )
+}*/
+
+import Modal from "../../../../components/ui/modal/modal";
+import Button from "../../../../components/ui/button/button";
+import styles from "./SettingsModal.module.css";
+import { useContext, useState } from "react";
+import ThemeSwitcher from "../../../../components/ui/themeSwitcher/ThemeSwitcher";
+import { AuthContext } from "../../../../contexts/auth/AuthContext";
+import TextInput from "../../../../components/ui/input/input";
+import updateUser from "../../../../utils/users/updateUser";
+import deleteUser from "../../../../utils/users/deleteUser";
+
+interface User {
+  name: string;
+  lastname: string;
+  phone: string | null;
+}
+
+interface AuthContextType {
+  user: User | null;
+  logout: () => void;
+  update: () => void;
+}
+
+export default function SettingsModal() {
+  const { user, logout, update } = useContext(AuthContext) as AuthContextType;
+
+  const [open, setOpen] = useState<boolean>(false);
+  const [isDelete, setIsDelete] = useState<boolean>(false);
+  const [name, setName] = useState<string>(user?.name || "");
+  const [lastname, setLastName] = useState<string>(user?.lastname || "");
+  const [phone, setPhone] = useState<string | null>(user?.phone || null);
+
+  const handleLogout = () => {
+    logout();
+  };
+
+  const handleSubmit = async () => {
+    await updateUser(name, lastname, phone);
+    update();
+  };
+
+  const handleDelete = async () => {
+    await deleteUser();
+    update();
+  };
+
+  return (
+    <>
+      <Button variant={"transparent"} onClick={() => setOpen(!open)}>
+        <img src={"/icons/settings-wheel.svg"} alt={"Modify btn"} className={styles.modifyIcon} />
+      </Button>
+
+      <Modal title={"Paramètres"} open={open} onClose={() => setOpen(false)}>
+        <div className={styles.content}>
+          <div className={styles.section}>
+            <h3>Compte</h3>
+            <Button variant={"danger"} onClick={handleLogout}>
+              Déconnexion
+            </Button>
+            <Button variant={"danger"} onClick={() => setIsDelete(true)}>
+              Supprimer le compte
+            </Button>
+
+            <div className={styles.section}>
+              <h4>Changer de Prénom</h4>
+              <TextInput value={name} onChange={(e) => setName(e.target.value)} type={"text"} />
+            </div>
+
+            <div className={styles.section}>
+              <h4>Changer de nom</h4>
+              <TextInput value={lastname} onChange={(e) => setLastName(e.target.value)} type={"text"} />
+            </div>
+
+            <div className={styles.section}>
+              <h4>Changer de numéro de téléphone</h4>
+              <TextInput value={phone || ""} onChange={(e) => setPhone(e.target.value)} type={"text"} />
+            </div>
+
+            <Button className={styles.submitBtn} onClick={handleSubmit}>
+              Confirmer
+            </Button>
+          </div>
+
+          <div className={styles.section}>
+            <h3>Apparence</h3>
+            <ThemeSwitcher />
+          </div>
+        </div>
+      </Modal>
+
+      <Modal title={"Validation"} open={isDelete} onClose={() => setIsDelete(false)}>
+        <div className={styles.section}>
+          <p className={styles.alignText}>Êtes-vous vraiment sûr de vouloir supprimer votre compte ?</p>
+          <Button variant={"danger"} className={styles.submitBtn} onClick={handleDelete}>
+            Confirmer
+          </Button>
+        </div>
+      </Modal>
+    </>
+  );
+}