@bexis2/bexis2-core-ui 0.4.59 → 0.4.60

package/dist/components/page/Page.svelte

@@ -10,10 +10,11 @@ import Notification from "./Notification.svelte";
 import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floating-ui/dom";
 import { storePopup } from "@skeletonlabs/skeleton";
 import { breadcrumbStore, notificationStore } from "../../stores/pageStores";
-import { errorStore } from "../../stores/apiStores";
+import { errorStore, csrfTokenStore } from "../../stores/apiStores";
 storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 import Docs from "./Docs.svelte";
 import GoToTop from "./GoToTop.svelte";
+import { getAntiForgeryToken } from "./PageCaller";
 export let title = "";
 export let note = "";
 export let links = [];
@@ -22,6 +23,7 @@ export let footer = true;
 export let help = false;
 export let contentLayoutType = pageContentLayoutType.center;
 export let fixLeft = true;
+let aftIsReady = false;
 errorStore.subscribe((error) => {
   console.log("\u{1F680} ~ errorStore.subscribe ~ value:", error.error);
   notificationStore.showNotification({
@@ -33,6 +35,13 @@ onMount(async () => {
   console.log("page");
   breadcrumbStore.clean();
   breadcrumbStore.addItem({ label: title, link: window.location.pathname });
+  const data = await getAntiForgeryToken();
+  csrfTokenStore.set(data.csrfToken);
+});
+csrfTokenStore.subscribe((value) => {
+  if (value.length > 0) {
+    aftIsReady = true;
+  }
 });
 let app;
 function scrollToTop() {
@@ -61,6 +70,8 @@ function scrollToTop() {
 
 	<slot name="description" />
 
+	{#if aftIsReady}
+
 	<div class="flex flex-initial space-x-5">
 		{#if $$slots.left}
 			<div class="p-5 flex-shrink-0 w-96 w-min-96 border-y border-solid border-surface-500">
@@ -89,7 +100,7 @@ function scrollToTop() {
 		{/if}
 	</div>
 
-
+	{/if}
 
 	<GoToTop/>
 	<HelpPopUp active={help} />

package/dist/components/page/PageCaller.d.ts

@@ -1,2 +1,3 @@
 export function getFooter(): Promise<any>;
 export function getHeader(): Promise<any>;
+export function getAntiForgeryToken(): Promise<any>;

package/dist/components/page/PageCaller.js

@@ -17,3 +17,12 @@ export const getHeader = async () => {
 		console.error(error);
 	}
 };
+
+export const getAntiForgeryToken = async () => {
+	try {
+		const response = await Api.get('/tokens/getAntiForgeryToken');
+		return response.data;
+	} catch (error) {
+		console.error(error);
+	}
+};

package/dist/services/Api.js

@@ -1,6 +1,6 @@
 // Api.js
 import axios from 'axios';
-import { host, username, password, errorStore } from '../stores/apiStores';
+import { host, username, password, errorStore, csrfToken } from '../stores/apiStores';
 console.log('setup axios');
 // implement a method to execute all the request from here.
 const apiRequest = (method, url, request) => {
@@ -8,8 +8,10 @@ const apiRequest = (method, url, request) => {
     const axiosAPI = axios.create({
         baseURL: host
     });
+    const requestVerificationToken = csrfToken;
     const headers = {
-        authorization: 'Basic ' + btoa(username + ':' + password)
+        authorization: 'Basic ' + btoa(username + ':' + password),
+        '__RequestVerificationToken': requestVerificationToken
     };
     //using the axios instance to perform the request that received from each http method
     return axiosAPI({
@@ -19,7 +21,7 @@ const apiRequest = (method, url, request) => {
         headers
     })
         .then((res) => {
-        // console.log("res",res);
+        //console.log("res-test",res);
         return Promise.resolve(res);
     })
         .catch((er) => {

package/dist/stores/apiStores.d.ts

@@ -2,5 +2,7 @@ import { errorType } from '../models/Models';
 export declare let host: string;
 export declare let username: string;
 export declare let password: string;
+export declare let csrfToken: string;
+export declare const csrfTokenStore: import("svelte/store").Writable<string>;
 export declare const errorStore: import("svelte/store").Writable<errorType>;
 export declare function setApiConfig(_host: string, _user: string, _pw: string): void;

package/dist/stores/apiStores.js

@@ -3,6 +3,8 @@ import { errorType } from '../models/Models';
 export let host = 'window.location.origin';
 export let username = '';
 export let password = '';
+export let csrfToken = '';
+export const csrfTokenStore = writable('');
 const hostStore = writable(''); //writable(window.location.origin);
 const usernameStore = writable('');
 const passwordStore = writable('');
@@ -10,6 +12,9 @@ export const errorStore = writable(new errorType());
 hostStore.subscribe((value) => {
     host = value;
 });
+csrfTokenStore.subscribe((value) => {
+    csrfToken = value;
+});
 usernameStore.subscribe((value) => {
     username = value;
 });

package/package.json

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

package/src/lib/components/page/Page.svelte

@@ -17,7 +17,7 @@
 	import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
 	import { storePopup } from '@skeletonlabs/skeleton';
 	import { breadcrumbStore,notificationStore } from '$store/pageStores';
-	import { errorStore } from '$store/apiStores';
+	import { errorStore,csrfTokenStore } from '$store/apiStores';
 
 	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 
@@ -27,6 +27,8 @@ import type { helpItemType, helpStoreType } from '$models/Models';
 
 	import Docs from './Docs.svelte';
 	import GoToTop from './GoToTop.svelte';
+	import { getAntiForgeryToken } from './PageCaller';
+
 
 	export let title = '';
 	export let note = '';
@@ -39,6 +41,8 @@ import type { helpItemType, helpStoreType } from '$models/Models';
 	export let contentLayoutType: pageContentLayoutType = pageContentLayoutType.center;
 	export let fixLeft: boolean = true;
 
+	let aftIsReady = false;
+
 	errorStore.subscribe((error:errorType) => {
 			console.log("🚀 ~ errorStore.subscribe ~ value:", error.error)
 			notificationStore.showNotification({
@@ -51,8 +55,18 @@ import type { helpItemType, helpStoreType } from '$models/Models';
 		console.log('page');
 		breadcrumbStore.clean();
 		breadcrumbStore.addItem({ label: title, link: window.location.pathname });
+		const data = await getAntiForgeryToken();
+		csrfTokenStore.set(data.csrfToken); 		
+	});
+
+
+	csrfTokenStore.subscribe(value => {
+		if(value.length>0){
+			aftIsReady = true;
+		}
 	});
 
+
  let app;
 	function scrollToTop() {
 		app.scrollIntoView();
@@ -81,6 +95,8 @@ import type { helpItemType, helpStoreType } from '$models/Models';
 
 	<slot name="description" />
 
+	{#if aftIsReady}
+
 	<div class="flex flex-initial space-x-5">
 		{#if $$slots.left}
 			<div class="p-5 flex-shrink-0 w-96 w-min-96 border-y border-solid border-surface-500">
@@ -109,7 +125,7 @@ import type { helpItemType, helpStoreType } from '$models/Models';
 		{/if}
 	</div>
 
-
+	{/if}
 
 	<GoToTop/>
 	<HelpPopUp active={help} />

package/src/lib/components/page/PageCaller.js

@@ -17,3 +17,12 @@ export const getHeader = async () => {
 		console.error(error);
 	}
 };
+
+export const getAntiForgeryToken = async () => {
+	try {
+		const response = await Api.get('/tokens/getAntiForgeryToken');
+		return response.data;
+	} catch (error) {
+		console.error(error);
+	}
+};

package/src/lib/services/Api.ts

@@ -1,6 +1,6 @@
 // Api.js
 import axios from 'axios';
-import { host, username, password, errorStore } from '../stores/apiStores';
+import { host, username, password, errorStore, csrfToken } from '../stores/apiStores';
 import type { errorType } from '$models/Models';
 
 console.log('setup axios');
@@ -12,10 +12,13 @@ const apiRequest = (method, url, request) => {
 		baseURL: host
 	});
 
+	const requestVerificationToken = csrfToken;
 	const headers = {
-		authorization: 'Basic ' + btoa(username + ':' + password)
+		authorization: 'Basic ' + btoa(username + ':' + password),
+		'__RequestVerificationToken': requestVerificationToken
 	};
 
+
 	//using the axios instance to perform the request that received from each http method
 	return axiosAPI({
 		method,
@@ -24,7 +27,7 @@ const apiRequest = (method, url, request) => {
 		headers
 	})
 		.then((res) => {
-			// console.log("res",res);
+			//console.log("res-test",res);
 			
 			return Promise.resolve(res);
 

package/src/lib/stores/apiStores.ts

@@ -4,17 +4,28 @@ import { errorType } from '$models/Models'
 export let host = 'window.location.origin';
 export let username = '';
 export let password = '';
+export let csrfToken = '';
+
+
+export const csrfTokenStore = writable('');
+
 
 const hostStore = writable(''); //writable(window.location.origin);
 const usernameStore = writable('');
 const passwordStore = writable('');
 
+
 export const errorStore = writable(new errorType());
 
 hostStore.subscribe((value) => {
 	host = value;
 });
 
+csrfTokenStore.subscribe((value) => {
+	csrfToken = value;
+});
+
+
 usernameStore.subscribe((value) => {
 	username = value;
 });

package/src/lib/stores/pageStores.ts

@@ -214,3 +214,5 @@ function createNotificationStore() {
 
 //crate and export the instance of the store
 export const notificationStore = createNotificationStore();
+
+