100 lines
3.0 KiB
JavaScript
100 lines
3.0 KiB
JavaScript
/**
|
|
* Verification et gestion du mot de passe lors de la réinitialisation
|
|
*/
|
|
|
|
|
|
const PASSWORD_LENGTH = 8;
|
|
const PASSWORD_CONTENT = ['[A-Z]', '[a-z]', '[0-9]'];
|
|
|
|
const passwordElt = document.getElementById('password');
|
|
const confirmPasswordElt = document.getElementById('passwordConfirm');
|
|
|
|
|
|
const min8Elt = document.getElementById('min8');
|
|
const uppercaseElt = document.getElementById('uppercase');
|
|
const lowercaseElt = document.getElementById('lowercase');
|
|
const digitElt = document.getElementById('digit');
|
|
const specialElt = document.getElementById('special');
|
|
|
|
|
|
//Pattern du mot de passe
|
|
passwordElt.addEventListener('input', function() {
|
|
const password = passwordElt.value;
|
|
|
|
// Vérification de la longueur
|
|
if (password.length >= PASSWORD_LENGTH) {
|
|
min8Elt.style.color = 'green';
|
|
} else {
|
|
min8Elt.style.color = 'red';
|
|
}
|
|
|
|
// Vérification du contenu
|
|
PASSWORD_CONTENT.forEach((pattern, index) => {
|
|
const regex = new RegExp(pattern);
|
|
const element = [uppercaseElt, lowercaseElt, digitElt, specialElt][index];
|
|
|
|
if (regex.test(password)) {
|
|
element.style.color = 'green';
|
|
} else {
|
|
element.style.color = 'red';
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
// Vérification de la confirmation du mot de passe
|
|
confirmPasswordElt.addEventListener('input', function() {
|
|
const password = passwordElt.value;
|
|
const confirmPassword = confirmPasswordElt.value;
|
|
if (password === confirmPassword) {
|
|
confirmPasswordElt.style.borderColor = 'green';
|
|
} else {
|
|
confirmPasswordElt.style.borderColor = 'red';
|
|
}
|
|
});
|
|
|
|
|
|
// Afficher ou masquer le mot de passe
|
|
const showPasswordElt = document.getElementById('showPassword');
|
|
showPasswordElt.addEventListener('change', function() {
|
|
if (showPasswordElt.checked) {
|
|
passwordElt.type = 'text';
|
|
confirmPasswordElt.type = 'text';
|
|
} else {
|
|
passwordElt.type = 'password';
|
|
confirmPasswordElt.type = 'password';
|
|
}
|
|
});
|
|
|
|
|
|
// Gestion de la soumission du formulaire
|
|
const passwordForm = document.getElementById('password-form');
|
|
passwordForm.addEventListener('submit', function(event) {
|
|
const password = passwordElt.value;
|
|
const confirmPassword = confirmPasswordElt.value;
|
|
|
|
// Empêcher la soumission si les critères ne sont pas remplis
|
|
if (password.length < PASSWORD_LENGTH ||
|
|
!/[A-Z]/.test(password) ||
|
|
!/[a-z]/.test(password) ||
|
|
!/[0-9]/.test(password) ||
|
|
password !== confirmPassword) {
|
|
|
|
event.preventDefault();
|
|
const main = document.querySelector('main');
|
|
const existingAlert = main.querySelector('#password-alert');
|
|
if (existingAlert) {
|
|
existingAlert.remove();
|
|
}
|
|
|
|
const alertElt = document.createElement('div');
|
|
alertElt.id = 'password-alert';
|
|
alertElt.className = 'alert alert-danger text-center';
|
|
alertElt.textContent = "Le mot de passe ne respecte pas les critères requis ou la confirmation ne correspond pas.";
|
|
main.prepend(alertElt);
|
|
|
|
window.scrollTo(0, 0);
|
|
|
|
}
|
|
});
|