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

Site :

Browse Source 
- Fix tele screen
This commit is contained in:
madegryc pc
2024-08-24 12:00:26 +02:00
parent ad71b653b6
commit 9d3476d027
6 changed files with 11 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
site/interface/site/home3D/Screen.js
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* Screen.js :+: :+: :+: */ /* Screen.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: marvin <marvin@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 23:13:53 by edbernar #+# #+# */ /* Created: 2024/08/22 23:13:53 by edbernar #+# #+# */
/* Updated: 2024/08/24 02:36:42 by edbernar ### ########.fr */ /* Updated: 2024/08/24 11:39:09 by marvin ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -65,7 +65,7 @@ class Screen
vertices[i + 2] = height; vertices[i + 2] = height;
} }
positionAttribute.needsUpdate = true; positionAttribute.needsUpdate = true;
mesh.scale.set(0.4, 0.4); mesh.scale.set(0.41, 0.42);
mesh.position.set(-0.155, 1.2, 1.15); mesh.position.set(-0.155, 1.2, 1.15);
mesh.rotation.x = Math.PI + 0.05; mesh.rotation.x = Math.PI + 0.05;
mesh.rotation.z = Math.PI; mesh.rotation.z = Math.PI;

6
site/interface/site/home3D/home3D.js
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* home3D.js :+: :+: :+: */ /* home3D.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: marvin <marvin@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 17:19:17 by edbernar #+# #+# */ /* Created: 2024/08/22 17:19:17 by edbernar #+# #+# */
/* Updated: 2024/08/24 02:46:49 by edbernar ### ########.fr */ /* Updated: 2024/08/24 11:41:18 by marvin ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -20,7 +20,7 @@ import { BokehPass } from 'three/examples/jsm/postprocessing/BokehPass.js';
const scene = new THREE.Scene(); const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer({antialias: true}); const renderer = new THREE.WebGLRenderer({antialias: true});
const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight); const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight);
const ambiantLight = new THREE.AmbientLight(0xffffff, 3); const ambiantLight = new THREE.AmbientLight(0xffffff, 35);
const screen = new Screen(scene); const screen = new Screen(scene);
const cube = createCube(); const cube = createCube();

3
site/interface/site/index.html
View File

@ -32,7 +32,7 @@
<div class="container"> <div class="container">
<div class="left-side"></div> <div class="left-side"></div>
<div class="right-side"> <div class="right-side">
<h1>Acces to a new WORLD</h1> <h1>Access to a new WORLD</h1>
<form> <form>
<label for="email">Email</label> <label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="Email"> <input type="email" id="email" name="email" placeholder="Email">
@ -51,7 +51,6 @@
<p>Or</p> <p>Or</p>
<span></span> <span></span>
</div> </div>
<button type="button" class="login-42-btn">Log with <span>42</span></button> <button type="button" class="login-42-btn">Log with <span>42</span></button>
</form> </form>
</div> </div>

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

@ -1,229 +0,0 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* createConnectDiv.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/07 18:14:53 by edbernar #+# #+# */
/* Updated: 2024/08/13 17:19:04 by madegryc ### ########.fr */
/* */
/* ************************************************************************** */
import { userMeInfo, waitForLogin } from "../typeResponse/typeLogin.js";
import { createNotification as CN } from "../notification/main.js";
import { sendRequest } from "../websocket.js";
import { showLoginDiv, showMenu } from "./main.js";
/*
Todo (Eddy) :
- 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
*/
let url42 = "https://api.intra.42.fr/oauth/authorize?client_id=u-s4t2ud-d9d6d46bd0be36dc13718981df4bfcf37e574ea364a07fcb5c39658be0f5706c&redirect_uri=http%3A%2F%2F127.0.0.1%3A5500%2Fsite%2F&response_type=code";
function createConnectDiv(divLogin)
{
const form = document.createElement("form");
const divConnect = document.createElement("div");
const inputLogin = document.createElement("input");
const inputPass = document.createElement("input");
const buttonLogin = createButton(inputLogin, inputPass);
const buttonConnect42 = document.createElement("button");
const mailText = document.createElement("p");
const passText = document.createElement("p");
const MainText = document.createElement("h1");
const newPlayerText = document.createElement("p");
const createAccText = document.createElement("p");
const newAccDiv = document.createElement("div");
const divCenter = document.createElement("div");
const orText = document.createElement("p");
addGlobalBg();
MainText.innerText = "Access to a new WORLD";
MainText.setAttribute("id", "mainText");
mailText.innerText = "Email";
passText.innerText = "Password";
newPlayerText.innerText = "New Player ?";
newPlayerText.setAttribute("id", "newPlayerText")
createAccText.innerText = "Create an account";
createAccText.setAttribute("id", "createAccText")
createAccText.addEventListener("mousedown", () => {
createButtonNewAcc(divConnect, divLogin);
});
newAccDiv.setAttribute("id", "newAccDiv");
divConnect.setAttribute("id", "connectDiv");
inputLogin.setAttribute("type", "text");
inputLogin.setAttribute("id", "inputLogin");
inputLogin.setAttribute("placeholder", "login");
inputLogin.setAttribute("autocomplete", "username");
inputPass.setAttribute("type", "password");
inputPass.setAttribute("id", "inputPassword");
inputPass.setAttribute("autocomplete", "current-password");
inputPass.setAttribute("placeholder", "password");
buttonLogin.innerHTML = "Login";
buttonLogin.setAttribute("id", "styleButton");
orText.innerText = "▬▬▬▬▬▬▬▬ ㅤ Or ㅤ ▬▬▬▬▬▬▬▬";
orText.setAttribute("id", "orText");
buttonConnect42.innerHTML = "Log with 42";
buttonConnect42.setAttribute("id", "styleButton42")
divConnect.appendChild(MainText);
form.appendChild(mailText);
form.appendChild(inputLogin);
form.appendChild(passText);
form.appendChild(inputPass);
form.appendChild(buttonLogin);
newAccDiv.appendChild(newPlayerText);
newAccDiv.appendChild(createAccText);
form.appendChild(newAccDiv);
form.appendChild(orText);
form.appendChild(buttonConnect42);
divCenter.appendChild(form);
divCenter.setAttribute("id", "divCenter");
divConnect.appendChild(divCenter);
form.addEventListener('submit', (e) => {
e.preventDefault();
buttonLogin.click();
});
buttonConnect42.addEventListener('click', (e) => {
e.preventDefault();
window.location.replace(url42);
});
return (divConnect);
}
function addGlobalBg()
{
const globalBg = document.createElement("div");
globalBg.setAttribute("id", "globalBg");
document.body.appendChild(globalBg);
}
async function hashPassword(password)
{
const encoder = new TextEncoder();
const data = encoder.encode(password);
const hash = await crypto.subtle.digest('SHA-256', data);
const hashArray = Array.from(new Uint8Array(hash));
const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
return (hashHex);
}
function createButton(inputLogin, inputPass)
{
const loginButton = document.getElementById('loginButton');
const pLoginButton = loginButton.getElementsByTagName('p')[0];
const button = document.createElement("button");
let usernameNode = null;
let hashedPass = null;
button.addEventListener('click', (e) => {
e.preventDefault();
hashPassword(inputPass.value).then((hash) => {
hashedPass = hash;
sendRequest("login", {type: "byPass", mail: inputLogin.value, password: hashedPass});
waitForLogin().then((token) => {
usernameNode = document.createTextNode(userMeInfo.username);
loginButton.replaceChild(usernameNode, pLoginButton);
CN.new("Connected successfully", "Welcome " + userMeInfo.username, CN.defaultIcon.success);
document.getElementById("loginDiv").remove();
document.getElementById("globalBg").remove();
document.cookie = "token={" + token + "}; path=/; Secure; SameSite=Strict; max-age=3600";
document.getElementById('loginButton').removeEventListener('click', showLoginDiv);
document.getElementById('loginButton').addEventListener('click', showMenu);
});
}).catch((err) => {
CN.new("Error", "An error occured while trying to connect", CN.defaultIcon.error);
});
});
return (button);
}
function createButtonNewAcc(divConnect, divLogin)
{
const newDiv = document.createElement("div");
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");
newDiv.setAttribute("id", "connectDiv");
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";
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);
}
function createNewAccount(e)
{
const inputMail = document.getElementsByTagName("input")[0];
const inputUsername = document.getElementsByTagName("input")[1];
const inputPass = document.getElementsByTagName("input")[2];
const inputPass2 = document.getElementsByTagName("input")[3];
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.length > 20)
CN.new("Error", "Username must be at most 20 characters long", CN.defaultIcon.error);
else if (inputUsername.value.search(' ') !== -1)
CN.new("Error", "Username must not contain spaces", 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("create_account", {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 };

4
site/interface/site/main.js
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* main.js :+: :+: :+: */ /* main.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: marvin <marvin@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/30 13:50:35 by edbernar #+# #+# */ /* Created: 2024/07/30 13:50:35 by edbernar #+# #+# */
/* Updated: 2024/08/23 23:36:33 by edbernar ### ########.fr */ /* Updated: 2024/08/24 11:57:47 by marvin ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */

5
site/interface/site/style/home.css
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* home.css :+: :+: :+: */ /* home.css :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: marvin <marvin@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/07 12:00:55 by edbernar #+# #+# */ /* Created: 2024/08/07 12:00:55 by edbernar #+# #+# */
/* Updated: 2024/08/24 02:10:59 by edbernar ### ########.fr */ /* Updated: 2024/08/24 11:26:27 by marvin ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -59,7 +59,6 @@ body {
padding: 0; padding: 0;
padding-inline: 50px; padding-inline: 50px;
display: flex; display: flex;
background-color: #020202;
gap: 2rem; gap: 2rem;
align-items: center; align-items: center;
position: absolute; position: absolute;