htmlAddUser = '<tr class="newRecord">\
  <td class="login">\
    <input type="text" /></td>\
  <td class="datene">\
    <input type="date" /></td>\
  <td class="email">\
    <input type="text" /></td>\
  <td class="pw">\
    <input type="password" /></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/


$(function() {
$("#allRecord").on("keyup", ".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", ".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");
  }
});
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~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" '
        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);
     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 a droite 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;
  return str.replace(/^\s+/g, '');
}