Update username via both socket and ajax

- socket takes care of modifying the username in the forked socket
session and sending a status message to chat window
- ajax request takes care of updating the flask session so that on
refresh or re-opening of the URL in same browser, the username remains
same

onionshare/web/chat_mode.py

@@ -3,6 +3,7 @@ from flask import (
     request,
     render_template,
     make_response,
+    jsonify,
     flash,
     redirect,
     session,
@@ -59,6 +60,24 @@ class ChatModeWeb:
             )
             return self.web.add_security_headers(r)
 
+        @self.web.app.route("/update-session-username", methods=["POST"])
+        def update_session_username():
+            history_id = self.cur_history_id
+            data = request.get_json()
+            session["name"] = data.get("username", session.get("name"))
+            self.web.add_request(
+                request.path, {"id": history_id, "status_code": 200},
+            )
+
+            self.web.add_request(self.web.REQUEST_LOAD, request.path)
+            r = make_response(
+                jsonify(
+                    username=session.get("name"),
+                    success=True,
+                )
+            )
+            return self.web.add_security_headers(r)
+
         @self.web.socketio.on("joined", namespace="/chat")
         def joined(message):
             """Sent by clients when they enter a room.

share/static/css/style.css

@@ -145,10 +145,7 @@ table.file-list td:last-child {
 .chat-users .editable-username {
   display: flex;
   padding: 1rem;
-}
+  flex-direction: column;
-
-.chat-users input#username {
-  width: 50%;
 }
 
 .chat-users #user-list li {

share/static/js/chat.js

@@ -35,9 +35,12 @@ $(function(){
     });
 
     // Keep buttons disabled unless changed or not empty
-    $('#username').on('keyup',function() {
+    $('#username').on('keyup',function(event) {
       if ($('#username').val() !== '' && $('#username').val() !== current_username) {
         $('#update-username').removeAttr('disabled');
+        if (event.keyCode == 13) {
+          current_username = updateUsername(socket);
+        }
       } else {
         $('#update-username').attr('disabled', true);
       }
@@ -45,9 +48,7 @@ $(function(){
 
     // Update username
     $('#update-username').on('click', function() {
-      var username = $('#username').val();
+      current_username = updateUsername(socket);
-      current_username = username;
-      socket.emit('update_username', {username: username});
     });
 
     // Show warning of losing data
@@ -79,6 +80,22 @@ var emitMessage = function(socket) {
   socket.emit('text', {msg: text});
 }
 
+var updateUsername = function(socket) {
+  var username = $('#username').val();
+  socket.emit('update_username', {username: username});
+  $.ajax({
+    method: 'POST',
+    url: `http://${document.domain}:${location.port}/update-session-username`,
+    contentType: 'application/json',
+    dataType: 'json',
+    data: JSON.stringify({'username': username})
+  }).done(function(response) {
+    console.log(response);
+  });
+  $('#update-username').attr('disabled', true);
+  return username;
+}
+
 /************************************/
 /********* Util Functions ***********/
 /************************************/