70 lines
2.5 KiB
React
70 lines
2.5 KiB
React
import Modal from "../ui/modal/modal.jsx";
|
|
import Button from "../ui/button/button.jsx";
|
|
import styles from "./SettingsModal.module.css"
|
|
import { useContext, useState } from "react";
|
|
import ThemeSwitcher from "../ui/themeSwitcher/ThemeSwitcher.jsx";
|
|
import { AuthContext } from "../../contexts/auth/AuthContext.js";
|
|
import TextInput from "../ui/input/input.jsx";
|
|
import updateUser from "../../utils/users/updateUser.js";
|
|
|
|
|
|
export default function SettingsModal() {
|
|
|
|
const { user, logout, update } = useContext(AuthContext);
|
|
|
|
const [open, setOpen] = 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();
|
|
}
|
|
|
|
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>
|
|
|
|
<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>
|
|
</>
|
|
)
|
|
} |