diff --git a/public/icons/theme/dark.svg b/public/icons/theme/dark.svg new file mode 100644 index 0000000..7a1ccf1 --- /dev/null +++ b/public/icons/theme/dark.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + diff --git a/public/icons/theme/light.svg b/public/icons/theme/light.svg new file mode 100644 index 0000000..bc68130 --- /dev/null +++ b/public/icons/theme/light.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/SettingsModal/SettingsModal.jsx b/src/components/SettingsModal/SettingsModal.jsx index 8b78d86..e39c64d 100644 --- a/src/components/SettingsModal/SettingsModal.jsx +++ b/src/components/SettingsModal/SettingsModal.jsx @@ -4,18 +4,29 @@ 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 { logout } = useContext(AuthContext); + 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 ( <> + +
+

Changer de Prénom

+ setName(e.target.value)} type={"text"} /> +
+ +
+

Changer de nom

+ setLastName(e.target.value)} type={"text"} /> +
+ +
+

Changer de numéro de téléphone

+ setPhone(e.target.value)} type={"text"} /> +
+ + +
diff --git a/src/components/SettingsModal/SettingsModal.module.css b/src/components/SettingsModal/SettingsModal.module.css index d9d27ff..80b9d81 100644 --- a/src/components/SettingsModal/SettingsModal.module.css +++ b/src/components/SettingsModal/SettingsModal.module.css @@ -14,5 +14,10 @@ display: flex; flex-direction: column; gap: 10px; - margin-bottom: 30px; + margin-top: 15px; + margin-bottom: 15px; +} + +.submitBtn { + align-self: center; } \ No newline at end of file diff --git a/src/components/ui/modal/modal.jsx b/src/components/ui/modal/modal.jsx index 66ae46b..822398c 100644 --- a/src/components/ui/modal/modal.jsx +++ b/src/components/ui/modal/modal.jsx @@ -1,23 +1,31 @@ -import styles from "./modal.module.css" +import { createPortal } from "react-dom"; +import styles from "./modal.module.css"; import Button from "../button/button.jsx"; const Modal = ({ open, onClose, children, title }) => { - if(!open) return null; + if (!open) return null; - return
+ const handleOverlayClick = () => { + onClose(); + }; -
+ const handleModalClick = (e) => { + e.stopPropagation(); + }; - {title &&

{title}

} + return createPortal( +
+
+ {title &&

{title}

} + {children} +
+ +
+
+
, + document.body + ); +}; - {children} - -
- -
- -
-} - -export default Modal; \ No newline at end of file +export default Modal; diff --git a/src/components/ui/modal/modal.module.css b/src/components/ui/modal/modal.module.css index faf857f..fa3566f 100644 --- a/src/components/ui/modal/modal.module.css +++ b/src/components/ui/modal/modal.module.css @@ -7,8 +7,10 @@ background-color: rgba(0, 0, 0, 0.25); display: flex; justify-content: center; - align-items: center; z-index: 1000; + align-items: flex-start; + overflow-y: auto; + padding: 40px 0; } .modal { @@ -16,6 +18,7 @@ border-radius: 8px; min-width: 300px; max-width: 70%; + max-height: none; position: relative; box-shadow: 0 4px 15px rgba(0,0,0,0.2); width: clamp(300px, 50vw, 600px); diff --git a/src/components/ui/themeSwitcher/ThemeSwitcher.jsx b/src/components/ui/themeSwitcher/ThemeSwitcher.jsx index 1b9a84f..b0a5ef7 100644 --- a/src/components/ui/themeSwitcher/ThemeSwitcher.jsx +++ b/src/components/ui/themeSwitcher/ThemeSwitcher.jsx @@ -1,19 +1,30 @@ import Button from "../button/button.jsx"; -import React from "react"; +import { useState, useEffect } from "react"; +import styles from "./ThemeSwitcher.module.css"; + export default function ThemeSwitcher() { + const [theme, setTheme] = useState(""); + + useEffect(() => { + setTheme(localStorage.getItem("theme")); + }, []); + const switchTheme = () => { - const currentTheme = localStorage.getItem("theme"); - let newTheme = currentTheme === "light" ? "dark" : "light"; + let newTheme = theme === "light" ? "dark" : "light"; - if(currentTheme === null) newTheme = "dark"; + if(theme === null || theme === "") newTheme = "dark"; localStorage.setItem("theme", newTheme); + setTheme(newTheme); window.dispatchEvent(new Event("theme-changed")); }; - return + return } \ No newline at end of file diff --git a/src/components/ui/themeSwitcher/ThemeSwitcher.module.css b/src/components/ui/themeSwitcher/ThemeSwitcher.module.css new file mode 100644 index 0000000..93b6fc6 --- /dev/null +++ b/src/components/ui/themeSwitcher/ThemeSwitcher.module.css @@ -0,0 +1,12 @@ +.themeBtn { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 5px; +} + +.themeIcon { + height: 20px; + width: 20px; +} \ No newline at end of file diff --git a/src/contexts/auth/authProvider.jsx b/src/contexts/auth/authProvider.jsx index 009ec58..850c3a2 100644 --- a/src/contexts/auth/authProvider.jsx +++ b/src/contexts/auth/authProvider.jsx @@ -30,8 +30,13 @@ export function AuthProvider({ children }) { setUser(null); }; + const update = async () => { + const u = await getUser(); + setUser(u); + } + return ( - + {children} ); diff --git a/src/utils/users/updateUser.js b/src/utils/users/updateUser.js new file mode 100644 index 0000000..dd2042e --- /dev/null +++ b/src/utils/users/updateUser.js @@ -0,0 +1,32 @@ +import getXSRFToken from "../getXSRF.js"; + +export default async function updateUser(name, lastname, phone) { + + const csrfToken = await getXSRFToken(); + + try { + const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/update`, { + method: 'POST', + credentials: 'include', + headers: { + 'Accept': 'application/json', + 'X-XSRF-TOKEN': csrfToken, + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + name: name, + phone: phone, + lastname: lastname, + }) + }); + + if (!res.ok) { + throw new Error(`Erreur serveur : ${res.status}`); + } + + return await res.json(); + } catch (err) { + console.error('Erreur :', err); + return null; + } +} \ No newline at end of file