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

Site :

Browse Source 
- remove addEventListener in ./main.js (the one to test notifications)
    - Started log in
    - Added function on "login" button for open login div
    - In login div, send request when we press button
This commit is contained in:
edbernar
2024-08-07 19:14:32 +02:00
parent bc569a5233
commit 4eca9be386
10 changed files with 229 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
site/interface/site/index.html
View File

@ -8,6 +8,7 @@
<link rel='stylesheet' type='text/css' href='style/home.css'>
<link rel='stylesheet' type='text/css' href='style/liveChat.css'>
<link rel='stylesheet' type='text/css' href='style/notification.css'>
<link rel='stylesheet' type='text/css' href='style/loginPage.css'>
<script type="module" src='main.js'></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@ -17,7 +18,7 @@
<div id="divNotification">
</div>
<div id="topBar">
<p>PTME</p>
<h1>PTME</h1>
<div id="loginButton">
<p>Login</p>
</div>

54
site/interface/site/login/createConnectDiv.js Normal file
View File

@ -0,0 +1,54 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* createConnectDiv.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/07 18:14:53 by edbernar #+# #+# */
/* Updated: 2024/08/07 19:09:41 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { createNotification } from "../notification/main.js";
import { sendRequest } from "../websocket.js";
function createConnectDiv()
{
const divConnect = document.createElement("div");
const inputLogin = document.createElement("input");
const inputPass = document.createElement("input");
const buttonLogin = createButton(inputLogin, inputPass);
addGlobalBg();
divConnect.setAttribute("id", "connectDiv");
inputLogin.setAttribute("type", "text");
inputLogin.setAttribute("placeholder", "login");
inputPass.setAttribute("type", "password");
inputPass.setAttribute("placeholder", "password");
buttonLogin.innerHTML = "Connect";
divConnect.appendChild(inputLogin);
divConnect.appendChild(inputPass);
divConnect.appendChild(buttonLogin);
return (divConnect);
}
function addGlobalBg()
{
const globalBg = document.createElement("div");
globalBg.setAttribute("id", "globalBg");
document.body.appendChild(globalBg);
}
function createButton(inputLogin, inputPass)
{
const button = document.createElement("button");
button.addEventListener('click', () => {
sendRequest("login", {type: "byPass", mail: inputLogin.value, password: inputPass.value});
});
return (button);
}
export { createConnectDiv };

21
site/interface/site/login/createThreeDiv.js Normal file
View File

@ -0,0 +1,21 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* createThreeDiv.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/07 18:09:36 by edbernar #+# #+# */
/* Updated: 2024/08/07 18:11:19 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
function createThreeDiv()
{
const divThree = document.createElement("div");
divThree.setAttribute("id", "threeDiv");
return (divThree);
}
export { createThreeDiv };

36
site/interface/site/login/main.js Normal file
View File

@ -0,0 +1,36 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* main.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/07 17:40:15 by edbernar #+# #+# */
/* Updated: 2024/08/07 18:38:29 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { createNotification as CN } from "../notification/main.js";
import { createConnectDiv } from "./createConnectDiv.js";
import { createThreeDiv } from "./createThreeDiv.js";
function login()
{
const loginButton = document.getElementById('loginButton');
loginButton.addEventListener('click', showLoginDiv);
}
function showLoginDiv()
{
const divLogin = document.createElement("div");
const threeDiv = createThreeDiv();
const connectDiv = createConnectDiv();
divLogin.setAttribute("id", "loginDiv");
divLogin.appendChild(threeDiv);
divLogin.appendChild(connectDiv);
document.body.appendChild(divLogin);
}
export { login };

28
site/interface/site/main.js
View File

@ -6,35 +6,15 @@
/* By: edbernar <edbernar@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/30 13:50:35 by edbernar #+# #+# */
/* Updated: 2024/08/06 15:43:35 by edbernar ### ########.fr */
/* Updated: 2024/08/07 17:52:24 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
import { liveChat } from "./liveChat/main.js";
import { createNotification } from "./notification/main.js";
import { liveChat } from "./liveChat/main.js";
import { login } from "./login/main.js";
document.addEventListener('DOMContentLoaded', () => {
liveChat();
});
function createRamdomString()
{
const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
let result = "";
let length = Math.floor(Math.random() * 120);
for (let i = 0; i < length; i++)
result += charset.charAt(Math.floor(Math.random() * charset.length));
return (result);
}
document.addEventListener("keydown", (e) => {
if (e.key === "+")
createNotification.new("Server", createRamdomString(), createNotification.defaultIcon.info, () => {
console.log("Action button");
}, "Send");
if (e.key === "-")
createNotification.new("Server", createRamdomString());
login();
});

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

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/07 12:00:55 by edbernar #+# #+# */
/* Updated: 2024/08/07 12:10:04 by edbernar ### ########.fr */
/* Updated: 2024/08/07 17:31:35 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -25,11 +25,12 @@ body {
}
#topBar {
margin: 0;
margin: 10px;
padding: 0;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: black;
}
#topBar h1 {
@ -40,10 +41,19 @@ body {
font-family: 'Poppins';
}
#topBar p {
margin: 0;
padding: 0;
#topBar #loginButton {
font-size: 20px;
color: white;
background-color: white;
height: 40px;
width: 100px;
color: black;
font-family: 'Poppins';
text-align: center;
line-height: 40px;
margin: 10px 10px;
}
#topBar #loginButton:hover {
background-color: #f0f0f0;
cursor: pointer;
}

4
site/interface/site/style/liveChat.css
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/30 13:53:39 by edbernar #+# #+# */
/* Updated: 2024/08/07 12:02:11 by edbernar ### ########.fr */
/* Updated: 2024/08/07 18:20:44 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -20,7 +20,7 @@
height: 40px;
text-align: center;
cursor : pointer;
z-index: 998;
z-index: 10;
}
#chatButton p {

78
site/interface/site/style/loginPage.css Normal file
View File

@ -0,0 +1,78 @@
/* ************************************************************************** */
/* */
/* ::: :::::::: */
/* loginPage.css :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/07 17:15:28 by edbernar #+# #+# */
/* Updated: 2024/08/07 18:53:06 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@keyframes anim1 {
0% {
transform: translate(-50%, -150%);
}
100% {
transform: translateY(-50%, -50%);
}
}
@keyframes anim2 {
0% {
backdrop-filter: blur(0px);
background-color: rgba(0, 0, 0, 0);
}
100% {
backdrop-filter: blur(5px);
background-color: rgba(0, 0, 0, 0.8);
}
}
#loginDiv {
width: 80%;
height: 80%;
display: flex;
position: absolute;
background-color: #990707;
z-index: 500;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation: anim1 0.2s;
border: 2px solid black;
}
#globalBg {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
z-index: 499;
top: 0;
left: 0;
backdrop-filter: blur(5px);
animation: anim2 0.5s;
}
#threeDiv {
border-right: 2px solid black;
width: 40%;
height: 100%;
background-color: #747474;
}
#connectDiv {
width: 60%;
height: 100%;
background-color: #616161;
display: flex;
flex-direction: column;
}

12
site/interface/site/style/notification.css
View File

@ -6,7 +6,7 @@
/* By: edbernar <edbernar@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/08/04 23:44:17 by edbernar #+# #+# */
/* Updated: 2024/08/06 15:40:38 by edbernar ### ########.fr */
/* Updated: 2024/08/07 18:04:17 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -46,6 +46,8 @@
#divNotification .notification {
background-color: #222222;
display: flex;
flex-direction: column;
color: white;
margin-top: 10px;
min-height: 100px;
@ -71,7 +73,6 @@
margin-top: 9px;
object-fit: cover;
object-position: 50% 0;
}
#divNotification .content {
@ -91,6 +92,13 @@
margin: 10px;
}
#divNotification .loadBar {
margin-top: auto;
margin-bottom: 0;
padding: 0;
/* position: fixed; */
}
.progress {
transition: width 0.1s;
}

