From 298711bf505242792e7b73b7a42271903a979d1f Mon Sep 17 00:00:00 2001
From: Kum1ta <eddydhj@gmail.com>
Date: Tue, 13 Aug 2024 00:21:28 +0200
Subject: [PATCH] Site     - Fixed bug on login button     - Added menu under
 login button when user connected     - Added button for logout in menu

---
 site/interface/site/login/createConnectDiv.js | 12 +++--
 site/interface/site/login/main.js             | 49 ++++++++++++++++++-
 site/interface/site/style/home.css            | 43 +++++++++++++++-
 site/interface/site/websocket.js              |  7 +--
 4 files changed, 97 insertions(+), 14 deletions(-)

diff --git a/site/interface/site/login/createConnectDiv.js b/site/interface/site/login/createConnectDiv.js
index bcdf462..0c87328 100644
--- a/site/interface/site/login/createConnectDiv.js
+++ b/site/interface/site/login/createConnectDiv.js
@@ -3,16 +3,17 @@
 /*                                                        :::      ::::::::   */
 /*   createConnectDiv.js                                :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: marvin <marvin@student.42.fr>              +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/07 18:14:53 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/10 17:00:39 by marvin           ###   ########.fr       */
+/*   Updated: 2024/08/13 00:21:02 by edbernar         ###   ########.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) :
@@ -23,9 +24,10 @@ import { sendRequest } from "../websocket.js";
 		- 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");
@@ -92,7 +94,7 @@ function	createConnectDiv(divLogin)
 	});
 	buttonConnect42.addEventListener('click', (e) => {
 		e.preventDefault();
-		window.location.replace("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");
+		window.location.replace(url42);
 	});
 	return (divConnect);
 }
@@ -136,6 +138,8 @@ function	createButton(inputLogin, inputPass)
 				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);
diff --git a/site/interface/site/login/main.js b/site/interface/site/login/main.js
index 6fa01cf..fb429ed 100644
--- a/site/interface/site/login/main.js
+++ b/site/interface/site/login/main.js
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/07 17:40:15 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/10 18:40:40 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/13 00:01:42 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -29,7 +29,10 @@ function	login()
 			document.cookie = "token={" + token + "}; path=/; Secure; SameSite=Strict; max-age=3600";
 		}
 		if (userMeInfo.id !== -1)
+		{
 			loginButton.replaceChild(nodeText, pLoginButton);
+			loginButton.addEventListener('click', showMenu);
+		}
 		else
 			loginButton.addEventListener('click', showLoginDiv);
 	});
@@ -47,5 +50,47 @@ function	showLoginDiv()
 	document.body.appendChild(divLogin);
 }
 
+function	showMenu()
+{
+	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;
 
-export { login };
\ No newline at end of file
+	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)
+		{
+			setTimeout(() => {
+				document.getElementById("menuDiv").remove();
+				loginButton.addEventListener('click', showMenu);
+				already_activated = true;
+			}, 199);
+			document.getElementById("menuDiv").style.animation = "animHideMenuDiv 0.21s";
+		}
+	});
+}
+
+
+export { login, showLoginDiv, showMenu };
\ No newline at end of file
diff --git a/site/interface/site/style/home.css b/site/interface/site/style/home.css
index bf3ad6c..478d79f 100644
--- a/site/interface/site/style/home.css
+++ b/site/interface/site/style/home.css
@@ -3,13 +3,31 @@
 /*                                                        :::      ::::::::   */
 /*   home.css                                           :+:      :+:    :+:   */
 /*                                                    +:+ +:+         +:+     */
-/*   By: madegryc <madegryc@student.42.fr>          +#+  +:+       +#+        */
+/*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/08/07 12:00:55 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/12 18:26:31 by madegryc         ###   ########.fr       */
+/*   Updated: 2024/08/13 00:03:27 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
+@keyframes animShowMenuDiv {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes animHideMenuDiv {
+	0% {
+		opacity: 1;
+	}
+	100% {
+		opacity: 0;
+	}
+}
+
 * {
 	margin: 0;
 	padding: 0;
@@ -103,3 +121,24 @@ body {
 	color: white;
 	cursor: pointer;
 }
+
+#menuDiv {
+	display: flex;
+	flex-direction: column;
+	align-items: right;
+	font-family: "Poppins", sans-serif;
+	background-color: #ffffff;
+	animation: animShowMenuDiv 0.5s;
+}
+
+#menuDiv li {
+	list-style-type: none;
+	text-align: center;
+	font-size: 16px;
+	padding: 10px;
+	cursor: pointer;
+}
+
+#menuDiv li:hover {
+	background-color: #f0f0f0;
+}
\ No newline at end of file
diff --git a/site/interface/site/websocket.js b/site/interface/site/websocket.js
index 4a1175c..2e6f6fb 100644
--- a/site/interface/site/websocket.js
+++ b/site/interface/site/websocket.js
@@ -6,7 +6,7 @@
 /*   By: edbernar <edbernar@student.42angouleme.    +#+  +:+       +#+        */
 /*                                                +#+#+#+#+#+   +#+           */
 /*   Created: 2024/07/31 22:17:24 by edbernar          #+#    #+#             */
-/*   Updated: 2024/08/10 16:05:26 by edbernar         ###   ########.fr       */
+/*   Updated: 2024/08/13 00:12:26 by edbernar         ###   ########.fr       */
 /*                                                                            */
 /* ************************************************************************** */
 
@@ -56,14 +56,9 @@ socket.onopen = () => {
 	status = 1;
 	console.log('Connected');
 	if (token)
-	{
-		console.log("token :" + token);
 		sendRequest("login", {type: "byToken", token: token});
-	}
 	else
-	{
 		connectedWith42Func();
-	}
 };
 
 socket.onmessage = (event) => {