Dynamically update navbar

diff --git a/main.py b/main.py
index 37baa5703e57c37c2000f17197984efaed5005c6..abd67485e2a92c34f9027e47d43cfb69e14917d4 100644 (file)
--- a/main.py
+++ b/main.py
@@ -936,7 +936,12 @@ def auto_redirect(url):
 @app.context_processor
 def inject_global_vars():
     use_json = request.args.get("request-type", None) == "ajax"
-    return dict(gif_data=get_gif_data(), current_user_playlists=get_current_user_playlists(), use_json=use_json, dumps=json.dumps)
+    return dict(
+        gif_data=get_gif_data(),
+        current_user_playlists=get_current_user_playlists(),
+        use_json=use_json,
+        dumps=json.dumps,
+    )
 
 
 ################################################################################

diff --git a/templates/base.html b/templates/base.html
index 26390c1bc362b0d1699aa008621cc6d4bca1f940..0aa52b86dea08c0e8cd19ff2c8fd34001a07427e 100644 (file)
--- a/templates/base.html
+++ b/templates/base.html
@@ -40,8 +40,18 @@
                     // Trigger event to signal new page has loaded
                     var event = new Event("DOMContentLoaded");
                     document.dispatchEvent(event);
-                });
 
+                    // Refresh navbar in case logged-in status changed
+                    updateNavbar(data.username);
+                });
+            }
+            function updateNavbar(username) {
+                var loggedIn = username ? true : false;
+                document.querySelectorAll(".nav-logged-in").forEach((e) => {e.hidden = !loggedIn;});
+                document.querySelectorAll(".nav-logged-out").forEach((e) => {e.hidden = loggedIn;});
+                if (loggedIn) {
+                    document.getElementById("logged-in-status").innerText = `Signed in as ${username}`;
+                }
             }
         </script>
     </head>
@@ -107,24 +117,23 @@
             <div class="navbar">
                 <a href="/">Home</a>
                 <a href="/site-news">News</a>
-                {% if "username" in session %}
-                    <a href="/users/{{ session["username"] }}">My Profile</a>
-                    <a href="/activity"><span id="activity-indicator" hidden></span>Activity</a>
-                    <a href="/logout">Sign Out</a>
-                {% else %}
-                    <a href="/signup">Create Account</a>
-                    <a href="/login">Sign In</a>
-                {% endif %}
-
-                {% if "username" in session %}
-                    Signed in as {{ session["username"] }}
-                {% endif %}
+
+                <a href="/users/{{ session["username"] }}" class="nav-logged-in" hidden>My Profile</a>
+                <a href="/activity"><span id="activity-indicator" hidden></span>Activity</a>
+                <a href="/logout" class="nav-logged-in" hidden>Sign Out</a>
+
+                <a href="/signup" class="nav-logged-out">Create Account</a>
+                <a href="/login" class="nav-logged-out">Sign In</a>
+
+                <span class="nav-logged-in" id="logged-in-status" hidden></span>
             </div>
         </div>
 
         {% if "username" in session %}
         <!-- Periodically update activity status indicator -->
         <script>
+            updateNavbar("{{ session["username"] }}");
+
             async function checkForNewActivity() {
                 const indicator = document.getElementById("activity-indicator")
                 const response = await fetch("/new-activity");

diff --git a/templates/base.json b/templates/base.json
index 03cdf697bce617e6c119cd5b496f35bd0bd364f4..537819bb7c4bc07f9b4523a5d3ee8f4b993ccabe 100644 (file)
--- a/templates/base.json
+++ b/templates/base.json
@@ -1,4 +1,5 @@
 {
+    "username": "{{ session['username'] | safe }}",
     "title": {{ dumps(self.title()) | safe }},
     "body": {{ dumps(self.body()) | safe }}
 }