Recup connexion

frontend/src/pages/Connection.jsx

@@ -95,3 +95,5 @@ function Connection() {
 }
 
 export default Connection;
+
+

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 (
     <div className="signUpPageMockupGuest">
-      {error && <h1 style={{ color: "red", fontSize: 12 }}>Error</h1>}
-      {succes && <h1 style={{ color: "green", fontSize: 12 }}>Sicces</h1>}
       <div className="searchDisplaySection">
         <LogoContainer />
         <div className="form">
@@ -142,6 +146,17 @@ function Inscription() {
               <div className="inscription">Inscription</div>
             </button>
           </div>
+          {showModal && (
+            <div className="modal">
+              <div className="modal-content">
+                <p>Votre inscription a été effectuée avec succès</p>
+
+                <button onClick={toggleModal} type="button">
+                  <NavLink to="/Connection">Fermer</NavLink>
+                </button>
+              </div>
+            </div>
+          )}
         </div>
       </div>
     </div>

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;
+        }
+      }
+    }
+  }
 }