From 6172147a7a526e24e777b24b373022c8f69741c6 Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Fri, 14 Feb 2025 16:43:45 -0500
Subject: [PATCH] give the user menu a reasonable style and loading state

---
 base-theme/assets/css/header.scss            |  7 ++
 base-theme/assets/images/user.svg            |  5 ++
 base-theme/assets/js/components/UserMenu.tsx | 70 +++++++++-----------
 base-theme/layouts/partials/header.html      |  8 ++-
 4 files changed, 51 insertions(+), 39 deletions(-)
 create mode 100644 base-theme/assets/images/user.svg

diff --git a/base-theme/assets/css/header.scss b/base-theme/assets/css/header.scss
index d88c11bb3..4af86eaa9 100644
--- a/base-theme/assets/css/header.scss
+++ b/base-theme/assets/css/header.scss
@@ -86,6 +86,13 @@
           }
         }
       }
+
+      div#user-menu-container {
+        width: 40px;
+        img#user-menu-placeholder {
+          padding: 7px 13px;
+        }
+      }
     }
   }
 }
diff --git a/base-theme/assets/images/user.svg b/base-theme/assets/images/user.svg
new file mode 100644
index 000000000..10f4d49e1
--- /dev/null
+++ b/base-theme/assets/images/user.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#DDE1E6">
+  <path
+    d="M12 2C17.52 2 22 6.48 22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12C2 6.48 6.48 2 12 2ZM6.02332 15.4163C7.49083 17.6069 9.69511 19 12.1597 19C14.6243 19 16.8286 17.6069 18.2961 15.4163C16.6885 13.9172 14.5312 13 12.1597 13C9.78821 13 7.63095 13.9172 6.02332 15.4163ZM12 11C13.6569 11 15 9.65685 15 8C15 6.34315 13.6569 5 12 5C10.3431 5 9 6.34315 9 8C9 9.65685 10.3431 11 12 11Z">
+  </path>
+</svg>
\ No newline at end of file
diff --git a/base-theme/assets/js/components/UserMenu.tsx b/base-theme/assets/js/components/UserMenu.tsx
index e278088e4..d4431e703 100644
--- a/base-theme/assets/js/components/UserMenu.tsx
+++ b/base-theme/assets/js/components/UserMenu.tsx
@@ -5,12 +5,13 @@ import { RiAccountCircleFill } from "@remixicon/react"
 import { useUserMe } from "../user"
 
 export default function UserMenu() {
-  const { data: user } = useUserMe()
+  const { data: user, isLoading } = useUserMe()
   const learnBaseUrl = process.env.MIT_LEARN_BASEURL
   const apiBaseUrl = process.env.MIT_LEARN_API_BASEURL
+  const encodedLocation = encodeURI(window.location.href)
   const dashboardUrl = new URL("/dashboard", learnBaseUrl).toString()
-  const logoutUrl = new URL("/logout", apiBaseUrl).toString()
-  const loginUrl = new URL("/login/ol-oidc", apiBaseUrl).toString()
+  const logoutUrl = new URL(`/logout?redirect_uri=${encodedLocation}`, apiBaseUrl).toString()
+  const loginUrl = new URL(`/login/ol-oidc?redirect_uri=${encodedLocation}`, apiBaseUrl).toString()
 
   return (
     <div className="dropdown">
@@ -23,46 +24,41 @@ export default function UserMenu() {
       >
         <RiAccountCircleFill size={24} />
       </button>
-      <ul className="dropdown-menu" aria-labelledby="userMenu">
-        {user?.isAuthenticated ? (
+      <div className="dropdown-menu dropdown-menu-right" aria-labelledby="userMenu">
+        {!isLoading ? (
+          user?.isAuthenticated ? (
           <>
-            <li>
+            <div className="px-3 py-2">
               {user.first_name} {user.last_name}
-            </li>
-            <li>
-              <a
-                className="dropdown-item"
-                href={dashboardUrl}
-                target="_blank"
-                rel="noreferrer"
-              >
-                Dashboard
-              </a>
-            </li>
-            <li>
-              <a
-                className="dropdown-item"
-                href={logoutUrl}
-                target="_blank"
-                rel="noreferrer"
-              >
-                Logout
-              </a>
-            </li>
-          </>
-        ) : (
-          <li>
+            </div>
+            <a
+              className="dropdown-item text-capitalize"
+              href={dashboardUrl}
+              rel="noreferrer"
+            >
+              Dashboard
+            </a>
             <a
-              className="dropdown-item"
-              href={loginUrl}
-              target="_blank"
+              className="dropdown-item text-capitalize"
+              href={logoutUrl}
               rel="noreferrer"
             >
-              Login
+              Logout
             </a>
-          </li>
-        )}
-      </ul>
+          </>
+        ) : (
+          <a
+            className="dropdown-item text-capitalize"
+            href={loginUrl}
+            rel="noreferrer"
+          >
+            Login
+          </a>
+        )
+      ) : (
+        <div className="dropdown-item text-capitalize">Loading...</div>
+      )}
+      </div>
     </div>
   )
 }
diff --git a/base-theme/layouts/partials/header.html b/base-theme/layouts/partials/header.html
index ee1a2286d..cc4675c4a 100644
--- a/base-theme/layouts/partials/header.html
+++ b/base-theme/layouts/partials/header.html
@@ -38,7 +38,9 @@
           {{ partial "link.html" (dict "href" $contactUrl "class" "nav-link" "text" "Contact Us") }}
         </li>
         <li>
-          <div id="user-menu-conatiner"></div>
+          <div id="user-menu-conatiner">
+            <div id="user-menu-placeholder" class="placeholder p-5"></div>
+          </div>
         </li>
       </ul>
     </div>
@@ -64,7 +66,9 @@
       {{ partial "link.html" (dict "href" $aboutUrl "class" "text-white text-decoration-none font-weight-bold pl-5 pr-3 py-2" "text" "about ocw") }}
       {{ partial "link.html" (dict "href" $zenDeskUrl "class" "text-white text-decoration-none font-weight-bold px-3 py-2" "text" "help & faqs" "target" "_blank") }}
       {{ partial "link.html" (dict "href" $contactUrl "class" "text-white text-decoration-none font-weight-bold px-3 py-2" "text" "contact us") }}
-      <div id="user-menu-container"></div>
+      <div id="user-menu-container">
+        <img id="user-menu-placeholder" src="{{- partial "get_asset_webpack_url.html" "images/user.svg" -}}" alt="User Menu Loading..." />
+      </div>
     </div>
   </div>
 </div>