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">
<p>Profil</p>
<p>Settings</p>
<p>Logout</p>
</div>
</div>
<div id="loginPopup" class="popup">

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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);
loginBackButton.addEventListener('click', changeWindowLoginBack);
button42.addEventListener('click', redirection);
window.addEventListener('resize', movePopMenuLoginButton);
movePopMenuLoginButton();
waitForLogin().then(() => {
if (userMeInfo.id !== -1)
{
nodeText = document.createTextNode(userMeInfo.username);
loginButton.replaceChild(nodeText, pLoginButton);
loginButton.addEventListener('click', showMenu);
window.addEventListener('resize', movePopMenuLoginButton);
movePopMenuLoginButton();
initButtonPopMenuLogin();
}
else
{
@ -101,6 +102,15 @@ function hideMenu()
loginButton.addEventListener('click', showMenu);
}
function initButtonPopMenuLogin()
{
const buttons = document.getElementById('popMenuLoginButton').getElementsByTagName('p');
buttons[2].addEventListener('click', () => {
window.location.replace('/logout');
})
}
function redirection(e)
{
const button42 = document.getElementsByClassName('login-42-btn')[0];
@ -140,6 +150,7 @@ function changeWindowLoginBack(e)
const registerWindow = document.getElementsByClassName('right-side-register')[0];
const loginWindow = document.getElementsByClassName('right-side')[0];
if (e)
e.preventDefault();
loginWindow.style.display = 'flex';
registerWindow.style.display = 'none';
@ -165,18 +176,18 @@ function connect(e)
e.preventDefault();
sendRequest("login", {type: "byPass", mail: mail, password: e.target.password.value});
waitForLogin().then((isConnected) => {
if (isConnected)
{
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);
});
// waitForLogin().then((isConnected) => {
// if (isConnected)
// {
// 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 };
export { Login, changeWindowLoginBack };

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

@ -6,17 +6,18 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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';
let pageRenderer = null;
document.addEventListener('DOMContentLoaded', () => {
pageRenderer = new Page();
launchSocket();
});
export { pageRenderer };

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

@ -6,15 +6,17 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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 { changeWindowLoginBack } from "/static/javascript/login/main.js"
function typeCreateAccount()
{
CN.new("Account created", "Please check your emails (including spam) to verify your account.");
changeWindowLoginBack(null);
}
export { typeCreateAccount }

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

@ -6,10 +6,12 @@
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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 = {
username: "",
id: -1
@ -20,7 +22,6 @@ let loginResolve = null;
function waitForLogin() {
return new Promise((resolve) => {
if (loginAvailable)
resolve();
else
@ -30,11 +31,27 @@ function waitForLogin() {
function typeLogin(content)
{
setTimeout(() => {
const popout = document.getElementById('loginPopup');
const loginButton = document.getElementById('loginButton');
let pLoginButton = null;
if (loginButton)
pLoginButton = loginButton.getElementsByTagName('p')[0];
let usernameNode = null;
if (content && typeof(content) != 'boolean' && content.status == true)
{
console.log("Welcome " + content.username + "\nYou're id is " + content.id);
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)
@ -43,6 +60,7 @@ function typeLogin(content)
loginResolve = null;
loginAvailable = false;
}
}, 100);
}
export { userMeInfo, typeLogin, waitForLogin };

19
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/09/10 14:49:32 by edbernar ### ########.fr */
/* Updated: 2024/09/12 18:18:53 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -21,7 +21,13 @@ import { typeAllListUser }from "/static/javascript/typeResponse/typeAllListUser.
import { createNotification as CN } from "/static/javascript/notification/main.js";
import { typeLogin } from "/static/javascript/typeResponse/typeLogin.js";
const socket = new WebSocket('/ws');
let socket = null;
let status = 0;
function launchSocket()
{
socket = new WebSocket('/ws');
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];
@ -29,7 +35,6 @@ const functionResponse = [typeLogin, typeLogin, typePrivateListUser, typePrivate
const errorCode = [9007, 9010, 9011];
const errorFunction = [typeErrorInvalidPassword, typeErrorInvalidToken42, typeErrorUnknown42Account];
let status = 0;
socket.onopen = () => {
status = 1;
@ -57,7 +62,6 @@ socket.onmessage = (event) => {
errorFunction[errorCode.indexOf(response.code)]();
} catch ( error )
{
console.error(error);
console.warn(response);
}
}
@ -67,7 +71,9 @@ socket.onmessage = (event) => {
console.log(response);
try {
functionResponse[typeResponse.indexOf(response.type)](response.content);
} catch {
} catch (error)
{
console.error(error);
console.warn(response);
}
}
@ -77,6 +83,7 @@ socket.onclose = () => {
status = 0;
console.log('Disconnected');
};
}
function sendRequest(type, content) {
let coc = null;
@ -96,4 +103,4 @@ function sendRequest(type, content) {
}));
}
export { socket, sendRequest };
export { socket, sendRequest, launchSocket };