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

Site

Browse Source 
- Add button for logout
    - somes change for websocket
    - back to login page when account created successfully
This commit is contained in:
Kum1ta
2024-09-12 18:23:40 +02:00
parent 90e9de59bc
commit 9a589d80f5
6 changed files with 116 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docker-compose/requirements/djangoserver/file/server/server/templates/homePage.html
View File

@ -13,6 +13,7 @@
<div id="popMenuLoginButton"> <div id="popMenuLoginButton">
<p>Profil</p> <p>Profil</p>
<p>Settings</p> <p>Settings</p>
<p>Logout</p>
</div> </div>
</div> </div>
<div id="loginPopup" class="popup"> <div id="loginPopup" class="popup">

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/07 17:40:15 by edbernar #+# #+# */ /* Created: 2024/08/07 17:40:15 by edbernar #+# #+# */
/* Updated: 2024/09/12 12:58:13 by edbernar ### ########.fr */ /* Updated: 2024/09/12 17:44:51 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -30,14 +30,15 @@ class Login
registerButton.addEventListener('click', changeWindowLogin); registerButton.addEventListener('click', changeWindowLogin);
loginBackButton.addEventListener('click', changeWindowLoginBack); loginBackButton.addEventListener('click', changeWindowLoginBack);
button42.addEventListener('click', redirection); button42.addEventListener('click', redirection);
window.addEventListener('resize', movePopMenuLoginButton);
movePopMenuLoginButton();
waitForLogin().then(() => { waitForLogin().then(() => {
if (userMeInfo.id !== -1) if (userMeInfo.id !== -1)
{ {
nodeText = document.createTextNode(userMeInfo.username); nodeText = document.createTextNode(userMeInfo.username);
loginButton.replaceChild(nodeText, pLoginButton); loginButton.replaceChild(nodeText, pLoginButton);
loginButton.addEventListener('click', showMenu); loginButton.addEventListener('click', showMenu);
window.addEventListener('resize', movePopMenuLoginButton);
movePopMenuLoginButton();
initButtonPopMenuLogin();
} }
else else
{ {
@ -101,6 +102,15 @@ function hideMenu()
loginButton.addEventListener('click', showMenu); loginButton.addEventListener('click', showMenu);
} }
function initButtonPopMenuLogin()
{
const buttons = document.getElementById('popMenuLoginButton').getElementsByTagName('p');
buttons[2].addEventListener('click', () => {
window.location.replace('/logout');
})
}
function redirection(e) function redirection(e)
{ {
const button42 = document.getElementsByClassName('login-42-btn')[0]; const button42 = document.getElementsByClassName('login-42-btn')[0];
@ -140,7 +150,8 @@ function changeWindowLoginBack(e)
const registerWindow = document.getElementsByClassName('right-side-register')[0]; const registerWindow = document.getElementsByClassName('right-side-register')[0];
const loginWindow = document.getElementsByClassName('right-side')[0]; const loginWindow = document.getElementsByClassName('right-side')[0];
e.preventDefault(); if (e)
e.preventDefault();
loginWindow.style.display = 'flex'; loginWindow.style.display = 'flex';
registerWindow.style.display = 'none'; registerWindow.style.display = 'none';
} }
@ -165,18 +176,18 @@ function connect(e)
e.preventDefault(); e.preventDefault();
sendRequest("login", {type: "byPass", mail: mail, password: e.target.password.value}); sendRequest("login", {type: "byPass", mail: mail, password: e.target.password.value});
waitForLogin().then((isConnected) => { // waitForLogin().then((isConnected) => {
if (isConnected) // if (isConnected)
{ // {
usernameNode = document.createTextNode(userMeInfo.username); // usernameNode = document.createTextNode(userMeInfo.username);
loginButton.replaceChild(usernameNode, pLoginButton); // loginButton.replaceChild(usernameNode, pLoginButton);
CN.new("Connected successfully", "Welcome " + userMeInfo.username, CN.defaultIcon.success); // CN.new("Connected successfully", "Welcome " + userMeInfo.username, CN.defaultIcon.success);
popout.style.display = 'none'; // popout.style.display = 'none';
} // }
}).catch((err) => { // }).catch((err) => {
console.error(err); // console.error(err);
CN.new("Error", "An error occured while trying to connect", CN.defaultIcon.error); // CN.new("Error", "An error occured while trying to connect", CN.defaultIcon.error);
}); // });
} }
export { Login }; export { Login, changeWindowLoginBack };

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

@ -6,17 +6,18 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/30 13:50:35 by edbernar #+# #+# */ /* Created: 2024/07/30 13:50:35 by edbernar #+# #+# */
/* Updated: 2024/08/25 19:09:02 by edbernar ### ########.fr */ /* Updated: 2024/09/12 17:59:23 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
import * as Socket from '/static/javascript/websocket.js'; import { launchSocket } from '/static/javascript/websocket.js';
import { Page } from '/static/javascript/Page.js'; import { Page } from '/static/javascript/Page.js';
let pageRenderer = null; let pageRenderer = null;
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
pageRenderer = new Page(); pageRenderer = new Page();
launchSocket();
}); });
export { pageRenderer }; export { pageRenderer };

4
docker-compose/requirements/nginx/static/javascript/typeResponse/typeCreateAccount.js
View File

@ -6,15 +6,17 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/09/10 14:25:42 by edbernar #+# #+# */ /* Created: 2024/09/10 14:25:42 by edbernar #+# #+# */
/* Updated: 2024/09/10 14:52:33 by edbernar ### ########.fr */ /* Updated: 2024/09/12 17:04:35 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
import { createNotification as CN } from "/static/javascript/notification/main.js"; import { createNotification as CN } from "/static/javascript/notification/main.js";
import { changeWindowLoginBack } from "/static/javascript/login/main.js"
function typeCreateAccount() function typeCreateAccount()
{ {
CN.new("Account created", "Please check your emails (including spam) to verify your account."); CN.new("Account created", "Please check your emails (including spam) to verify your account.");
changeWindowLoginBack(null);
} }
export { typeCreateAccount } export { typeCreateAccount }

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

@ -6,10 +6,12 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/02 00:39:53 by edbernar #+# #+# */ /* Created: 2024/08/02 00:39:53 by edbernar #+# #+# */
/* Updated: 2024/08/25 18:09:04 by edbernar ### ########.fr */ /* Updated: 2024/09/12 18:23:13 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
import { createNotification as CN } from "/static/javascript/notification/main.js";
let userMeInfo = { let userMeInfo = {
username: "", username: "",
id: -1 id: -1
@ -20,7 +22,6 @@ let loginResolve = null;
function waitForLogin() { function waitForLogin() {
return new Promise((resolve) => { return new Promise((resolve) => {
if (loginAvailable) if (loginAvailable)
resolve(); resolve();
else else
@ -30,19 +31,36 @@ function waitForLogin() {
function typeLogin(content) function typeLogin(content)
{ {
if (content && typeof(content) != 'boolean' && content.status == true) setTimeout(() => {
{ const popout = document.getElementById('loginPopup');
console.log("Welcome " + content.username + "\nYou're id is " + content.id); const loginButton = document.getElementById('loginButton');
userMeInfo.username = content.username; let pLoginButton = null;
userMeInfo.id = content.id; if (loginButton)
} pLoginButton = loginButton.getElementsByTagName('p')[0];
loginAvailable = true; let usernameNode = null;
if (loginResolve)
{
loginResolve(content); if (content && typeof(content) != 'boolean' && content.status == true)
loginResolve = null; {
loginAvailable = false; console.log("Welcome " + content.username + "\nYour id is " + content.id);
} userMeInfo.username = content.username;
userMeInfo.id = content.id;
if (popout && popout.style.display === 'flex')
{
usernameNode = document.createTextNode(userMeInfo.username);
loginButton.replaceChild(usernameNode, pLoginButton);
CN.new("Connected successfully", "Welcome " + userMeInfo.username, CN.defaultIcon.success);
popout.style.display = 'none';
}
}
loginAvailable = true;
if (loginResolve)
{
loginResolve(content);
loginResolve = null;
loginAvailable = false;
}
}, 100);
} }
export { userMeInfo, typeLogin, waitForLogin }; export { userMeInfo, typeLogin, waitForLogin };

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/31 22:17:24 by edbernar #+# #+# */ /* Created: 2024/07/31 22:17:24 by edbernar #+# #+# */
/* Updated: 2024/09/10 14:49:32 by edbernar ### ########.fr */ /* Updated: 2024/09/12 18:18:53 by edbernar ### ########.fr */
/* */ /* */
/* ************************************************************************** */ /* ************************************************************************** */
@ -21,62 +21,69 @@ import { typeAllListUser }from "/static/javascript/typeResponse/typeAllListUser.
import { createNotification as CN } from "/static/javascript/notification/main.js"; import { createNotification as CN } from "/static/javascript/notification/main.js";
import { typeLogin } from "/static/javascript/typeResponse/typeLogin.js"; import { typeLogin } from "/static/javascript/typeResponse/typeLogin.js";
const socket = new WebSocket('/ws'); let socket = null;
let status = 0;
const typeResponse = ["logged_in", "login", "private_list_user", "private_list_message", "new_private_message", "all_list_user", "create_account"];
const functionResponse = [typeLogin, typeLogin, typePrivateListUser, typePrivateListMessage, typeNewPrivateMessage, typeAllListUser, typeCreateAccount];
const errorCode = [9007, 9010, 9011]; function launchSocket()
const errorFunction = [typeErrorInvalidPassword, typeErrorInvalidToken42, typeErrorUnknown42Account]; {
socket = new WebSocket('/ws');
let status = 0; const typeResponse = ["logged_in", "login", "private_list_user", "private_list_message", "new_private_message", "all_list_user", "create_account"];
const functionResponse = [typeLogin, typeLogin, typePrivateListUser, typePrivateListMessage, typeNewPrivateMessage, typeAllListUser, typeCreateAccount];
socket.onopen = () => { const errorCode = [9007, 9010, 9011];
status = 1; const errorFunction = [typeErrorInvalidPassword, typeErrorInvalidToken42, typeErrorUnknown42Account];
console.log('Connected');
};
socket.onmessage = (event) => {
let response;
try { socket.onopen = () => {
response = JSON.parse(event.data); status = 1;
} catch { console.log('Connected');
return ; };
}
if (response.code >= 9000 && response.code <= 9999) socket.onmessage = (event) => {
{ let response;
if (response.code >= 9014 && response.code <= 9025)
try {
response = JSON.parse(event.data);
} catch {
return ;
}
if (response.code >= 9000 && response.code <= 9999)
{ {
console.log(response); if (response.code >= 9014 && response.code <= 9025)
CN.new("Error", response.content); {
console.log(response);
CN.new("Error", response.content);
}
else
{
try {
errorFunction[errorCode.indexOf(response.code)]();
} catch ( error )
{
console.warn(response);
}
}
} }
else else
{ {
console.log(response);
try { try {
errorFunction[errorCode.indexOf(response.code)](); functionResponse[typeResponse.indexOf(response.type)](response.content);
} catch ( error ) } catch (error)
{ {
console.error(error); console.error(error);
console.warn(response); console.warn(response);
} }
} }
} };
else
{
console.log(response);
try {
functionResponse[typeResponse.indexOf(response.type)](response.content);
} catch {
console.warn(response);
}
}
};
socket.onclose = () => { socket.onclose = () => {
status = 0; status = 0;
console.log('Disconnected'); console.log('Disconnected');
}; };
}
function sendRequest(type, content) { function sendRequest(type, content) {
let coc = null; let coc = null;
@ -96,4 +103,4 @@ function sendRequest(type, content) {
})); }));
} }
export { socket, sendRequest }; export { socket, sendRequest, launchSocket };