@makolabs/ripple 1.6.8 → 1.7.1

package/dist/funcs/user-management.remote.js

@@ -2,7 +2,6 @@ import { query, command } from '$app/server';
 import { getRequestEvent } from '$app/server';
 import { env } from '$env/dynamic/private';
 const CLIENT_ID = env.CLIENT_ID || 'sharkfin';
-const PERMISSION_PREFIX = env.PERMISSION_PREFIX || 'sharkfin:';
 const ORGANIZATION_ID = env.ALLOWED_ORG_ID;
 function handleClerkError(error, defaultMessage) {
     if (error && typeof error === 'object' && 'status' in error && 'details' in error) {
@@ -93,7 +92,7 @@ async function makeAuthRequest(endpoint, options = {}) {
     try {
         data = JSON.parse(text);
     }
-    catch (parseError) {
+    catch {
         // Not JSON, treat as plain text error (e.g., "404 page not found")
         data = { error: text, message: text };
     }
@@ -116,7 +115,7 @@ async function verifyApiKeyToken(apiKey) {
             const verifyResult = await makeAuthRequest('/auth/verify', {
                 method: 'GET',
                 headers: {
-                    'Authorization': `Bearer ${token}`
+                    Authorization: `Bearer ${token}`
                 }
             });
             if (verifyResult.ok && verifyResult.data?.data) {
@@ -129,7 +128,9 @@ async function verifyApiKeyToken(apiKey) {
                 };
             }
         }
-        const errorMsg = result.data?.message || result.data?.error || `API key verification failed with status ${result.status}`;
+        const errorMsg = result.data?.message ||
+            result.data?.error ||
+            `API key verification failed with status ${result.status}`;
         console.warn('[verifyApiKeyToken] Verification failed:', errorMsg);
         return {
             valid: false,
@@ -145,10 +146,7 @@ async function verifyApiKeyToken(apiKey) {
     }
 }
 async function createUserPermissions(userId, permissions, clientId = CLIENT_ID) {
-    const filteredPermissions = PERMISSION_PREFIX
-        ? permissions.filter((scope) => scope.startsWith(PERMISSION_PREFIX))
-        : permissions;
-    if (filteredPermissions.length === 0) {
+    if (permissions.length === 0) {
         return null;
     }
     return await makeAdminRequest('/admin/keys', {
@@ -156,7 +154,7 @@ async function createUserPermissions(userId, permissions, clientId = CLIENT_ID)
         body: JSON.stringify({
             client_id: clientId,
             sub: userId,
-            scopes: filteredPermissions
+            scopes: permissions
         })
     });
 }
@@ -421,9 +419,6 @@ export const updateUserPermissions = command('unchecked', async (options) => {
         // Fetch user's active keys
         const allKeysData = await makeAdminRequest(`/admin/keys?client_id=${CLIENT_ID}&sub=${userId}`);
         const userKeys = (allKeysData?.data?.data || []).filter((key) => key.status === 'active');
-        const filteredPermissions = PERMISSION_PREFIX
-            ? permissions.filter((scope) => scope.startsWith(PERMISSION_PREFIX))
-            : permissions;
         if (userKeys.length === 0) {
             // No active key exists, create new one
             const newKeyResult = await createUserPermissions(userId, permissions);
@@ -450,7 +445,7 @@ export const updateUserPermissions = command('unchecked', async (options) => {
             await makeAdminRequest(`/admin/keys/${keyId}`, {
                 method: 'PUT',
                 body: JSON.stringify({
-                    scopes: filteredPermissions
+                    scopes: permissions
                 })
             });
             // Verify the token has updated scopes
@@ -460,9 +455,9 @@ export const updateUserPermissions = command('unchecked', async (options) => {
                     console.log('[updateUserPermissions] Key verification:', verification);
                     if (verification.valid) {
                         // Check if the scopes match what we expect
-                        const scopesMatch = filteredPermissions.every(perm => verification.scopes?.includes(perm));
+                        const scopesMatch = permissions.every((perm) => verification.scopes?.includes(perm));
                         if (!scopesMatch) {
-                            console.warn('[updateUserPermissions] Scopes mismatch. Expected:', filteredPermissions, 'Got:', verification.scopes);
+                            console.warn('[updateUserPermissions] Scopes mismatch. Expected:', permissions, 'Got:', verification.scopes);
                         }
                     }
                     else {
@@ -491,12 +486,9 @@ export const updateUserPermissions = command('unchecked', async (options) => {
 });
 export const generateApiKey = command('unchecked', async (options) => {
     try {
-        let filteredPermissions = PERMISSION_PREFIX
-            ? options.permissions.filter((scope) => scope.startsWith(PERMISSION_PREFIX))
-            : options.permissions;
-        // Default to readonly permission if none provided (first-time key generation)
-        if (filteredPermissions.length === 0 && PERMISSION_PREFIX) {
-            filteredPermissions = [`${PERMISSION_PREFIX}readonly`];
+        // No default permissions - require explicit permissions to be passed
+        if (options.permissions.length === 0) {
+            throw new Error('At least one permission scope is required');
         }
         // Check if user has existing active key
         const allKeysData = await makeAdminRequest(`/admin/keys?client_id=${CLIENT_ID}&sub=${options.userId}`);
@@ -505,16 +497,17 @@ export const generateApiKey = command('unchecked', async (options) => {
         let wasRotated = false;
         let oldApiKey;
         let currentUser = null;
+        let verificationWarning;
         if (userKeys.length > 0 && options.revokeOld) {
             // Use rotate endpoint (per Mako Auth API spec)
             const keyId = userKeys[0].id;
             // Get the old API key from Clerk's private_metadata
             currentUser = await makeClerkRequest(`/users/${options.userId}`);
-            oldApiKey = currentUser.private_metadata?.mako_api_key;
+            oldApiKey = currentUser?.private_metadata?.mako_api_key;
             const rotateResult = await makeAdminRequest(`/admin/keys/${keyId}/rotate`, {
                 method: 'POST',
                 body: JSON.stringify({
-                    scopes: filteredPermissions
+                    scopes: options.permissions
                 })
             });
             // Rotate endpoint returns key in data.key field
@@ -542,22 +535,25 @@ export const generateApiKey = command('unchecked', async (options) => {
                 console.log('[generateApiKey] New key verification:', newKeyVerification);
                 if (newKeyVerification.valid) {
                     // Check if the scopes match what we expect
-                    const scopesMatch = filteredPermissions.every(perm => newKeyVerification.scopes?.includes(perm));
+                    const scopesMatch = options.permissions.every((perm) => newKeyVerification.scopes?.includes(perm));
                     if (!scopesMatch) {
-                        console.warn('[generateApiKey] Scopes mismatch. Expected:', filteredPermissions, 'Got:', newKeyVerification.scopes);
+                        console.warn('[generateApiKey] Scopes mismatch. Expected:', options.permissions, 'Got:', newKeyVerification.scopes);
+                        verificationWarning = `New API key scopes do not match expected permissions. Expected: ${options.permissions.join(', ')}, Got: ${newKeyVerification.scopes?.join(', ') || 'none'}`;
                     }
                 }
                 else {
                     console.warn('[generateApiKey] New key verification failed:', newKeyVerification.error);
+                    verificationWarning = `New API key failed verification - ${newKeyVerification.error || 'Unknown error'}`;
                 }
             }
             catch (verifyError) {
                 console.warn('[generateApiKey] Could not verify new key:', verifyError);
+                verificationWarning = `Could not verify new API key - ${verifyError instanceof Error ? verifyError.message : 'Unknown error'}`;
             }
         }
         else {
             // Create new key if none exists or revokeOld is false
-            const createData = await createUserPermissions(options.userId, filteredPermissions);
+            const createData = await createUserPermissions(options.userId, options.permissions);
             if (!createData) {
                 throw new Error('Failed to create admin key');
             }
@@ -572,15 +568,17 @@ export const generateApiKey = command('unchecked', async (options) => {
             if (!currentUser) {
                 currentUser = await makeClerkRequest(`/users/${options.userId}`);
             }
-            await makeClerkRequest(`/users/${options.userId}`, {
-                method: 'PATCH',
-                body: JSON.stringify({
-                    private_metadata: {
-                        ...(currentUser.private_metadata || {}),
-                        mako_api_key: newApiKey
-                    }
-                })
-            });
+            if (currentUser) {
+                await makeClerkRequest(`/users/${options.userId}`, {
+                    method: 'PATCH',
+                    body: JSON.stringify({
+                        private_metadata: {
+                            ...(currentUser.private_metadata || {}),
+                            mako_api_key: newApiKey
+                        }
+                    })
+                });
+            }
         }
         catch (clerkError) {
             console.error('[generateApiKey] Failed to update Clerk profile:', clerkError);
@@ -589,9 +587,8 @@ export const generateApiKey = command('unchecked', async (options) => {
         const result = {
             success: true,
             apiKey: newApiKey,
-            message: wasRotated
-                ? 'API key rotated successfully'
-                : 'API key generated successfully'
+            message: wasRotated ? 'API key rotated successfully' : 'API key generated successfully',
+            verificationWarning
         };
         return JSON.parse(JSON.stringify(result));
     }

package/dist/index.d.ts

@@ -1030,6 +1030,7 @@ export interface UserManagementAdapter {
         success: boolean;
         apiKey: string;
         message: string;
+        verificationWarning?: string;
     }>;
     verifyToken?: (options: {
         apiKey: string;

package/dist/user-management/UserManagement.svelte

@@ -4,9 +4,8 @@
 	import UserTable from './UserTable.svelte';
 	import UserModal from './UserModal.svelte';
 	import UserViewModal from './UserViewModal.svelte';
-	import type { User, UserManagementProps, Role, Permission, GetUsersResult } from '../index.js';
+	import type { User, UserManagementProps, Role, Permission } from '../index.js';
 	import { SvelteSet } from 'svelte/reactivity';
-	import type { RemoteQuery } from '@sveltejs/kit';
 
 	let {
 		adapter,
@@ -60,13 +59,7 @@
 
 	// Refresh the query cache to get fresh data
 	async function refreshUsersQuery() {
-		const query = adapter.getUsers({
-			page: currentPage,
-			pageSize,
-			sortBy: sortBy || undefined,
-			sortOrder: sortOrder || 'desc'
-		}) as RemoteQuery<GetUsersResult>;
-		await query.refresh();
+		await loadUsers();
 	}
 
 	// Handlers
@@ -146,10 +139,8 @@
 			} else {
 				await adapter.updateUser({ userId: user.id, userData: user });
 			}
-			// Invalidate the query cache by calling refresh() before loading
+			// Refresh the users list
 			await refreshUsersQuery();
-			// Force refresh by reassigning state to trigger reactivity
-			await loadUsers();
 		} catch (error) {
 			console.error('Error saving user:', error);
 			// Reload on error to restore correct state
@@ -180,11 +171,8 @@
 			// Perform the actual delete operation
 			await adapter.deleteUser(userId);
 
-			// Invalidate the query cache by calling refresh() before loading
-			await refreshUsersQuery();
-
 			// Refresh to ensure we have the latest data
-			await loadUsers();
+			await refreshUsersQuery();
 		} catch (error) {
 			console.error('Error deleting user:', error);
 			// Reload on error to restore correct state
@@ -225,11 +213,8 @@
 				// Perform the actual delete operation
 				await adapter.deleteUsers(userIds);
 
-				// Invalidate the query cache by calling refresh() before loading
-				await refreshUsersQuery();
-
 				// Refresh to ensure we have the latest data
-				await loadUsers();
+				await refreshUsersQuery();
 			} catch (error) {
 				console.error('Error deleting users:', error);
 				// Reload on error to restore correct state

package/dist/user-management/UserModal.svelte

@@ -9,6 +9,7 @@
 		type Role,
 		getUserDisplayName
 	} from '../index.js';
+	import { toast } from 'svelte-sonner';
 
 	// Icons as simple SVGs
 	let {
@@ -31,7 +32,9 @@
 	let showApiKey = $state(false);
 	let regeneratingApiKey = $state(false);
 	let verifyingToken = $state(false);
-	let tokenVerification = $state<{ valid?: boolean; scopes?: string[]; error?: string } | null>(null);
+	let tokenVerification = $state<{ valid?: boolean; scopes?: string[]; error?: string } | null>(
+		null
+	);
 	let initialRole = $state<string>('');
 
 	// Form data
@@ -187,7 +190,7 @@
 			role: roleValue,
 			permissions: role ? [...role.permissions] : []
 		};
-		
+
 		// Clear token verification when permissions change
 		tokenVerification = null;
 	}
@@ -220,6 +223,14 @@
 					}
 				};
 			}
+
+			// Show warning toast if new key verification failed
+			if (result.verificationWarning) {
+				toast.warning('API Key Verification Warning', {
+					description: result.verificationWarning,
+					duration: 8000 // 8 seconds for important warnings
+				});
+			}
 		} catch (error) {
 			console.error('Error regenerating API key:', error);
 			formErrors.apiKey = error instanceof Error ? error.message : 'Failed to regenerate API key';
@@ -233,7 +244,7 @@
 
 		try {
 			verifyingToken = true;
-			formErrors.apiKey = undefined;
+			delete formErrors.apiKey;
 			const result = await adapter.verifyToken({ apiKey });
 			tokenVerification = result;
 
@@ -274,7 +285,7 @@
 	contentclass="max-w-4xl"
 	class={cn(className)}
 >
-	<form bind:this={formElement} onsubmit={handleSubmit} class="flex gap-6">
+	<form bind:this={formElement} onsubmit={handleSubmit} class="flex gap-6" data-testid="user-form">
 		<!-- Left Column: Profile Information -->
 		<div class="min-w-0 flex-1 space-y-4">
 			<div class="border-default-200 border-b pb-3">
@@ -294,6 +305,7 @@
 						? 'border-danger-300'
 						: 'border-default-300'}"
 					placeholder="First name"
+					data-testid="first-name-input"
 					required
 				/>
 				{#if formErrors.first_name}
@@ -314,6 +326,7 @@
 						? 'border-danger-300'
 						: 'border-default-300'}"
 					placeholder="Last name"
+					data-testid="last-name-input"
 					required
 				/>
 				{#if formErrors.last_name}
@@ -334,6 +347,7 @@
 						? 'border-danger-300'
 						: 'border-default-300'}"
 					placeholder="user@example.com"
+					data-testid="email-input"
 					required
 				/>
 				{#if formErrors.email}
@@ -356,6 +370,7 @@
 									disabled={verifyingToken}
 									class="disabled:text-default-400 inline-flex items-center gap-1 text-sm text-green-600 transition-colors hover:text-green-700 hover:underline disabled:cursor-not-allowed"
 									aria-label="Verify token"
+									data-testid="verify-token-button"
 								>
 									<svg
 										class="h-4 w-4 {verifyingToken ? 'animate-spin' : ''}"
@@ -382,6 +397,7 @@
 										formData.permissions.length === 0}
 									class="disabled:text-default-400 inline-flex items-center gap-1 text-sm text-blue-600 transition-colors hover:text-blue-700 hover:underline disabled:cursor-not-allowed"
 									aria-label="Regenerate API key"
+									data-testid="regenerate-api-key-button"
 								>
 									<svg
 										class="h-4 w-4 {regeneratingApiKey ? 'animate-spin' : ''}"
@@ -409,12 +425,14 @@
 							readonly
 							class="border-default-300 bg-default-50 w-full rounded-lg border px-3 py-2 pr-10 font-mono text-sm"
 							placeholder="No API key generated"
+							data-testid="api-key-input"
 						/>
 						<button
 							type="button"
 							onclick={() => (showApiKey = !showApiKey)}
 							class="text-default-500 hover:text-default-700 absolute top-1/2 right-2 -translate-y-1/2"
 							aria-label={showApiKey ? 'Hide API key' : 'Show API key'}
+							data-testid="toggle-api-key-visibility"
 						>
 							{#if showApiKey}
 								<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -449,8 +467,18 @@
 						{#if tokenVerification.valid}
 							<div class="bg-success-50 border-success-200 mt-2 rounded-lg border p-3">
 								<div class="flex items-start gap-2">
-									<svg class="text-success-600 mt-0.5 h-4 w-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+									<svg
+										class="text-success-600 mt-0.5 h-4 w-4 shrink-0"
+										fill="none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+										></path>
 									</svg>
 									<div class="min-w-0 flex-1">
 										<p class="text-success-800 text-xs font-medium">Token verified successfully</p>
@@ -465,8 +493,18 @@
 						{:else}
 							<div class="bg-danger-50 border-danger-200 mt-2 rounded-lg border p-3">
 								<div class="flex items-start gap-2">
-									<svg class="text-danger-600 mt-0.5 h-4 w-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+									<svg
+										class="text-danger-600 mt-0.5 h-4 w-4 shrink-0"
+										fill="none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											stroke-linecap="round"
+											stroke-linejoin="round"
+											stroke-width="2"
+											d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+										></path>
 									</svg>
 									<div class="min-w-0 flex-1">
 										<p class="text-danger-800 text-xs font-medium">Token verification failed</p>
@@ -511,6 +549,7 @@
 										? 'border-blue-500 bg-blue-50 opacity-75'
 										: 'border-blue-500 bg-blue-50'
 									: 'border-default-200 hover:border-default-300 bg-white'}"
+								data-testid="role-{role.value}"
 							>
 								<div class="flex items-center justify-between gap-2">
 									<div class="min-w-0 flex-1">
@@ -565,7 +604,13 @@
 				<div></div>
 			{/if}
 			<div class="flex gap-3">
-				<Button variant="outline" onclick={handleClose} disabled={saving} type="button">
+				<Button
+					variant="outline"
+					onclick={handleClose}
+					disabled={saving}
+					type="button"
+					data-testid="cancel-button"
+				>
 					Cancel
 				</Button>
 				<Button
@@ -574,6 +619,7 @@
 					onclick={() => formElement?.requestSubmit()}
 					disabled={saving}
 					isLoading={saving}
+					data-testid="save-user-button"
 				>
 					{mode === 'create' ? 'Create User' : 'Save Changes'}
 				</Button>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@makolabs/ripple",
-	"version": "1.6.8",
+	"version": "1.7.1",
 	"description": "Simple Svelte 5 powered component library ✨",
 	"license": "SEE LICENSE IN LICENSE",
 	"repository": {
@@ -18,6 +18,10 @@
 		"format": "prettier --write .",
 		"lint": "prettier --check . && eslint .",
 		"test:unit": "vitest",
+		"test:e2e": "playwright test",
+		"test:e2e:ui": "playwright test --ui",
+		"test:e2e:debug": "playwright test --debug",
+		"test:e2e:report": "playwright show-report",
 		"test": "npm run test:unit -- --run",
 		"pub:minor": "git add . && git commit -m \"chore: prepare for publish minor\" && npm version minor && git push --follow-tags && npm publish",
 		"pub:patch": "git add . && git commit -m \"chore: prepare for publish patch\" && npm version patch && git push --follow-tags && npm publish",