[ALS-7506][ALS-7646] Fix logout bug & add message when timed out

src/lib/api.ts

@@ -75,8 +75,10 @@ async function handleResponse(res: Response) {
       return text; //TODO: Change this
     }
   } else if (res.status === 401) {
-    logout();
-    throw error(401, 'Unauthorized');
+    browser &&
+      sessionStorage.setItem('logout-reason', 'Your session has timed out. Please log in.');
+    logout(undefined, true);
+    return;
   }
 
   throw error(res.status as NumericRange<400, 599>, await res.text());

src/lib/components/Navigation.svelte

@@ -132,7 +132,7 @@
             id="user-logout-btn"
             class="btn variant-ringed-primary"
             title="Logout"
-            on:click={() => logout(providerInstance)}>Logout</button
+            on:click={() => logout(providerInstance, false)}>Logout</button
           >
         </div>
       {:else}

src/lib/services/dictionary.ts

@@ -49,16 +49,6 @@ export function searchDictionary(
   );
 }
 
-export async function getAllFacets(): Promise<DictionaryFacetResult[]> {
-  let request: DictionarySearchRequest = { facets: [], search: '' };
-  if (!get(page).url.pathname.includes('/discover')) {
-    request = addConsents(request);
-  }
-  const response: DictionaryFacetResult[] = await api.post(`${dictionaryUrl}facets/`, request);
-  initializeHiddenFacets(response);
-  return response;
-}
-
 function initializeHiddenFacets(response: DictionaryFacetResult[]) {
   // facets that have a count of zero should never be shown in the UI
   // this happens because of consent filters
@@ -87,11 +77,16 @@ export async function updateFacetsFromSearch(
     request = addConsents(request);
   }
 
-  const response: DictionaryFacetResult[] = await api.post(`${dictionaryUrl}facets/`, request);
-  if (facets.length === 0 && search.length === 0) {
-    initializeHiddenFacets(response);
+  try {
+    const response: DictionaryFacetResult[] = await api.post(`${dictionaryUrl}facets/`, request);
+    if (facets.length === 0 && search.length === 0) {
+      initializeHiddenFacets(response);
+    }
+    return response;
+  } catch (error) {
+    console.error('Failed to update facets from search:', error);
+    throw error;
   }
-  return response;
 }
 
 export async function getConceptDetails(

src/lib/stores/User.ts

@@ -8,6 +8,7 @@ import { routes, features, resources } from '$lib/configuration';
 import { goto } from '$app/navigation';
 import type { QueryInterface } from '$lib/models/query/Query';
 import type AuthProvider from '$lib/models/AuthProvider.ts';
+import { page } from '$app/stores';
 
 export const user: Writable<User> = writable(restoreUser());
 
@@ -134,11 +135,15 @@ export async function login(token: string) {
   }
 }
 
-export async function logout(authProvider: AuthProvider | undefined) {
+export async function logout(authProvider?: AuthProvider, redirect = false) {
   if (browser) {
     const token = localStorage.getItem('token');
-    token && api.get('/psama/logout');
-    token && localStorage.removeItem('token');
+    if (token) {
+      api.get('/psama/logout').catch((error) => {
+        console.error('Error logging out: ' + error);
+      });
+      localStorage.removeItem('token');
+    }
   }
 
   // get the auth provider
@@ -161,7 +166,9 @@ export async function logout(authProvider: AuthProvider | undefined) {
       });
   } else {
     user.set({});
-    goto('/login');
+    redirect
+      ? goto(`/login?redirectTo=${encodeURIComponent(get(page).url.pathname)}`)
+      : goto('/login');
   }
 }
 

src/routes/(authentication)/login/+layout.svelte

@@ -4,6 +4,7 @@
   import { onMount } from 'svelte';
   import Footer from '$lib/components/Footer.svelte';
   import Dots from '$lib/components/Dots.svelte';
+  import { Toast } from '@skeletonlabs/skeleton';
 
   onMount(() => {
     if ($user && $user.token) {
@@ -12,6 +13,7 @@
   });
 </script>
 
+<Toast position="t" />
 <div class="w-full full-height">
   <Dots class="top-dots" />
   <slot />

src/routes/(authentication)/login/+page.svelte

@@ -6,11 +6,28 @@
   import type { AuthData } from '$lib/models/AuthProvider';
   import { branding, features } from '$lib/configuration';
   import { fly } from 'svelte/transition';
-
+  import { browser } from '$app/environment';
+  import { getToastStore } from '@skeletonlabs/skeleton';
+  import { onMount } from 'svelte';
+  const toastStore = getToastStore();
   const redirectTo = $page.url.searchParams.get('redirectTo') || '/';
   const siteName = branding?.applicationName;
   const description = branding?.login.description;
   const openPicsureLinkText = branding?.login.openPicsureLinkText;
+  let logoutReason: string | null;
+
+  onMount(() => {
+    if (browser) {
+      logoutReason = sessionStorage.getItem('logout-reason');
+      if (logoutReason) {
+        toastStore.trigger({
+          message: logoutReason!,
+          background: 'variant-filled-error',
+        });
+        sessionStorage.removeItem('logout-reason');
+      }
+    }
+  });
 
   let selected: string;