184 lines
5.2 KiB
HTML
184 lines
5.2 KiB
HTML
**Login Component**
|
|
|
|
Voici un exemple de composant React complet avec HTML, CSS et JavaScript pour un formulaire de connexion moderne et responsive. Le design utilise des animations CSS pour une expérience utilisateur engageante. Ce composant nécessite que React soit installé et configuré dans votre projet.
|
|
|
|
**Login.html** (fichier HTML autonome)
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Login</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="login-box">
|
|
<h1>Login</h1>
|
|
<form id="login-form">
|
|
<div class="input-group">
|
|
<label for="email">Adresse E-mail</label>
|
|
<input type="email" id="email" name="email" required>
|
|
</div>
|
|
<div class="input-group">
|
|
<label for="password">Mot de passe</label>
|
|
<input type="password" id="password" name="password" required>
|
|
</div>
|
|
<button type="submit" id="submit-btn">Connexion</button>
|
|
</form>
|
|
<p>Vous n'avez pas de compte ? <a href="#" class="signup-link">Créer un compte</a></p>
|
|
</div>
|
|
</div>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
**styles.css** (fichier CSS pour les styles et les animations)
|
|
```css
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.container {
|
|
max-width: 400px;
|
|
width: 100%;
|
|
margin: 40px auto;
|
|
padding: 20px;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.login-box {
|
|
margin: 40px auto;
|
|
max-width: 300px;
|
|
padding: 20px;
|
|
background-color: #f9f9f9;
|
|
border: 1px solid #ddd;
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.login-box h1 {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.input-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.input-group label {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.input-group input {
|
|
width: 100%;
|
|
height: 40px;
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
#submit-btn {
|
|
width: 100%;
|
|
height: 40px;
|
|
padding: 10px;
|
|
background-color: #4CAF50;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#submit-btn:hover {
|
|
background-color: #3e8e41;
|
|
}
|
|
|
|
.signup-link {
|
|
color: #337ab7;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.signup-link:hover {
|
|
color: #23527c;
|
|
}
|
|
|
|
.animated {
|
|
animation: fadeIn 0.5s;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0px);
|
|
}
|
|
}
|
|
```
|
|
|
|
**script.js** (fichier JavaScript pour la logique du formulaire)
|
|
```javascript
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const form = document.getElementById('login-form');
|
|
const submitBtn = document.getElementById('submit-btn');
|
|
const emailInput = document.getElementById('email');
|
|
const passwordInput = document.getElementById('password');
|
|
|
|
// Ajouter une animation de chargement lors de la soumission du formulaire
|
|
submitBtn.addEventListener('click', function(event) {
|
|
event.preventDefault();
|
|
form.classList.add('animated');
|
|
setTimeout(function() {
|
|
form.classList.remove('animated');
|
|
}, 500);
|
|
});
|
|
|
|
// Ajouter des événements pour les deux champs du formulaire
|
|
emailInput.addEventListener('input', function() {
|
|
const emailValue = emailInput.value.trim();
|
|
if (emailValue !== '') {
|
|
emailInput.classList.remove('error');
|
|
} else {
|
|
emailInput.classList.add('error');
|
|
}
|
|
});
|
|
|
|
passwordInput.addEventListener('input', function() {
|
|
const passwordValue = passwordInput.value.trim();
|
|
if (passwordValue !== '') {
|
|
passwordInput.classList.remove('error');
|
|
} else {
|
|
passwordInput.classList.add('error');
|
|
}
|
|
});
|
|
|
|
// Enregistrer les données du formulaire (non fonctionnel)
|
|
submitBtn.addEventListener('click', function(event) {
|
|
event.preventDefault();
|
|
const formData = {
|
|
email: emailInput.value,
|
|
password: passwordInput.value
|
|
};
|
|
console.log(formData);
|
|
});
|
|
});
|
|
```
|
|
|
|
Ce composant est un exemple de code pour un formulaire de connexion moderne et responsive. Vous pouvez personnaliser les styles et les animations en fonction de vos besoins.
|
|
|
|
**Remarques**:
|
|
|
|
* L'animation de chargement est ajoutée lorsque le formulaire est soumis.
|
|
* Les deux champs du formulaire utilisent l'événement `input` pour ajouter des classe d'erreur lorsqu'ils sont vides.
|
|
* La logique de gestion des données du formulaire n'est pas fonctionnelle et doit être remplacée par votre code réel.
|
|
|
|
Il est important de noter que ce code est un exemple de base. Vous devrez l'adapter à vos besoins spécifiques et ajouter des fonctionnalités supplémentaires telles que la gestion des erreurs de saisie, la sécurité et la validation des données en production. |