From 9a589d80f5b32c7668aa12a89d6e1ac75a283c30 Mon Sep 17 00:00:00 2001
From: Kum1ta <eddydhj@gmail.com>
Date: Thu, 12 Sep 2024 18:23:40 +0200
Subject: [PATCH] Site     - Add button for logout     - somes change for
 websocket     - back to login page when account created successfully

---
 .../server/server/templates/homePage.html     |  1 +
 .../nginx/static/javascript/login/main.js     | 45 ++++++----
 .../nginx/static/javascript/main.js           |  5 +-
 .../typeResponse/typeCreateAccount.js         |  4 +-
 .../javascript/typeResponse/typeLogin.js      | 48 ++++++----
 .../nginx/static/javascript/websocket.js      | 89 ++++++++++---------
 6 files changed, 116 insertions(+), 76 deletions(-)

diff --git a/docker-compose/requirements/djangoserver/file/server/server/templates/homePage.html b/docker-compose/requirements/djangoserver/file/server/server/templates/homePage.html
index c6d5604..83c2f41 100644
--- a/docker-compose/requirements/djangoserver/file/server/server/templates/homePage.html
+++ b/docker-compose/requirements/djangoserver/file/server/server/templates/homePage.html
@@ -13,6 +13,7 @@
 	<div id="popMenuLoginButton">
 		<p>Profil</p>
 		<p>Settings</p>
+		<p>Logout</p>
 	</div>
 </div>
 	<div id="loginPopup" class="popup">
diff --git a/docker-compose/requirements/nginx/static/javascript/login/main.js b/docker-compose/requirements/nginx/static/javascript/login/main.js
index 011ba62..4506ead 100644
--- a/docker-compose/requirements/nginx/static/javascript/login/main.js
+++ b/docker-compose/requirements/nginx/static/javascript/login/main.js
@@ -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,7 +150,8 @@ function   changeWindowLoginBack(e)
 	const	registerWindow	= document.getElementsByClassName('right-side-register')[0];
 	const	loginWindow		= document.getElementsByClassName('right-side')[0];
 	
-	e.preventDefault();
+	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 };
\ No newline at end of file
+export { Login, changeWindowLoginBack };
\ No newline at end of file
diff --git a/docker-compose/requirements/nginx/static/javascript/main.js b/docker-compose/requirements/nginx/static/javascript/main.js
index d4c73c7..06d9713 100644
--- a/docker-compose/requirements/nginx/static/javascript/main.js
+++ b/docker-compose/requirements/nginx/static/javascript/main.js
@@ -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 };
\ No newline at end of file
diff --git a/docker-compose/requirements/nginx/static/javascript/typeResponse/typeCreateAccount.js b/docker-compose/requirements/nginx/static/javascript/typeResponse/typeCreateAccount.js
index 7905154..7c7341b 100644
--- a/docker-compose/requirements/nginx/static/javascript/typeResponse/typeCreateAccount.js
+++ b/docker-compose/requirements/nginx/static/javascript/typeResponse/typeCreateAccount.js
@@ -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 }
diff --git a/docker-compose/requirements/nginx/static/javascript/typeResponse/typeLogin.js b/docker-compose/requirements/nginx/static/javascript/typeResponse/typeLogin.js
index 4005e87..8d53f1a 100644
--- a/docker-compose/requirements/nginx/static/javascript/typeResponse/typeLogin.js
+++ b/docker-compose/requirements/nginx/static/javascript/typeResponse/typeLogin.js
@@ -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,19 +31,36 @@ function waitForLogin() {
 
 function	typeLogin(content)
 {
-	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;
-	}
-	loginAvailable = true;
-	if (loginResolve)
-	{
-		loginResolve(content);
-		loginResolve = null;
-		loginAvailable = false;
-	}
+	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 + "\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 };
\ No newline at end of file
diff --git a/docker-compose/requirements/nginx/static/javascript/websocket.js b/docker-compose/requirements/nginx/static/javascript/websocket.js
index 6923c30..13ba8a9 100644
--- a/docker-compose/requirements/nginx/static/javascript/websocket.js
+++ b/docker-compose/requirements/nginx/static/javascript/websocket.js
@@ -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,62 +21,69 @@ 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;
 
-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];
-const	errorFunction = [typeErrorInvalidPassword, typeErrorInvalidToken42, typeErrorUnknown42Account];
+function launchSocket()
+{
+	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 = () => {
-	status = 1;
-	console.log('Connected');
-};
+	const	errorCode = [9007, 9010, 9011];
+	const	errorFunction = [typeErrorInvalidPassword, typeErrorInvalidToken42, typeErrorUnknown42Account];
 
-socket.onmessage = (event) => {
-	let	response;
 
-	try {
-		response = JSON.parse(event.data);
-	} catch {
-		return ;
-	}
-	if (response.code >= 9000 && response.code <= 9999)
-	{
-		if (response.code >= 9014 && response.code <= 9025)
+	socket.onopen = () => {
+		status = 1;
+		console.log('Connected');
+	};
+
+	socket.onmessage = (event) => {
+		let	response;
+
+		try {
+			response = JSON.parse(event.data);
+		} catch {
+			return ;
+		}
+		if (response.code >= 9000 && response.code <= 9999)
 		{
-			console.log(response);
-			CN.new("Error", response.content);
+			if (response.code >= 9014 && response.code <= 9025)
+			{
+				console.log(response);
+				CN.new("Error", response.content);
+			}
+			else
+			{
+				try {
+					errorFunction[errorCode.indexOf(response.code)]();
+				} catch ( error )
+				{
+					console.warn(response);
+				}
+			}
 		}
 		else
 		{
+			console.log(response);
 			try {
-				errorFunction[errorCode.indexOf(response.code)]();
-			} catch ( error )
+				functionResponse[typeResponse.indexOf(response.type)](response.content);
+			} catch (error)
 			{
 				console.error(error);
 				console.warn(response);
 			}
 		}
-	}
-	else
-	{
-		console.log(response);
-		try {
-			functionResponse[typeResponse.indexOf(response.type)](response.content);
-		} catch {
-			console.warn(response);
-		}
-	}
-};
+	};
 
-socket.onclose = () => {
-	status = 0;
-	console.log('Disconnected');
-};
+	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 };
\ No newline at end of file
+export { socket, sendRequest, launchSocket };
\ No newline at end of file