cm862sz/zkt26
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ajout connexion

Browse Source
This commit is contained in:
Charles Mendiburu 2025-04-01 14:45:29 +02:00
parent bdf363726b
commit 8741707303
7 changed files with 153 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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

BIN
Front-end/public/images/snow.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 MiB

2
Front-end/src/App.jsx
View File

@ -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>

4
Front-end/src/components/Header.jsx
View File

@ -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>

4
Front-end/src/pages/Home.jsx
View File

@ -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>
)
}

116
Front-end/src/pages/Login.jsx Normal file
View File

@ -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;

30
Front-end/src/pages/Signup.jsx
View File

@ -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;