-
vautrin33u authoredvautrin33u authored
formulaire.js 10.86 KiB
/**
* Action qui se réalise automatiquement lorsque l'envoi du formulaire d'inscription a lieu
* Vérifie les données puis les envoie (si possible) au serveur (GestionUtilisateur.php traite la demande)
*/
window.addEventListener("load", function (){
// Désactive par défaut le submit
var ok = document.getElementById('ok');
var retour = this.document.getElementById('retour');
retour.addEventListener('click', () =>{
window.location.assign ("/Requete.php");
});
ok.disabled = true;
var formulaire = document.getElementById("inscription");
if (formulaire == null) return;
// zone explicative
var explications = this.document.getElementById('explications');
var divMdp = document.createElement("div");
var divPseudo = document.createElement("div");
explications.appendChild(divMdp);
explications.appendChild(divPseudo);
// Récupère le champ password et le test
var password = formulaire.password;
var pseudo = formulaire.pseudo;
var email = formulaire.email;
var nom = formulaire.nom;
var prenom = formulaire.prenom;
const sexe = document.getElementsByName("sexe");
// Envoie le formulaire au serveur
function envoyerForm(){
let input;
// Effectue la requête
var genre;
sexe.forEach(function(option) {
if (option.checked) {
genre = option;
}
});
if (genre){
input = {
mode : 'inscription',
pseudo : pseudo.value,
password : password.value,
email : email.value,
sexe : genre.value,
prenom : prenom.value,
nom : nom.value
};
}else{
input = {
mode: 'inscription',
pseudo: pseudo.value,
password: password.value,
email: email.value,
sexe: '',
prenom: prenom.value,
nom: nom.value
};
}
console.log(input);
const xhr = new XMLHttpRequest();
xhr.open("POST", "/GestionUtilisateur.php", true);
xhr.setRequestHeader("Content-Type", "application/json ; charset=UTF-8");
// Vérifie si erreur lors de l'envoie du formulaire
xhr.addEventListener("Error", function(event) {
alert("Erreur d'envoi de formulaire d'inscription...");
});
// Vérification des résultats
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200){
console.log(xhr.response);
if (xhr.response != null){
let resultat = JSON.parse(xhr.response);
if (resultat == true){
ok.disabled = true;
explications.textContent = "Inscription réussie!";
window.location.assign ("/Requete.php");
}else{
explications.textContent = "Inscription a échouée! Ce pseudo est déjà utilisé. Veuillez réessayer.";
}
}
}
}
xhr.send(JSON.stringify(input));
}
// Test si l'e-mail est vide ou dans un format correct
function validEmail(event){
var reg = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if (inscription.email.value === '' || reg.test(inscription.email.value)){
email.style.backgroundColor = 'white';
return true
}else{
email.style.backgroundColor = 'red';
return false;
}
}
// Vérifie la longueur du pseudo et si il contient des caractères spéciaux
function validPseudo(event){
var reg = /[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/;
divPseudo.innerHTML = "";
if (pseudo.value.length < 3 || reg.test(pseudo.value)){
pseudo.style.backgroundColor = 'red';
divPseudo.innerHTML = "<ul> Le pseudo doit faire au moins 3 caractères </ul>";
return false;
}else{
pseudo.style.backgroundColor = 'white';
return true;
}
}
// Vérifie la longueur du mdp et si il contient bien majuscule, minuscules et nombre
function validPassword(event){
// Regex pour tester le mdp
var majuscule = /[A-Z]/g;
var minuscule = /[a-z]/g;
var nombre = /[0-9]/g;
divMdp.innerHTML = ""; // Vide le div dédié aux erreurs de mdp
// Test du mdp
if (password.value.length >= 6 && majuscule.test(password.value) && minuscule.test(password.value) && nombre.test(password.value)){
password.style.backgroundColor = 'white';
return true;
}else{ // Notification des erreurs password.style.backgroundColor = 'red';
divMdp.innerHTML = "<ul>Le mot de passe doit :";
if (password.value.length < 6) divMdp.innerHTML += "<li>faire plus de 6 caractères </li>";
if (!majuscule.test(password.value) || (!minuscule.test(password.value))) {
divMdp.innerHTML += "<li>avoir au moins une majuscule et une minuscule </li> </ul>";
}
if (!nombre.test(password.value)) divMdp.innerHTML += "<li>contenir au moins un chiffre </li>";
divMdp.innerHTML += '</ul>';
return false;
}
}
formulaire.addEventListener("submit", function (event){
event.preventDefault();
envoyerForm();
});
// active le bouton d'envoi du formulaire ou le bloque et donne des explications
formulaire.addEventListener('keyup', () =>{
if (validPassword() && validPseudo() && validEmail()){
explications.innerHTML = '';
ok.disabled = false;
}else{
ok.disabled = true;
}
});
// Récupère le champ password et le test
password.addEventListener('keyup', () =>{
validPassword();
});
// Récupère le champ pseudo et le test
pseudo.addEventListener('keyup', () =>{
validPseudo();
});
email.addEventListener('keyup', () => {
validEmail();
})
});
/**
* Action qui se réalise automatiquement lorsque l'envoi du formulaire de connexion a lieu
* Vérifie les données puis les envoie (si possible) au serveur (GestionUtilisateur.php traite la demande)
*/
window.addEventListener("load", function (){
// Désactive par défaut le submit
var ok = document.getElementById('ok');
var retour = document.getElementById('retour');
retour.addEventListener('click', () =>{
window.location.assign ("/Requete.php");
});
ok.disabled = true;
// Récupère le formulaire de connexion
var formulaire = document.getElementById("connexion");
if (formulaire == null) return; // Si le formulaire n'existe pas, abandon
// Récupère le champ password et le test
var password = formulaire.password;
var pseudo = formulaire.pseudo;
// zone explicative
var explications = this.document.getElementById('explications');
var divMdp = document.createElement("div");
var divPseudo = document.createElement("div");
explications.appendChild(divMdp);
explications.appendChild(divPseudo);
// Envoie le formulaire au serveur
function envoyerForm(){
// Effectue la requête
const input = {
mode : 'connexion',
pseudo : pseudo.value,
password : password.value
};
console.log(input);
const xhr = new XMLHttpRequest();
xhr.open("POST", "/GestionUtilisateur.php", true);
xhr.setRequestHeader("Content-Type", "application/json ; charset=UTF-8");
// Vérifie si erreur lors de l'envoie du formulaire
xhr.addEventListener("Error", function(event) {
alert("Erreur d'envoi de formulaire de connexion...");
});
// Vérification des résultats
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200){
let resultat = JSON.parse(xhr.response);
if (resultat == true){
ok.disabled = true;
explications.textContent = "Connexion réussie!";
window.location.assign ("/Requete.php");
}else{
explications.textContent = "Connexion a échouée! Vérifier le pseudo et le mot de passe.";
}
}
}
xhr.send(JSON.stringify(input));
}
// Vérifie la longueur du pseudo et si il contient des caractères spéciaux
function validPseudo(event){
var reg = /[ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]/;
divPseudo.innerHTML = "";
if (pseudo.value.length < 3 || reg.test(pseudo.value)){
pseudo.style.backgroundColor = 'red';
divPseudo.innerHTML = "<ul> Le pseudo doit faire au moins 3 caractères </ul>";
return false;
}else{
pseudo.style.backgroundColor = 'white';
return true;
}
}
// Vérifie la longueur du mdp et si il contient bien majuscule, minuscules et nombre
function validPassword(event){
var majuscule = /[A-Z]/g;
var minuscule = /[a-z]/g;
var nombre = /[0-9]/g;
divMdp.innerHTML ='';
if (password.value.length >= 6 && majuscule.test(password.value) && minuscule.test(password.value) && nombre.test(password.value)){ password.style.backgroundColor = 'white';
return true;
}else{
password.style.backgroundColor = 'red';
divMdp.innerHTML = "<ul>Le mot de passe doit :";
if (password.value.length < 6) divMdp.innerHTML += "<li>faire plus de 6 caractères </li>";
if (!majuscule.test(password.value) || (!minuscule.test(password.value))) {
divMdp.innerHTML += "<li>avoir au moins une majuscule et une minuscule </li> </ul>";
}
if (!nombre.test(password.value)) divMdp.innerHTML += "<li>contenir au moins un chiffre </li>";
divMdp.innerHTML += '</ul>';
return false;
}
}
formulaire.addEventListener("submit", function (event){
event.preventDefault();
envoyerForm();
});
// active le bouton d'envoi du formulaire ou le bloque et donne des explications
formulaire.addEventListener('keyup', () =>{
var explications = this.document.getElementById('explications');
if (validPassword() && validPseudo()){
explications.innerHTML = '';
ok.disabled = false;
}else{
ok.disabled = true;
}
});
// Récupère le champ password et le test
password.addEventListener('keyup', () =>{
validPassword();
});
// Récupère le champ pseudo et le test
pseudo.addEventListener('keyup', () =>{
validPseudo();
});
});