@rkosafo/cai.components 0.0.25 → 0.0.27

package/dist/forms/FormSelect/FormSelect.svelte

@@ -31,6 +31,7 @@
 			setData({ ...$data, [name]: e.value });
 		} else {
 			const d = e.map((a: any) => a.value);
+			// console.log({ d });
 			setData({ ...$data, [name]: d });
 		}
 		if (onChange) onChange(e);

package/dist/index.d.ts

@@ -43,4 +43,5 @@ export * from './builders/filters/index.js';
 export * from './types/index.js';
 export * from './utils/index.js';
 import 'iconify-icon';
+export * from './keycloak/index.js';
 export { YouTube, BaseEditor };

package/dist/index.js

@@ -44,4 +44,5 @@ export * from './builders/filters/index.js';
 export * from './types/index.js';
 export * from './utils/index.js';
 import 'iconify-icon';
+export * from './keycloak/index.js';
 export { YouTube, BaseEditor };

package/dist/keycloak/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types.js';
+export * from './keycloakService.js';

package/dist/keycloak/index.js

@@ -0,0 +1,2 @@
+export * from './types.js';
+export * from './keycloakService.js';

package/dist/keycloak/keycloakService.d.ts

@@ -0,0 +1,32 @@
+import type { AuthUserInfo, FetchAuthUserInfoFn, KeycloakConfig } from './index.js';
+export declare function createAuthStore(): {
+    isLoading: boolean;
+    isAuthenticated: boolean;
+    accessToken: string;
+    idToken: string;
+    userInfo: AuthUserInfo | null;
+    authError: string;
+    userIsFound: boolean;
+};
+export type AuthStoreType = ReturnType<typeof createAuthStore>;
+export declare class KeycloakService {
+    private keycloak;
+    private initialized;
+    private store;
+    private fetchUserInfo;
+    private onAuthenticated?;
+    private onLogout?;
+    private onError?;
+    constructor(store: AuthStoreType, fetchUserInfo: FetchAuthUserInfoFn, callbacks?: {
+        onAuthenticated?: (userInfo: AuthUserInfo) => void;
+        onLogout?: () => void;
+        onError?: (error: string) => void;
+    });
+    init(config: KeycloakConfig, initOptions?: any): Promise<void>;
+    private setTokenDetails;
+    login(): void;
+    refreshToken(): Promise<void>;
+    logout(): void;
+    getKeycloakInstance(): any;
+    isInitialized(): boolean;
+}

package/dist/keycloak/keycloakService.js

