@makolabs/ripple 3.0.10 → 3.1.0

package/dist/user-management/UserApproveModal.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+	import { Modal, Button, Color, getUserDisplayName } from '../index.js';
+	import RoleCard from './RoleCard.svelte';
+	import ApiKeyField from './ApiKeyField.svelte';
+	import UserIdentityCard from './UserIdentityCard.svelte';
+	import type { UserApproveModalProps } from '../index.js';
+	import { toast } from 'svelte-sonner';
+
+	let {
+		open = $bindable(false),
+		user,
+		roles = [],
+		onapprove,
+		onclose
+	}: UserApproveModalProps = $props();
+
+	let selectedRole = $state<string>('');
+	let approving = $state(false);
+	let issuedKey = $state<string | null>(null);
+
+	$effect(() => {
+		if (!open) {
+			selectedRole = '';
+			approving = false;
+			issuedKey = null;
+		}
+	});
+
+	const canApprove = $derived(!!selectedRole && !approving && !!user);
+
+	async function handleApprove() {
+		if (!user || !selectedRole) return;
+		approving = true;
+		try {
+			const permissions = roles.find((r) => r.value === selectedRole)?.permissions ?? [];
+			const result = await onapprove({
+				userId: user.id,
+				role: selectedRole,
+				permissions: [...permissions]
+			});
+			issuedKey = result.apiKey;
+		} catch (error) {
+			toast.error(error instanceof Error ? error.message : 'Failed to approve user');
+		} finally {
+			approving = false;
+		}
+	}
+
+	function handleDone() {
+		open = false;
+		onclose();
+	}
+</script>
+
+<Modal
+	bind:open
+	title={issuedKey ? 'API key generated' : 'Approve user'}
+	description={issuedKey
+		? 'Copy this key now — for security it will not be shown again.'
+		: user
+			? `Assign a role to ${getUserDisplayName(user)} and generate their first API key.`
+			: undefined}
+	size="md"
+	footerAlign="end"
+	onclose={handleDone}
+>
+	{#if !issuedKey}
+		<div class="flex flex-col gap-4">
+			<UserIdentityCard {user} />
+
+			{#if roles.length > 0}
+				<div>
+					<span class="text-default-700 mb-2 block text-sm font-medium">
+						Role <span class="text-danger-500">*</span>
+					</span>
+					<div class="grid grid-cols-1 gap-2">
+						{#each roles as role, index (`${role.value}-${index}`)}
+							<RoleCard
+								{role}
+								selected={selectedRole === role.value}
+								onclick={() => (selectedRole = role.value)}
+								testId="approve-role-{role.value}"
+							/>
+						{/each}
+					</div>
+				</div>
+			{:else}
+				<p class="text-danger-600 text-xs">
+					No roles configured — pass a `roles` prop to enable approval.
+				</p>
+			{/if}
+		</div>
+	{:else}
+		<ApiKeyField
+			value={issuedKey}
+			label={undefined}
+			copyable
+			toggleable={false}
+			helperText="Store this key in your password manager or pass it to the user via a secure channel."
+			testId="approve-issued-key"
+		/>
+	{/if}
+
+	{#snippet footer()}
+		{#if !issuedKey}
+			<Button variant="outline" onclick={handleDone}>Cancel</Button>
+			<Button
+				color={Color.PRIMARY}
+				onclick={handleApprove}
+				disabled={!canApprove}
+				loading={approving}
+				testId="approve-confirm"
+			>
+				Approve & Generate Key
+			</Button>
+		{:else}
+			<Button color={Color.PRIMARY} onclick={handleDone} testId="approve-done">Done</Button>
+		{/if}
+	{/snippet}
+</Modal>

package/dist/user-management/UserApproveModal.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { UserApproveModalProps } from '../index.js';
+declare const UserApproveModal: import("svelte").Component<UserApproveModalProps, {}, "open">;
+type UserApproveModal = ReturnType<typeof UserApproveModal>;
+export default UserApproveModal;

package/dist/user-management/UserIdentityCard.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import { cn } from '../helper/cls.js';
+	import { getUserDisplayName, getUserInitials } from './user-management.js';
+	import type { ClassValue } from 'tailwind-variants';
+	import type { User } from '../index.js';
+
+	interface Props {
+		user: User | null;
+		/** Optional chip rendered on the right (e.g. current role label). */
+		roleLabel?: string;
+		class?: ClassValue;
+	}
+
+	let { user, roleLabel, class: className }: Props = $props();
+</script>
+
+{#if user}
+	<div
+		class={cn(
+			'bg-default-50 border-default-200 flex items-center gap-3 rounded-lg border p-3',
+			className
+		)}
+	>
+		<div class="h-10 w-10 shrink-0">
+			{#if user.image_url}
+				<img class="h-10 w-10 rounded-full" src={user.image_url} alt="" />
+			{:else}
+				<div class="bg-default-300 flex h-10 w-10 items-center justify-center rounded-full">
+					<span class="text-default-700 text-sm font-medium">
+						{getUserInitials(user)}
+					</span>
+				</div>
+			{/if}
+		</div>
+		<div class="min-w-0 flex-1">
+			<div class="text-default-900 truncate text-sm font-medium">
+				{getUserDisplayName(user)}
+			</div>
+			{#if user.email_addresses?.[0]}
+				<div class="text-default-500 truncate text-xs">
+					{user.email_addresses[0].email_address}
+				</div>
+			{/if}
+		</div>
+		{#if roleLabel}
+			<span
+				class="border-primary-200 bg-primary-50 text-primary-700 shrink-0 rounded-full border px-2 py-0.5 text-xs font-medium"
+			>
+				{roleLabel}
+			</span>
+		{/if}
+	</div>
+{/if}

package/dist/user-management/UserIdentityCard.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { User } from '../index.js';
+interface Props {
+    user: User | null;
+    /** Optional chip rendered on the right (e.g. current role label). */
+    roleLabel?: string;
+    class?: ClassValue;
+}
+declare const UserIdentityCard: import("svelte").Component<Props, {}, "">;
+type UserIdentityCard = ReturnType<typeof UserIdentityCard>;
+export default UserIdentityCard;

package/dist/user-management/UserManagement.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { toast } from 'svelte-sonner';
-	import { PageHeader, Button, cn } from '../index.js';
+	import { PageHeader, Button, TabGroup, cn } from '../index.js';
 	import UserTable from './UserTable.svelte';
 	import UserModal from './UserModal.svelte';
 	import UserViewModal from './UserViewModal.svelte';
+	import UserApproveModal from './UserApproveModal.svelte';
 	import type {
 		User,
 		UserManagementProps,
@@ -42,6 +43,23 @@
 	let selectedUsers = new SvelteSet<string>();
 	let bulkAction = $state<'delete' | ''>('');
 
+	// Pending approval state — gated on the FULL workflow (list + approve + reject).
+	// If an adapter exposes only listing without both mutations, the tab stays hidden
+	// to avoid action buttons that throw or silently no-op.
+	const pendingEnabled = $derived(
+		typeof adapter.getPendingUsers === 'function' &&
+			typeof adapter.approveUser === 'function' &&
+			typeof adapter.rejectUser === 'function'
+	);
+	let activeTab = $state<'active' | 'pending'>('active');
+	let pendingUsers = $state<User[]>([]);
+	let totalPending = $state(0);
+	let pendingPage = $state(1);
+	let pendingPageSize = $state(10);
+	let pendingLoading = $state(false);
+	let showApproveModal = $state(false);
+	let userToApprove = $state<User | null>(null);
+
 	// Derived states
 	const hasSelectedUsers = $derived(selectedUsers.size > 0);
 
@@ -267,9 +285,118 @@
 		}
 	}
 
+	// Pending users: load + refresh + approve + reject
+	async function loadPendingUsers() {
+		if (!adapter.getPendingUsers) return;
+		try {
+			pendingLoading = true;
+			const result = await adapter.getPendingUsers({
+				page: pendingPage,
+				pageSize: pendingPageSize
+			});
+			pendingUsers = result.users.map((u) => ({ ...u }));
+			totalPending = result.totalUsers;
+		} catch (error) {
+			console.error('Error loading pending users:', error);
+			toast.error('Failed to load pending users');
+		} finally {
+			pendingLoading = false;
+		}
+	}
+
+	async function refreshPendingQuery() {
+		if (!adapter.getPendingUsers) return;
+		const fn = adapter.getPendingUsers as typeof adapter.getPendingUsers & {
+			refresh?: () => Promise<unknown>;
+		};
+		if (typeof fn.refresh === 'function') {
+			await fn.refresh();
+		}
+		await loadPendingUsers();
+	}
+
+	function openApproveModal(user: User) {
+		userToApprove = user;
+		showApproveModal = true;
+	}
+
+	async function handleApproveUser({
+		userId,
+		role,
+		permissions
+	}: {
+		userId: string;
+		role: string;
+		permissions: string[];
+	}) {
+		if (!adapter.approveUser) {
+			throw new Error('approveUser is not configured on the adapter');
+		}
+		const result = await adapter.approveUser({ userId, role, permissions });
+		// The user is approved AND we hold their one-time API key. A refresh failure
+		// here must NOT lose that key — surface a soft warning instead of throwing.
+		try {
+			await Promise.all([refreshPendingQuery(), refreshUsersQuery()]);
+		} catch (error) {
+			console.error('Error refreshing users after approval:', error);
+			toast.warning(
+				'User approved, but the lists failed to refresh. Reload the page to sync the latest state.'
+			);
+		}
+		return result;
+	}
+
+	async function handleRejectUser(user: User) {
+		if (!adapter.rejectUser) return;
+		if (
+			!confirm(
+				`Reject ${user.email_addresses?.[0]?.email_address ?? user.id}? This permanently deletes them from your identity provider.`
+			)
+		) {
+			return;
+		}
+		// Optimistic removal — capture both previous list AND total so a paginated
+		// failure rollback restores the true count, not just the visible page length.
+		const previous = pendingUsers;
+		const previousTotal = totalPending;
+		pendingUsers = pendingUsers.filter((u) => u.id !== user.id);
+		totalPending = Math.max(0, totalPending - 1);
+		try {
+			await adapter.rejectUser(user.id);
+			await refreshPendingQuery();
+		} catch (error) {
+			console.error('Error rejecting user:', error);
+			toast.error('Failed to reject user');
+			pendingUsers = previous;
+			totalPending = previousTotal;
+			throw error;
+		}
+	}
+
+	function handlePendingPageChange(page: number) {
+		pendingPage = page;
+		loadPendingUsers();
+	}
+
+	function handlePendingPageSizeChange(size: number) {
+		pendingPageSize = size;
+		pendingPage = 1;
+		loadPendingUsers();
+	}
+
+	function handleTabChange(value: string) {
+		activeTab = value === 'pending' ? 'pending' : 'active';
+		if (activeTab === 'pending') {
+			loadPendingUsers();
+		}
+	}
+
 	// Initialize on mount
 	onMount(async () => {
 		await loadUsers();
+		if (pendingEnabled) {
+			await loadPendingUsers();
+		}
 	});
 </script>
 
@@ -287,14 +414,29 @@
 		layout="horizontal"
 		class="mb-6"
 	>
-		<Button onclick={openCreateModal} color="primary">
-			{@render PlusIcon()}
-			Add User
-		</Button>
+		{#if activeTab === 'active'}
+			<Button onclick={openCreateModal} color="primary">
+				{@render PlusIcon()}
+				Add User
+			</Button>
+		{/if}
 	</PageHeader>
 
+	{#if pendingEnabled}
+		<TabGroup
+			tabs={[
+				{ value: 'active', label: `Active (${totalUsers})` },
+				{ value: 'pending', label: `Pending (${totalPending})` }
+			]}
+			selected={activeTab}
+			onchange={handleTabChange}
+			class="mb-4"
+			testId="user-management-tabs"
+		/>
+	{/if}
+
 	<!-- Bulk Actions Bar -->
-	{#if hasSelectedUsers}
+	{#if activeTab === 'active' && hasSelectedUsers}
 		<div
 			class="mb-4 flex flex-wrap items-center justify-between gap-3 rounded-lg border border-amber-200 bg-amber-50 p-4"
 		>
@@ -319,19 +461,33 @@
 	{/if}
 
 	<!-- Users Table Component -->
-	<UserTable
-		{users}
-		{loading}
-		{currentPage}
-		{pageSize}
-		{totalUsers}
-		onpagechange={handlePageChange}
-		onpagesizechange={handlePageSizeChange}
-		onsort={handleSort}
-		onview={openViewModal}
-		onedit={openEditModal}
-		ondelete={handleDeleteUser}
-	/>
+	{#if activeTab === 'active'}
+		<UserTable
+			{users}
+			{loading}
+			{currentPage}
+			{pageSize}
+			{totalUsers}
+			onpagechange={handlePageChange}
+			onpagesizechange={handlePageSizeChange}
+			onsort={handleSort}
+			onview={openViewModal}
+			onedit={openEditModal}
+			ondelete={handleDeleteUser}
+		/>
+	{:else}
+		<UserTable
+			users={pendingUsers}
+			loading={pendingLoading}
+			currentPage={pendingPage}
+			pageSize={pendingPageSize}
+			totalUsers={totalPending}
+			onpagechange={handlePendingPageChange}
+			onpagesizechange={handlePendingPageSizeChange}
+			onapprove={openApproveModal}
+			onreject={handleRejectUser}
+		/>
+	{/if}
 
 	<!-- User View Modal -->
 	<UserViewModal
@@ -352,4 +508,15 @@
 		onsave={handleUserSave}
 		onclose={handleModalClose}
 	/>
+
+	<!-- Approve Pending User Modal -->
+	{#if pendingEnabled}
+		<UserApproveModal
+			bind:open={showApproveModal}
+			user={userToApprove}
+			{roles}
+			onapprove={handleApproveUser}
+			onclose={() => (userToApprove = null)}
+		/>
+	{/if}
 </div>