projetphp/script.js

302 lines
11 KiB
JavaScript
Executable File

htmlAddUser = '<tr class="newRecord">\
<td class="login">\
<input type="text" />\
<div class="userExist">L\'utilisateur existe déja !</div>\
<div class="ruleExcept">le login comporte entre 8 et 16 caractères parmi a..z</div></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~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
$("body").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");
}
});
$("body").on("keyup change", ".pw2 input", function() {
if ($(this).val() == $(".pw input").val()) {
$(this).css("background-color", "");
} else {
$(this).css("background-color", "red");
}
});
$("body").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");
}
});
$("body").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");
}
});
$("body").on("keyup change", ".login input, input .login", function(e) {
login = ltrim($(this).val());
input = $(this);
td = $(this).parent();
if (loginPatern.test(login)) {
$(this).css("background-color", "");
$('.ruleExcept', $(this).parent()).css("display", "none");
$.post("post.php", {userExist: login}, function(data) {
try {
if (data.return == "userExist") {
$('.userExist', td).css("display", "block");
input.css("background-color", "red");
} else if(data.return == "userNotExist")
{
$('.userExist', td).css("display", "none");
input.css("background-color", "");
}
} catch (e) {
swal("Oops", "Something went wrong!<br>" + e, "error");
}
}, "json");
} else {
$(this).css("background-color", "red");
$('.ruleExcept', td).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());
opt = ($("#slVal").val()=="10"?"":"disabled")
j.html('<select '+opt+'>\
<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/NewUser~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
$("#allRecord").on("click", ".confirmEditUser, .confirmNewUser", function() {
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~CALL BACK DE LA VERIF DE MOT DE PASSE~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
function callBackVerifPW(data) {
function postData(dataToSend)
{
$.post("post.php", dataToSend, function(data) {
try {
if (data.return == true) {
for (i = (dataToSend["newUser"]?0: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("Oops", "Something went wrong!<br> " + JSON.stringify(data), "error");
} catch (e) {
swal("Oops", "Something went wrong!<br>" + e, "error");
}
}, "json");
}
var dataToSend = new Object(); //Objet contenant les données à envoyé
dataToSend["newUser"] = tr.is(".newRecord")
dataToSend["updatePW"] = (data === true ? false : true); //Si maj du mdp data === false
if ($(".pw input", tr).val() === data || data === true && !dataToSend["newUser"]) //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" && !dataToSend["newUser"])
value = ltrim(j.html());
else
value = $('input,select', j).val();
dataToSend[className] = value;
}
if(dataToSend["newUser"])
$.post("post.php", {userExist: dataToSend["login"]}, function(data) {
try {
if (data.return == "userExist") {
$('.userExist', tr).css("display", "block");
$(".login input", tr).css("background-color", "red");
swal("Oops", "User "+dataToSend["login"]+" already exist !", "error");
return false;
} else if(data.return == "userNotExist")
{
$('.userExist', tr).css("display", "none");
$(".login input", tr).css("background-color", "");
postData(dataToSend);
}
} catch (e) {
swal("Oops", "Something went wrong!<br>" + e, "error");
}
}, "json");
else
postData(dataToSend);
} else {
swal("Oops", (dataToSend["newUser"]?"New user need password !":"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() === "") {
callBackVerifPW(true);
}
else {
swal({
closeOnClickOutside: false,
closeOnEsc: false,
content: {
element: "input",
attributes: {
placeholder: "Confirmer le mot de passe",
type: "password",
},
},
}).then(callBackVerifPW);
} 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;
}