From 4e0001666c8105c78c2981fd30cdbf047650dd05 Mon Sep 17 00:00:00 2001
From: mar77i <mar77i@protonmail.ch>
Date: Sun, 20 Oct 2024 23:24:06 +0200
Subject: [PATCH] add logout button

---
 chat/static/chat/chat.css  | 23 +++++++++++++++++++++++
 chat/static/chat/chat.html |  1 +
 chat/static/chat/chat.js   | 30 +++++++++++++++++++++---------
 todo.txt                   | 14 +++++++-------
 4 files changed, 52 insertions(+), 16 deletions(-)

diff --git a/chat/static/chat/chat.css b/chat/static/chat/chat.css
index 6eda701..b4dabaf 100644
--- a/chat/static/chat/chat.css
+++ b/chat/static/chat/chat.css
@@ -2,6 +2,10 @@ html, body, nav, main, .messages, .channels, .users {
     height: 100%;
 }
 
+button {
+    padding: .5em;
+}
+
 body, nav, main {
     display: flex;
 }
@@ -50,10 +54,29 @@ nav > div {
     border: 1px solid;
 }
 
+.messages_header > button:first-of-type {
+    position: fixed;
+    top: .5em;
+    right: 1em;
+}
+
 .messages {
     overflow-y: auto;
 }
 
+h1 {
+    margin: .5em 1em;
+}
+
 ul {
     list-style-position: inside;
 }
+
+li {
+    padding: .25em;
+}
+
+.messages > p {
+    padding: .25em;
+    border-bottom: 1px solid #444;
+}
diff --git a/chat/static/chat/chat.html b/chat/static/chat/chat.html
index 891af21..e068dc4 100644
--- a/chat/static/chat/chat.html
+++ b/chat/static/chat/chat.html
@@ -31,6 +31,7 @@
                 <h1></h1>
                 <ul>
                 </ul>
+                <button>Log Out</button>
             </div>
             <div class="messages">
             </div>
diff --git a/chat/static/chat/chat.js b/chat/static/chat/chat.js
index 267f888..d7f93ac 100644
--- a/chat/static/chat/chat.js
+++ b/chat/static/chat/chat.js
@@ -29,11 +29,16 @@
                     add_msg(null, "xhr_error", msg);
                 },
                 "load": function () {
-                    data = JSON.parse(this.responseText);
+                    var response_data;
+                    try {
+                        response_data = JSON.parse(this.responseText);
+                    } catch {
+                        response_data = this.responseText;
+                    }
                     if (this.status === 401) {
-                        maybe_redirect(data);
+                        maybe_redirect(response_data);
                     } else if (callback) {
-                        callback(data);
+                        callback(response_data);
                     }
                 }
             },
@@ -107,13 +112,13 @@
         var messages_header = _.dgEBCN0("messages_header");
         _.clear_children(messages_header.children[0]);
         _.clear_children(messages_header.children[1]);
-        _.clear_after(messages_header.children[1]);
+        _.clear_after(messages_header.children[2]);
     }
 
     function clear_channel() {
         _.clear_children(_.dgEBCN0("messages"));
         clear_messages_header();
-        _.dgEBCN0("messages_header").style.display = "none";
+        _.dgEBCN0("messages_header").children[0].appendChild(_.dcTN("Chat"));
         _.dgEBCN0("messages_footer").children[0].disabled = true;
     }
 
@@ -187,7 +192,7 @@
             messages_header.children[0].appendChild(
                 this.item_to_tn(this.items_per_id[this.msg_data.recipient_id])
             );
-            messages_header.style.display = "block";
+            // messages_header.style.display = "block";
         };
         this.items_url = "/api/user/";
         this.items_classname = "users";
@@ -290,7 +295,7 @@
             });
             messages_header.appendChild(btn);
             messages_header.children[1].style.display = "none";
-            messages_header.style.display = "block";
+            // messages_header.style.display = "block";
         };
         this.items_url = "/api/channel/";
         this.items_classname = "channels";
@@ -424,12 +429,15 @@
         }
     }
 
+    function logout() {
+        window.location.href = "/logout/";
+    }
+
     window.addEventListener(
         "load",
         function (event) {
-            var messages_footer;
+            var messages_footer = _.dgEBCN0("messages_footer");
             var ws;
-            messages_footer = _.dgEBCN0("messages_footer");
             set_channel.call(window);
             event = event || window.event;
             if (event.target.readyState !== "complete") {
@@ -450,6 +458,10 @@
             );
             messages_footer.children[0].value = "";
             messages_footer.children[1].addEventListener("click", send_msg);
+            _.dgEBCN0("messages_header").children[2].addEventListener(
+                "click",
+                logout
+            );
         }
     );
 }());
diff --git a/todo.txt b/todo.txt
index f24a785..d4549ce 100644
--- a/todo.txt
+++ b/todo.txt
@@ -1,18 +1,18 @@
-[ ] logout button
+[ ] "load more" button
+[ ] reconnect ws button; reload current channel, channel list and user list on reconnect
 [ ] show message timestamps and message edit/delete menus
    - privileged users can edit / delete any message
 [ ] edit existing messages
-[ ] "load more" button
 [ ] new message(s) indicators in left panel
-[ ] update address bar for different views
+[ ] update address bar per channel (fragment for now?)
 [ ] channel management: channel admin
 [ ] write email to user
 
-[ ] ws client infrastructure: auto-reconnect, notify-throttle
-[ ] server-side throttling
+[ ] ws client infrastructure: repeated automatic reconnects, notify-throttle
+[ ] server-side throttling, but that needs to be accounted for on the client
 
 [ ] tests for pg-trigger→notify websocket
    - somehow test each trigger statement individually, that is 4 statements * 5 models
 [ ] ws and chat tests?
-[ ] media uploads: images, gifs, even video files?
-[ ] moderation functions: report messages to MANAGERS, including private ones
+[ ] media uploads and view methods: download, image, video/audio player...
+[ ] moderation: report messages to MANAGERS, including private ones
-- 
2.47.1