Ajout connexion

Back-end/src/main/java/com/example/starter/MainVerticle.java

@@ -40,6 +40,7 @@ public class MainVerticle extends AbstractVerticle {
     router.get("/objets").handler(this::getObjects);
     router.get("/objet").handler(this::getParticularObject);
     router.post("/signup").handler(this::handleSignup); // Route pour l'inscription
+    router.post("/signup").handler(this::get)
 
     // Création du serveur HTTP
     vertx.createHttpServer()
@@ -156,6 +157,12 @@ public class MainVerticle extends AbstractVerticle {
             context.response()
                 .setStatusCode(201)
                 .end(new JsonObject().put("message", "Utilisateur inscrit avec succès").encode());
+                vertx.setTimer(2000, id -> {
+                context.response()
+                .putHeader("Location", "/") // Redirection vers la page d'accueil
+                .setStatusCode(303)
+                .end();
+        });
         })
         .onFailure(err -> {
             // Log pour afficher l'erreur d'insertion

Front-end/src/App.jsx

@@ -6,6 +6,7 @@ import Header from "./components/Header.jsx";
 import ObjectManagement from "./pages/Gestion/ObjectManagement.jsx";
 import Objet from "./pages/Gestion/Objet.jsx";
 import Signup from './pages/Signup.jsx';
+import Login from './pages/Login.jsx';
 function App() {
 
   return (
@@ -19,6 +20,7 @@ function App() {
           <Route path="/gestionObjets" element={<ObjectManagement />} />
           <Route path="/objet" element={<Objet />} />
           <Route path="/signup" element={<Signup />} />
+          <Route path="/login" element={<Login/>}/>
         </Routes>
       </div>
     </Router>

Front-end/src/components/Header.jsx

@@ -22,10 +22,10 @@ function Header() {
           </ul>
         </nav>
           <div className="flex gap-4">
-            <button className="flex items-center gap-2 text-gray-600 hover:text-indigo-600">
+            <Link to="/login" className="flex items-center gap-2 text-gray-600 hover:text-indigo-600">
               <LogIn size={20} />
               <span>Connexion</span>
-            </button>
+            </Link>
             <Link to="/signup" className="flex items-center gap-2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700">
               <UserPlus size={20} />
               <span>Inscription</span>

Front-end/src/pages/Home.jsx

@@ -7,7 +7,9 @@ function Home() {
 
   return (
 
-    <div>Home
+    <div className='max-w-[1296px] m-auto flex flex-col md:flex-row items-center justify-between p-[50px_0_60px] md:p-[104px_0]'>Home
+      <img src='../../public/images/snow.jpg' />
+
     </div>
   )
 }

Front-end/src/pages/Login.jsx

@@ -0,0 +1,116 @@
+import React, { useState } from 'react';
+import { Mail, Lock } from 'lucide-react';
+import { useNavigate, Link } from 'react-router-dom'; // Importation du hook useNavigate
+
+function Login() {
+  const [formData, setFormData] = useState({
+    email: '',
+    password: ''
+  });
+  const navigate = useNavigate(); // Initialisation de useNavigate
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+  
+    try {
+      const response = await fetch("http://localhost:8888/login", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(formData),
+      });
+  
+      const data = await response.json();
+  
+      if (!response.ok) {
+        throw new Error(data.error || "Erreur lors de la connexion");
+      }
+  
+      alert("Connexion réussie !");
+      
+      // Redirection vers la page d'accueil après une connexion réussie
+      navigate("/home");  // Remplace "/home" par l'URL de ta page d'accueil
+    } catch (error) {
+      alert(error.message);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="w-96 bg-white rounded-lg shadow-md p-6 mx-auto">
+        <h2 className="text-2xl font-bold text-gray-800 mb-6 text-center">Connexion</h2>
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Email */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-2">
+              Email:
+            </label>
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <Mail className="h-5 w-5 text-gray-400" />
+              </div>
+              <input
+                type="email"
+                name="email"
+                value={formData.email}
+                onChange={handleChange}
+                className="pl-10 block w-full rounded-lg border-gray-300 border p-2.5 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                required
+              />
+            </div>
+          </div>
+
+          {/* Mot de passe */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              Mot de passe:
+            </label>
+            <div className="relative">
+              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                <Lock className="h-5 w-5 text-gray-400" />
+              </div>
+              <input
+                type="password"
+                name="password"
+                value={formData.password}
+                onChange={handleChange}
+                className="pl-10 block w-full rounded-lg border-gray-300 border p-2.5 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
+                required
+                minLength="8"
+              />
+            </div>
+          </div>
+
+          {/* Bouton de connexion */}
+          <div className="pt-4">
+            <button
+              type="submit"
+              className="w-full flex justify-center py-2.5 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+            >
+              Se connecter
+            </button>
+          </div>
+
+          {/* Lien vers la page d'inscription */}
+          <div className="mt-4 text-sm text-center">
+            <p>
+              Vous n'avez pas de compte ? 
+              <Link to="/signup" className="text-indigo-600 hover:text-indigo-700 font-medium"> Inscrivez-vous ici</Link>
+            </p>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default Login;

Front-end/src/pages/Signup.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
-import { Mail, User, Lock, Calendar } from 'lucide-react';
+import { Mail, User, Lock } from 'lucide-react';
+import { useNavigate, Link} from 'react-router-dom'; // Importation du hook useNavigate
 
 function Signup() {
   const [formData, setFormData] = useState({
@@ -10,6 +11,7 @@ function Signup() {
     password: '',
     confirmPassword: ''
   });
+  const navigate = useNavigate(); // Initialisation de useNavigate
 
   const handleChange = (e) => {
     const { name, value } = e.target;
@@ -43,17 +45,20 @@ function Signup() {
       }
   
       alert("Inscription réussie !");
+      
+      // Redirection vers la page d'accueil après une inscription réussie
+      navigate("/home");  // Remplace "/home" par l'URL de ta page d'accueil
     } catch (error) {
       alert(error.message);
     }
   };
-  
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 py-12 px-4 sm:px-6 lg:px-8">
       <div className="w-96 bg-white rounded-lg shadow-md p-6 mx-auto">
         <h2 className="text-2xl font-bold text-gray-800 mb-6 text-center">Inscription</h2>
         <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Formulaire (Nom, Prénom, Sexe, Email, Mot de passe) */}
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1">
               Nom:
@@ -91,6 +96,8 @@ function Signup() {
               />
             </div>
           </div>
+
+          {/* Sexe */}
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-2">
               Sexe:
@@ -120,9 +127,10 @@ function Signup() {
               </label>
             </div>
           </div>
-          
+
+          {/* Email */}
           <div>
-            <label className="block text-sm font-medium text-gray-700 mb-1">
+            <label className="block text-sm font-medium text-gray-700 mb-2">
               Email:
             </label>
             <div className="relative">
@@ -140,6 +148,7 @@ function Signup() {
             </div>
           </div>
 
+          {/* Mot de passe */}
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1">
               Mot de passe:
@@ -160,6 +169,7 @@ function Signup() {
             </div>
           </div>
 
+          {/* Confirmer mot de passe */}
           <div>
             <label className="block text-sm font-medium text-gray-700 mb-1">
               Confirmer le mot de passe:
@@ -180,8 +190,7 @@ function Signup() {
             </div>
           </div>
 
-          
+          {/* Bouton d'inscription */}
-
           <div className="pt-4">
             <button
               type="submit"
@@ -190,10 +199,17 @@ function Signup() {
               S'inscrire
             </button>
           </div>
+          <div className="mt-4 text-sm text-center">
+            <p>
+              Vous avez déjà un compte ? 
+              <Link to="/login" className="text-indigo-600 hover:text-indigo-700 font-medium"> Connectez-vous ici</Link>
+            </p>
+          </div>
         </form>
+        
       </div>
     </div>
   );
 }
 
-export default Signup;
+export default Signup;