Ajout gestion formulaire login côté jQuery et serveur

exemples/validation-de-formulaires-bootstrap/contenu.html

@@ -7,6 +7,11 @@
     </li>
 
 </ul>
+
+<div id="alert-box" class="alert alert-danger hidden" role="alert">
+  
+</div>
+
 <div class="tab" id="tab-login">
     <form id="form-login">
       <div class="form-group">

exemples/validation-de-formulaires-bootstrap/script.js

@@ -1,9 +1,21 @@
+// Paramètres pour les envois par AJAX
 $.ajaxSetup({
     headers: {
         'content-type': 'application/json'
     }
 });
 
+// Gestion des erreurs
+$( document ).ajaxError(function(event, jqXHR,  ajaxSettings, thrownError) {
+    var data = JSON.parse(jqXHR.responseText);
+    console.log('parsed', data);
+    $('#alert-box')
+    .removeClass('hidden')
+    .removeClass('alert-success')
+    .addClass('alert-danger')
+    .html(data.message);
+});
+
 $('#register-username')
 .change(function(e) {
     var inputUsername = $(this);
@@ -36,7 +48,7 @@ $('#register-username')
     );
 });
 
-
+// Soumission du formulaire d'inscription vers le serveur
 $('#form-register').submit(function(e) {
     var username = $('#register-username').val();
     var email    = $('#register-email').val();
@@ -47,12 +59,42 @@ $('#form-register').submit(function(e) {
         password: password
     };
     var userJSON = JSON.stringify(user);
-    console.log(username, email, password);
+    console.log(user);
+    console.log(userJSON);
     e.preventDefault();
     $(this).find('input').val('');
     $.post('/register', userJSON, 'json');
 })
 
+
+$('#form-login').submit(function(e) {
+    var email    = $('#login-email').val();
+    var password = $('#login-password').val();
+    var user = {
+        email: email,
+        password: password
+    };
+    var userJSON = JSON.stringify(user);
+    e.preventDefault();
+    $(this).find('input').val('');
+    $.post(
+      '/login',
+      userJSON,
+      function(data) {
+        $('#alert-box')
+        .removeClass('alert-danger')
+        .addClass('alert-success')
+        .removeClass('hidden')
+        .html(data.message);
+      },
+      'json'
+    );
+})
+
+
+
+
+
 var onglets = $('#onglets li a');
 
 onglets.click(function(e) {

server.js

@@ -75,6 +75,43 @@ function createNewUser(user) {
 }
 
 
+app.post('/login', function(req, res) {
+
+  // Récupérer email et password
+  var identifiants = req.body;
+  if(! identifiants.email || ! identifiants.password) {
+    return res.status(400).json({
+      message: 'paramètre requis manquant'
+    });
+  }
+
+  for(var i = 0 ; i < userList.length ; i++) {
+    var user = userList[i];
+
+    if(identifiants.email == user.email) {
+
+
+      if(identifiants.password == user.password) {
+        return res.json({
+          message: 'Vous avez été identifié',
+        });
+      }
+      else {
+        return res.status(401).json({
+          message: 'Mot de passe incorrect'
+        });
+      }
+
+    }
+
+  }
+  return res.status(404).json({
+    message: 'Utilisateur non trouvé'
+  });
+
+});
+
+
 /**
  * Ce code va gérer la requête POST vers l'URL /register de notre micro-serveur
  */