295 lines
11 KiB
JavaScript
295 lines
11 KiB
JavaScript
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~~~~~~~~~~~~~~~~*/
|
|
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
|
|
$("#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");
|
|
}
|
|
});
|
|
$("#allRecord").on("keyup change", ".login :input", 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());
|
|
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/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");
|
|
}
|
|
console.log(data.return)
|
|
}, "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;
|
|
}
|