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

Site

Browse Source 
- login now working (but not if refresh page
    - Starting singlepage
Django
    - Added path
This commit is contained in:
Kum1ta
2024-08-25 17:21:05 +02:00
parent e6e95de5ea
commit 49f7ba43e6
24 changed files with 292 additions and 238 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
docker-compose/requirements/nginx/static/javascript/Page.js
View File

@ -6,19 +6,69 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/25 00:00:21 by edbernar #+# #+# */
/* Updated: 2024/08/25 00:27:21 by edbernar ### ########.fr */
/* Updated: 2024/08/25 15:22:15 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { HomePage } from "/static/javascript/homePage/main.js";
class Page
{
actualPage = null;
availablePages = [
{url:'/', servUrl: '/homePage', class: HomePage, name: 'homePage', title: 'PTME - Home'},
]
constructor()
{
for (let i = 0; i < this.availablePages.length; i++)
{
if (window.location.pathname == this.availablePages[i].url)
{
this.changePage(this.availablePages[i].name);
return ;
}
}
this.#showUnknownPage();
}
changePage(name)
{
if (this.actualPage != null)
this.actualPage.dispose();
for (let i = 0; i < this.availablePages.length; i++)
{
if (name === this.availablePages[i].name)
{
fetch(this.availablePages[i].servUrl)
.then(response => {
if (response.status != 200)
throw Error("Page '" + name + "' can't be loaded")
return (response);
})
.then(data => {
data.text().then(text => {
document.body.innerHTML = text;
this.availablePages[i].class.create();
document.title = this.availablePages[i].title;
this.actualPage = this.availablePages[i].name;
history.pushState({}, this.availablePages[i].title, this.availablePages[i].url);
});
})
.catch(error => {
throw Error(error);
});
return ;
}
}
throw Error("Page '" + page + "' not exist");
}
#showUnknownPage()
{
document.body.innerHTML = "404 - Page not found";
}
};
export { Page }

74
docker-compose/requirements/nginx/static/javascript/home3D/home3D.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/22 17:19:17 by edbernar #+# #+# */
/* Updated: 2024/08/25 02:19:56 by edbernar ### ########.fr */
/* Updated: 2024/08/25 15:03:42 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -246,53 +246,59 @@ function home3D()
scene.add(mesh);
}
function fadeInOut()
{
function fadeInOut() {
if (isInFade)
return;
if (intervalFade)
clearInterval(intervalFade);
intervalFade = null;
isInFade = true;
intervalFade = setInterval(() => {
const fadeOut = setInterval(() => {
if (screen == null)
{
clearInterval(intervalFade);
return ;
clearInterval(fadeOut);
return;
}
light.point -= 0.2;
screen.screen.material.opacity -= 0.05;
if (screen.screen.material.opacity <= 0)
{
clearInterval(intervalFade);
setTimeout(() => {
if (screen == null)
{
clearInterval(intervalFade);
return ;
}
interval = setInterval(() => {
light.point += 0.2;
screen.screen.material.opacity += 0.05;
if (screen.screen.material.opacity >= 1)
{
if (screen == null)
{
clearInterval(intervalFade);
return ;
}
clearInterval(intervalFade);
intervalFade = setInterval(() => {
light.point += 0.2;
if (light.point >= 1)
clearInterval(intervalFade);
}, 10);
isInFade = false;
}
}, 20);
}, 500);
clearInterval(fadeOut);
setTimeout(fadeIn, 500);
}
}, 20);
function fadeIn()
{
const fadeInInterval = setInterval(() => {
if (screen == null)
{
clearInterval(fadeInInterval);
return;
}
light.point += 0.2;
screen.screen.material.opacity += 0.05;
if (screen.screen.material.opacity >= 1)
{
clearInterval(fadeInInterval);
completeFade();
}
}, 20);
}
function completeFade() {
intervalFade = setInterval(() => {
light.point += 0.2;
if (light.point >= 1)
{
clearInterval(intervalFade);
isInFade = false;
}
}, 10);
}
}
renderer.setAnimationLoop(loop)
}

6
docker-compose/requirements/nginx/static/javascript/homePage/main.js
View File

@ -6,23 +6,27 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/25 00:02:19 by edbernar #+# #+# */
/* Updated: 2024/08/25 02:06:24 by edbernar ### ########.fr */
/* Updated: 2024/08/25 15:29:51 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { Home3D } from "/static/javascript/home3D/home3D.js"
import { Login } from "/static/javascript/login/main.js";
// import { liveChat } from "/static/javascript/liveChat/main.js";
class HomePage
{
static create()
{
Home3D.create();
Login.create();
window.addEventListener('scroll', scrool);
}
static dispose()
{
Home3D.dispose();
Login.dispose();
window.addEventListener('scroll', scrool);
}
};

106
docker-compose/requirements/nginx/static/javascript/login/main.js
View File

@ -6,29 +6,46 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/07 17:40:15 by edbernar #+# #+# */
/* Updated: 2024/08/24 23:42:45 by edbernar ### ########.fr */
/* Updated: 2024/08/25 17:14:01 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { createNotification as CN } from "/static/javascript/notification/main.js";
import { userMeInfo, waitForLogin } from "/static/javascript/typeResponse/typeLogin.js";
function login()
import { sendRequest } from "/static/javascript/websocket.js";
class Login
{
const loginButton = document.getElementById('loginButton');
const pLoginButton = loginButton.getElementsByTagName('p')[0];
let nodeText = null;
static create()
{
const loginButton = document.getElementById('loginButton');
const pLoginButton = loginButton.getElementsByTagName('p')[0];
const form = document.getElementById('loginForm');
let nodeText = null;
// waitForLogin().then((token) => {
// nodeText = document.createTextNode(userMeInfo.username);
// if (userMeInfo.id !== -1)
// {
// loginButton.replaceChild(nodeText, pLoginButton);
// loginButton.addEventListener('click', showMenu);
// }
// else
loginButton.addEventListener('click', showLoginDiv);
// });
waitForLogin().then(() => {
if (userMeInfo.id !== -1)
{
nodeText = document.createTextNode(userMeInfo.username);
loginButton.replaceChild(nodeText, pLoginButton);
// loginButton.addEventListener('click', showMenu);
}
else
{
loginButton.addEventListener('click', showLoginDiv);
}
});
form.addEventListener('submit', connect);
}
static dispose()
{
const loginButton = document.getElementById('loginButton');
const form = document.getElementById('loginForm');
loginButton.removeEventListener('click', showLoginDiv);
form.removeEventListener('submit', connect);
}
}
function showLoginDiv()
@ -41,47 +58,28 @@ function showLoginDiv()
popout.style.display = 'flex';
}
function showMenu()
function connect(e)
{
const loginButton = document.getElementById('loginButton');
const divMenu = document.createElement("div");
const ul = document.createElement("ul");
const li1 = document.createElement("li");
const li2 = document.createElement("li");
let already_activated = false;
divMenu.setAttribute("id", "menuDiv");
li1.innerHTML = "Profile";
li2.innerHTML = "Logout";
li1.addEventListener('click', (e) => {
console.log("profile");
});
li2.addEventListener('click', (e) => {
document.cookie = "token=; path=/; Secure; SameSite=Strict; max-age=0";
window.location.href = "/";
location.reload();
});
ul.appendChild(li1);
ul.appendChild(li2);
divMenu.appendChild(ul);
divMenu.style.position = "absolute";
divMenu.style.width = loginButton.offsetWidth + "px";
divMenu.style.top = loginButton.offsetTop + loginButton.offsetHeight + "px";
divMenu.style.left = loginButton.offsetLeft + "px";
document.body.appendChild(divMenu);
loginButton.removeEventListener('click', showMenu);
loginButton.addEventListener('click', () => {
if (!already_activated)
const loginButton = document.getElementById('loginButton');
const pLoginButton = loginButton.getElementsByTagName('p')[0];
const popout = document.getElementById('loginPopup');
const mail = document.getElementById('email').value;
let usernameNode = null;
e.preventDefault();
sendRequest("login", {type: "byPass", mail: mail, password: e.target.password.value});
waitForLogin().then((isConnected) => {
if (isConnected)
{
setTimeout(() => {
document.getElementById("menuDiv").remove();
loginButton.addEventListener('click', showMenu);
already_activated = true;
}, 199);
document.getElementById("menuDiv").style.animation = "animHideMenuDiv 0.21s";
usernameNode = document.createTextNode(userMeInfo.username);
loginButton.replaceChild(usernameNode, pLoginButton);
CN.new("Connected successfully", "Welcome " + userMeInfo.username, CN.defaultIcon.success);
popout.style.display = 'none';
}
}).catch((err) => {
console.error(err);
CN.new("Error", "An error occured while trying to connect", CN.defaultIcon.error);
});
}
export { login, showLoginDiv, showMenu };
export { Login };

16
docker-compose/requirements/nginx/static/javascript/main.js
View File

@ -6,19 +6,15 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/30 13:50:35 by edbernar #+# #+# */
/* Updated: 2024/08/25 02:21:47 by edbernar ### ########.fr */
/* Updated: 2024/08/25 15:52:57 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { liveChat } from "/static/javascript/liveChat/main.js";
import { login } from "/static/javascript/login/main.js";
import { HomePage } from "/static/javascript/homePage/main.js"
import * as Socket from '/static/javascript/websocket.js';
import { Page } from '/static/javascript/Page.js';
let pageRenderer = null;
document.addEventListener('DOMContentLoaded', () => {
liveChat();
login();
HomePage.create();
setTimeout(() => {
HomePage.dispose();
}, 3000);
pageRenderer = new Page();
});

5
docker-compose/requirements/nginx/static/javascript/typeErrorResponse/typeErrorInvalidPassword.js
View File

@ -6,15 +6,18 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/07 21:16:09 by edbernar #+# #+# */
/* Updated: 2024/08/24 23:43:40 by edbernar ### ########.fr */
/* Updated: 2024/08/25 16:15:05 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { createNotification as NC } from "/static/javascript/notification/main.js";
import { typeLogin } from "/static/javascript/typeResponse/typeLogin.js";
function typeErrorInvalidPassword()
{
NC.new("Connection error", "Invalid mail or password", NC.defaultIcon.error);
typeLogin(false);
}
export { typeErrorInvalidPassword };

10
docker-compose/requirements/nginx/static/javascript/typeResponse/typeLogin.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/02 00:39:53 by edbernar #+# #+# */
/* Updated: 2024/08/07 22:14:49 by edbernar ### ########.fr */
/* Updated: 2024/08/25 17:09:22 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -30,19 +30,17 @@ function waitForLogin() {
function typeLogin(content)
{
if (content != null)
if (content && typeof(content) != 'boolean' && content.status == true)
{
console.log("Welcome " + content.username + "\nYou're id is " + content.id);
userMeInfo.username = content.username;
userMeInfo.id = content.id;
console.warn("L'ID a été ajouté manuellement dans le serv: " + userMeInfo.id);
}
loginAvailable = true;
if (loginResolve)
{
if (content != null)
loginResolve(content.token);
else
loginResolve();
loginResolve(content);
loginResolve = null;
loginAvailable = false;
}

20
docker-compose/requirements/nginx/static/javascript/websocket.js
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/31 22:17:24 by edbernar #+# #+# */
/* Updated: 2024/08/24 23:45:49 by edbernar ### ########.fr */
/* Updated: 2024/08/25 17:17:57 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -18,17 +18,10 @@ import { typeNewPrivateMessage } from "/static/javascript/typeResponse/typeNewPr
import { typePrivateListUser } from "/static/javascript/typeResponse/typePrivateListUser.js";
import { typeLogin } from "/static/javascript/typeResponse/typeLogin.js";
/*
Todo (Eddy) :
- Request to connect by email and password. Waiting for the front to do it (already functional on the back side)
sendRequest("login", {type: "byPass", mail: "aa@aa.fr", password: "ABC123"});
- Information: the 'token' variable is only used until the connection is fully implemented
*/
const socket = new WebSocket('/ws');
const socket = new WebSocket('ws://localhost:8000/');
const typeResponse = ["login", "private_list_user", "private_list_message", "new_private_message"];
const functionResponse = [typeLogin, typePrivateListUser, typePrivateListMessage, typeNewPrivateMessage];
const typeResponse = ["logged_in", "login", "private_list_user", "private_list_message", "new_private_message"];
const functionResponse = [typeLogin, typeLogin, typePrivateListUser, typePrivateListMessage, typeNewPrivateMessage];
const errorCode = [9007, 9010, 9011];
const errorFunction = [typeErrorInvalidPassword, typeErrorInvalidToken42, typeErrorUnknown42Account];
@ -54,10 +47,6 @@ socket.onopen = () => {
status = 1;
console.log('Connected');
if (token)
sendRequest("login", {type: "byToken", token: token});
else
typeLogin(null);
};
socket.onmessage = (event) => {
@ -78,6 +67,7 @@ socket.onmessage = (event) => {
}
else
{
console.log(response);
try {
functionResponse[typeResponse.indexOf(response.type)](response.content);
} catch {