[ALS-6170] Add user session logout popout

package.json

@@ -47,7 +47,7 @@
   },
   "type": "module",
   "dependencies": {
-    "@floating-ui/dom": "1.5.3",
+    "@floating-ui/dom": "^1.5.3",
     "@fortawesome/fontawesome-free": "^6.5.1",
     "@vincjo/datatables": "^1.14.5",
     "dotenv": "^16.3.1",

src/lib/components/Navigation.svelte

@@ -1,5 +1,11 @@
 <script lang="ts">
-  import { AppBar, getModalStore, getToastStore } from '@skeletonlabs/skeleton';
+  import {
+    AppBar,
+    getModalStore,
+    getToastStore,
+    popup,
+    type PopupSettings,
+  } from '@skeletonlabs/skeleton';
   import { onMount } from 'svelte';
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
@@ -62,13 +68,13 @@
 
   async function loginUser(resp: string) {
     await login(resp).catch((e) => {
-        console.log(e);
-        toastStore.trigger({
-          message:
-            'An error occured while validating your token. Please try again later. If this problem persists, please contact an administrator.',
-          background: 'variant-filled-error',
-        });
+      console.log(e);
+      toastStore.trigger({
+        message:
+          'An error occured while validating your token. Please try again later. If this problem persists, please contact an administrator.',
+        background: 'variant-filled-error',
       });
+    });
   }
 
   function handleLogin() {
@@ -80,6 +86,12 @@
       response: (resp: string) => resp && loginUser(resp),
     });
   }
+
+  const logoutClick: PopupSettings = {
+    event: 'click',
+    target: 'logoutClick',
+    placement: 'bottom',
+  };
 </script>
 
 <AppBar padding="py-0 pl-2 pr-5" background="bg-surface-50">
@@ -105,24 +117,40 @@
         {/each}
       </ul>
     </nav>
-    <div>
-      <button
-        id="user-session-btn"
-        title={$user.email ? 'Logout user ' + $user.email : 'Login'}
-        on:click={$user.privileges ? handleLogout : handleLogin}
-      >
-        <span
-          class="avatar flex aspect-square justify-center items-center overflow-hidden isolate variant-ringed-surface hover:variant-ghost-secondary w-16 rounded-full text-2xl"
-        >
-          {#if $user.privileges && $user.email}
+    <div id="user-session-avatar">
+      {#if $user.privileges && $user.email}
+        <!-- Logout -->
+        <button id="user-session-popout" use:popup={logoutClick}>
+          <span
+            class="avatar flex aspect-square justify-center items-center overflow-hidden isolate variant-ghost-primary hover:variant-ghost-secondary w-16 rounded-full text-2xl"
+          >
             {$user.email[0].toUpperCase()}
-            <span class="sr-only">Loggout user {$user.email}</span>
-          {:else}
+            <span class="sr-only">Logout user {$user.email}</span>
+          </span>
+        </button>
+        <div
+          class="card p-6 variant-surface border-surface-100-800-token text-center"
+          data-popup="logoutClick"
+        >
+          <p class="pb-6">{$user.email}</p>
+          <button
+            id="user-logout-btn"
+            class="btn variant-ringed-primary"
+            title="Logout"
+            on:click={handleLogout}>Logout</button
+          >
+        </div>
+      {:else}
+        <!-- Login -->
+        <button id="user-login-btn" title="Login" on:click={handleLogin}>
+          <span
+            class="avatar flex aspect-square justify-center items-center overflow-hidden isolate variant-ringed-surface hover:variant-ghost-secondary w-16 rounded-full text-2xl"
+          >
             <i class="fa-solid fa-user fa-lg"></i>
             <span class="sr-only">Login</span>
-          {/if}
-        </span>
-      </button>
+          </span>
+        </button>
+      {/if}
     </div>
   </svelte:fragment>
 </AppBar>

src/routes/+layout.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
-  import { AppShell, initializeStores, Modal, Toast } from '@skeletonlabs/skeleton';
+  import { AppShell, initializeStores, Modal, Toast, storePopup } from '@skeletonlabs/skeleton';
+  import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
   import { onMount } from 'svelte';
   import '@fortawesome/fontawesome-free/css/all.min.css';
   import '../app.postcss';
   import Navigation from '$lib/components/Navigation.svelte';
 
+  storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
+
   initializeStores();
   let modalProps: Record<string, unknown> = {
     buttonPositive: 'variant-filled-primary',

tests/lib/component/navigation/test.ts

@@ -178,22 +178,27 @@ test.describe('navigation', () => {
       await expect(page.locator('#' + routes[2].id)).toBeFocused();
     });
   });
-  test('Logout button should reflect correct user initial', async ({ page }) => {
+  test('Session avatar should reflect correct user initial after login', async ({ page }) => {
     // Given
     await page.goto('/');
 
     // Then
-    await expect(page.locator('#user-session-btn')).toContainText(
-      `${mockUser.email[0].toUpperCase()} Loggout`,
+    await expect(page.locator('#user-session-avatar')).toContainText(
+      `${mockUser.email[0].toUpperCase()} Logout`,
     );
   });
-  test('Login button should not have user initial', async ({ page }) => {
+  test('Session avatar should not have user initial after logout', async ({ page }) => {
     // Given
     await page.goto('/');
-    const logoutButton = page.locator('#user-session-btn');
+
+    // When
+    const popoutButton = page.locator('#user-session-popout');
+    await popoutButton.click();
+
+    const logoutButton = page.locator('#user-logout-btn');
     await logoutButton.click();
 
     // Then
-    await expect(page.locator('#user-session-btn')).toContainText('Login');
+    await expect(page.locator('#user-session-avatar')).toContainText('Login');
   });
 });