Allow setting avatar when creating identity

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

src/frontend/commons/script.js

@@ -15,3 +15,53 @@ function generateAvatar(sessionId, name, timestamp) {
     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);
+    }
+}

src/frontend/commons/style.css

@@ -24,6 +24,13 @@ input[type="text"], input[type="password"] {
     width: 100%;
     margin: 0;
 }
+input[type="file"] {
+    display: none;
+}
+
+label {
+    cursor: pointer;
+}
 
 .avatar {
     margin-right: .5em;
@@ -31,3 +38,83 @@ input[type="text"], input[type="password"] {
     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;
+}

src/frontend/imgs/icons/profile.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#FILL_COLOR"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>

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;
@@ -165,31 +117,18 @@ label {
   transform: translateX(26px);
 }
 #avatarContainer {
-    display: flex;
-    justify-content: center;
+    position: relative;
 }
 #avatarContainer .avatar {
     font-size: 4em;
-    margin-right: unset;
 }
-#avatarContainer label:hover .avatar {
-    opacity: .4;
-}
-#avatarContainer>label {
-    position: relative;
-}
-#avatarContainer .avatar + p {
-    display: none;
+#removeAvatar {
     position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    left: 0;
-    right: 0;
-    margin: auto;
-    text-align: center;
+    bottom: 0;
+    cursor: pointer;
 }
-#avatarContainer label:hover p {
-    display: block;
+#removeAvatar:hover {
+    color: var(--accent);
 }
 #profile_info section {
     display: block;
@@ -199,12 +138,12 @@ label {
 #profile_info section:first-of-type {
     border-top: unset;
 }
+#profile_info section:first-of-type h3 {
+    margin: 0;
+}
 #profile_info input {
     margin: 10px;
 }
-#profile_info span {
-    font-weight: bold;
-}
 #profile_info>div>div p {
     font-weight: normal;
     font-size: 0.9em;
@@ -275,10 +214,6 @@ label {
 #me>div:hover p {
     color: var(--accent);
 }
-#identity_fingerprint {
-    text-align: center;
-    margin-bottom: 0;
-}
 #left_panel ul:last-of-type, #msg_log {
     flex-grow: 1;
 }

src/frontend/index.js

@@ -244,32 +244,13 @@ profile_div.onclick = function() {
     labelAvatar.setAttribute("for", "avatar_input");
     let inputAvatar = document.createElement("input");
     inputAvatar.type = "file";
+    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) {
+        uploadAvatar(event, function() {
             avatarTimestamps.set("self", Date.now());
-                    document.querySelector("#avatarContainer .avatar").src = "/avatar/self?"+avatarTimestamps.get("self");
-                    displayProfile();
-                    if (currentSessionId != -1) {
-                        displayHistory();
-                    }
-                } else {
-                    console.log(response);
-                }
+            refreshSelfAvatar();
         });
-        } 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);
-        }
     };
     labelAvatar.appendChild(inputAvatar);
     labelAvatar.appendChild(generateSelfAvatar(avatarTimestamps.get("self")));
