CONCD-1074 the account link for logged in users (#3184)

* CONCD-1074 the account link for logged in users

* CONCD-1074 aria-label attribute

* CONCD-1074 removing duplicate html element

---------

Co-authored-by: Jennifer Kuenning <72825410+jkueloc@users.noreply.github.com>

Author: rasarkar

concordia/static/js/src/base.js

@@ -233,31 +233,27 @@ $.ajax({
     cache: true,
 }).done(function (data) {
     if (!data.username) {
+        $('.anonymous-only').removeClass('d-none');
+        $('.anonymous-only').addClass('d-lg-flex');
+        $('.authenticated-only').addClass('d-none');
         return;
     }
 
-    $('.anonymous-only').remove();
-    $('.authenticated-only').removeAttr('hidden');
-    if (data.links) {
-        var $accountDropdown = $('#topnav-account-dropdown');
-        $('<a>')
-            .addClass('nav-link fw-bold')
-            .attr({
-                id: 'topnav-account-dropdown-toggle',
-                'data-bs-toggle': 'dropdown',
-                'aria-haspopup': 'true',
-                'aria-expanded': 'false',
-            })
-            .text(data.username + ' ')
-            .prependTo($accountDropdown);
+    $('.anonymous-only').addClass('d-none');
+    $('.anonymous-only').removeClass('d-lg-flex');
+    $('.authenticated-only').removeClass('d-none');
+
+    var $toggle = $('#topnav-account-dropdown-toggle');
+    var $accountDropdownMenu = $('#topnav-account-dropdown-menu');
+    if (data.username) {
+        $toggle.empty().text(data.username + ' ');
         $('<span>')
             .addClass('fa fa-chevron-down text-primary')
-            .appendTo('#topnav-account-dropdown-toggle');
-        var $accountDropdownMenu = $('<div>');
-        $accountDropdownMenu
-            .addClass('dropdown-menu')
-            .attr('aria-labelledby', 'topnav-account-dropdown-toggle')
-            .appendTo($accountDropdown);
+            .appendTo($toggle);
+    }
+
+    if (data.links && $accountDropdownMenu.length > 0) {
+        $accountDropdownMenu.empty();
         for (const link of data.links) {
             appendAccountItem(link, $accountDropdownMenu);
         }

concordia/templates/base.html

@@ -123,13 +123,11 @@ <h1 class="logo-by-the-people m-0 -d-flex -align-items-center">
                                    href="https://historyhub.history.gov/crowd-loc/" target="_blank">Discuss</a>
                             </li>
                             <li id="topnav-account-dropdown" class="nav-item dropdown
-                                                                    nav-dropdown authenticated-only" hidden>
-                            </li>
-                            <li class="nav-item anonymous-only">
-                                <a class="nav-link d-lg-none" href="{% url 'login' %}?next={{ request.path|urlencode }}" rel="nofollow">Login</a>
-                            </li>
-                            <li class="nav-item anonymous-only">
-                                <a class="nav-link d-lg-none" href="{% url 'registration_register' %}" rel="nofollow">Register</a>
+                                                                    nav-dropdown authenticated-only">
+                                <a id="topnav-account-dropdown-toggle" class="nav-link fw-bold" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="{{ user.username }} account menu">
+                                    {{ user.username }}<span class="fa fa-chevron-down text-primary"></span>
+                                </a>
+                                <div id="topnav-account-dropdown-menu" class="dropdown-menu" aria-labelledby="topnav-account-dropdown-toggle"></div>
                             </li>
                         </ul>