86 lines
3.4 KiB
React
86 lines
3.4 KiB
React
import Modal from "../../../../components/ui/modal/modal.tsx";
|
|
import Button from "../../../../components/ui/button/button.tsx";
|
|
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.tsx";
|
|
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>
|
|
</>
|
|
)
|
|
} |