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

Site

Browse Source 
- Fixed bug on login button
    - Added menu under login button when user connected
    - Added button for logout in menu
This commit is contained in:
Kum1ta
2024-08-13 00:21:28 +02:00
parent fab7db4468
commit 5a5b4fa5eb
4 changed files with 97 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
site/interface/site/login/createConnectDiv.js
View File

@ -3,16 +3,17 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* createConnectDiv.js :+: :+: :+: */ /* createConnectDiv.js :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: marvin <marvin@student.42.fr> +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/07 18:14:53 by edbernar #+# #+# */ /* 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 { userMeInfo, waitForLogin } from "../typeResponse/typeLogin.js";
import { createNotification as CN } from "../notification/main.js"; import { createNotification as CN } from "../notification/main.js";
import { sendRequest } from "../websocket.js"; import { sendRequest } from "../websocket.js";
import { showLoginDiv, showMenu } from "./main.js";
/* /*
Todo (Eddy) : Todo (Eddy) :
@ -23,9 +24,10 @@ import { sendRequest } from "../websocket.js";
- Empecher les requetes de connexion si un champ est vide - Empecher les requetes de connexion si un champ est vide
- Ajouter un message d'erreur si le mail est invalide - Ajouter un message d'erreur si le mail est invalide
- Connexion par 42 - 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) function createConnectDiv(divLogin)
{ {
const form = document.createElement("form"); const form = document.createElement("form");
@ -92,7 +94,7 @@ function createConnectDiv(divLogin)
}); });
buttonConnect42.addEventListener('click', (e) => { buttonConnect42.addEventListener('click', (e) => {
e.preventDefault(); 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); return (divConnect);
} }
@ -136,6 +138,8 @@ function createButton(inputLogin, inputPass)
document.getElementById("loginDiv").remove(); document.getElementById("loginDiv").remove();
document.getElementById("globalBg").remove(); document.getElementById("globalBg").remove();
document.cookie = "token={" + token + "}; path=/; Secure; SameSite=Strict; max-age=3600"; 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) => { }).catch((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);

49
site/interface/site/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/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"; document.cookie = "token={" + token + "}; path=/; Secure; SameSite=Strict; max-age=3600";
} }
if (userMeInfo.id !== -1) if (userMeInfo.id !== -1)
{
loginButton.replaceChild(nodeText, pLoginButton); loginButton.replaceChild(nodeText, pLoginButton);
loginButton.addEventListener('click', showMenu);
}
else else
loginButton.addEventListener('click', showLoginDiv); loginButton.addEventListener('click', showLoginDiv);
}); });
@ -47,5 +50,47 @@ function showLoginDiv()
document.body.appendChild(divLogin); 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 }; 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 };

43
site/interface/site/style/home.css
View File

@ -3,13 +3,31 @@
/* ::: :::::::: */ /* ::: :::::::: */
/* home.css :+: :+: :+: */ /* home.css :+: :+: :+: */
/* +:+ +:+ +:+ */ /* +:+ +:+ +:+ */
/* By: madegryc <madegryc@student.42.fr> +#+ +:+ +#+ */ /* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */ /* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/07 12:00:55 by edbernar #+# #+# */ /* 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; margin: 0;
padding: 0; padding: 0;
@ -103,3 +121,24 @@ body {
color: white; color: white;
cursor: pointer; 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;
}

7
site/interface/site/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/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; status = 1;
console.log('Connected'); console.log('Connected');
if (token) if (token)
{
console.log("token :" + token);
sendRequest("login", {type: "byToken", token: token}); sendRequest("login", {type: "byToken", token: token});
}
else else
{
connectedWith42Func(); connectedWith42Func();
}
}; };
socket.onmessage = (event) => { socket.onmessage = (event) => {