onionshare_cli 2.6.1__tar.gz → 2.6.4__tar.gz

{onionshare_cli-2.6.1 → onionshare_cli-2.6.4}/PKG-INFO

@@ -1,11 +1,11 @@
-Metadata-Version: 2.1
+Metadata-Version: 2.4
 Name: onionshare_cli
-Version: 2.6.1
+Version: 2.6.4
 Summary: OnionShare lets you securely and anonymously send and receive files. It works by starting a web server, making it accessible as a Tor onion service, and generating an unguessable web address so others can download files from you, or upload files to you. It does _not_ require setting up a separate server or using a third party file-sharing service.
 License: GPLv3+
 Author: Micah Lee
 Author-email: micah@micahflee.com
-Requires-Python: >=3.8,<3.12
+Requires-Python: >=3.10,<4.0
 Classifier: Environment :: Web Environment
 Classifier: Framework :: Flask
 Classifier: Intended Audience :: End Users/Desktop
@@ -13,32 +13,34 @@ Classifier: License :: OSI Approved :: GNU General Public License v3 or later (G
 Classifier: License :: Other/Proprietary License
 Classifier: Operating System :: OS Independent
 Classifier: Programming Language :: Python :: 3
-Classifier: Programming Language :: Python :: 3.8
-Classifier: Programming Language :: Python :: 3.9
 Classifier: Programming Language :: Python :: 3.10
 Classifier: Programming Language :: Python :: 3.11
+Classifier: Programming Language :: Python :: 3.12
+Classifier: Programming Language :: Python :: 3.13
+Classifier: Programming Language :: Python :: 3.14
 Classifier: Topic :: Communications :: File Sharing
 Classifier: Topic :: Security :: Cryptography
-Requires-Dist: cffi (>=1.15.1,<2.0.0)
+Requires-Dist: cffi (>=2,<3)
 Requires-Dist: click
 Requires-Dist: colorama
 Requires-Dist: cython (>=3.0.2,<4.0.0)
 Requires-Dist: eventlet
-Requires-Dist: flask (==2.3.2)
-Requires-Dist: flask-compress (>=1.13,<2.0)
-Requires-Dist: flask-socketio (==5.3.4)
-Requires-Dist: gevent (>=23.9.1,<24.0.0)
+Requires-Dist: flask (==3.1.3)
+Requires-Dist: flask-compress (>=1.24,<2.0)
+Requires-Dist: flask-socketio (>=5.6,<6.0)
+Requires-Dist: gevent (>=26.5.0,<27.0.0)
 Requires-Dist: gevent-websocket
-Requires-Dist: packaging (>=23.1,<24.0)
+Requires-Dist: packaging (>=24)
+Requires-Dist: pkgconfig (>=1.6.0,<2.0.0)
 Requires-Dist: psutil
-Requires-Dist: pynacl
+Requires-Dist: pynacl (>=1.6.2,<2.0.0)
 Requires-Dist: pysocks
 Requires-Dist: qrcode (>=7.4.2,<8.0.0)
-Requires-Dist: requests[socks]
-Requires-Dist: setuptools
+Requires-Dist: requests[socks] (>=2.32.3)
+Requires-Dist: setuptools (>=80,<81)
 Requires-Dist: stem (==1.8.1)
 Requires-Dist: unidecode
-Requires-Dist: urllib3
-Requires-Dist: waitress (>=2.1.2,<3.0.0)
-Requires-Dist: werkzeug (>=2.3.4)
-Requires-Dist: wheel (>=0.41.2,<0.42.0)
+Requires-Dist: urllib3 (>=2.7,<3.0)
+Requires-Dist: waitress (>=3.0.1,<4.0.0)
+Requires-Dist: werkzeug (==3.1.6)
+Requires-Dist: wheel (>=0.46.2,<0.47.0)

{onionshare_cli-2.6.1 → onionshare_cli-2.6.4}/onionshare_cli/__init__.py

@@ -33,6 +33,7 @@ from .onionshare import OnionShare
 from .mode_settings import ModeSettings
 from qrcode import QRCode
 
+
 def main(cwd=None):
     """
     The main() function implements all of the logic that the command-line version of
@@ -119,6 +120,13 @@ def main(cwd=None):
         default=False,
         help="Share files: Continue sharing after files have been sent (default is to stop sharing)",
     )
+    parser.add_argument(
+        "--log-filenames",
+        action="store_true",
+        dest="log_filenames",
+        default=False,
+        help="Log file download activity to stdout",
+    )
     parser.add_argument(
         "--qr",
         action="store_true",
@@ -204,6 +212,7 @@ def main(cwd=None):
     disable_files = args.disable_files
     disable_csp = bool(args.disable_csp)
     custom_csp = args.custom_csp
+    log_filenames = bool(args.log_filenames)
     verbose = bool(args.verbose)
 
     # Verbose mode?
@@ -242,6 +251,7 @@ def main(cwd=None):
             mode_settings.set("persistent", "mode", mode)
         if mode == "share":
             mode_settings.set("share", "autostop_sharing", autostop_sharing)
+            mode_settings.set("share", "log_filenames", log_filenames)
         if mode == "receive":
             if data_dir:
                 mode_settings.set("receive", "data_dir", data_dir)
@@ -251,7 +261,9 @@ def main(cwd=None):
             mode_settings.set("receive", "disable_files", disable_files)
         if mode == "website":
             if disable_csp and custom_csp:
-                print("You cannot disable the CSP and set a custom one. Either set --disable-csp or --custom-csp but not both.")
+                print(
+                    "You cannot disable the CSP and set a custom one. Either set --disable-csp or --custom-csp but not both."
+                )
                 sys.exit()
             if disable_csp:
                 mode_settings.set("website", "disable_csp", True)
@@ -259,6 +271,7 @@ def main(cwd=None):
             if custom_csp:
                 mode_settings.set("website", "custom_csp", custom_csp)
                 mode_settings.set("website", "disable_csp", False)
+            mode_settings.set("website", "log_filenames", log_filenames)
     else:
         # See what the persistent mode was
         mode = mode_settings.get("persistent", "mode")
@@ -267,19 +280,18 @@ def main(cwd=None):
     if mode == "share" or mode == "website":
         # Unless you passed in a persistent filename, in which case get the filenames from
         # the mode settings
-        if (
-            persistent_filename
-            and not mode_settings.just_created
-            and len(filenames) != 0
-        ):
+        if persistent_filename and not mode_settings.just_created:
+            # The assumption is that if we didn't just create the mode settings,
+            # this persistent json file already has validated the filenames
+            # defined therein.
             filenames = mode_settings.get(mode, "filenames")
-
         else:
-            # Make sure filenames given if not using receiver mode
+            # Make sure filenames given. If it is somehow empty yet we had a persistent
+            # json file, something has gone wrong with that file, just remove it.
             if len(filenames) == 0:
                 if persistent_filename:
                     mode_settings.delete()
-
+                print("No file(s) were provided")
                 parser.print_help()
                 sys.exit()
 
@@ -505,7 +517,11 @@ def main(cwd=None):
                 if not app.autostop_timer_thread.is_alive():
                     if mode == "share":
                         # If there were no attempts to download the share, or all downloads are done, we can stop
-                        if web.share_mode.cur_history_id == 0 or web.done:
+                        if (
+                            not web.share_mode.download_in_progress
+                            or web.share_mode.cur_history_id == 0
+                            or web.done
+                        ):
                             print("Stopped because auto-stop timer ran out")
                             web.stop(app.port)
                             break
@@ -531,6 +547,7 @@ def main(cwd=None):
     finally:
         # Shutdown
         web.cleanup()
+        t.join()
         onion.cleanup()
 
 

{onionshare_cli-2.6.1 → onionshare_cli-2.6.4}/onionshare_cli/censorship.py

@@ -238,21 +238,23 @@ class CensorshipCircumvention(object):
         bridges_ok = False
         self.settings = settings
 
-        # @TODO there might be several bridge types recommended.
-        # Should we attempt to iterate over each type if one of them fails to connect?
-        # But if so, how to stop it starting 3 separate Tor connection threads?
-        # for bridges in request_bridges["settings"]:
-        bridges = bridge_settings["settings"][0]["bridges"]
-        bridge_strings = bridges["bridge_strings"]
-
-        self.settings.set("bridges_type", "custom")
-
-        # Sanity check the bridges provided from the Tor API before saving
-        bridges_checked = self.common.check_bridges_valid(bridge_strings)
-
-        if bridges_checked:
-            self.settings.set("bridges_custom", "\n".join(bridges_checked))
-            bridges_ok = True
+        # We iterate over each group of bridges returned in settings.
+        # The first set of valid bridges are the ones we use.
+        if bridge_settings.get("settings", False):
+            for returned_bridge_settings in bridge_settings["settings"]:
+                if returned_bridge_settings.get("bridges", False):
+                    bridges = returned_bridge_settings["bridges"]
+                    bridge_strings = bridges["bridge_strings"]
+
+                    self.settings.set("bridges_type", "custom")
+
+                    # Sanity check the bridges provided from the Tor API before saving
+                    bridges_checked = self.common.check_bridges_valid(bridge_strings)
+
+                    if bridges_checked:
+                        self.settings.set("bridges_custom", "\n".join(bridges_checked))
+                        bridges_ok = True
+                        break
 
         # If we got any good bridges, save them to settings and return.
         if bridges_ok:

{onionshare_cli-2.6.1 → onionshare_cli-2.6.4}/onionshare_cli/common.py

@@ -19,6 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 """
 import base64
 import hashlib
+import importlib.resources as importlib_resources
 import os
 import platform
 import random
@@ -29,7 +30,6 @@ import threading
 import time
 import shutil
 import re
-from pkg_resources import resource_filename
 
 import colorama
 from colorama import Fore, Back, Style
@@ -313,9 +313,10 @@ class Common:
         """
         Returns the absolute path of a resource
         """
-        path = resource_filename("onionshare_cli", os.path.join("resources", filename))
-        self.log("Common", "get_resource_path", f"filename={filename}, path={path}")
-        return path
+        ref = importlib_resources.files("onionshare_cli.resources") / filename
+        with importlib_resources.as_file(ref) as path:
+            self.log("Common", "get_resource_path", f"filename={filename}, path={str(path)}")
+            return str(path)
 
     def get_tor_paths(self):
         if self.platform == "Linux":
@@ -484,16 +485,16 @@ class Common:
             if bridge != "":
                 # Check the syntax of the custom bridge to make sure it looks legitimate
                 ipv4_pattern = re.compile(
-                    "(obfs4\s+)?(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]):([0-9]+)(\s+)([A-Z0-9]+)(.+)$"
+                    r"(obfs4\s+)?(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5]):([0-9]+)(\s+)([A-Z0-9]+)(.+)$"
                 )
                 ipv6_pattern = re.compile(
-                    "(obfs4\s+)?\[(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))\]:[0-9]+\s+[A-Z0-9]+(.+)$"
+                    r"(obfs4\s+)?\[(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))\]:[0-9]+\s+[A-Z0-9]+(.+)$"
                 )
                 meek_lite_pattern = re.compile(
-                    "(meek_lite)(\s)+([0-9]+\.[0-9]+\.[0-9]+\.[0-9]+:[0-9]+)(\s)+([0-9A-Z]+)(\s)+url=(.+)(\s)+front=(.+)"
+                    r"(meek_lite)(\s)+([0-9]+\.[0-9]+\.[0-9]+\.[0-9]+:[0-9]+)(\s)+([0-9A-Z]+)(\s)+url=(.+)(\s)+front=(.+)"
                 )
                 snowflake_pattern = re.compile(
-                    "(snowflake)(\s)+([0-9]+\.[0-9]+\.[0-9]+\.[0-9]+:[0-9]+)(\s)+([0-9A-Z]+)"
+                    r"(snowflake)(\s)+([0-9]+\.[0-9]+\.[0-9]+\.[0-9]+:[0-9]+)(\s)+([0-9A-Z]+)"
                 )
                 if (
                     ipv4_pattern.match(bridge)
@@ -613,7 +614,7 @@ class AutoStopTimer(threading.Thread):
 
         self.common = common
 
-        self.setDaemon(True)
+        self.daemon = True
         self.time = time
 
     def run(self):

{onionshare_cli-2.6.1 → onionshare_cli-2.6.4}/onionshare_cli/meek.py

@@ -51,8 +51,8 @@ class Meek(object):
         ) = get_tor_paths()
 
         self.meek_proxies = {}
-        self.meek_url = "https://moat.torproject.org.global.prod.fastly.net/"
-        self.meek_front = "cdn.sstatic.net"
+        self.meek_url = "https://1723079976.rsc.cdn77.org/"
+        self.meek_front = "www.phpmyadmin.net"
         self.meek_env = {
             "TOR_PT_MANAGED_TRANSPORT_VER": "1",
             "TOR_PT_CLIENT_TRANSPORTS": "meek",

{onionshare_cli-2.6.1 → onionshare_cli-2.6.4}/onionshare_cli/mode_settings.py

@@ -40,22 +40,36 @@ class ModeSettings:
                 "client_auth_priv_key": None,
                 "client_auth_pub_key": None,
             },
-            "persistent": {"mode": None, "enabled": False},
+            "persistent": {
+                "mode": None,
+                "enabled": False,
+                "autostart_on_launch": False
+            },
             "general": {
                 "title": None,
                 "public": False,
                 "autostart_timer": False,
                 "autostop_timer": False,
                 "service_id": None,
+                "qr": False
+            },
+            "share": {
+                "autostop_sharing": True,
+                "filenames": [],
+                "log_filenames": False,
             },
-            "share": {"autostop_sharing": True, "filenames": []},
             "receive": {
                 "data_dir": self.build_default_receive_data_dir(),
                 "webhook_url": None,
                 "disable_text": False,
                 "disable_files": False,
             },
-            "website": {"disable_csp": False, "custom_csp": None, "filenames": []},
+            "website": {
+                "disable_csp": False,
+                "custom_csp": None,
+                "log_filenames": False,
+                "filenames": []
+            },
             "chat": {},
         }
         self._settings = {}