11
site/interface/site/websocket.js
View File

@ -3,10 +3,10 @@
/* ::: :::::::: */
/* websocket.js :+: :+: :+: */
/* +:+ +:+ +:+ */
/* By: edbernar <edbernar@student.42angouleme. +#+ +:+ +#+ */
/* By: edbernar <edbernar@student.42.fr> +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* Created: 2024/07/31 22:17:24 by edbernar #+# #+# */
/* Updated: 2024/08/06 23:33:28 by edbernar ### ########.fr */
/* Updated: 2024/08/07 19:00:30 by edbernar ### ########.fr */
/* */
/* ************************************************************************** */
@ -23,7 +23,6 @@ import { typeNewPrivateMessage } from "./typeResponse/typeNewPrivateMessage.js";
*/
const socket = new WebSocket('ws://localhost:8000/');
const token = "IDSNCSDAd465sd13215421";
const typeResponse = ["login", "private_list_user", "private_list_message", "new_private_message"];
const functionResponse = [typeLogin, typePrivateListUser, typePrivateListMessage, typeNewPrivateMessage];
@ -33,8 +32,6 @@ let status = 0;
socket.onopen = () => {
status = 1;
console.log('Connected');
if (token)
sendRequest("login", {"type": "byToken", "token": token});
};
socket.onmessage = (event) => {
@ -73,9 +70,9 @@ function sendRequest(type, content) {
coc = content;
socket.send(JSON.stringify({
type: type,
token: token,
// token: token,
content: content
}));
}
export { socket, token, sendRequest };
export { socket, sendRequest };