AIRA
Local network secure P2P communications
ERROR_MSG
diff --git a/build.rs b/build.rs index e3b726d..1dc7030 100644 --- a/build.rs +++ b/build.rs @@ -46,9 +46,11 @@ fn generate_web_files() { "commons/script.js", ].iter().for_each(|file_name| { let path = Path::new(file_name); + let src_path = src_dir.join(path); + println!("cargo:rerun-if-changed={}", src_path.to_str().unwrap()); let extension = path.extension().unwrap().to_str().unwrap(); - let mut content = read_to_string(src_dir.join(path)).unwrap(); - if extension == "css" { + let mut content = read_to_string(src_path).unwrap(); + if extension == "css" || file_name == &"login.html" { replace_fields(&mut content, fields); } if file_name == &"index.html" { @@ -59,7 +61,9 @@ fn generate_web_files() { dst.write(minified_content.as_bytes()).unwrap(); }); - let mut text_avatar = read_to_string("src/frontend/imgs/text_avatar.svg").unwrap(); + const TEXT_AVATAR_PATH: &str = "src/frontend/imgs/text_avatar.svg"; + let mut text_avatar = read_to_string(TEXT_AVATAR_PATH).unwrap(); + println!("cargo:rerun-if-changed={}", TEXT_AVATAR_PATH); replace_fields(&mut text_avatar, fields); File::create(out_dir.join("text_avatar.svg")).unwrap().write(text_avatar.as_bytes()).unwrap(); } diff --git a/src/frontend/commons/script.js b/src/frontend/commons/script.js index 278c951..04d9043 100644 --- a/src/frontend/commons/script.js +++ b/src/frontend/commons/script.js @@ -14,4 +14,54 @@ function generateAvatar(sessionId, name, timestamp) { let img = generateImgAvatar(); img.src = "/avatar/"+sessionId+"/"+name+"?"+timestamp; return img; +} + +function removePopup() { + let popups = document.querySelectorAll(".popup_background"); + if (popups.length > 0) { + popups[popups.length-1].remove(); + } +} +function showPopup(content, cancelable = true) { + let popup_background = document.createElement("div"); + popup_background.classList.add("popup_background"); + let popup = document.createElement("div"); + popup.classList.add("popup"); + if (cancelable) { + popup_background.onclick = function(e) { + if (e.target == popup_background) { + removePopup(); + } + }; + let close = document.createElement("button"); + close.classList.add("close"); + close.onclick = removePopup; + popup.appendChild(close); + } + popup.appendChild(content); + popup_background.appendChild(popup); + let main = document.querySelector("main"); + main.appendChild(popup_background); +} + +function uploadAvatar(event, onUploaded) { + let file = event.target.files[0]; + if (file.size < 10000000) { + let formData = new FormData(); + formData.append("avatar", file); + fetch("/set_avatar", {method: "POST", body: formData}).then(response => { + if (response.ok) { + onUploaded(); + } else { + console.log(response); + } + }); + } else { + let mainDiv = document.createElement("div"); + mainDiv.appendChild(generatePopupWarningTitle()); + let p = document.createElement("p"); + p.textContent = "Avatar cannot be larger than 10MB."; + mainDiv.appendChild(p); + showPopup(mainDiv); + } } \ No newline at end of file diff --git a/src/frontend/commons/style.css b/src/frontend/commons/style.css index 82224f7..bb40552 100644 --- a/src/frontend/commons/style.css +++ b/src/frontend/commons/style.css @@ -24,10 +24,97 @@ input[type="text"], input[type="password"] { width: 100%; margin: 0; } +input[type="file"] { + display: none; +} + +label { + cursor: pointer; +} .avatar { margin-right: .5em; width: 1.5em; height: 1.5em; border-radius: 50%; +} + +main.card { + max-width: 500px; + background-color: #2B2F31; + border-radius: 10px; + position: absolute; + top: 50%; + transform: translateY(-50%); + left: 0; + right: 0; + margin: auto; +} + +.popup { + position: absolute; + top: 50%; + transform: translateY(-50%); + left: 0; + right: 0; + margin: auto; + width: 40vw; + max-height: 90vh; + overflow: auto; + box-sizing: border-box; + padding: 20px 70px 10px; + background-color: #2B2F31; + border-radius: 10px; + font-size: 1.2em; +} +.popup:last-child::after { + content: ""; + display: block; + height: 20px; + width: 100%; +} +.popup_background { + height: 100%; + width: 100%; + position: absolute; + background-color: rgba(0, 0, 0, .5); + z-index: 2; +} +.popup .close { + background-color: unset; + position: absolute; + right: 0; + top: 6px; +} +.popup .close::after { + content: url("/static/imgs/icons/cancel"); + background-color: unset; +} + +#avatarContainer { + display: flex; + justify-content: center; + padding-bottom: 1.5em; +} +#avatarContainer .avatar { + margin-right: unset; +} +#avatarContainer label:hover .avatar { + opacity: .4; +} +#avatarContainer label { + position: relative; +} +#avatarContainer .avatar + p { + display: none; + position: absolute; + top: 50%; + transform: translateY(-50%); + left: 0; + right: 0; + margin: 0; + text-align: center; +} +#avatarContainer label:hover p { + display: block; } \ No newline at end of file diff --git a/src/frontend/imgs/icons/profile.svg b/src/frontend/imgs/icons/profile.svg new file mode 100644 index 0000000..98f8ddd --- /dev/null +++ b/src/frontend/imgs/icons/profile.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/frontend/index.css b/src/frontend/index.css index 463bb74..78622e9 100644 --- a/src/frontend/index.css +++ b/src/frontend/index.css @@ -48,9 +48,6 @@ button:hover::after { .classic_button:hover { background-color: var(--accent); } -input[type="file"] { - display: none; -} .file_picker { display: flex; align-items: center; @@ -60,57 +57,12 @@ input[type="file"] { content: url("/static/imgs/icons/attach/ACCENT_COLOR"); width: 2em; } -.popup { - position: absolute; - top: 50%; - transform: translateY(-50%); - left: 0; - right: 0; - margin: auto; - width: 40vw; - max-height: 90vh; - overflow: auto; - box-sizing: border-box; - padding: 20px 70px 10px; - background-color: #2B2F31; - border-radius: 10px; - font-size: 1.2em; -} -.popup:last-child::after { - content: ""; - display: block; - height: 20px; - width: 100%; -} -.popup_background { - height: 100%; - width: 100%; - position: absolute; - background-color: rgba(0, 0, 0, .5); - z-index: 2; -} -.popup .close { - background-color: unset; - position: absolute; - right: 0; - top: 6px; -} -.popup .close:hover { - background-color: unset; -} -.popup .close::after { - content: url("/static/imgs/icons/cancel"); - background-color: unset; -} .popup h2.warning::before { content: url("/static/imgs/icons/warning/ACCENT_COLOR"); width: 9%; display: inline-block; vertical-align: middle; } -label { - cursor: pointer; -} .switch_preference { display: flex; align-items: center; @@ -166,32 +118,9 @@ label { } #avatarContainer { position: relative; - padding-bottom: 1.5em; - display: flex; - justify-content: center; } #avatarContainer .avatar { font-size: 4em; - margin-right: unset; -} -#avatarContainer label:hover .avatar { - opacity: .4; -} -#avatarContainer>label { - position: relative; -} -#avatarContainer .avatar + p { - display: none; - position: absolute; - top: 50%; - transform: translateY(-50%); - left: 0; - right: 0; - margin: auto; - text-align: center; -} -#avatarContainer label:hover p { - display: block; } #removeAvatar { position: absolute; diff --git a/src/frontend/index.js b/src/frontend/index.js index 3257024..f0473b2 100644 --- a/src/frontend/index.js +++ b/src/frontend/index.js @@ -247,26 +247,10 @@ profile_div.onclick = function() { inputAvatar.accept = "image/*"; inputAvatar.id = "avatar_input"; inputAvatar.onchange = function(event) { - let file = event.target.files[0]; - if (file.size < 10000000) { - let formData = new FormData(); - formData.append("avatar", file); - fetch("/set_avatar", {method: "POST", body: formData}).then(response => { - if (response.ok) { - avatarTimestamps.set("self", Date.now()); - refreshSelfAvatar(); - } else { - console.log(response); - } - }); - } else { - let mainDiv = document.createElement("div"); - mainDiv.appendChild(generatePopupWarningTitle()); - let p = document.createElement("p"); - p.textContent = "Avatar cannot be larger than 10MB."; - mainDiv.appendChild(p); - showPopup(mainDiv); - } + uploadAvatar(event, function() { + avatarTimestamps.set("self", Date.now()); + refreshSelfAvatar(); + }); }; labelAvatar.appendChild(inputAvatar); labelAvatar.appendChild(generateSelfAvatar(avatarTimestamps.get("self"))); @@ -965,33 +949,6 @@ function displayHeader() { } } } -function showPopup(content, cancelable = true) { - let popup_background = document.createElement("div"); - popup_background.classList.add("popup_background"); - let popup = document.createElement("div"); - popup.classList.add("popup"); - if (cancelable) { - popup_background.onclick = function(e) { - if (e.target == popup_background) { - removePopup(); - } - }; - let close = document.createElement("button"); - close.classList.add("close"); - close.onclick = removePopup; - popup.appendChild(close); - } - popup.appendChild(content); - popup_background.appendChild(popup); - let main = document.querySelector("main"); - main.appendChild(popup_background); -} -function removePopup() { - let popups = document.querySelectorAll(".popup_background"); - if (popups.length > 0) { - popups[popups.length-1].remove(); - } -} function generatePopupWarningTitle() { let h2 = document.createElement("h2"); h2.classList.add("warning"); diff --git a/src/frontend/login.html b/src/frontend/login.html index 0fbb3c9..385c50f 100644 --- a/src/frontend/login.html +++ b/src/frontend/login.html @@ -14,14 +14,6 @@ background-color: black; } main { - max-width: 500px; - background-color: #2B2F31; - border-radius: 10px; - position: absolute; - top: 20vh; - left: 0; - right: 0; - margin: auto; padding-bottom: 20px; } h1, main>h3, #error_msg { @@ -40,6 +32,9 @@ font-weight: bold; margin-bottom: 0; } + .action_page>h2 { + margin-top: 0; + } input[type="text"], input[type="password"] { margin-bottom: 20px; } @@ -65,13 +60,11 @@ .avatar { width: 7em; height: 7em; - display: block; - margin: auto; } #identity h2 { text-align: center; } - p { + #error_msg { color: red; } label.checkbox { @@ -110,24 +103,41 @@ label.checkbox input:checked ~ .checkmark:after { display: block; } + #avatarContainer .avatar.unset { + border: 2px solid var(--accent); + } + #identity .avatar { + display: block; + margin: auto; + }
-ERROR_MSG