BEXIS2/Core#1518 add a post fn for log off with __RequestVerificationToken

Author: DavidBlaa

README.md

@@ -1,4 +1,20 @@
 # bexis-core-ui
+## 0.4.11
+- Menu
+  - fix log off
+
+## 0.4.10
+- Table:
+  - Fixes issue with sticky Tables not rendering the filters correctly.
+  - Fixes issues related to date picker in Tables with date filters.
+  - Updates default Table page sizes to [5, 10, 20, 50, 100].
+  - Updates the structure of server-side configuration for Tables.
+  - Adds new page size dropdown in Table for to fix contrast issues in the component.
+  - Adds showing/hiding Table columns.
+  
+- Facets:
+  - Adds Facets component.
+
 ## 0.4.8
 - page
   - add notification if api call to backend faild

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.4.8",
+  "version": "0.4.10",
   "private": false,
   "scripts": {
     "dev": "vite dev",

src/lib/components/page/menu/Menu.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { getMenuItems } from './MenuDataCaller';
-	import { menuStore } from '$store/pageStores';
+	import { menuStore } from "../../../stores/pageStores";
 
 	import MenuBar from './MenuBar.svelte';
+	import MenuAccountBar from './MenuAccountBar.svelte';
 	import SettingsBar from './SettingsBar.svelte';
 	import Fa from 'svelte-fa';
 	import { faBars } from '@fortawesome/free-solid-svg-icons';
@@ -49,7 +50,7 @@
 						<!-- </div> -->
 						<!-- <div class="sm:flex items-center sm:gap-5 px-1 text-lg justify-end gap-2"> -->
 						<div class="grid w-full sm:flex gap-2 justify-auto sm:justify-end">
-							<MenuBar menuBar={$menuStore.AccountBar} />
+							<MenuAccountBar menuBar={$menuStore.AccountBar} />
 							<MenuBar menuBar={$menuStore.LaunchBar} />
 							<SettingsBar menuBar={$menuStore.Settings} />
 							<!-- </div> -->

src/lib/components/page/menu/MenuAccountBar.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
+	import { storePopup } from '@skeletonlabs/skeleton';
+	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
+
+	import type { menuItemType } from '../../../models/Page';
+	import Item from './MenuItem.svelte';
+
+	export let menuBar: menuItemType[];
+
+	let comboboxValue: string;
+	
+</script>
+
+{#if menuBar}
+	<div class="h-full place-self-center sm:flex gap-2 w-full sm:w-auto">
+
+		{#each menuBar as menubarItem}
+
+				<Item {menubarItem} {comboboxValue} />
+
+		{/each}
+
+	</div>
+{/if}

src/lib/components/page/menu/MenuBar.svelte

@@ -3,10 +3,10 @@
 	import { storePopup } from '@skeletonlabs/skeleton';
 	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 
-	import type { MenuItem } from './menu';
+	import type { menuItemType } from '../../../models/Page';
 	import Item from './MenuItem.svelte';
 
-	export let menuBar: MenuItem[];
+	export let menuBar: menuItemType[];
 
 	let comboboxValue: string;
 </script>

src/lib/components/page/menu/MenuItem.svelte

@@ -6,9 +6,9 @@
 
 	//types
 	import type { PopupSettings } from '@skeletonlabs/skeleton';
-	import type { menuItemType } from '$models/Page';
+	import type { menuItemType } from '../../../models/Page';
 
-	import { goTo } from '$services/BaseCaller';
+	import { goTo } from '../../../services/BaseCaller';
 
 	export let menubarItem: menuItemType;
 	export let comboboxValue;
@@ -40,7 +40,8 @@
 			>
 			<svelte:fragment slot="content"
 				><MenuSublist {id} items={menubarItem.Items} /></svelte:fragment
-			></AccordionItem
+			>
+			</AccordionItem
 		>
 	</div>
 	<div class="hidden sm:block place-self-center" use:popup={popupCombobox}>

src/lib/components/page/menu/MenuSublist.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ListBox, ListBoxItem } from '@skeletonlabs/skeleton';
-	import type { menuItemType } from '$models/Page';
-	import { goTo } from '$services/BaseCaller';
+	import type { menuItemType } from '../../../models/Page';
+	import { goTo } from '../../../services/BaseCaller';
 
 	export let items: menuItemType[];
 
@@ -22,19 +22,64 @@
 			return true;
 		}
 	}
+
+	function clickFn(item)
+	{
+		if(item.Title =="Logoff")
+		{
+					logOffFn();
+			return;
+		}
+		else{
+				goTo(item.Url)
+		}
+	}
+
+	
+	async function logOffFn() {
+
+		 console.log('logoff');
+				// Prepare the body content for the POST request
+			
+
+			let bodyContent = '__RequestVerificationToken='+ window.antiForgeryToken;
+
+				try {
+									const response = await fetch('/Account/logoff', {
+													method: 'POST',
+													credentials: 'include', // Include cookies for authentication
+													headers: {
+																	'Content-Type': 'application/x-www-form-urlencoded'
+													},
+													body:bodyContent
+									});
+									if (response.ok) {
+													// Redirect to login page after logout
+													window.location.href = '/Account/Login'; 
+									} else {
+													console.error('Logout failed');
+									}
+					} catch (error) {
+									console.error('Error during logout:', error);
+					}
+			}
+
+
 </script>
 
 <ListBox class="sm:bg-white sm:border overflow-y-auto max-h-[500px]">
 	{#each items as item}
 		{#if isNewModule(item.Module)}<hr class="text-surface-800" />{/if}
+
 		<ListBoxItem
 			class="text-md sm:text-sm text-surface-800 py-1 hover:text-secondary-500 bg-transparent hover:bg-surface-200"
 			bind:group={item.Title}
 			name="medium"
 			value={item.Title}
-			on:click={() => goTo(item.Url)}
+			on:click={() => clickFn(item)}
 		>
 			{item.Title}
 		</ListBoxItem>
+
 	{/each}
 </ListBox>

src/routes/+layout.ts

@@ -11,7 +11,7 @@ export async function load({ fetch }) {
 	if (import.meta.env.DEV) {
 		console.log('dev');
 
-		setApiConfig('http://localhost:44345/', 'davidschoene', '123456');
+		setApiConfig('http://localhost:44345/', 'admin', '123456');
 
 	} else if (import.meta.env.PROD) {
 		console.log('PROD');