diff --git a/frontend/src/pages/Connection.jsx b/frontend/src/pages/Connection.jsx index 13e4c50..94e2907 100644 --- a/frontend/src/pages/Connection.jsx +++ b/frontend/src/pages/Connection.jsx @@ -95,3 +95,5 @@ function Connection() { } export default Connection; + + diff --git a/frontend/src/pages/Inscription.jsx b/frontend/src/pages/Inscription.jsx index 57d010b..b434153 100644 --- a/frontend/src/pages/Inscription.jsx +++ b/frontend/src/pages/Inscription.jsx @@ -1,4 +1,5 @@ import React, { useState } from "react"; +import { NavLink } from "react-router-dom"; import axios from "axios"; import LogoContainer from "../components/LogoContainer"; @@ -11,8 +12,14 @@ function Inscription() { civility: "", naissance: "", }); - const [error, setError] = useState(false); - const [succes, setSucces] = useState(false); + + // const { updateUser, user: connectedUser } = useUser(); + const [showModal, setShowModal] = useState(false); + // const navigate = useNavigate(); + + const toggleModal = () => { + setShowModal(!showModal); + }; const handleInputChange = (e) => { const { name, value } = e.target; @@ -33,22 +40,19 @@ function Inscription() { const result = await axios.post("http://localhost:3310/api/users", user); // console.log(user); if (result.status === 201) { - setSucces(true); - } else { - setError(true); + toggleModal(); // Afficher la modale en cas de succès + // updateUser(result.data); + // navigate("/"); } // console.log("Request URL:", url); // console.log("User registered successfully"); } catch (someError) { - setError(true); console.error("Error during registration:", someError); } }; return (
- {error &&

Error

} - {succes &&

Sicces

}
@@ -142,6 +146,17 @@ function Inscription() {
Inscription
+ {showModal && ( +
+
+

Votre inscription a été effectuée avec succès

+ + +
+
+ )}
diff --git a/frontend/src/sass/_inscription.scss b/frontend/src/sass/_inscription.scss index cac05a8..df9c46f 100644 --- a/frontend/src/sass/_inscription.scss +++ b/frontend/src/sass/_inscription.scss @@ -119,4 +119,44 @@ color: var(--background-color); font-weight: var(--font-weight-semi-bold); } + .modal { + display: flex; + justify-content: center; + align-items: center; + border: solid 2px var(--secondary-font-color); + border-radius: 10px; + position: fixed; + top: 50%; + left: 50%; + width: 35vw; + height: 25vh; + background-color: var(--background-color); + z-index: 1000; + transform: translate(-50%, -50%); + + .modal-content { + padding: 10px; + text-align: center; + + button { + padding: 8px 20px; + border: none; + border-radius: 4px; + background-color: rgba(238, 226, 226, 0.1); + font-size: 14px; + cursor: pointer; + transition: background-color 0.3s ease; + margin: 15px; + + &:hover { + background-color: #ff509a; + } + + a { + text-decoration: none; + color: white; + } + } + } + } }