projetphp/script.js

htmlAddUser = '<tr class="newRecord">\
<td class="login">\
<input type="text" /></td>\
<td class="datene" placeholder="yyyy/mm/dd">\
<input type="date" /></td>\
<td class="email">\
<input type="text" /></td>\
<td class="pw">\
<input type="password" /><div>le mot de passe comporte entre 8 et 16 caractères parmi a..z A..Z 0..9</div></td>\
<td class="sl">\
<select>\
<option value="1">1</option>\
<option value="5">5</option>\
<option value="10">10</option>\
</select></td>\
<td><i class="fas fa-check click confirmNewUser"></i><i class="fas fa-trash-alt click delUser"></i></td>\
</tr>';
passwordPatern = /^[a-zA-Z0-9]{8,16}$/;
loginPatern = /^[a-z]{8,16}$/
mailPatern = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; //https://emailregex.com/
datePatern = /^\d{4}[\/\-](?:\d{1}|1[012]|0\d)[\/\-](?:\d{1}|[123]\d|0\d)/

$(function() {
  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /*~~~~~~~~~~~~~~~~INPUT EVENT~~~~~~~~~~~~~~~~*/
  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  $("#allRecord").on("keyup change", ".pw input", function() {
    if (passwordPatern.test($(this).val()) || $(this).val() == "") {
      $(this).css("background-color", "");
      $('div', $(this).parent()).css("display", "none");
    } else {
      $(this).css("background-color", "red");
      $('div', $(this).parent()).css("display", "block");
    }
  });
  $("#allRecord").on("keyup change", ".email input", function() {
    if (mailPatern.test($(this).val())) {
      $(this).css("background-color", "");
      $('div', $(this).parent()).css("display", "none");
    } else {
      $(this).css("background-color", "red");
      $('div', $(this).parent()).css("display", "block");
    }
  });
  $("#allRecord").on("keyup change", ".datene :input", function(e) {
    console.log(e.target.value);
    if (datePatern.test($(this).val())) {
      $(this).css("background-color", "");
      $('div', $(this).parent()).css("display", "none");
    } else {
      $(this).css("background-color", "red");
      $('div', $(this).parent()).css("display", "block");
    }
  });
  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /*~~~~~~~~~~~~~~~~TR TO DEL~~~~~~~~~~~~~~~~*/
  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  $("#allRecord").on("click", ".delUser", function() {
    newUser = false;
    tr = $(this).parent().parent();
    var login = "";
    var sl = "";
    if (tr.find("i.editUser").length !== 0) {
      sl = ltrim($('.sl', tr).html())
      login = $('.login', tr).html();
    } else if (tr.find("i.confirmEditUser").length !== 0) {
      sl = $('.sl select', tr).val();
      login = $('.login', tr).html();
    } else {
      try {
        login = "New user " + $('.login input', tr).val();
        newUser = true;
      } catch (e) {
        swal("error : " + e);
        return;
      }
    }
    if (sl == "10") {
      swal("Oops", "You can't del user with sl 10", "error");
      return;
    }
    login = ltrim(login);
    swal({
        title: "Are you sure to del " + login + " ?",
        text: "Once deleted, you will not be able to recover this!",
        icon: "warning",
        buttons: true,
        dangerMode: true,
      })
      .then((willDelete) => {
        if (willDelete) {
          if (!newUser)
            $.post("post.php", {
              userToDel: login
            }, function() {
              tr.remove();
              swal("Poof! " + login + " has been deleted!", {
                icon: "success",
              });
            });
          else {
            tr.remove();
            swal("Poof! " + login + " has been deleted!", {
              icon: "success",
            });
          }
        } else {

        }
      });


  });
  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /*~~~~~~~~~~~~~~~~TR TO EDIT~~~~~~~~~~~~~~~~*/
  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  $("#allRecord").on("click", ".editUser", function() {
    $(this).toggleClass('fa-edit fa-check');
    $(this).toggleClass('editUser confirmEditUser');
    for (i = 1; i < $("td", $(this).parent().parent()).length - 1; i++) {
      j = $($("td", $(this).parent().parent())[i]);
      className = j.attr('class');
      if (className == "sl") {
        val = ltrim(j.html());
        j.html('<select>\
<option value="1" ' + (val == "1" ? 'selected' : '') + '>1</option>\
<option value="5" ' + (val == "5" ? 'selected' : '') + '>5</option>\
<option value="10" ' + (val == "10" ? 'selected' : '') + '>10</option>\
</select>')
      } else {
        inputOptions = '';
        if (className == "pw")
          inputOptions += 'type="password" data-oldpw="' + ltrim(j.html()) + '" ';
        else if (j.attr('class') == "datene")
          inputOptions += 'type="date" placeholder="yyyy/mm/dd"'
        j.html('<input ' + inputOptions + ' value="' + (j.attr('class') == "pw" ? '' : ltrim(j.html())) + '" />');
        if (className == "pw") {
          j.append("<div>le mot de passe comporte entre 8 et 16 caractères parmi a..z A..Z 0..9</div>")
        }
      }
    }
  });

  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /*~~~~~~~~~~~~~~~~CONFIRM EDIT~~~~~~~~~~~~~~~~*/
  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  $("#allRecord").on("click", ".confirmEditUser", function() {
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /*~~~~~~~~~~~~~~~~CALL BACK DE LA VERIF DE MOT DE PASSE~~~~~~~~~~~~~~~~*/
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    function callBackVerif(data) {
      var dataToSend = new Object(); //Objet contenant les données à envoyé
      dataToSend["updatePW"] = (data === true ? false : true); //Si maj du mdp data === false
      if ($(".pw input", tr).val() === data || data === true) //Verif du mot de passe si nécesaire
      {
        for (i = 0; i < tds.length - 1; i++) //Analyse de chaque td
        {
          j = $(tds[i]);
          className = j.attr('class');
          if (className == "pw" && data === true)
            value = $('input,select', j).data("oldpw");
          else if (className == "login")
            value = ltrim(j.html());
          else
            value = $('input,select', j).val();
          dataToSend[className] = value;
        }
        $.post("post.php", dataToSend, function(data) {
          try {
            if (data.return == true) {
              for (i = 1; i < tds.length - 1; i++) //On change les input en pure html
              {
                j = $(tds[i]);
                className = j.attr('class');
                if (className == "pw")
                  value = data.pw;
                else
                  value = $('input,select', j).val();
                j.html(value);
              }
              swal("all done");
              $(that).toggleClass('fa-check fa-edit');
              $(that).toggleClass('confirmEditUser editUser');
            } else
              swal(data);
          } catch (e) {
            swal("Oops", "Something went wrong!<br>" + e, "error");
          }
          console.log(data.return)
        }, "json");
      } else {
        swal("Oops", "Password don't match !", "error");
      }
    }
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    tds = $("td", $(this).parent().parent()); //Récupère les td concernant le click
    tr = $(this).parent().parent(); //Récupère le tr concernant le click
    that = this;
    if (mailPatern.test($(".email input", tr).val()) && (passwordPatern.test($(".pw input", tr).val()) || $(".pw input", tr).val() == ""))
      if ($(".pw input", tr).val() === "") {
        callBackVerif(true);
      }
    else {
      swal({
        closeOnClickOutside: false,
        closeOnEsc: false,
        content: {
          element: "input",
          attributes: {
            placeholder: "Confirmer le mot de passe",
            type: "password",
          },
        },
      }).then(callBackVerif);
    } else
      swal("Oops", "Input don't respect rules !", "error");
  });
  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  /*~~~~~~~~~~~~~~~~ADD USER~~~~~~~~~~~~~~~~*/
  /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  $("#allRecord").on("click", ".fa-user-plus", function() {
    $(this).parent().parent().before(htmlAddUser);
  });
  $("#allRecord").on("click", ".confirmNewUser", function() {

  });
  $("#allRecord").on("click", ".delNewUser", function() {
    tr = $(this).parent().parent();
    tr.remove();
  });
});

//J'avais plein d'espace à droite et à gauche en récupérent mon innerHTML
//https://stackoverflow.com/questions/24282158/removing-the-white-space-at-the-start-of-the-string
function ltrim(str) {
  if (str == null) return str;
  str = str.replace(/^\s+/g, '')
  str = str.replace(/\s+$/g, '')
  return str;
}