-
PTME
+
PTME
diff --git a/site/interface/site/login/createConnectDiv.js b/site/interface/site/login/createConnectDiv.js
new file mode 100644
index 0000000..59e986c
--- /dev/null
+++ b/site/interface/site/login/createConnectDiv.js
@@ -0,0 +1,54 @@
+/* ************************************************************************** */
+/* */
+/* ::: :::::::: */
+/* createConnectDiv.js :+: :+: :+: */
+/* +:+ +:+ +:+ */
+/* By: edbernar
+#+ +:+ +#+ */
+/* +#+#+#+#+#+ +#+ */
+/* 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 };
\ No newline at end of file
diff --git a/site/interface/site/login/createThreeDiv.js b/site/interface/site/login/createThreeDiv.js
new file mode 100644
index 0000000..00c2d3f
--- /dev/null
+++ b/site/interface/site/login/createThreeDiv.js
@@ -0,0 +1,21 @@
+/* ************************************************************************** */
+/* */
+/* ::: :::::::: */
+/* createThreeDiv.js :+: :+: :+: */
+/* +:+ +:+ +:+ */
+/* By: edbernar +#+ +:+ +#+ */
+/* +#+#+#+#+#+ +#+ */
+/* 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 };
\ No newline at end of file
diff --git a/site/interface/site/login/main.js b/site/interface/site/login/main.js
new file mode 100644
index 0000000..695b230
--- /dev/null
+++ b/site/interface/site/login/main.js
@@ -0,0 +1,36 @@
+/* ************************************************************************** */
+/* */
+/* ::: :::::::: */
+/* main.js :+: :+: :+: */
+/* +:+ +:+ +:+ */
+/* By: edbernar +#+ +:+ +#+ */
+/* +#+#+#+#+#+ +#+ */
+/* 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 };
\ No newline at end of file
diff --git a/site/interface/site/main.js b/site/interface/site/main.js
index 0e399f6..5c6fa0f 100644
--- a/site/interface/site/main.js
+++ b/site/interface/site/main.js
@@ -6,35 +6,15 @@
/* By: edbernar +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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());
-});
\ No newline at end of file
diff --git a/site/interface/site/style/home.css b/site/interface/site/style/home.css
index d3eb36c..3ed97bf 100644
--- a/site/interface/site/style/home.css
+++ b/site/interface/site/style/home.css
@@ -6,7 +6,7 @@
/* By: edbernar +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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';
-}
\ No newline at end of file
+ text-align: center;
+ line-height: 40px;
+ margin: 10px 10px;
+}
+
+#topBar #loginButton:hover {
+ background-color: #f0f0f0;
+ cursor: pointer;
+}
diff --git a/site/interface/site/style/liveChat.css b/site/interface/site/style/liveChat.css
index 3ebd748..6ada490 100644
--- a/site/interface/site/style/liveChat.css
+++ b/site/interface/site/style/liveChat.css
@@ -6,7 +6,7 @@
/* By: edbernar +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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 {
diff --git a/site/interface/site/style/loginPage.css b/site/interface/site/style/loginPage.css
new file mode 100644
index 0000000..fb954e5
--- /dev/null
+++ b/site/interface/site/style/loginPage.css
@@ -0,0 +1,78 @@
+/* ************************************************************************** */
+/* */
+/* ::: :::::::: */
+/* loginPage.css :+: :+: :+: */
+/* +:+ +:+ +:+ */
+/* By: edbernar +#+ +:+ +#+ */
+/* +#+#+#+#+#+ +#+ */
+/* 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;
+}
\ No newline at end of file
diff --git a/site/interface/site/style/notification.css b/site/interface/site/style/notification.css
index e4cabf4..3b22955 100644
--- a/site/interface/site/style/notification.css
+++ b/site/interface/site/style/notification.css
@@ -6,7 +6,7 @@
/* By: edbernar +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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;
}
\ No newline at end of file
diff --git a/site/interface/site/websocket.js b/site/interface/site/websocket.js
index 7a315bd..ad3c3e4 100644
--- a/site/interface/site/websocket.js
+++ b/site/interface/site/websocket.js
@@ -3,10 +3,10 @@
/* ::: :::::::: */
/* websocket.js :+: :+: :+: */
/* +:+ +:+ +:+ */
-/* By: edbernar +#+ +:+ +#+ */
/* +#+#+#+#+#+ +#+ */
/* 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 };
\ No newline at end of file
+export { socket, sendRequest };
\ No newline at end of file