@@ -0,0 +1,142 @@
+import Keycloak from 'keycloak-js';
+export function createAuthStore() {
+    return {
+        isLoading: $state(true),
+        isAuthenticated: $state(false),
+        accessToken: $state(''),
+        idToken: $state(''),
+        userInfo: $state(null),
+        authError: $state(''),
+        userIsFound: $state(false)
+    };
+}
+export class KeycloakService {
+    keycloak = null;
+    initialized = false;
+    store;
+    fetchUserInfo;
+    onAuthenticated;
+    onLogout;
+    onError;
+    constructor(store, fetchUserInfo, callbacks) {
+        this.store = store;
+        this.fetchUserInfo = fetchUserInfo;
+        this.onAuthenticated = callbacks?.onAuthenticated;
+        this.onLogout = callbacks?.onLogout;
+        this.onError = callbacks?.onError;
+    }
+    async init(config, initOptions = { onLoad: 'login-required', checkLoginIframe: false }) {
+        try {
+            this.keycloak = new Keycloak(config);
+            const authenticated = await this.keycloak.init(initOptions);
+            if (authenticated) {
+                await this.setTokenDetails(this.keycloak.idTokenParsed);
+            }
+            else {
+                this.setTokenDetails(null);
+            }
+            this.initialized = true;
+            this.store.isLoading = false;
+        }
+        catch (error) {
+            this.initialized = false;
+            const errorMessage = error instanceof Error ? error.message : 'Initialization failed';
+            this.store.authError = errorMessage;
+            this.onError?.(errorMessage);
+            this.store.isLoading = false;
+        }
+    }
+    async setTokenDetails(details) {
+        if (!details) {
+            this.store.isAuthenticated = false;
+            this.store.accessToken = '';
+            this.store.idToken = '';
+            this.store.userInfo = null;
+            return;
+        }
+        try {
+            this.store.isAuthenticated = true;
+            this.store.accessToken = this.keycloak.token;
+            this.store.idToken = this.keycloak.idToken;
+            this.store.authError = '';
+            // Fetch user info using provided function
+            const meRet = await this.fetchUserInfo(this.keycloak.token);
+            let extras = {};
+            if (meRet.success) {
+                extras = meRet.data;
+                this.store.userIsFound = true;
+            }
+            else {
+                this.store.authError = meRet.message || 'Failed to fetch user info';
+                this.store.userIsFound = meRet.code === 402;
+            }
+            const userInfo = {
+                id: extras.id,
+                email: details.email,
+                firstName: details.given_name,
+                lastName: details.family_name,
+                otherNames: '',
+                name: details.name,
+                username: details.preferred_username,
+                initials: details.name
+                    ?.split(' ')
+                    .filter((x) => x.length > 1)
+                    .map((x) => x[0])
+                    .join('') || '',
+                department: extras?.department || '',
+                departmentId: extras?.departmentId,
+                role: extras?.role,
+                roleId: extras?.roleId,
+                tags: extras?.tags ?? [],
+                permissions: extras?.permissions ?? [],
+                type: extras?.type,
+                activeDashboardId: extras?.activeDashboardId,
+                district: extras?.district,
+                phoneNumber: extras?.phoneNumber || '',
+                profileImage: extras?.profileImage || '',
+                status: extras?.status || ''
+            };
+            this.store.userInfo = userInfo;
+            this.onAuthenticated?.(userInfo);
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Failed to set token details';
+            this.store.authError = errorMessage;
+            this.onError?.(errorMessage);
+        }
+    }
+    login() {
+        if (this.initialized && this.keycloak) {
+            this.keycloak.login();
+        }
+    }
+    async refreshToken() {
+        if (!this.initialized || !this.keycloak)
+            return;
+        try {
+            const refreshed = await this.keycloak.updateToken(30);
+            if (refreshed) {
+                await this.setTokenDetails(this.keycloak.idTokenParsed);
+            }
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Token refresh failed';
+            this.store.authError = errorMessage;
+            this.onError?.(errorMessage);
+        }
+    }
+    logout() {
+        if (!this.initialized || !this.keycloak)
+            return;
+        this.keycloak.logout();
+        this.store.userInfo = null;
+        this.store.isAuthenticated = false;
+        this.onLogout?.();
+    }
+    getKeycloakInstance() {
+        return this.keycloak;
+    }
+    isInitialized() {
+        return this.initialized;
+    }
+}

package/dist/keycloak/types.d.ts

@@ -0,0 +1,50 @@
+export interface AuthUserInfo {
+    id: string;
+    email: string;
+    firstName: string;
+    lastName: string;
+    otherNames: string;
+    name: string;
+    username: string;
+    initials: string;
+    profileImage: string;
+    role: string;
+    roleId: number;
+    permissions: string[];
+    status: string;
+    department?: string;
+    departmentId?: number;
+    tags?: string[];
+    type?: string;
+    activeDashboardId?: number;
+    district?: string;
+    phoneNumber?: string;
+}
+export interface AuthStore {
+    isLoading: boolean;
+    isAuthenticated: boolean;
+    accessToken: string;
+    idToken: string;
+    userInfo: AuthUserInfo | null;
+    authError: string;
+    userIsFound: boolean;
+}
+export interface KeycloakConfig {
+    url: string;
+    realm: string;
+    clientId: string;
+}
+export interface FetchAuthUserInfoFn {
+    (token?: string): Promise<{
+        success: boolean;
+        data?: any;
+        message?: string;
+        code?: number;
+    }>;
+}
+export interface FetchAuthDashboardsFn {
+    (): Promise<{
+        success: boolean;
+        data?: any;
+    }>;
+}

