feat(web-ui): add logout (#5121)

src_assets/common/assets/web/Navbar.vue

@@ -41,21 +41,38 @@
                 {{ $t('navbar.configuration') }}
               </a>
             </li>
-            <li class="nav-item">
-              <a class="nav-link" href="./password">
-                <Shield :size="18" class="icon"></Shield>
-                {{ $t('navbar.password') }}
-              </a>
-            </li>
             <li class="nav-item">
               <a class="nav-link" href="./troubleshooting">
                 <Info :size="18" class="icon"></Info>
                 {{ $t('navbar.troubleshoot') }}
               </a>
             </li>
+          </ul>
+          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
             <li class="nav-item">
               <ThemeToggle/>
             </li>
+            <li class="nav-item dropdown">
+              <button class="nav-link dropdown-toggle" type="button" id="navbarUserMenu"
+                      data-bs-toggle="dropdown" aria-expanded="false" aria-label="User menu" title="User menu">
+                <CircleUserRound :size="18" class="icon"></CircleUserRound>
+              </button>
+              <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarUserMenu">
+                <li>
+                  <a class="dropdown-item d-flex align-items-center" href="./password">
+                    <Shield :size="18" class="icon"></Shield>
+                    {{ $t('navbar.password') }}
+                  </a>
+                </li>
+                <li><hr class="dropdown-divider"></li>
+                <li>
+                  <button type="button" class="dropdown-item d-flex align-items-center" @click="logout">
+                    <LogOut :size="18" class="icon"></LogOut>
+                    {{ $t('navbar.logout') }}
+                  </button>
+                </li>
+              </ul>
+            </li>
           </ul>
         </div>
       </div>
@@ -65,7 +82,7 @@
 </template>
 
 <script>
-import { Home, Lock, Layers, Star, Settings, Shield, Info } from 'lucide-vue-next'
+import { CircleUserRound, Home, Info, Layers, Lock, LogOut, Settings, Shield, Star } from 'lucide-vue-next'
 import ThemeToggle from './ThemeToggle.vue'
 import Notification from './Notification.vue'
 
@@ -79,14 +96,48 @@ export default {
     Star,
     Settings,
     Shield,
-    Info
+    Info,
+    CircleUserRound,
+    LogOut
   },
   created() {
     console.log("Header mounted!")
   },
   mounted() {
-    let el = document.querySelector("a[href='" + document.location.pathname + "']");
-    if (el) el.classList.add("active")
+    const currentPath = globalThis.location.pathname.replace(/\/$/, '') || '/'
+    const links = document.querySelectorAll('.navbar-sunshine a[href]')
+
+    for (const link of links) {
+      const href = link.getAttribute('href')
+      if (!href || href === '#') {
+        continue
+      }
+
+      const linkPath = new URL(href, globalThis.location.href).pathname.replace(/\/$/, '') || '/'
+      if (linkPath !== currentPath) {
+        continue
+      }
+
+      link.classList.add('active')
+    }
+  },
+  methods: {
+    logout() {
+      const cacheBuster = Date.now().toString()
+      const logoutPageUrl = new URL('/logout', globalThis.location.href)
+      const request = new XMLHttpRequest()
+      const finish = () => {
+        globalThis.location.replace(logoutPageUrl.toString())
+      }
+
+      request.open('GET', '/', true, 'sunshine-logout', cacheBuster)
+      request.setRequestHeader('Cache-Control', 'no-store')
+      request.onload = finish
+      request.onerror = finish
+      request.ontimeout = finish
+      request.timeout = 5000
+      request.send()
+    }
   }
 }
 </script>