Merge pull request #25 from razakpm/main

Integrate User Profile picture in UI.
tech-by-design · Jun 12, 2024 · d050fcc · d050fcc
2 parents 5312c6b + f7e0bee
commit d050fcc
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 6 deletions.
diff --git a/hub-prime/src/main/resources/templates/layout/prime.html b/hub-prime/src/main/resources/templates/layout/prime.html
@@ -26,6 +26,12 @@
         }
 
         document.addEventListener('DOMContentLoaded', function () {
+            const avatarUrl = document.querySelector('#avatar_url')?.innerText;
+            const htmlUrl = document.querySelector('#html_url')?.innerText;
+            document.avatarUrl = avatarUrl;
+            document.htmlUrl = htmlUrl;
+            document.querySelector('#principal_image').src = document.avatarUrl;
+            document.querySelector('#principal_html').href = document.htmlUrl;
             if (document.ssrBaggage?.userAgentBaggageExposureEnabled) {
                 document.querySelector('#devl_ssrBaggage_userAgentBaggageExposureEnabledJsonViewer').data = document.ssrBaggage;
                 document.querySelector('#devl_exposure_container').style.display = '';
@@ -91,7 +97,7 @@
                         </div>
                         <div id="nav-prime" class="hidden md:block">
                             <div class="ml-10 flex items-baseline space-x-4">
-                                <a th:href="@{/}"
+                                <a th:href="@{/home}"
                                     class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">Welcome</a>
                                 <a th:href="@{/admin/observe/interactions}"
                                     class="text-gray-300 hover:bg-gray-700 hover:text-white rounded-md px-3 py-2 text-sm font-medium">Interactions</a>
@@ -125,9 +131,31 @@
                                         id="user-menu-button" aria-expanded="false" aria-haspopup="true">
                                         <span class="absolute -inset-1.5"></span>
                                         <span class="sr-only">Open user menu</span>
-                                        <img class="h-8 w-8 rounded-full"
-                                            src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
-                                            alt="">
+                                        <div sec:authentication="principal.attributes['avatar_url']" id="avatar_url"
+                                            class="hidden"></div>
+                                        <div sec:authentication="principal.attributes['html_url']" id="html_url"
+                                            class="hidden"></div>
+                                        <div class="relative group">
+                                            <a href="#" id="principal_html">
+                                                <img class="h-8 w-8 rounded-full" alt="User Profile"
+                                                    id="principal_image" />
+                                            </a>
+                                            <div class="hidden group-hover:block absolute z-10 mt-2 w-48 origin-top-right right-2 rounded-md bg-white py-2 shadow-lg ring-1 ring-black ring-opacity-5"
+                                                role="menu" aria-orientation="vertical"
+                                                aria-labelledby="user-menu-button" tabindex="-1">
+                                                <a href="#" class="block px-2 py-2 text-sm text-gray-700 text-left"
+                                                    role="menuitem" tabindex="-1" id="user-menu-item-0">
+                                                    <div>
+                                                        Name:
+                                                        <span sec:authentication="principal.attributes['name']"></span>
+                                                    </div>
+                                                    <div>
+                                                        ID:
+                                                        <span sec:authentication="principal.attributes['login']"></span>
+                                                    </div>
+                                                </a>
+                                            </div>
+                                        </div>
                                     </button>
                                 </div>
 
@@ -207,7 +235,7 @@ <h1 class="text-lg font-semibold leading-6 text-gray-900">
         <nav id="nav-breadcrumb" class="hidden flex mx-auto max-w-9xl py-2 sm:px-6 lg:px-8" aria-label="Breadcrumb">
             <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
                 <li id="breadcrumb-home" class="inline-flex items-center">
-                    <a href="/"
+                    <a href="/home"
                         class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
                         <svg class="w-3 h-3 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                             fill="currentColor" viewBox="0 0 20 20">

diff --git a/hub-prime/src/main/resources/templates/page/home.html b/hub-prime/src/main/resources/templates/page/home.html
@@ -9,7 +9,13 @@
 
 <body>
     <div layout:fragment="content">
-        <div th:text="'Welcome GitHub User ' + ${req.userPrincipal.name} + ' (TODO: replace name)'">Welcome ${req.userPrincipal.name}</div>
+        <div sec:authorize="isAuthenticated()">
+            <div>Welcome GitHub User <span sec:authentication="principal.attributes['name']"></span></div>
+        </div>
+        <div sec:authorize="isAnonymous()">
+            <div>Welcome Guest</div>
+        </div>
+
         <div>
             <div>Most Recent SFTP <code>egress</code> Interactions (hover to see details)</div>
             <dl class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6">