From ac113b3b133d149b06596dda21e2612a2a1ffaba Mon Sep 17 00:00:00 2001
From: adri <reg+git@adriy.be>
Date: Sun, 30 Dec 2018 19:53:28 +0100
Subject: [PATCH] add js input rules

---
 index.php | 10 ++++----
 post.php  | 24 +++++++++---------
 script.js | 73 +++++++++++++++++++++++++++++++++++++++++--------------
 style.css | 14 +++++++++++
 4 files changed, 86 insertions(+), 35 deletions(-)

diff --git a/index.php b/index.php
index 58117e7..ec19f63 100755
--- a/index.php
+++ b/index.php
@@ -43,15 +43,15 @@ $reponse = $bdd->query('SELECT * FROM projetphp');
         ?>
         <tr class="record">
           <td class="login">
-            <?= htmlspecialchars($data["login"]) ?></td>
+            <?= ($data["login"]) ?></td>
           <td class="datene">
-            <?= htmlspecialchars($data["date_naissance"]) ?></td>
+            <?= ($data["date_naissance"]) ?></td>
           <td class="email">
-            <?= htmlspecialchars($data["e_mail"]) ?></td>
+            <?= ($data["e_mail"]) ?></td>
           <td class="pw">
-            <?= htmlspecialchars($data["mot_de_passe"]) ?></td>
+            <?= ($data["mot_de_passe"]) ?></td>
           <td class="sl">
-            <?= htmlspecialchars($data["security_level"]) ?></td>
+            <?= ($data["security_level"]) ?></td>
           <td><i class="fas fa-edit click editUser"></i><i class="fas fa-trash-alt click delUser"></i></td>
         </tr>
         <?php
diff --git a/post.php b/post.php
index d45c549..8ac06d0 100644
--- a/post.php
+++ b/post.php
@@ -9,30 +9,30 @@ try {
 }
 //UPDATE `projetphp` SET `security_level` = '6' WHERE `projetphp`.`login` = 'aaazzze';
 if(isset($_POST["updatePW"], $_POST["datene"], $_POST["email"], $_POST["pw"], $_POST["sl"], $_POST["login"]))
-  if($_POST["updatePW"] == "true")
+  if(htmlspecialchars($_POST["updatePW"], ENT_QUOTES, 'UTF-8') == "true")
   {
     $req = $bdd->prepare('UPDATE `projetphp` SET `date_naissance` = :datene, `e_mail` = :email, `mot_de_passe` = :pw, `security_level` = :sl WHERE `projetphp`.`login` = :login');
     $req->execute(array(
-      'datene' => $_POST["datene"],
-      'email' => $_POST["email"],
-      'pw' => md5($_POST["pw"]),
-      'sl' => $_POST["sl"],
-      'login' => $_POST["login"],
+      'datene' => htmlspecialchars($_POST["datene"], ENT_QUOTES, 'UTF-8'),
+      'email' => htmlspecialchars($_POST["email"], ENT_QUOTES, 'UTF-8'),
+      'pw' => md5(htmlspecialchars($_POST["pw"], ENT_QUOTES, 'UTF-8')),
+      'sl' => htmlspecialchars($_POST["sl"], ENT_QUOTES, 'UTF-8'),
+      'login' => htmlspecialchars($_POST["login"], ENT_QUOTES, 'UTF-8'),
     ));
     $ret["return"] = true;
-    $ret["pw"] = md5($_POST["pw"]);
+    $ret["pw"] = md5(htmlspecialchars($_POST["pw"], ENT_QUOTES, 'UTF-8'));
   }
   else
   {
     $req = $bdd->prepare('UPDATE `projetphp` SET `date_naissance` = :datene, `e_mail` = :email, `security_level` = :sl WHERE `projetphp`.`login` = :login');
     $req->execute(array(
-      'datene' => $_POST["datene"],
-      'email' => $_POST["email"],
-      'sl' => $_POST["sl"],
-      'login' => $_POST["login"],
+      'datene' => htmlspecialchars($_POST["datene"], ENT_QUOTES, 'UTF-8'),
+      'email' => htmlspecialchars($_POST["email"], ENT_QUOTES, 'UTF-8'),
+      'sl' => htmlspecialchars($_POST["sl"], ENT_QUOTES, 'UTF-8'),
+      'login' => htmlspecialchars($_POST["login"], ENT_QUOTES, 'UTF-8'),
     ));
     $ret["return"] = true;
-    $ret["pw"] = $_POST["pw"];
+    $ret["pw"] = htmlspecialchars($_POST["pw"], ENT_QUOTES, 'UTF-8');
   }
 else;
 
diff --git a/script.js b/script.js
index 566bd54..b0e829f 100644
--- a/script.js
+++ b/script.js
@@ -1,11 +1,40 @@
 $(function() {
+  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/
+$("#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 EDIT~~~~~~~~~~~~~~~~*/
   /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
  $("#allRecord").on("click", ".editUser", function() {
     $(this).toggleClass('fa-edit fa-check');
     $(this).toggleClass('editUser confirmEditUser');
-    for(i=0; i<$("td", $(this).parent().parent()).length-1;i++)
+    for(i=1; i<$("td", $(this).parent().parent()).length-1;i++)
     {
       j= $($("td", $(this).parent().parent())[i]);
       className = j.attr('class');
@@ -26,6 +55,10 @@ $(function() {
         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>")
+        }
       }
     }
  });
@@ -48,6 +81,8 @@ $(function() {
          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;
@@ -56,7 +91,7 @@ $(function() {
          try {
           if(data.return == true)
           {
-            for(i=0; i<tds.length-1;i++) //On change les input en pure html
+            for(i=1; i<tds.length-1;i++) //On change les input en pure html
             {
               j= $(tds[i]);
               className = j.attr('class');
@@ -64,7 +99,6 @@ $(function() {
                value = data.pw;
               else
                value = $('input,select', j).val();
-              dataToSend[className] = value;
               j.html(value);
             }
             swal("all done");
@@ -88,22 +122,25 @@ $(function() {
    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 ($(".pw input", tr).val() === "") {
-     callBackVerif(true);
-   }
-   else {
-     swal({
-       closeOnClickOutside: false,
-       closeOnEsc: false,
-       content: {
-         element: "input",
-         attributes: {
-           placeholder: "Confirmer le mot de passe",
-           type: "password",
+   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);
-   }
+       }).then(callBackVerif);
+     }
+    else
+      swal( "Oops" ,  "Input don't respect rules !" ,  "error" );
  });
 });
 
diff --git a/style.css b/style.css
index cfe5640..27f24bf 100644
--- a/style.css
+++ b/style.css
@@ -2,3 +2,17 @@
 {
   cursor: pointer;
 }
+.pw div{
+
+  display:none;
+  -moz-border-radius:6px;
+  -webkit-border-radius:6px;
+  border-radius:6px;
+  color:black;
+  background-color: #eff1f3;
+  font-size:10px;
+  font-style:italic;
+}
+input {
+  margin: 0px;
+}