@@ -277,11 +258,14 @@ profile_div.onclick = function() {
     uploadP.textContent = "Upload";
     labelAvatar.appendChild(uploadP);
     avatarContainer.appendChild(labelAvatar);
+    let removeAvatar = document.createElement("span");
+    removeAvatar.id = "removeAvatar";
+    removeAvatar.textContent = "Remove";
+    removeAvatar.onclick = function() {
+        socket.send("remove_avatar");
+    };
+    avatarContainer.appendChild(removeAvatar);
     mainDiv.appendChild(avatarContainer);
-    let fingerprint = document.createElement("pre");
-    fingerprint.id = "identity_fingerprint";
-    fingerprint.textContent = beautifyFingerprint(identityFingerprint);
-    mainDiv.appendChild(fingerprint);
     let sectionName = document.createElement("section");
     let titleName = document.createElement("h3");
     titleName.textContent = "Name:";
@@ -299,6 +283,14 @@ profile_div.onclick = function() {
     };
     sectionName.appendChild(saveNameButton);
     mainDiv.appendChild(sectionName);
+    let sectionFingerprint = document.createElement("section");
+    let titleFingerprint = document.createElement("h3");
+    titleFingerprint.textContent = "Your fingerprint:";
+    sectionFingerprint.appendChild(titleFingerprint);
+    let fingerprint = document.createElement("pre");
+    fingerprint.textContent = beautifyFingerprint(identityFingerprint);
+    sectionFingerprint.appendChild(fingerprint);
+    mainDiv.appendChild(sectionFingerprint);
     let sectionPadding = document.createElement("section");
     sectionPadding.appendChild(generateSwitchPreference("Use PSEC padding", "PSEC padding obfuscates the length of your messages but uses more network bandwidth.", usePadding, function(checked) {
         socket.send("set_use_padding "+checked);
@@ -499,8 +491,8 @@ socket.onmessage = function(msg) {
             case "name_told":
                 onNameTold(args[1], msg.data.slice(args[0].length+args[1].length+2));
                 break;
-            case "avatar_set":
-                onAvatarSet(args[1]);
+            case "avatar_changed":
+                onAvatarChanged(args[1]);
                 break;
             case "is_contact":
                 onIsContact(args[1], args[2] === "true", args[3], msg.data.slice(args[0].length+args[1].length+args[2].length+args[3].length+4));
@@ -554,12 +546,15 @@ function onNameTold(sessionId, name) {
     }
     displaySessions();
 }
-function onAvatarSet(sessionId) {
-    avatarTimestamps.set(sessionId, Date.now());
+function onAvatarChanged(sessionIdOrSelf) {
+    avatarTimestamps.set(sessionIdOrSelf, Date.now());
     displaySessions();
-    if (sessionId === currentSessionId) {
+    if (sessionIdOrSelf === currentSessionId) {
         displayHeader();
         displayHistory(false);
+        refreshAvatar("#session_info .avatar", sessionIdOrSelf);
+    } else if (sessionIdOrSelf === "self") {
+        refreshSelfAvatar();
     }
 }
 function setNotSeen(strSessionIds) {
@@ -818,6 +813,23 @@ function sendNextLargeFile(sessionId) {
         }
     });
 }
+function refreshAvatar(selector, sessionId) {
+    let avatar = document.querySelector(selector);
+    if (typeof avatar !== "undefined") {
+        if (typeof sessionId === "undefined") {
+            avatar.src = "/avatar/self?"+avatarTimestamps.get("self");
+        } else {
+            avatar.src = "/avatar/"+sessionId+"/"+sessionsData.get(sessionId).name+"?"+avatarTimestamps.get(sessionId);
+        }
+    }
+}
+function refreshSelfAvatar() {
+    refreshAvatar("#avatarContainer .avatar");
+    displayProfile();
+    if (currentSessionId != -1) {
+        displayHistory(false);
+    }
+}
 function beautifyFingerprint(f) {
     for (let i=4; i<f.length; i+=5) {
         f = f.slice(0, i)+" "+f.slice(i);
@@ -937,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");
@@ -1032,12 +1017,11 @@ function generateMsgHeader(name, sessionId) {
     p.appendChild(document.createTextNode(name));
     let div = document.createElement("div");
     div.classList.add("header");
-    let timestamp = avatarTimestamps.get(sessionId);
     let avatar;
     if (typeof sessionId === "undefined") {
-        avatar = generateSelfAvatar(timestamp);
+        avatar = generateSelfAvatar(avatarTimestamps.get("self"));
     } else {
-        avatar = generateAvatar(sessionId, name, timestamp);
+        avatar = generateAvatar(sessionId, name, avatarTimestamps.get(sessionId));
     }
     div.appendChild(avatar);
     div.appendChild(p);

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;
+            }
         </style>
     </head>
     <body>
-        <main>
+        <main class="card">
             <h1>AIRA</h1>
             <h3>Local network secure P2P communications</h3>
             <p id="error_msg">ERROR_MSG</p>
             <div id="login_page" class="action_page">
                 <h2>Login:</h2>
                 <form id="login_form" method="POST" action="/login">
-                    <div id="identity"></div>
+                    <div id="identity">
+                        <img class="avatar" src="/avatar/self"/>
+                        <h2 id="identityName"></h2>
+                    </div>
                     <input name="password" type="password" placeholder="Password">
                     <button type="submit">Login</button>
                 </form>
             </div>
             <div id="create_page" class="action_page">
-                <h2>Create New Identity:</h2>
+                <h2>Create a new identity:</h2>
                 <form method="POST">
+                    <div id="avatarContainer">
+                        <label>
+                            <input type="file" accept="image/*">
+                            <img class="avatar unset" src="/static/imgs/icons/profile/ACCENT_COLOR"/>
+                            <p>Upload</p>
+                        </label>
+                    </div>
                     <input type="text" name="name" placeholder="Name" required>
                     <label class="checkbox">
                         <input id="enable_password" type="checkbox">
@@ -142,12 +152,20 @@
         </main>
         <script src="/static/commons/script.js"></script>
         <script>
-            let identity_name = IDENTITY_NAME;
-            if (identity_name == null) {
+            let identityName = IDENTITY_NAME;
+            if (identityName == null) {
                 document.getElementById("login_page").style.display = "none";
+                document.querySelector("#avatarContainer input").onchange = function(event) {
+                    uploadAvatar(event, function() {
+                        let img = document.querySelector("#avatarContainer .avatar");
+                        img.src = "/avatar/self?"+Date.now();
+                        img.classList.remove("unset");
+                    });
+                };
+                let passwordInputs = document.querySelectorAll("#create_page input[type=\"password\"]");
                 let enable_password = document.getElementById("enable_password");
                 enable_password.onchange = function() {
-                    document.querySelectorAll("#create_page input[type=\"password\"]").forEach(function(i) {
+                    passwordInputs.forEach(function(i) {
                         if (enable_password.checked) {
                             i.style.display = "block";
                         } else {
@@ -156,11 +174,8 @@
                     });
                 }
             } else {
-                let identity = document.getElementById("identity");
-                identity.appendChild(generateSelfAvatar(Date.now()));
-                let h2 = document.createElement("h2");
-                h2.textContent = identity_name;
-                identity.appendChild(h2);
+                let h2Name = document.getElementById("identityName");
+                h2Name.textContent = identityName;
                 document.getElementById("create_page").style.display = "none";
             }
         </script>

src/frontend/logout.html

@@ -14,15 +14,6 @@
                 background-color: black;
             }
             main {
-                max-width: 500px;
-                background-color: #2B2F31;
-                border-radius: 10px;
-                position: absolute;
-                top: 50%;
-                transform: translateY(-50%);
-                left: 0;
-                right: 0;
-                margin: auto;
                 padding: 50px;
             }
             img {
@@ -37,7 +28,7 @@
         </style>
     </head>
     <body>
-        <main>
+        <main class="card">
             <img src="/static/imgs/frog">
             <p>You've been successfully logged out.</p>
         </main>

src/identity.rs

@@ -113,9 +113,15 @@ impl Identity {
         db.execute(&format!("UPDATE {} SET name=?1 WHERE uuid=?2", CONTACTS_TABLE), [encrypted_name.as_slice(), uuid.as_bytes()])
     }
 
-    pub fn set_contact_avatar(&self, contact_uuid: &Uuid, avatar_uuid: &Uuid) -> Result<usize, rusqlite::Error> {
+    pub fn set_contact_avatar(&self, contact_uuid: &Uuid, avatar_uuid: Option<&Uuid>) -> Result<usize, rusqlite::Error> {
         let db = Connection::open(get_database_path())?;
-        db.execute(&format!("UPDATE {} SET avatar=?1 WHERE uuid=?2", CONTACTS_TABLE), params![&avatar_uuid.as_bytes()[..], &contact_uuid.as_bytes()[..]])
+        match avatar_uuid {
+            Some(avatar_uuid) => db.execute(&format!("UPDATE {} SET avatar=?1 WHERE uuid=?2", CONTACTS_TABLE), params![&avatar_uuid.as_bytes()[..], &contact_uuid.as_bytes()[..]]),
+            None => {
+                db.execute(&format!("DELETE FROM {} WHERE uuid=(SELECT avatar FROM {} WHERE uuid=?)", AVATARS_TABLE, CONTACTS_TABLE), params![&contact_uuid.as_bytes()[..]])?;
+                db.execute(&format!("UPDATE {} SET avatar=NULL WHERE uuid=?", CONTACTS_TABLE), params![&contact_uuid.as_bytes()[..]])
+            }
+        }
     }
 
     pub fn set_contact_seen(&self, uuid: &Uuid, seen: bool) -> Result<usize, rusqlite::Error> {
@@ -473,6 +479,11 @@ impl Identity {
         db.upsert(DBKeys::AVATAR, avatar)
     }
 
+    pub fn remove_identity_avatar() -> Result<usize, rusqlite::Error> {
+        let db = KeyValueTable::new(&get_database_path(), MAIN_TABLE)?;
+        db.del(DBKeys::AVATAR)
+    }
+
     pub fn get_identity_avatar() -> Result<Vec<u8>, rusqlite::Error> {
         let db = KeyValueTable::new(&get_database_path(), MAIN_TABLE)?;
         db.get(DBKeys::AVATAR)

src/key_value_table.rs

@@ -22,9 +22,9 @@ impl<'a> KeyValueTable<'a> {
             None => Err(rusqlite::Error::QueryReturnedNoRows)
         }
     }
-    /*pub fn del(&self, key: &str) -> Result<usize, Error> {
-        self.db.execute(&format!("DELETE FROM {} WHERE key=\"{}\"", self.table_name, key), NO_PARAMS)
-    }*/
+    pub fn del(&self, key: &str) -> Result<usize, Error> {
+        self.db.execute(&format!("DELETE FROM {} WHERE key=\"{}\"", self.table_name, key), [])
+    }
     pub fn update(&self, key: &str, value: &[u8]) -> Result<usize, Error> {
         self.db.execute(&format!("UPDATE {} SET value=? WHERE key=\"{}\"", self.table_name, key), params![value])
     }

src/main.rs

@@ -231,6 +231,12 @@ async fn websocket_worker(mut ui_connection: UiConnection, global_vars: Arc<RwLo
                                         buff: protocol::ask_profile_info()
                                     }).await;
                                 }
+                                "remove_avatar" => {
+                                    match session_manager.remove_avatar().await {
+                                        Ok(_) => ui_connection.on_avatar_changed(None),
+                                        Err(e) => print_error!(e)
+                                    }
+                                }
                                 "set_use_padding" => {
                                     let use_padding: bool = args[1].parse().unwrap();
                                     if let Err(e) = session_manager.identity.write().unwrap().as_mut().unwrap().set_use_padding(use_padding) {
@@ -240,9 +246,7 @@ async fn websocket_worker(mut ui_connection: UiConnection, global_vars: Arc<RwLo
                                 "change_name" => {
                                     let new_name = &msg[args[0].len()+1..];
                                     match session_manager.change_name(new_name.to_string()).await {
-                                        Ok(_) => {
-                                            ui_connection.set_name(new_name)
-                                        }
+                                        Ok(_) => ui_connection.set_name(new_name),
                                         Err(e) => print_error!(e)
                                     };
                                 }
@@ -305,8 +309,7 @@ fn is_authenticated(req: &HttpRequest) -> bool {
 }
 
 async fn handle_set_avatar(req: HttpRequest, mut payload: Multipart) -> HttpResponse {
-    if is_authenticated(&req) {
-        while let Ok(Some(mut field)) = payload.try_next().await {
+    if let Ok(Some(mut field)) = payload.try_next().await {
         let content_disposition = field.content_disposition().unwrap();
         if let Some(name) = content_disposition.get_name() {
             if name == "avatar" {
@@ -329,8 +332,15 @@ async fn handle_set_avatar(req: HttpRequest, mut payload: Multipart) -> HttpResp
                                 let mut avatar = Vec::new();
                                 image.write_to(&mut avatar, format).unwrap();
                                 let global_vars = req.app_data::<Data<Arc<RwLock<GlobalVars>>>>().unwrap();
-                                    match global_vars.read().unwrap().session_manager.set_avatar(&avatar).await {
+                                let session_manager = &global_vars.read().unwrap().session_manager;
+                                let is_authenticated = is_authenticated(&req);
+                                let is_running = session_manager.is_identity_loaded();
+                                if is_authenticated || !is_running {
+                                    match Identity::set_identity_avatar(&avatar) {
                                         Ok(_) => {
+                                            if is_authenticated && is_running {
+                                                session_manager.send_avatar(&avatar).await;
+                                            }
                                             return HttpResponse::Ok().finish();
                                         }
                                         Err(e) => {
@@ -339,6 +349,7 @@ async fn handle_set_avatar(req: HttpRequest, mut payload: Multipart) -> HttpResp
                                         }
                                     }
                                 }
+                            }
                             Err(e) => print_error!(e)
                         }
                     }
@@ -347,20 +358,22 @@ async fn handle_set_avatar(req: HttpRequest, mut payload: Multipart) -> HttpResp
             }
         }
     }
-    }
     HttpResponse::BadRequest().finish()
 }
 
-fn reply_with_avatar(avatar: Option<Vec<u8>>, name: &str) -> HttpResponse {
+fn reply_with_avatar(avatar: Option<Vec<u8>>, name: Option<&str>) -> HttpResponse {
     match avatar {
         Some(avatar) => HttpResponse::Ok().content_type("image/*").body(avatar),
-        None => {
+        None => match name {
+            Some(name) => {
                 #[cfg(not(debug_assertions))]
                 let svg = include_str!(concat!(env!("OUT_DIR"), "/text_avatar.svg"));
                 #[cfg(debug_assertions)]
                 let svg = replace_fields("src/frontend/imgs/text_avatar.svg");
                 HttpResponse::Ok().content_type("image/svg+xml").body(svg.replace("LETTER", &name.chars().nth(0).unwrap().to_string()))
             }
+            None => HttpResponse::InternalServerError().finish()
+        }
     }
 }
 
@@ -368,12 +381,12 @@ fn handle_avatar(req: HttpRequest) -> HttpResponse {
     let splits: Vec<&str> = req.path()[1..].split("/").collect();
     if splits.len() == 2 {
         if splits[1] == "self" {
-            return reply_with_avatar(Identity::get_identity_avatar().ok(), &Identity::get_identity_name().unwrap());
+            return reply_with_avatar(Identity::get_identity_avatar().ok(), Identity::get_identity_name().ok().as_deref());
         }
     } else if splits.len() == 3 {
         if let Ok(session_id) = splits[1].parse() {
             let global_vars = req.app_data::<Data<Arc<RwLock<GlobalVars>>>>().unwrap();
-            return reply_with_avatar(global_vars.read().unwrap().session_manager.get_avatar(&session_id), splits[2]);
+            return reply_with_avatar(global_vars.read().unwrap().session_manager.get_avatar(&session_id), Some(splits[2]));
         }
     }
     HttpResponse::BadRequest().finish()
@@ -443,9 +456,7 @@ async fn handle_send_file(req: HttpRequest, mut payload: Multipart) -> HttpRespo
                         loop {
                             chunk_buffer.extend(&pending_buffer);
                             pending_buffer.clear();
-                            println!("Calling next()");
                             while let Some(Ok(chunk)) = field.next().await {
-                                println!("Not None");
                                 if chunk_buffer.len()+chunk.len() <= constants::FILE_CHUNK_SIZE {
                                     chunk_buffer.extend(chunk);
                                 } else if chunk_buffer.len() == constants::FILE_CHUNK_SIZE {
@@ -458,7 +469,6 @@ async fn handle_send_file(req: HttpRequest, mut payload: Multipart) -> HttpRespo
                                     break;
                                 }
                             }
-                            println!("May be None");
                             if !global_vars_read.session_manager.send_command(&session_id, SessionCommand::EncryptFileChunk{
                                 plain_text: chunk_buffer.clone()
                             }).await {
@@ -542,6 +552,10 @@ fn on_identity_loaded(identity: Identity, global_vars: &Arc<RwLock<GlobalVars>>)
     login(identity, global_vars)
 }
 
+#[derive(Serialize, Deserialize)]
+struct LoginParams {
+    password: String,
+}
 fn handle_login(req: HttpRequest, mut params: web::Form<LoginParams>) -> HttpResponse {
     let response = match Identity::load_identity(Some(params.password.as_bytes())) {
         Ok(identity) => {
@@ -556,7 +570,7 @@ fn handle_login(req: HttpRequest, mut params: web::Form<LoginParams>) -> HttpRes
 
 fn get_login_body(error_msg: Option<&str>) -> Result<String, rusqlite::Error> {
     #[cfg(debug_assertions)]
-    let html = fs::read_to_string("src/frontend/login.html").unwrap();
+    let html = replace_fields("src/frontend/login.html");
     #[cfg(not(debug_assertions))]
     let html = include_str!(concat!(env!("OUT_DIR"), "/login.html"));
     Ok(html
@@ -566,8 +580,10 @@ fn get_login_body(error_msg: Option<&str>) -> Result<String, rusqlite::Error> {
         })
         .replace("IDENTITY_NAME", &match Identity::get_identity_name() {
                 Ok(name) => format!("\"{}\"", html_escape::encode_double_quoted_attribute(&name)),
-                Err(e) => {
+                Err(_) => {
+                    if let Err(e) = Identity::remove_identity_avatar() {
                         print_error!(e);
+                    }
                     "null".to_owned()
                 }
             }
@@ -585,6 +601,12 @@ fn generate_login_response(error_msg: Option<&str>) -> HttpResponse {
     }
 }
 
+#[derive(Serialize, Deserialize)]
+struct CreateParams {
+    name: String,
+    password: String,
+    password_confirm: String,
+}
 async fn handle_create(req: HttpRequest, mut params: web::Form<CreateParams>) -> HttpResponse {
     let response = if params.password == params.password_confirm {
         match Identity::create_identidy(
@@ -697,6 +719,7 @@ fn handle_static(req: HttpRequest) -> HttpResponse {
                         "refresh" => Some(include_str!("frontend/imgs/icons/refresh.svg")),
                         "info" => Some(include_str!("frontend/imgs/icons/info.svg")),
                         "delete_conversation" => Some(include_str!("frontend/imgs/icons/delete_conversation.svg")),
+                        "profile" => Some(include_str!("frontend/imgs/icons/profile.svg")),
                         _ => None
                     } {
                         Some(body) => {
@@ -792,18 +815,6 @@ async fn start_http_server(global_vars: Arc<RwLock<GlobalVars>>) -> io::Result<(
     server.run().await
 }
 
-#[derive(Serialize, Deserialize)]
-struct LoginParams {
-    password: String,
-}
-
-#[derive(Serialize, Deserialize)]
-struct CreateParams {
-    name: String,
-    password: String,
-    password_confirm: String,
-}
-
 struct GlobalVars {
     session_manager: Arc<SessionManager>,
     websocket_port: u16,

src/protocol.rs

@@ -9,11 +9,12 @@ impl Headers {
     pub const ASK_PROFILE_INFO: u8 = 0x02;
     pub const NAME: u8 = 0x03;
     pub const AVATAR: u8 = 0x04;
-    pub const ASK_LARGE_FILES: u8 = 0x05;
-    pub const ACCEPT_LARGE_FILES: u8 = 0x06;
-    pub const LARGE_FILE_CHUNK: u8 = 0x07;
-    pub const ACK_CHUNK: u8 = 0x08;
-    pub const ABORT_FILES_TRANSFER: u8 = 0x09;
+    pub const REMOVE_AVATAR: u8 = 0x05;
+    pub const ASK_LARGE_FILES: u8 = 0x06;
+    pub const ACCEPT_LARGE_FILES: u8 = 0x07;
+    pub const LARGE_FILE_CHUNK: u8 = 0x08;
+    pub const ACK_CHUNK: u8 = 0x09;
+    pub const ABORT_FILES_TRANSFER: u8 = 0x0a;
 }
 
 pub fn new_message(message: String) -> Vec<u8> {
@@ -85,3 +86,7 @@ pub fn parse_ask_files(buffer: &[u8]) -> Option<Vec<(u64, String)>> {
 pub fn avatar(avatar: &[u8]) -> Vec<u8> {
     [&[Headers::AVATAR], avatar].concat()
 }
+
+pub fn remove_avatar() -> Vec<u8> {
+    vec![Headers::REMOVE_AVATAR]
+}

src/session_manager.rs

@@ -136,6 +136,21 @@ impl SessionManager {
         self.not_seen.write().unwrap().retain(|x| x != session_id);
     }
 
+    fn set_avatar_uuid(&self, session_id: &usize, avatar_uuid: Option<Uuid>) {
+        let mut loaded_contacts = self.loaded_contacts.write().unwrap();
+        if let Some(contact) = loaded_contacts.get_mut(session_id) {
+            contact.avatar = avatar_uuid;
+            if let Err(e) = self.identity.read().unwrap().as_ref().unwrap().set_contact_avatar(&contact.uuid, avatar_uuid.as_ref()) {
+                print_error!(e);
+            }
+        } else {
+            self.sessions.write().unwrap().get_mut(session_id).unwrap().avatar = avatar_uuid;
+        }
+        self.with_ui_connection(|ui_connection| {
+            ui_connection.on_avatar_changed(Some(session_id));
+        });
+    }
+
     async fn send_msg(&self, session_id: usize, session_write: &mut SessionWriteHalf, buff: &[u8], is_sending: &mut bool, file_ack_sender: &mut Option<Sender<bool>>) -> Result<(), PsecError> {
         self.encrypt_and_send(session_write, &buff).await?;
         if buff[0] == protocol::Headers::ACCEPT_LARGE_FILES {
@@ -342,23 +357,8 @@ impl SessionManager {
                                         match image::load_from_memory(&buffer[1..]) {
                                             Ok(image) => {
                                                 drop(image);
-                                                let identity_opt = self.identity.read().unwrap();
-                                                let identity = identity_opt.as_ref().unwrap();
-                                                match identity.store_avatar(&buffer[1..]) {
-                                                    Ok(avatar_uuid) => {
-                                                        let mut loaded_contacts = self.loaded_contacts.write().unwrap();
-                                                        if let Some(contact) = loaded_contacts.get_mut(&session_id) {
-                                                            contact.avatar = Some(avatar_uuid);
-                                                            if let Err(e) = identity.set_contact_avatar(&contact.uuid, &avatar_uuid) {
-                                                                print_error!(e);
-                                                            }
-                                                        } else {
-                                                            self.sessions.write().unwrap().get_mut(&session_id).unwrap().avatar = Some(avatar_uuid);
-                                                        }
-                                                        self.with_ui_connection(|ui_connection| {
-                                                            ui_connection.on_avatar_set(&session_id);
-                                                        });
-                                                    }
+                                                match self.identity.read().unwrap().as_ref().unwrap().store_avatar(&buffer[1..]) {
+                                                    Ok(avatar_uuid) => self.set_avatar_uuid(&session_id, Some(avatar_uuid)),
                                                     Err(e) => print_error!(e)
                                                 }
                                             }
@@ -366,6 +366,7 @@ impl SessionManager {
                                         }
                                     }
                                 }
+                                protocol::Headers::REMOVE_AVATAR => self.set_avatar_uuid(&session_id, None),
                                 _ => {
                                     let header = buffer[0];
                                     let buffer = match header {
@@ -680,29 +681,37 @@ impl SessionManager {
     }
 
     #[allow(unused_must_use)]
-    pub async fn set_avatar(&self, avatar: &[u8]) -> Result<(), rusqlite::Error> {
-        Identity::set_identity_avatar(&avatar)?;
+    pub async fn send_avatar(&self, avatar: &[u8]) {
         let avatar_msg = protocol::avatar(&avatar);
         for sender in self.get_all_senders().into_iter() {
             sender.send(SessionCommand::Send {
                 buff: avatar_msg.clone()
             }).await;
         }
+    }
+
+    #[allow(unused_must_use)]
+    pub async fn remove_avatar(&self) -> Result<(), rusqlite::Error> {
+        Identity::remove_identity_avatar()?;
+        let avatar_msg = protocol::remove_avatar();
+        for sender in self.get_all_senders().into_iter() {
+            sender.send(SessionCommand::Send {
+                buff: avatar_msg.clone()
+            }).await;
+        }
         Ok(())
     }
 
     #[allow(unused_must_use)]
-    pub async fn change_name(&self, new_name: String) -> Result<usize, rusqlite::Error> {
+    pub async fn change_name(&self, new_name: String) -> Result<(), rusqlite::Error> {
         let telling_name = protocol::name(&new_name);
-        let result = self.identity.write().unwrap().as_mut().unwrap().change_name(new_name);
-        if result.is_ok() {
+        self.identity.write().unwrap().as_mut().unwrap().change_name(new_name)?;
         for sender in self.get_all_senders().into_iter() {
             sender.send(SessionCommand::Send {
                 buff: telling_name.clone()
             }).await;
         }
-        }
-        result
+        Ok(())
     }
 
     #[allow(unused_must_use)]

src/ui_interface.rs

@@ -112,8 +112,11 @@ mod ui_messages {
     pub fn on_name_told(session_id: &usize, name: &str) -> Message {
         Message::from(format!("name_told {} {}", session_id, name))
     }
-    pub fn on_avatar_set(session_id: &usize) -> Message {
-        simple_event("avatar_set", session_id)
+    pub fn on_avatar_changed(session_id: Option<&usize>) -> Message {
+        match session_id {
+            Some(session_id) => simple_event("avatar_changed", session_id),
+            None => Message::from("avatar_changed self")
+        }
     }
     pub fn set_as_contact(session_id: usize, name: &str, verified: bool, fingerprint: &str) -> Message {
         Message::from(format!("is_contact {} {} {} {}", session_id, verified, fingerprint, name))
@@ -182,8 +185,8 @@ impl UiConnection {
     pub fn on_name_told(&mut self, session_id: &usize, name: &str) {
         self.write_message(ui_messages::on_name_told(session_id, name));
     }
-    pub fn on_avatar_set(&mut self, session_id: &usize) {
-        self.write_message(ui_messages::on_avatar_set(session_id));
+    pub fn on_avatar_changed(&mut self, session_id: Option<&usize>) {
+        self.write_message(ui_messages::on_avatar_changed(session_id));
     }
 
     pub fn inc_files_transfer(&mut self, session_id: &usize, chunk_size: u64) {