Site :

- 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

site/interface/site/index.html

@@ -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>

site/interface/site/login/createConnectDiv.js

@@ -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 };

site/interface/site/login/createThreeDiv.js

@@ -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 };

site/interface/site/login/main.js

@@ -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 };

site/interface/site/main.js

@@ -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();
+	login();
 });
-
-
-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());
-});

site/interface/site/style/home.css

@@ -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 {
+#topBar #loginButton {
-	margin: 0;
-	padding: 0;
 	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;
+}

site/interface/site/style/liveChat.css

@@ -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 {

site/interface/site/style/loginPage.css

@@ -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;
+}

site/interface/site/style/notification.css

@@ -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;
 }

site/interface/site/websocket.js

@@ -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 };