tom/METH_Transcendence
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Site

Browse Source 
- 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"
This commit is contained in:
Kum1ta
2024-08-08 23:53:59 +02:00
parent de9b50b264
commit c2a4ea3a3a
3 changed files with 105 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

101
site/interface/site/login/createConnectDiv.js
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* createConnectDiv.js :+: :+: :+: */ /* createConnectDiv.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42.fr> +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/07 18:14:53 by edbernar #+# #+# */ /* Created: 2024/08/07 18:14:53 by edbernar #+# #+# */
/* Updated: 2024/08/08 17:27:14 by edbernar ### ########.fr */ /* Updated: 2024/08/08 23:49:20 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -14,8 +14,25 @@ import { userMeInfo, waitForLogin } from "../typeResponse/typeLogin.js";
import { createNotification as CN } from "../notification/main.js"; import { createNotification as CN } from "../notification/main.js";
import { sendRequest } from "../websocket.js"; import { sendRequest } from "../websocket.js";
/*
Todo (Eddy) :
- Gerer coté serveur le type "createAccount"
- ajouter un message de confirmation de création de compte et un message d'erreur
- une fleche pour revenir en arriere
- remettre sur l'ecran de login quand le compte est créé
- ajouter l'envoi d'un mail de confirmation
- Empecher les requetes de connexion si un champ est vide
- Ajouter un message d'erreur si le mail est invalide
- Connexion par 42
Todo (Tom) :
- Mettre des pages temporaires accesibles qu'on envoie par mail pour confirmer le compte
*/
function createConnectDiv(divLogin) function createConnectDiv(divLogin)
{ {
const form = document.createElement("form");
const divConnect = document.createElement("div"); const divConnect = document.createElement("div");
const inputLogin = document.createElement("input"); const inputLogin = document.createElement("input");
const inputPass = document.createElement("input"); const inputPass = document.createElement("input");
@ -26,13 +43,20 @@ function createConnectDiv(divLogin)
divConnect.setAttribute("id", "connectDiv"); divConnect.setAttribute("id", "connectDiv");
inputLogin.setAttribute("type", "text"); inputLogin.setAttribute("type", "text");
inputLogin.setAttribute("placeholder", "login"); inputLogin.setAttribute("placeholder", "login");
inputLogin.setAttribute("autocomplete", "username");
inputPass.setAttribute("type", "password"); inputPass.setAttribute("type", "password");
inputPass.setAttribute("autocomplete", "current-password");
inputPass.setAttribute("placeholder", "password"); inputPass.setAttribute("placeholder", "password");
buttonLogin.innerHTML = "Connect"; buttonLogin.innerHTML = "Connect";
divConnect.appendChild(inputLogin); form.appendChild(inputLogin);
divConnect.appendChild(inputPass); form.appendChild(inputPass);
divConnect.appendChild(buttonLogin); form.appendChild(buttonLogin);
divConnect.appendChild(buttonNewAcc); form.appendChild(buttonNewAcc);
divConnect.appendChild(form);
form.addEventListener('submit', (e) => {
e.preventDefault();
buttonLogin.click();
});
return (divConnect); return (divConnect);
} }
@ -63,7 +87,8 @@ function createButton(inputLogin, inputPass)
let usernameNode = null; let usernameNode = null;
let hashedPass = null; let hashedPass = null;
button.addEventListener('click', () => { button.addEventListener('click', (e) => {
e.preventDefault();
hashPassword(inputPass.value).then((hash) => { hashPassword(inputPass.value).then((hash) => {
hashedPass = hash; hashedPass = hash;
sendRequest("login", {type: "byPass", mail: inputLogin.value, password: hashedPass}); sendRequest("login", {type: "byPass", mail: inputLogin.value, password: hashedPass});
@ -89,37 +114,77 @@ function createButtonNewAcc(divConnect, divLogin)
const inputUsername = document.createElement("input"); const inputUsername = document.createElement("input");
const inputMail = document.createElement("input"); const inputMail = document.createElement("input");
const inputPass = document.createElement("input"); const inputPass = document.createElement("input");
const inputPass2 = document.createElement("input");
const buttonCreate = document.createElement("button"); const buttonCreate = document.createElement("button");
const form = document.createElement("form");
button.innerHTML = "Create a new account"; button.innerHTML = "Create a new account";
newDiv.setAttribute("id", "connectDiv"); newDiv.setAttribute("id", "connectDiv");
button.addEventListener('click', () => { button.addEventListener('click', (e) => {
e.preventDefault();
inputUsername.setAttribute("type", "text"); inputUsername.setAttribute("type", "text");
inputUsername.setAttribute("placeholder", "username"); inputUsername.setAttribute("placeholder", "username");
inputUsername.setAttribute("autocomplete", "username");
inputMail.setAttribute("type", "text"); inputMail.setAttribute("type", "text");
inputMail.setAttribute("placeholder", "mail"); inputMail.setAttribute("placeholder", "mail");
inputMail.setAttribute("autocomplete", "email");
inputPass.setAttribute("type", "password"); inputPass.setAttribute("type", "password");
inputPass.setAttribute("placeholder", "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"; buttonCreate.innerHTML = "Create";
newDiv.appendChild(inputUsername); form.appendChild(inputMail);
newDiv.appendChild(inputMail); form.appendChild(inputUsername);
newDiv.appendChild(inputPass); form.appendChild(inputPass);
newDiv.appendChild(buttonCreate); form.appendChild(inputPass2);
button.addEventListener('click', createNewAccount); form.appendChild(buttonCreate);
newDiv.appendChild(form);
buttonCreate.addEventListener('click', createNewAccount);
form.addEventListener('submit', (e) => {
e.preventDefault();
buttonCreate.click();
});
divConnect.remove(); divConnect.remove();
divLogin.appendChild(newDiv); divLogin.appendChild(newDiv);
}); });
return (button); return (button);
} }
function createNewAccount() function createNewAccount(e)
{ {
const inputUsername = document.getElementsByTagName("input")[0]; const inputMail = document.getElementsByTagName("input")[0];
const inputMail = document.getElementsByTagName("input")[1]; const inputUsername = document.getElementsByTagName("input")[1];
const inputPass = document.getElementsByTagName("input")[2]; 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 }; export { createConnectDiv };

22
site/interface/site/style/loginPage.css
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* loginPage.css :+: :+: :+: */ /* loginPage.css :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42.fr> +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/07 17:15:28 by edbernar #+# #+# */ /* Created: 2024/08/07 17:15:28 by edbernar #+# #+# */
/* Updated: 2024/08/07 18:53:06 by edbernar ### ########.fr */ /* Updated: 2024/08/08 23:22:32 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -75,4 +75,22 @@
background-color: #616161; background-color: #616161;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
}
#connectDiv form {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#connectDiv #button {
width: 20%;
height: 20px;
margin: 10px;
cursor: pointer;
background-color: white;
text-align: center;
} }

4
websocket-server/typeRequets/login.py
View File

@ -3,10 +3,10 @@
# ::: :::::::: # # ::: :::::::: #
# login.py :+: :+: :+: # # login.py :+: :+: :+: #
# +:+ +:+ +:+ # # +:+ +:+ +:+ #
# By: edbernar <edbernar@student.42.fr> +#+ +:+ +#+ # # By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ #
# +#+#+#+#+#+ +#+ # # +#+#+#+#+#+ +#+ #
# Created: 2024/08/03 08:10:38 by edbernar #+# #+# # # Created: 2024/08/03 08:10:38 by edbernar #+# #+# #
# Updated: 2024/08/08 16:42:43 by edbernar ### ########.fr # # Updated: 2024/08/08 22:31:18 by edbernar ### ########.fr #
# # # #
# **************************************************************************** # # **************************************************************************** #