diff --git a/css/form.css b/css/form.css new file mode 100644 index 0000000..49d6638 --- /dev/null +++ b/css/form.css @@ -0,0 +1,181 @@ +:root { + --c-text-primary: #282a32; + --c-text-secondary: #686b87; + --c-text-action: #404089; + --c-accent-primary: #434ce8; + --c-border-table: rgba(67, 76, 232, 0.2); + --c-background-table: #e0ebfc; + --c-border-primary: #eff1f6; + --c-background-primary: #ffffff; + --c-background-secondary: #fdfcff; + --c-background-tertiary: #ecf3fe; + --c-background-quaternary: #ccced4; +} + +.login-box { + position: absolute; + top: 50%; + left: 50%; + width: 100%; + padding: 40px; + transform: translate(-50%, -50%); + background: var(--c-background-primary); + box-sizing: border-box; + box-shadow: 0 15px 25px rgba(0,0,0,.6); + border-radius: 10px; +} + + +.login-box .user-box { + position: relative; +} + +.login-box .user-box input { + width: 100%; + padding: 10px 0; + font-size: 16px; + color: var(--c-accent-primary); + margin-bottom: 30px; + border: none; + border-bottom: 1px solid var(--c-text-action); + outline: none; + background: transparent; +} +.login-box .user-box label { + position: absolute; + top:0; + left: 0; + padding: 10px 0; + font-size: 16px; + color: var(--c-text-action); + pointer-events: none; + transition: .5s; +} + +.login-box .user-box label{ + top: -20px; + left: 0; + color: var(--c-text-action); + font-size: 12px; +} + +.login-box form a { + position: relative; + display: inline-block; + padding: 10px 20px; + color: var(--c-accent-primary); + font-size: 16px; + text-decoration: none; + text-transform: uppercase; + overflow: hidden; + transition: .5s; + margin-top: 40px; + letter-spacing: 4px +} + +.login-box a:hover { + background: var(--c-accent-primary); + color: #fff; +} + +#deletar:hover{ + background-color: red; + color: #fff +} + +.login-box a span { + position: absolute; + display: block; +} + +.login-box a span:nth-child(1) { + top: 0; + left: -100%; + width: 100%; + height: 2px; + background: linear-gradient(90deg, transparent, #03e9f4); + animation: btn-anim1 1s linear infinite; +} + +@keyframes btn-anim1 { + 0% { + left: -100%; + } + 50%,100% { + left: 100%; + } +} + +.login-box a span:nth-child(2) { + top: -100%; + right: 0; + width: 2px; + height: 100%; + background: linear-gradient(180deg, transparent, #03e9f4); + animation: btn-anim2 1s linear infinite; + animation-delay: .25s +} + +@keyframes btn-anim2 { + 0% { + top: -100%; + } + 50%,100% { + top: 100%; + } +} + +.login-box a span:nth-child(3) { + bottom: 0; + right: -100%; + width: 100%; + height: 2px; + background: linear-gradient(270deg, transparent, #03e9f4); + animation: btn-anim3 1s linear infinite; + animation-delay: .5s +} + +.form-footer{ + display: flex; + justify-content: space-between; +} +.login-box span{ + color: #282a32; +} +.close{ + position:absolute; + right: 10px; + top: 10px; + background-color: var(--c-background-primary); + color:#282a32; + font-size: larger; + font-weight: 200; +} + +@keyframes btn-anim3 { + 0% { + right: -100%; + } + 50%,100% { + right: 100%; + } +} + +.login-box a span:nth-child(4) { + bottom: -100%; + left: 0; + width: 2px; + height: 100%; + background: linear-gradient(360deg, transparent, #03e9f4); + animation: btn-anim4 1s linear infinite; + animation-delay: .75s +} + +@keyframes btn-anim4 { + 0% { + bottom: -100%; + } + 50%,100% { + bottom: 100%; + } +} diff --git a/css/home.css b/css/home.css index 3bd3649..ce27432 100644 --- a/css/home.css +++ b/css/home.css @@ -962,14 +962,11 @@ textarea{ .form{ position:absolute; - left:25%; - right:25%; - width: 50%; - height:min-content; - top:5%; - bottom:5%; - padding: 20px; - font-size: 20px; + left:50%; + top: 50%; + transform: translate(-50%, -50%); + width:70%; + height:fit-content; box-shadow: 0px 0px 3px #000; border:0px; border-radius: 10px; diff --git a/home.html b/home.html index 09012a7..8f09ce8 100644 --- a/home.html +++ b/home.html @@ -1,328 +1,339 @@ - - + - - - Messaging App - - - + + + Messaging App + + + + - -
- - - - -
-
- - - -

- - - -
-
- -
- - - -
- -
- - - -
-
- - -
- - -
- - - -
- - - -
- - -
- + +
+ + + + +
+
+ + + +

+ + + +
+
+ +
+ + + +
+ +
+ + + +
+
+ + +
+ + +
+ + + +
+ + + +
+ + +
+ + +
+ +
+ + + +
+
+ + + +
+ + +
+
+
+ +
+
+ +
+ + +
+
+
+ +
+ Change Color +
+
+
+
+
+ +
+
+ +
+
+ + +
+ +
+
+ +
+
+
+ +
+
+ +
+
+ +
+ Change Color +
+
+
+
+
+ +
+
+ +
+
+
+ + + + + Shared photos +
+ + + +
+
-
- -
- - - -
-
- - -
- -
- - -
- -
- - - -
- - -
-
-
- -
-
- -
- - -
-
-
- -
- Change Color -
-
-
-
-
- -
-
- -
-
- - -
- -
-
- -
-
-
- -
-
- -
-
- -
- Change Color -
-
-
-
-
- -
-
- -
-
- - -
-
- -
-
+
@@ -336,4 +347,4 @@

loading

- + \ No newline at end of file diff --git a/javascript/const.js b/javascript/const.js index 4e9b48d..0c3a85a 100644 --- a/javascript/const.js +++ b/javascript/const.js @@ -1 +1 @@ -const socket = `ws://127.0.0.1:4000` \ No newline at end of file +const socket = `ws://localhost:4000` \ No newline at end of file diff --git a/javascript/home.js b/javascript/home.js index a61bfc0..997e447 100644 --- a/javascript/home.js +++ b/javascript/home.js @@ -184,7 +184,7 @@ conn.onopen = () => { conn.onmessage = function(e) { var data = JSON.parse(e.data) - ////console.log(JSON.stringify(data, null, 1)) + console.log(data) if (data.status == "success") { @@ -214,6 +214,11 @@ conn.onmessage = function(e) { //console.log("uu") usrBox.innerHTML += buildUser(user); }) + + usrBox.innerHTML += ` + +
+ `; }) } else if (data.act === "update" && data.ctx === "msg") { @@ -375,10 +380,12 @@ function add_user() { if (user2 != "0" && user2 != user) { - conn.send({ - act: "relation", ctx: "add", users: { - id: user, id: user2 - }}); + conn.send(JSON.stringify({ + act: "relation", + ctx: "add", + id: user, + id2: user2 + })); $('#rel').val(""); $("#usr-data").html(""); @@ -533,14 +540,20 @@ function buildMsg(msg, id, chat, img) { } function buildUser(user){ - var date = timeSince(user.lastMsg.date) + var date = user.lastMsg ? timeSince(user.lastMsg.date) : "" + let sender = "" + + if(date){ + let sender = user.lastMsg.sender == user.id ? user.lastMsg.message : "You: " + user.lastMsg.messag + } + var r = `
${user.Name}
- ${ user.lastMsg.sender == user.id ? user.lastMsg.message : "You: " + user.lastMsg.message} + ${sender} ${date} ${user.unseen} @@ -548,28 +561,9 @@ function buildUser(user){
`; - console.log(r.Image) - - return r; - /* - $return .= " - -
- "; - */ + return r } - -function get(s){ - localStorage.getItem(s) -} - - -function set(s, v){ - localStorage.setItem(s, v) -} - - function timeSince(date, msg){ if (!msg){ diff --git a/nodeSocket/Server.js b/nodeSocket/Server.js index 124b256..1d761f2 100644 --- a/nodeSocket/Server.js +++ b/nodeSocket/Server.js @@ -15,6 +15,7 @@ async function main() { u[0].forEach(user => { users[user.id] = [] users[user.id][0] = user; + console.log(user.id, user.Name) }) const Server = new Ws.Server({ @@ -36,29 +37,7 @@ async function main() { ws.on("message", msg => { msg = JSON.parse(msg.toString('utf8')); - switch (msg.act) { - - case "request": - - handlers.requestHandler(msg, ws, users[msg.chat][0]); - break; - - case "send": - - if (users[msg.to][1]){ - - var to = users[msg.to][1]; - var isConn = true; - } - - handlers.messageHandler(msg, ws, to || false, isConn || false) - break - - case "register": - - handlers.registerHandler(msg, ws) - break - } + handlers.handle(msg, users, ws); }); diff --git a/nodeSocket/handlers.js b/nodeSocket/handlers.js index 340b7a1..7b17bb6 100644 --- a/nodeSocket/handlers.js +++ b/nodeSocket/handlers.js @@ -1,6 +1,41 @@ const message = require("./message.js"); const user = require("./user.js"); + +async function handle(msg, users, ws){ + + switch (msg.act) { + + case "request": + + requestHandler(msg, ws, users[msg.chat][0]); + break; + + case "send": + + if (users[msg.to][1]){ + + var to = users[msg.to][1]; + var isConn = true; + } + + messageHandler(msg, ws, to || false, isConn || false) + break + + case "register": + + registerHandler(msg, ws) + break + + case "relation": + + if(msg.ctx == "add"){ + user.addRelation(msg, ws) + } + } +} + + async function requestHandler(req, ws, chat) { var response; @@ -11,7 +46,7 @@ async function requestHandler(req, ws, chat) { case "msg": response = await message.getMessageArray(ws.userId, req.chat, 50); - console.log(chat.Image) + ws.send(JSON.stringify({ act: "response", ctx: "loadChat", @@ -30,9 +65,9 @@ async function requestHandler(req, ws, chat) { ws.send({ act:"response", - ctx:"" + ctx:"loadUsers", + status:"success" }); - break; } @@ -82,7 +117,5 @@ async function registerHandler (req, ws){ module.exports = { - messageHandler: messageHandler, - requestHandler: requestHandler, - registerHandler: registerHandler + handle: handle } \ No newline at end of file diff --git a/nodeSocket/user.js b/nodeSocket/user.js index c69372b..36fb48a 100644 --- a/nodeSocket/user.js +++ b/nodeSocket/user.js @@ -105,8 +105,53 @@ async function login(req, ws){ } } +async function addRelation(req, ws){ + + let c = await mysql.query(`SELECT * FROM chat WHERE id = '${req.id2}'`); + + let c2 = await mysql.query(` + SELECT * FROM users_relation + WHERE + usr1= '${req.id}' AND usr2= '${req.id2}' + `); + + if (c[0].length > 0 && c2[0].length == 0){ + + await mysql.query(` + INSERT INTO + users_relation (usr1, usr2) + VALUES + ('${req.id}', '${req.id2}'), + ('${req.id2}', '${req.id}')` + ); + + let r = await mysql.query(` + SELECT + Name, Status, grp, Image, id + FROM chat + WHERE + id=${req.id}`) + + ws.send(JSON.stringify({ + act:"relation", + ctx:"add", + status:"success", + user: r[0] + })) + + } else { + + ws.send(JSON.stringify({ + act: "relation", + ctx: "add", + status:"fail" + })) + } +} + module.exports = { getUserArray: getUserArray, sign: sign, - login: login + login: login, + addRelation: addRelation };