{onionshare_cli-2.6.1 → onionshare_cli-2.6.4}/onionshare_cli/onion.py

@@ -27,13 +27,14 @@ import base64
 import nacl.public
 import os
 import psutil
+import re
 import shlex
 import subprocess
 import tempfile
 import time
 import traceback
 
-from distutils.version import LooseVersion as Version
+from packaging.version import Version
 
 
 class TorErrorAutomatic(Exception):
@@ -658,7 +659,8 @@ class Onion(object):
         # Does this version of Tor support next-gen ('v3') onions?
         # Note, this is the version of Tor where this bug was fixed:
         # https://trac.torproject.org/projects/tor/ticket/28619
-        self.supports_v3_onions = self.tor_version >= Version("0.3.5.7")
+        cleaned_tor_version = re.sub(r"\s*\(.*\)", "", self.tor_version)
+        self.supports_v3_onions = Version(cleaned_tor_version) >= Version("0.3.5.7")
 
         # Now that we are connected to Tor, if we are using built-in bridges,
         # update them with the latest copy available from the Tor API

{onionshare_cli-2.6.1 → onionshare_cli-2.6.4}/onionshare_cli/resources/static/css/style.css

@@ -1,10 +1,10 @@
 .clearfix:after {
-    content: ".";
-    display: block;
-    clear: both;
-    visibility: hidden;
-    line-height: 0;
-    height: 0;
+  content: ".";
+  display: block;
+  clear: both;
+  visibility: hidden;
+  line-height: 0;
+  height: 0;
 }
 
 body {
@@ -369,6 +369,17 @@ div#uploads .upload progress {
   height: 20px;
 }
 