package/dist/keycloak/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/datatable/Datatable.svelte.d.ts

@@ -1,5 +1,5 @@
 export declare function refetchDatatable(params?: TableFilter): void;
 import { type DatatableProps, type TableFilter } from '../../index.js';
-declare const Datatable: import("svelte").Component<DatatableProps<any>, {}, "query" | "read">;
+declare const Datatable: import("svelte").Component<DatatableProps<any>, {}, "read" | "query">;
 type Datatable = ReturnType<typeof Datatable>;
 export default Datatable;

package/dist/ui/drawer/Drawer.svelte

@@ -132,7 +132,6 @@
 			return (hidden = true);
 		}
 	}
-
 	function _onsubmit(ev: SubmitEvent & { currentTarget: HTMLFormElement }) {
 		onsubmit?.(ev as any);
 		if (ev.defaultPrevented) return;
@@ -142,20 +141,13 @@
 		const mainForm = ev.currentTarget;
 		let returnValue = '';
 
-		// Find all nested forms within the main form
 		const nestedForms = mainForm.querySelectorAll('form');
 		const combinedFormData = new FormData();
 
-		// Add data from main form (excluding nested forms)
-		new FormData(mainForm).forEach((value, key) => {
-			combinedFormData.append(key, value);
-		});
-
-		// Add data from all nested forms
+		// Collect all form data
+		new FormData(mainForm).forEach((value, key) => combinedFormData.append(key, value));
 		nestedForms.forEach((nestedForm) => {
-			new FormData(nestedForm).forEach((value, key) => {
-				combinedFormData.append(key, value);
-			});
+			new FormData(nestedForm).forEach((value, key) => combinedFormData.append(key, value));
 		});
 
 		if (ev.submitter instanceof HTMLButtonElement || ev.submitter instanceof HTMLInputElement) {
@@ -166,34 +158,42 @@
 			return (hidden = true);
 		}
 
-		// Convert FormData into a proper object with arrays
+		// Convert FormData → object
 		const data: Record<string, any> = {};
-		combinedFormData.forEach((value, key) => {
+		for (const [key, value] of combinedFormData.entries()) {
 			if (data[key] !== undefined) {
-				// Already exists, convert to array (or push to existing array)
-				if (!Array.isArray(data[key])) {
-					data[key] = [data[key]];
-				}
+				if (!Array.isArray(data[key])) data[key] = [data[key]];
 				data[key].push(value);
 			} else {
 				data[key] = value;
 			}
-		});
+		}
 
-		// Optionally cast certain values
+		// Cast values and normalize arrays
 		Object.keys(data).forEach((key) => {
-			if (data[key] === 'true') data[key] = true;
-			else if (data[key] === 'false') data[key] = false;
-			else if (!isNaN(data[key]) && data[key] !== '' && !Array.isArray(data[key])) {
-				data[key] = Number(data[key]);
+			const val = data[key];
+			if (Array.isArray(val)) {
+				data[key] = val.map((v) => tryCast(v));
+			} else {
+				// Force array for certain fields
+				if (['dashboards', 'permissions', 'reports'].includes(key)) {
+					data[key] = [tryCast(val)];
+				} else {
+					data[key] = tryCast(val);
+				}
 			}
 		});
 
 		if (typeof onaction === 'function' && onaction({ action: returnValue, data }) === false) {
 			return;
 		}
+	}
 
-		// hidden = true;
+	function tryCast(v: any) {
+		if (v === 'true') return true;
+		if (v === 'false') return false;
+		if (!isNaN(Number(v)) && v !== '') return Number(v);
+		return v;
 	}
 
 	createDismissableContext(close);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rkosafo/cai.components",
-  "version": "0.0.25",
+  "version": "0.0.27",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -58,6 +58,7 @@
     "date-fns": "^4.1.0",
     "felte": "^1.3.0",
     "iconify-icon": "^3.0.0",
+    "keycloak-js": "^26.2.0",
     "lodash": "^4.17.21",
     "mdsvex": "^0.12.6",
     "nanoid": "^5.1.5",