From c2a4ea3a3a2b17e8dab20201276d43b244cb58cd Mon Sep 17 00:00:00 2001 From: Kum1ta Date: Thu, 8 Aug 2024 23:53:59 +0200 Subject: [PATCH] Site - Added form on login for prevent google chrome warn - Can press "enter" to connect on login page - Added condition for create strong password - Added "todo" in "createConnectDiv.js" --- site/interface/site/login/createConnectDiv.js | 101 ++++++++++++++---- site/interface/site/style/loginPage.css | 22 +++- websocket-server/typeRequets/login.py | 4 +- 3 files changed, 105 insertions(+), 22 deletions(-) diff --git a/site/interface/site/login/createConnectDiv.js b/site/interface/site/login/createConnectDiv.js index fd75f33..e7674ed 100644 --- a/site/interface/site/login/createConnectDiv.js +++ b/site/interface/site/login/createConnectDiv.js @@ -3,10 +3,10 @@ /* ::: :::::::: */ /* createConnectDiv.js :+: :+: :+: */ /* +:+ +:+ +:+ */ -/* By: edbernar +#+ +:+ +#+ */ +/* By: edbernar { + e.preventDefault(); + buttonLogin.click(); + }); return (divConnect); } @@ -63,7 +87,8 @@ function createButton(inputLogin, inputPass) let usernameNode = null; let hashedPass = null; - button.addEventListener('click', () => { + button.addEventListener('click', (e) => { + e.preventDefault(); hashPassword(inputPass.value).then((hash) => { hashedPass = hash; sendRequest("login", {type: "byPass", mail: inputLogin.value, password: hashedPass}); @@ -89,37 +114,77 @@ function createButtonNewAcc(divConnect, divLogin) const inputUsername = document.createElement("input"); const inputMail = document.createElement("input"); const inputPass = document.createElement("input"); + const inputPass2 = document.createElement("input"); const buttonCreate = document.createElement("button"); + const form = document.createElement("form"); button.innerHTML = "Create a new account"; newDiv.setAttribute("id", "connectDiv"); - button.addEventListener('click', () => { + button.addEventListener('click', (e) => { + e.preventDefault(); inputUsername.setAttribute("type", "text"); inputUsername.setAttribute("placeholder", "username"); + inputUsername.setAttribute("autocomplete", "username"); inputMail.setAttribute("type", "text"); inputMail.setAttribute("placeholder", "mail"); + inputMail.setAttribute("autocomplete", "email"); inputPass.setAttribute("type", "password"); inputPass.setAttribute("placeholder", "password"); + inputPass.setAttribute("autocomplete", "new-password"); + inputPass2.setAttribute("type", "password"); + inputPass2.setAttribute("placeholder", "confirm password"); + inputPass2.setAttribute("autocomplete", "new-password"); buttonCreate.innerHTML = "Create"; - newDiv.appendChild(inputUsername); - newDiv.appendChild(inputMail); - newDiv.appendChild(inputPass); - newDiv.appendChild(buttonCreate); - button.addEventListener('click', createNewAccount); + form.appendChild(inputMail); + form.appendChild(inputUsername); + form.appendChild(inputPass); + form.appendChild(inputPass2); + form.appendChild(buttonCreate); + newDiv.appendChild(form); + buttonCreate.addEventListener('click', createNewAccount); + form.addEventListener('submit', (e) => { + e.preventDefault(); + buttonCreate.click(); + }); divConnect.remove(); divLogin.appendChild(newDiv); }); return (button); } -function createNewAccount() +function createNewAccount(e) { - const inputUsername = document.getElementsByTagName("input")[0]; - const inputMail = document.getElementsByTagName("input")[1]; + const inputMail = document.getElementsByTagName("input")[0]; + const inputUsername = document.getElementsByTagName("input")[1]; const inputPass = document.getElementsByTagName("input")[2]; + const inputPass2 = document.getElementsByTagName("input")[3]; - console.warn("Faire la requete pour creer un compte"); + e.preventDefault(); + if (inputMail.value.indexOf('@') === -1 || inputMail.value.indexOf('.') === -1) + { + console.log(inputMail.value); + CN.new("Error", "Invalid mail", CN.defaultIcon.error); + } + else if (inputUsername.value.length < 3) + CN.new("Error", "Username must be at least 3 characters long", CN.defaultIcon.error); + else if (inputUsername.value.search(/[^a-zA-Z0-9]/) !== -1) + CN.new("Error", "Username must contain only letters and numbers", CN.defaultIcon.error); + else if (inputPass.value.length < 8) + CN.new("Error", "Password must be at least 8 characters long", CN.defaultIcon.error); + else if (inputPass.value !== inputPass2.value) + CN.new("Error", "Passwords do not match", CN.defaultIcon.error); + else if (inputPass.value.search(/[a-z]/) === -1 || inputPass.value.search(/[A-Z]/) === -1 || inputPass.value.search(/[0-9]/) === -1) + CN.new("Error", "Password must contain at least one lowercase letter, one uppercase letter and one number", CN.defaultIcon.error); + else if (inputPass.value.search(inputUsername.value) !== -1) + CN.new("Error", "Password must not contain the username", CN.defaultIcon.error); + else + { + hashPassword(inputPass.value).then((hash) => { + sendRequest("createAccount", {username: inputUsername.value, mail: inputMail.value, password: hash}); + }).catch((err) => { + CN.new("Error", "An error occured while trying to create a new account", CN.defaultIcon.error); + }); + } } - export { createConnectDiv }; \ No newline at end of file diff --git a/site/interface/site/style/loginPage.css b/site/interface/site/style/loginPage.css index fb954e5..afe6438 100644 --- a/site/interface/site/style/loginPage.css +++ b/site/interface/site/style/loginPage.css @@ -3,10 +3,10 @@ /* ::: :::::::: */ /* loginPage.css :+: :+: :+: */ /* +:+ +:+ +:+ */ -/* By: edbernar +#+ +:+ +#+ */ +/* By: edbernar +#+ +:+ +#+ # +# By: edbernar