From 861e07253743cc9ad6f1c003281ab52c2edf99e3 Mon Sep 17 00:00:00 2001 From: Hardcore Sushi Date: Tue, 11 May 2021 16:11:24 +0200 Subject: [PATCH] Refresh name button --- README.md | 4 +- src/frontend/index.css | 34 +++++++++------- src/frontend/index.js | 88 +++++++++++++++++++++++++++--------------- src/main.rs | 8 ++++ 4 files changed, 86 insertions(+), 48 deletions(-) diff --git a/README.md b/README.md index f2bc953..45a3e41 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # AIRA AIRA is peer-to-peer encrypted communication tool for local networks built on the [PSEC protocol](https://forge.chapril.org/hardcoresushi/PSEC). It allows to securely send text messages and files without any server or Internet access. AIRA automatically discovers and connects to other peers on your network, so you don't need any prior configuration to start communicating. -![Screenshot of a conversation between Alice and Bob on AIRA](/screenshot.png) +![Screenshot of a conversation between Alice and Bob on AIRA](https://forge.chapril.org/hardcoresushi/AIRA/raw/branch/master/screenshot.png) # Rationale When people want to send a file from one computer to another located only meters apart, they usually send it via mail. This mail usually goes through many servers around the world before reaching its final destination. @@ -62,4 +62,4 @@ cargo build --release ``` ## What does AIRA stand for ? -AIRA Is a Recursive Acronym. \ No newline at end of file +AIRA Is a Recursive Acronym. diff --git a/src/frontend/index.css b/src/frontend/index.css index 67c17b2..e071e65 100644 --- a/src/frontend/index.css +++ b/src/frontend/index.css @@ -37,6 +37,17 @@ button::after { button:hover::after { background-color: var(--accent); } +.classic_button { + background-color: var(--button-background); + color: white; + cursor: pointer; + padding: 10px 20px; + border-radius: 8px; + font-weight: bold; +} +.classic_button:hover { + background-color: var(--accent); +} input[type="file"] { display: none; } @@ -104,17 +115,6 @@ input[type="file"] { display: block; margin: 10px; } -.popup button { - background-color: var(--button-background); - color: white; - cursor: pointer; - padding: 10px 20px; - border-radius: 8px; - font-weight: bold; -} -.popup button:hover { - background-color: var(--accent); -} .popup span { font-weight: bold; } @@ -128,13 +128,17 @@ input[type="file"] { display: inline-block; vertical-align: middle; } -.popup .session_info h2 { - text-align: center; +#session_info .name { + display: flex; + justify-content: center; } -.popup .session_info p:first-of-type, .popup .session_info pre { +#session_info .name button::after { + content: url("/static/imgs/icons/refresh"); +} +#session_info p:first-of-type, #session_info pre { display: inline-block; } -.popup .session_info p:nth-of-type(2) { +#session_info p, #session_info pre { margin-top: 0; } .button_row { diff --git a/src/frontend/index.js b/src/frontend/index.js index 52ecd30..39cdb41 100644 --- a/src/frontend/index.js +++ b/src/frontend/index.js @@ -63,6 +63,7 @@ document.getElementById("delete_conversation").onclick = function() { mainDiv.appendChild(p1); mainDiv.appendChild(p2); let button = document.createElement("button"); + button.classList.add("classic_button"); button.textContent = "Delete"; button.onclick = function() { socket.send("delete_conversation "+currentSessionId); @@ -89,6 +90,7 @@ document.getElementById("remove_contact").onclick = function() { p2.textContent = "Do you really want to remove this contact ?"; mainDiv.appendChild(p2); let button = document.createElement("button"); + button.classList.add("classic_button"); button.textContent = "Delete"; button.onclick = function() { socket.send("uncontact "+currentSessionId); @@ -130,6 +132,7 @@ document.getElementById("verify").onclick = function() { let buttonRow = document.createElement("div"); buttonRow.classList.add("button_row"); let verifyButton = document.createElement("button"); + verifyButton.classList.add("classic_button"); verifyButton.textContent = "They match"; verifyButton.onclick = function() { socket.send("verify "+currentSessionId); @@ -140,6 +143,7 @@ document.getElementById("verify").onclick = function() { }; buttonRow.appendChild(verifyButton); let cancelButton = document.createElement("button"); + cancelButton.classList.add("classic_button"); cancelButton.textContent = "They don't match"; cancelButton.onclick = removePopup; buttonRow.appendChild(cancelButton); @@ -157,6 +161,7 @@ document.getElementById("logout").onclick = function() { p_ask.textContent = "Do you really want to log out ?"; mainDiv.appendChild(p_ask); let button = document.createElement("button"); + button.classList.add("classic_button"); button.textContent = "Log out"; button.onclick = logout; mainDiv.appendChild(button); @@ -243,6 +248,7 @@ profile_div.onclick = function() { inputName.value = identityName; sectionName.appendChild(inputName); let saveNameButton = document.createElement("button"); + saveNameButton.classList.add("classic_button");; saveNameButton.textContent = "Save"; saveNameButton.onclick = function() { socket.send("change_name "+document.getElementById("new_name").value); @@ -272,6 +278,7 @@ profile_div.onclick = function() { errorMsg.style.color = "red"; sectionPassword.appendChild(errorMsg); let changePasswordButton = document.createElement("button"); + changePasswordButton.classList.add("classic_button"); changePasswordButton.textContent = "Change password"; changePasswordButton.onclick = function() { let inputs = document.querySelectorAll("input[type=\"password\"]"); @@ -314,6 +321,7 @@ profile_div.onclick = function() { p.style.color = "red"; sectionDelete.appendChild(p); let deleteButton = document.createElement("button"); + deleteButton.classList.add("classic_button"); deleteButton.textContent = "Delete"; deleteButton.style.backgroundColor = "red"; deleteButton.onclick = function() { @@ -323,6 +331,7 @@ profile_div.onclick = function() { p.textContent = "This action is irreversible. Are you sure you want to delete all your data ?"; mainDiv.appendChild(p); let deleteButton = document.createElement("button"); + deleteButton.classList.add("classic_button"); deleteButton.style.backgroundColor = "red"; deleteButton.textContent = "Delete"; deleteButton.onclick = function() { @@ -336,37 +345,7 @@ profile_div.onclick = function() { showPopup(mainDiv); }; let chatHeader = document.getElementById("chat_header"); -chatHeader.children[0].onclick = function() { - let session = sessionsData.get(currentSessionId); - if (typeof session !== "undefined") { - let mainDiv = document.createElement("div"); - mainDiv.classList.add("session_info"); - mainDiv.appendChild(generateAvatar(session.name)); - let h2 = document.createElement("h2"); - h2.textContent = session.name; - mainDiv.appendChild(h2); - let pFingerprint = document.createElement("p"); - pFingerprint.textContent = "Fingerprint:"; - mainDiv.appendChild(pFingerprint); - let pre = document.createElement("pre"); - pre.textContent = ' '+beautifyFingerprint(session.fingerprint); - mainDiv.appendChild(pre); - if (session.isOnline) { - let pIp = document.createElement("p"); - pIp.textContent = "IP: "+session.ip; - mainDiv.appendChild(pIp); - let pConnection = document.createElement("p"); - pConnection.textContent = "Connection: "; - if (session.outgoing) { - pConnection.textContent += "outgoing"; - } else { - pConnection.textContent += "incomming"; - } - mainDiv.appendChild(pConnection); - } - showPopup(mainDiv); - } -}; +chatHeader.children[0].onclick = showSessionInfoPopup; document.querySelector("#refresher button").onclick = function() { socket.send("refresh"); }; @@ -517,6 +496,10 @@ function onNameTold(sessionId, name) { sessionsData.get(sessionId).name = name; if (sessionId == currentSessionId) { displayHeader(); + if (document.getElementById("session_info") !== null) { + removePopup(); + showSessionInfoPopup(); + } } displaySessions(); } @@ -609,6 +592,7 @@ function onAskLargeFiles(sessionId, encodedDownloadLocation, filesInfo) { let buttonRow = document.createElement("div"); buttonRow.classList.add("button_row"); let buttonDownload = document.createElement("button"); + buttonDownload.classList.add("classic_button"); buttonDownload.textContent = "Download"; buttonDownload.onclick = function() { removePopup(); @@ -634,6 +618,7 @@ function onAskLargeFiles(sessionId, encodedDownloadLocation, filesInfo) { }; buttonRow.appendChild(buttonDownload); let buttonRefuse = document.createElement("button"); + buttonRefuse.classList.add("classic_button"); buttonRefuse.textContent = "Refuse"; buttonRefuse.onclick = function() { removePopup(); @@ -764,6 +749,47 @@ function beautifyFingerprint(f) { } return f; } +function showSessionInfoPopup() { + let session = sessionsData.get(currentSessionId); + if (typeof session !== "undefined") { + let mainDiv = document.createElement("div"); + mainDiv.id = "session_info"; + mainDiv.appendChild(generateAvatar(session.name)); + let nameDiv = document.createElement("div"); + nameDiv.classList.add("name"); + let h2 = document.createElement("h2"); + h2.textContent = session.name; + nameDiv.appendChild(h2); + if (session.isOnline) { + let button = document.createElement("button"); + button.onclick = function() { + socket.send("ask_name "+currentSessionId); + }; + nameDiv.appendChild(button); + } + mainDiv.appendChild(nameDiv); + let pFingerprint = document.createElement("p"); + pFingerprint.textContent = "Fingerprint:"; + mainDiv.appendChild(pFingerprint); + let pre = document.createElement("pre"); + pre.textContent = ' '+beautifyFingerprint(session.fingerprint); + mainDiv.appendChild(pre); + if (session.isOnline) { + let pIp = document.createElement("p"); + pIp.textContent = "IP: "+session.ip; + mainDiv.appendChild(pIp); + let pConnection = document.createElement("p"); + pConnection.textContent = "Connection: "; + if (session.outgoing) { + pConnection.textContent += "outgoing"; + } else { + pConnection.textContent += "incomming"; + } + mainDiv.appendChild(pConnection); + } + showPopup(mainDiv); + } +} function addSession(sessionId, name, outgoing, fingerprint, ip, isContact, isVerified, isOnline) { sessionsData.set(sessionId, { "name": name, diff --git a/src/main.rs b/src/main.rs index 52d07c6..35ef2f9 100644 --- a/src/main.rs +++ b/src/main.rs @@ -230,6 +230,14 @@ async fn websocket_worker(mut ui_connection: UiConnection, global_vars: Arc print_error!(e) } } + "ask_name" => { + let session_id: usize = args[1].parse().unwrap(); + if let Err(e) = session_manager.send_command(&session_id, SessionCommand::Send { + buff: protocol::ask_name() + }).await { + print_error!(e); + } + } "change_name" => { let new_name = &msg[args[0].len()+1..]; match session_manager.change_name(new_name.to_string()).await {