+div#uploads .upload .upload-warning {
+  color: #c97000;
+  font-size: 0.85em;
+  font-weight: bold;
+  margin-top: 4px;
+}
+
+div#uploads .upload .upload-warning.hidden {
+  display: none;
+}
+
 ul.flashes {
   list-style: none;
   margin: 0;

onionshare_cli-2.6.4/onionshare_cli/resources/static/js/chat.js

@@ -0,0 +1,251 @@
+$(function () {
+  const chatContainerEls = document.getElementsByClassName("chat-container");
+  for (const chatContainerEl of chatContainerEls) {
+    chatContainerEl.classList.remove("no-js");
+  }
+
+  const socket = io(`${location.origin}/chat`, { transports: ["websocket"] });
+
+  // Store current username received from app context
+  /** @type {HTMLInputElement} */
+  const usernameEl = document.getElementById("username");
+  var current_username = usernameEl.value.trim();
+
+  // Triggered on any status change by any user, such as some
+  // user joined, or changed username, or left, etc.
+  socket.on("status", function (data) {
+    addMessageToPanel(data, current_username, "status");
+    console.log(data, current_username);
+  });
+
+  // Triggered when message is received from a user. Even when sent
+  // by self, it get triggered after the server sends back the emit.
+  socket.on("chat_message", function (data) {
+    addMessageToPanel(data, current_username, "chat");
+    console.log(data, current_username);
+  });
+
+  // Triggered when disconnected either by server stop or timeout
+  socket.on("disconnect", function (_reason, _details) {
+    addMessageToPanel(
+      { msg: "The chat server is disconnected." },
+      current_username,
+      "status",
+    );
+  });
+  socket.on("connect_error", function (error) {
+    console.error(error);
+  });
+
+  // Trigger new message on enter or click of send message button.
+  document
+    .getElementById("new-message")
+    .addEventListener("keypress", function (e) {
+      if (e.key === "Enter") {
+        emitMessage(socket);
+      }
+    });
+
+  // Keep buttons disabled unless changed or not empty
+  usernameEl.addEventListener("keyup", function (event) {
+    const username = event.currentTarget.value;
+    if (username !== "" && username !== current_username) {
+      if (event.key === "Enter") {
+        this.blur();
+        current_username = updateUsername(socket) || current_username;
+      }
+    }
+  });
+
+  // Show warning of losing data
+  window.addEventListener("beforeunload", function (e) {
+    e.preventDefault();
+  });
+});
+
+const addMessageToPanel = function (data, current_username, messageType) {
+  const scrollDiff = getScrollDiffBefore();
+  if (messageType === "status") {
+    addStatusMessage(data.msg);
+    if (data.connected_users) {
+      addUserList(data.connected_users, current_username);
+    }
+  } else if (messageType === "chat") {
+    addChatMessage(data.username, data.msg);
+  }
+  scrollBottomMaybe(scrollDiff);
+};
+
+const emitMessage = function (socket) {
+  const newMessageEl = document.getElementById("new-message");
+  const newMessage = newMessageEl.value;
+  newMessageEl.value = "";
+
+  const chatEl = document.getElementById("chat");
+  // $(chatEl).scrollTop(chatEl.scrollHeight);
+  chatEl.scrollTo({ top: chatEl.scrollHeight });
+
+  socket.emit("text", { msg: newMessage });
+};
+
+const updateUsername = function (socket) {
+  const username = document.getElementById("username").value;
+
+  if (
+    !checkUsernameExists(username) &&
+    !checkUsernameTooLong(username) &&
+    !checkUsernameAscii(username)
+  ) {
+    fetch(`${location.origin}/update-session-username`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ username: username }),
+    })
+      .then(function (response) {
+        console.log(response);
+        return response.json();
+      })
+      .then(function (response) {
+        console.log(response);
+        if (response.success && response.username == username) {
+          socket.emit("update_username", { username: username });
+        } else {
+          throw new Error("Failed to update username.");
+        }
+      })
+      .catch(function () {
+        addStatusMessage("Failed to update username.");
+      });
+
+    return username;
+  }
+  return false;
+};
+
+/************************************/
+/********* Util Functions ***********/
+/************************************/
+
+/**
+ * @param username {string}
+ * @returns {boolean}
+ */
+const checkUsernameAscii = function (username) {
+  // ASCII characters have code points in the range U+0000-U+007F.
+  const usernameErrorEl = document.getElementById("username-error");
+  usernameErrorEl.textContent = "";
+
+  if (!/^[\u0000-\u007f]*$/.test(username)) {
+    usernameErrorEl.textContent = "Non-ASCII usernames are not supported.";
+    return true;
+  }
+
+  return false;
+};
+
+/**
+ * @param username {string}
+ * @returns {boolean}
+ */
+const checkUsernameExists = function (username) {
+  const usernameErrorEl = document.getElementById("username-error");
+  usernameErrorEl.textContent = "";
+
+  const userEls = document.querySelectorAll("#user-list li");
+  const userMatches = Array.from(userEls).some(function (el) {
+    return el.textContent === username;
+  });
+
+  if (userMatches) {
+    usernameErrorEl.textContent = "User with that username exists!";
+  }
+
+  return userMatches;
+};
+
+/**
+ * @param username {string}
+ * @returns {boolean}
+ */
+const checkUsernameTooLong = function (username) {
+  const usernameErrorEl = document.getElementById("username-error");
+  usernameErrorEl.textContent = "";
+
+  if (username.length > 128) {
+    usernameErrorEl.textContent = "Please choose a shorter username.";
+    return true;
+  }
+
+  return false;
+};
+
+/**
+ * @returns {number}
+ */
+const getScrollDiffBefore = function () {
+  const chatEl = document.getElementById("chat");
+  return chatEl.scrollTop - (chatEl.scrollHeight - chatEl.offsetHeight);
+};
+
+/**
+ * @param scrollDiff {number}
+ */
+const scrollBottomMaybe = function (scrollDiff) {
+  // Scrolls to bottom if the user is scrolled at bottom
+  // if the user has scrolled up, it won't scroll at bottom.
+  // Note: when a user themselves send a message, it will still
+  // scroll to the bottom even if they had scrolled up before.
+  const chatEl = document.getElementById("chat");
+  if (scrollDiff > 0) {
+    // $(chatEl).scrollTop(chatEl.scrollHeight);
+    chatEl.scrollTo({ top: chatEl.scrollHeight });
+  }
+};
+
+/**
+ * @param message {string}
+ */
+const addStatusMessage = function (message) {
+  const messageEl = document.createElement("p");
+  messageEl.classList.add("status");
+  messageEl.textContent = message;
+
+  document.getElementById("chat").appendChild(messageEl);
+};
+
+/**
+ * @param username {string}
+ * @param message {string}
+ */
+const addChatMessage = function (username, message) {
+  const messageEl = document.createElement("p");
+  messageEl.innerHTML = `<span class="username"></span><span class="message"></span>`;
+
+  messageEl.getElementsByClassName("username")[0].textContent = username;
+  messageEl.getElementsByClassName("message")[0].textContent = message;
+
+  document.getElementById("chat").appendChild(messageEl);
+};
+
+/**
+ * @param connected_users {string[]}
+ * @param current_username {string}
+ */
+const addUserList = function (connected_users, current_username) {
+  connected_users.sort();
+
+  const liList = connected_users
+    .filter(function (username) {
+      return username !== current_username;
+    })
+    .map(function (username) {
+      const li = document.createElement("p");
+      li.textContent = username;
+      return li;
+    });
+
+  const userListEl = document.getElementById("user-list");
+  userListEl.replaceChildren(...liList);
+};