@makolabs/ripple 3.0.10 → 3.1.0

package/dist/user-management/UserModal.svelte

@@ -2,16 +2,19 @@
 	import {
 		Modal,
 		Button,
+		Input,
+		Color,
 		cn,
 		type User,
 		type UserModalProps,
 		type FormErrors,
-		type Role,
-		getUserDisplayName
+		type Role
 	} from '../index.js';
+	import RoleCard from './RoleCard.svelte';
+	import ApiKeyField from './ApiKeyField.svelte';
+	import UserIdentityCard from './UserIdentityCard.svelte';
 	import { toast } from 'svelte-sonner';
 
-	// Icons as simple SVGs
 	let {
 		open = $bindable(),
 		user = $bindable(),
@@ -23,14 +26,11 @@
 		class: className
 	}: UserModalProps = $props();
 
-	// Mode determination
 	const mode = $derived(user ? 'edit' : 'create');
 
-	// Local state
 	let formErrors = $state<FormErrors>({});
 	let saving = $state(false);
 	let formElement = $state<HTMLFormElement | null>(null);
-	let showApiKey = $state(false);
 	let regeneratingApiKey = $state(false);
 	let verifyingToken = $state(false);
 	let tokenVerification = $state<{
@@ -42,7 +42,6 @@
 	} | null>(null);
 	let initialRole = $state<string>('');
 
-	// Form data
 	let formData = $state<Partial<User>>({
 		first_name: '',
 		last_name: '',
@@ -52,68 +51,36 @@
 		permissions: []
 	});
 
-	// Helper function to detect role from permissions
 	function detectRoleFromPermissions(userPermissions: string[]): string {
-		if (!roles || roles.length === 0 || !userPermissions || userPermissions.length === 0) {
-			return '';
-		}
-
-		// First, try to find an exact match (all role permissions match user permissions)
+		if (!roles?.length || !userPermissions?.length) return '';
 		for (const role of roles) {
-			if (role.permissions && role.permissions.length > 0) {
-				const rolePermissions = role.permissions;
-				// Check if all role permissions are present in user permissions
-				const allPermissionsMatch = rolePermissions.every((perm: string) =>
-					userPermissions.includes(perm)
-				);
-				// Also check if the counts match (to avoid partial matches)
-				if (allPermissionsMatch && rolePermissions.length === userPermissions.length) {
-					return role.value;
-				}
+			if (
+				role.permissions?.length === userPermissions.length &&
+				role.permissions.every((p) => userPermissions.includes(p))
+			) {
+				return role.value;
 			}
 		}
-
-		// If no exact match, try to find a role where all of its permissions are in user's permissions
-		// This handles cases where user has additional permissions beyond the role
 		for (const role of roles) {
-			if (role.permissions && role.permissions.length > 0) {
-				const allRolePermissionsInUser = role.permissions.every((perm: string) =>
-					userPermissions.includes(perm)
-				);
-				if (allRolePermissionsInUser) {
-					return role.value;
-				}
+			if (role.permissions?.length && role.permissions.every((p) => userPermissions.includes(p))) {
+				return role.value;
 			}
 		}
-
-		// Last resort: find any role where at least one permission matches
-		// (for cases where permissions might be partially matching)
 		for (const role of roles) {
-			if (role.permissions && role.permissions.length > 0) {
-				const hasMatchingPermission = role.permissions.some((perm: string) =>
-					userPermissions.includes(perm)
-				);
-				if (hasMatchingPermission) {
-					return role.value;
-				}
+			if (role.permissions?.some((p) => userPermissions.includes(p))) {
+				return role.value;
 			}
 		}
-
 		return '';
 	}
 
-	// Initialize form data when user changes
 	$effect(() => {
 		if (open && user) {
-			// Detect role from permissions if role is not already set
 			let detectedRole = user.role || '';
-			if (!detectedRole && user.permissions && user.permissions.length > 0) {
+			if (!detectedRole && user.permissions?.length) {
 				detectedRole = detectRoleFromPermissions(user.permissions);
 			}
-
-			// Store the initial role from server data
 			initialRole = detectedRole;
-
 			formData = {
 				first_name: user.first_name || '',
 				last_name: user.last_name || '',
@@ -123,7 +90,6 @@
 				permissions: user.permissions || []
 			};
 		} else if (open && !user) {
-			// Reset for create mode
 			initialRole = '';
 			formData = {
 				first_name: '',
@@ -149,20 +115,15 @@
 		event.preventDefault();
 		formErrors = {};
 
-		// Basic validation
-		if (!formData.first_name?.trim()) {
-			formErrors.first_name = 'First name is required';
-		}
-		if (!formData.last_name?.trim()) {
-			formErrors.last_name = 'Last name is required';
-		}
+		if (!formData.first_name?.trim()) formErrors.first_name = 'First name is required';
+		if (!formData.last_name?.trim()) formErrors.last_name = 'Last name is required';
 		if (!formData.email_addresses?.[0]?.email_address?.trim()) {
 			formErrors.email = 'Email address is required';
 		}
-
-		if (Object.keys(formErrors).length > 0) {
-			return;
+		if (mode === 'create' && roles.length > 0 && !formData.role?.trim()) {
+			formErrors.role = 'Role is required';
 		}
+		if (Object.keys(formErrors).length > 0) return;
 
 		try {
 			saving = true;
@@ -183,45 +144,33 @@
 			handleClose();
 		} catch (error) {
 			console.error('[UserModal] Error saving user:', error);
-			formErrors.submit = error instanceof Error ? error.message : 'Failed to save user';
+			const message = error instanceof Error ? error.message : 'Failed to save user';
+			toast.error(message);
+			formErrors.submit = message;
 		} finally {
 			saving = false;
 		}
 	}
 
-	function handleRoleChange(roleValue: string) {
-		const role = roles?.find((r: Role) => r.value === roleValue);
-
-		// Reassign entire formData object to ensure Svelte 5 reactivity
+	function handleRoleChange(role: Role) {
 		formData = {
 			...formData,
-			role: roleValue,
-			permissions: role ? [...role.permissions] : []
+			role: role.value,
+			permissions: [...role.permissions]
 		};
-
-		// Clear token verification when permissions change
 		tokenVerification = null;
 	}
 
 	async function handleRegenerateApiKey() {
-		if (
-			!user?.id ||
-			!adapter?.generateApiKey ||
-			!formData.permissions ||
-			formData.permissions.length === 0
-		)
-			return;
-
+		if (!user?.id || !adapter?.generateApiKey || !formData.permissions?.length) return;
 		try {
 			regeneratingApiKey = true;
-			tokenVerification = null; // Clear previous verification
+			tokenVerification = null;
 			const result = await adapter.generateApiKey({
 				userId: user.id,
 				permissions: formData.permissions,
 				revokeOld: true
 			});
-
-			// Update user's private_metadata with new API key
 			if (user && result.apiKey) {
 				user = {
 					...user,
@@ -231,12 +180,10 @@
 					}
 				};
 			}
-
-			// 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
+					duration: 8000
 				});
 			}
 		} catch (error) {
@@ -249,13 +196,11 @@
 
 	async function handleVerifyToken() {
 		if (!adapter?.verifyToken || !apiKey) return;
-
 		try {
 			verifyingToken = true;
 			delete formErrors.apiKey;
 			const result = await adapter.verifyToken({ apiKey });
 			tokenVerification = result;
-
 			if (!result.valid) {
 				formErrors.apiKey = result.error || 'Token verification failed';
 			}
@@ -268,12 +213,8 @@
 		}
 	}
 
-	function getModalTitle() {
-		if (mode === 'create') return 'Create New User';
-		return `Edit ${getUserDisplayName(user ?? null)}`;
-	}
+	const modalTitle = $derived(mode === 'create' ? 'Create user' : 'Edit user');
 
-	// Get API key from user's private_metadata
 	const apiKey = $derived(
 		user?.private_metadata &&
 			typeof user.private_metadata === 'object' &&
@@ -282,382 +223,206 @@
 			: ''
 	);
 
-	// Mask API key for display
-	const maskedApiKey = $derived(apiKey ? '•'.repeat(Math.min(apiKey.length, 40)) : '');
+	const canRegenerate = $derived(!!adapter?.generateApiKey && !!formData.permissions?.length);
+
+	const currentRoleLabel = $derived(
+		mode === 'edit' && initialRole
+			? (roles.find((r) => r.value === initialRole)?.label ?? initialRole)
+			: undefined
+	);
 </script>
 
+{#snippet sectionLabel(text: string, required: boolean = false)}
+	<span class="text-default-700 mb-2 block text-sm font-medium">
+		{text}
+		{#if required}<span class="text-danger-500">*</span>{/if}
+	</span>
+{/snippet}
+
 <Modal
 	{open}
 	onclose={handleClose}
-	title={getModalTitle()}
-	footerAlign="between"
-	contentClass="max-w-4xl"
+	title={modalTitle}
+	footerAlign="end"
+	contentClass="max-w-3xl"
 	class={cn(className)}
 >
-	<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">
-				<h3 class="text-default-900 text-lg font-semibold">Profile Information</h3>
-			</div>
+	<form
+		bind:this={formElement}
+		onsubmit={handleSubmit}
+		class="flex flex-col gap-6"
+		data-testid="user-form"
+	>
+		{#if mode === 'edit' && user}
+			<UserIdentityCard {user} roleLabel={currentRoleLabel} />
+		{/if}
 
-			<!-- First Name -->
-			<div>
-				<label for="first-name" class="text-default-700 mb-1 block text-sm font-medium">
-					First Name <span class="text-danger-500">*</span>
-				</label>
-				<input
-					id="first-name"
-					type="text"
-					bind:value={formData.first_name}
-					class="w-full rounded-lg border px-3 py-2 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 {formErrors.first_name
-						? 'border-danger-300'
-						: 'border-default-300'}"
+		<!-- Profile -->
+		<div class="space-y-4">
+			<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+				<Input
+					name="first_name"
+					label="First name"
 					placeholder="First name"
-					data-testid="first-name-input"
+					bind:value={formData.first_name}
+					errors={formErrors.first_name ? [formErrors.first_name] : []}
 					required
+					testId="first-name-input"
 				/>
-				{#if formErrors.first_name}
-					<p class="text-danger-500 mt-1 text-xs">{formErrors.first_name}</p>
-				{/if}
-			</div>
-
-			<!-- Last Name -->
-			<div>
-				<label for="last-name" class="text-default-700 mb-1 block text-sm font-medium">
-					Last Name <span class="text-danger-500">*</span>
-				</label>
-				<input
-					id="last-name"
-					type="text"
-					bind:value={formData.last_name}
-					class="w-full rounded-lg border px-3 py-2 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 {formErrors.last_name
-						? 'border-danger-300'
-						: 'border-default-300'}"
+				<Input
+					name="last_name"
+					label="Last name"
 					placeholder="Last name"
-					data-testid="last-name-input"
-					required
-				/>
-				{#if formErrors.last_name}
-					<p class="text-danger-500 mt-1 text-xs">{formErrors.last_name}</p>
-				{/if}
-			</div>
-
-			<!-- Email Address -->
-			<div>
-				<label for="email" class="text-default-700 mb-1 block text-sm font-medium">
-					Email Address <span class="text-danger-500">*</span>
-				</label>
-				<input
-					id="email"
-					type="email"
-					bind:value={formData.email_addresses![0].email_address}
-					class="w-full rounded-lg border px-3 py-2 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 {formErrors.email
-						? 'border-danger-300'
-						: 'border-default-300'}"
-					placeholder="user@example.com"
-					data-testid="email-input"
+					bind:value={formData.last_name}
+					errors={formErrors.last_name ? [formErrors.last_name] : []}
 					required
+					testId="last-name-input"
 				/>
-				{#if formErrors.email}
-					<p class="text-danger-500 mt-1 text-xs">{formErrors.email}</p>
-				{/if}
 			</div>
 
-			<!-- Mako API Key (Edit mode only) -->
-			{#if mode === 'edit' && (apiKey || adapter?.generateApiKey)}
-				<div>
-					<div class="mb-2 flex items-center justify-between">
-						<label for="api-key" class="text-default-700 block text-sm font-medium">
-							Mako API Key
-						</label>
-						<div class="flex items-center gap-3">
-							{#if adapter?.verifyToken && apiKey}
-								<button
-									type="button"
-									onclick={handleVerifyToken}
-									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' : ''}"
-										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>
-									Verify
-								</button>
-							{/if}
-							{#if adapter?.generateApiKey}
-								<button
-									type="button"
-									onclick={handleRegenerateApiKey}
-									disabled={regeneratingApiKey ||
-										!formData.permissions ||
-										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' : ''}"
-										fill="none"
-										stroke="currentColor"
-										viewBox="0 0 24 24"
-									>
-										<path
-											stroke-linecap="round"
-											stroke-linejoin="round"
-											stroke-width="2"
-											d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
-										></path>
-									</svg>
-									Regenerate
-								</button>
-							{/if}
-						</div>
-					</div>
-					<div class="relative flex-1">
-						<input
-							id="api-key"
-							type={showApiKey ? 'text' : 'password'}
-							value={showApiKey ? apiKey : maskedApiKey}
-							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">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.29 3.29m0 0A9.966 9.966 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"
-									></path>
-								</svg>
-							{:else}
-								<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
-									></path>
-									<path
-										stroke-linecap="round"
-										stroke-linejoin="round"
-										stroke-width="2"
-										d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-									></path>
-								</svg>
-							{/if}
-						</button>
-					</div>
-					{#if formErrors.apiKey}
-						<p class="text-danger-500 mt-1 text-xs">{formErrors.apiKey}</p>
-					{:else if tokenVerification}
-						{#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>
-									<div class="min-w-0 flex-1">
-										<p class="text-success-800 text-xs font-medium">Token verified successfully</p>
-										{#if tokenVerification.sub}
-											<p class="text-success-700 mt-1 text-xs">
-												Sub: {tokenVerification.sub}
-											</p>
-										{/if}
-										{#if tokenVerification.client_id}
-											<p class="text-success-700 mt-1 text-xs">
-												Client ID: {tokenVerification.client_id}
-											</p>
-										{/if}
-										{#if tokenVerification.scopes && tokenVerification.scopes.length > 0}
-											<p class="text-success-700 mt-1 text-xs">
-												Scopes: {tokenVerification.scopes.join(', ')}
-											</p>
-										{/if}
-									</div>
-								</div>
-							</div>
-						{: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>
-									<div class="min-w-0 flex-1">
-										<p class="text-danger-800 text-xs font-medium">Token verification failed</p>
-										{#if tokenVerification.error}
-											<p class="text-danger-700 mt-1 text-xs">{tokenVerification.error}</p>
-										{/if}
-									</div>
-								</div>
-							</div>
-						{/if}
-					{:else}
-						<p class="text-default-500 mt-1 text-xs">
-							API keys are system-managed and cannot be manually edited
-						</p>
-					{/if}
-				</div>
-			{/if}
+			<Input
+				name="email"
+				type="email"
+				label="Email address"
+				placeholder="user@example.com"
+				bind:value={formData.email_addresses![0].email_address}
+				errors={formErrors.email ? [formErrors.email] : []}
+				required
+				testId="email-input"
+			/>
 		</div>
 
-		<!-- Right Column: Permissions & Role -->
-		<div class="min-w-0 flex-1 space-y-4">
-			<div class="border-default-200 border-b pb-3">
-				<h3 class="text-default-900 text-lg font-semibold">Role & Permissions</h3>
-			</div>
-
-			<!-- Role Selection -->
-			{#if roles && roles.length > 0}
-				<div>
-					<span class="text-default-700 mb-3 block text-sm font-medium">
-						Select User Role {#if mode === 'create'}<span class="text-danger-500">*</span>{/if}
-					</span>
-					<div class="grid grid-cols-1 gap-2">
-						{#each roles as role, index (`${role.value}-${index}`)}
-							{@const isSelected = formData.role === role.value}
-							{@const isAdministrator = role.value.toLowerCase() === 'admin'}
-							{@const isPreselected = initialRole === role.value && isSelected}
-							<button
-								type="button"
-								onclick={() => handleRoleChange(role.value)}
-								class="cursor-pointer rounded-lg border-2 p-2 text-left transition-all {isSelected
-									? isAdministrator && isPreselected
-										? '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">
-										<h4 class="text-default-900 text-sm font-semibold">{role.label}</h4>
-										{#if role.description}
-											<p class="text-default-600 mt-1 line-clamp-2 text-xs">{role.description}</p>
-										{/if}
-									</div>
-									<div
-										class="flex h-5 w-5 shrink-0 items-center justify-center rounded-full border-2 {isSelected
-											? 'border-blue-500 bg-blue-500'
-											: 'border-default-300 bg-white'}"
-									>
-										{#if isSelected}
-											<div class="h-2 w-2 rounded-full bg-white"></div>
-										{/if}
-									</div>
-								</div>
-							</button>
-						{/each}
-					</div>
+		<!-- Role + permissions -->
+		{#if roles && roles.length > 0}
+			<div class="space-y-3">
+				{@render sectionLabel('Role', mode === 'create')}
+				<div class="grid grid-cols-1 gap-2">
+					{#each roles as role, index (`${role.value}-${index}`)}
+						{@const isSelected = formData.role === role.value}
+						{@const isAdmin = role.value.toLowerCase() === 'admin'}
+						{@const isPreselected = initialRole === role.value && isSelected}
+						<RoleCard
+							{role}
+							selected={isSelected}
+							dimmed={isAdmin && isPreselected}
+							onclick={() => handleRoleChange(role)}
+						/>
+					{/each}
 				</div>
-			{/if}
+				{#if formErrors.role}
+					<p class="text-danger-500 mt-1 text-xs">{formErrors.role}</p>
+				{/if}
 
-			<!-- Permission Preview -->
-			{#if loadingPermissions && mode === 'edit'}
-				<div>
-					<div class="bg-default-200 mb-2 h-4 w-32 animate-pulse rounded"></div>
+				{#if loadingPermissions && mode === 'edit'}
 					<div class="bg-default-50 rounded-lg p-3">
-						<div class="space-y-3">
-							{#each [0, 1, 2] as i (i)}
-								<div class="flex items-center gap-2">
-									<div class="bg-default-200 h-1.5 w-1.5 shrink-0 animate-pulse rounded-full"></div>
-									<div
-										class="bg-default-200 h-3.5 animate-pulse rounded"
-										style="width: {50 + i * 20}%"
-									></div>
-								</div>
+						<div class="bg-default-200 mb-2 h-3 w-24 animate-pulse rounded"></div>
+						<div class="flex flex-wrap gap-1.5">
+							{#each [0, 1, 2, 3] as i (i)}
+								<div
+									class="bg-default-200 h-5 animate-pulse rounded-md"
+									style="width: {60 + i * 15}px"
+								></div>
 							{/each}
 						</div>
 					</div>
-				</div>
-			{:else if formData.permissions && formData.permissions.length > 0}
-				<div>
-					<h4 class="text-default-700 mb-2 text-sm font-medium">
-						Permissions ({formData.permissions.length})
-					</h4>
-					<div class="bg-default-50 max-h-60 overflow-y-auto rounded-lg p-3">
-						<div class="space-y-2">
+				{:else if formData.permissions && formData.permissions.length > 0}
+					<div>
+						<span class="text-default-500 mb-1.5 block text-xs font-medium">
+							Granted permissions ({formData.permissions.length})
+						</span>
+						<div class="flex flex-wrap gap-1.5">
 							{#each formData.permissions as permission, index (`${permission}-${index}`)}
-								<div class="flex items-start gap-2 text-xs">
-									<div class="mt-1 h-1 w-1 shrink-0 rounded-full bg-blue-500"></div>
-									<div class="text-default-700 font-mono">{permission}</div>
-								</div>
+								<span
+									class="bg-default-100 text-default-700 rounded-md px-2 py-0.5 font-mono text-xs"
+								>
+									{permission}
+								</span>
 							{/each}
 						</div>
 					</div>
-				</div>
-			{/if}
-		</div>
+				{/if}
+			</div>
+		{/if}
+
+		<!-- Credentials (edit only) -->
+		{#if mode === 'edit' && (apiKey || adapter?.generateApiKey)}
+			<div class="space-y-2">
+				<ApiKeyField
+					value={apiKey}
+					label="Mako API Key"
+					error={formErrors.apiKey}
+					helperText={formErrors.apiKey
+						? undefined
+						: 'API keys are system-managed and cannot be manually edited'}
+					verify={adapter?.verifyToken && apiKey
+						? {
+								label: 'Verify',
+								loading: verifyingToken,
+								onclick: handleVerifyToken,
+								testId: 'verify-token-button'
+							}
+						: undefined}
+					regenerate={adapter?.generateApiKey
+						? {
+								label: apiKey ? 'Regenerate' : 'Generate',
+								loading: regeneratingApiKey,
+								disabled: !canRegenerate,
+								onclick: handleRegenerateApiKey,
+								testId: 'regenerate-api-key-button'
+							}
+						: undefined}
+				/>
+
+				{#if tokenVerification && !formErrors.apiKey}
+					{#if tokenVerification.valid}
+						<div class="bg-success-50 border-success-200 rounded-lg border p-3">
+							<p class="text-success-800 text-xs font-medium">Token verified successfully</p>
+							{#if tokenVerification.sub}
+								<p class="text-success-700 mt-1 text-xs">Sub: {tokenVerification.sub}</p>
+							{/if}
+							{#if tokenVerification.client_id}
+								<p class="text-success-700 mt-1 text-xs">
+									Client ID: {tokenVerification.client_id}
+								</p>
+							{/if}
+							{#if tokenVerification.scopes?.length}
+								<p class="text-success-700 mt-1 text-xs">
+									Scopes: {tokenVerification.scopes.join(', ')}
+								</p>
+							{/if}
+						</div>
+					{:else}
+						<div class="bg-danger-50 border-danger-200 rounded-lg border p-3">
+							<p class="text-danger-800 text-xs font-medium">Token verification failed</p>
+							{#if tokenVerification.error}
+								<p class="text-danger-700 mt-1 text-xs">{tokenVerification.error}</p>
+							{/if}
+						</div>
+					{/if}
+				{/if}
+			</div>
+		{/if}
 	</form>
 
-	<!-- Form Actions: error on left, buttons on right via footerAlign="between" -->
 	{#snippet footer()}
-		{#if formErrors.submit}
-			<p class="text-danger-500 text-sm">{formErrors.submit}</p>
-		{:else}
-			<div></div>
-		{/if}
-		<div class="flex gap-3">
-			<Button
-				variant="outline"
-				onclick={handleClose}
-				disabled={saving}
-				type="button"
-				data-testid="cancel-button"
-			>
-				Cancel
-			</Button>
-			<Button
-				type="button"
-				color="primary"
-				onclick={() => formElement?.requestSubmit()}
-				disabled={saving}
-				loading={saving}
-				data-testid="save-user-button"
-			>
-				{mode === 'create' ? 'Create User' : 'Save Changes'}
-			</Button>
-		</div>
+		<Button
+			variant="outline"
+			onclick={handleClose}
+			disabled={saving}
+			type="button"
+			testId="cancel-button"
+		>
+			Cancel
+		</Button>
+		<Button
+			type="button"
+			color={Color.PRIMARY}
+			onclick={() => formElement?.requestSubmit()}
+			disabled={saving}
+			loading={saving}
+			testId="save-user-button"
+		>
+			{mode === 'create' ? 'Create user' : 'Save changes'}
+		</Button>
 	{/snippet}
 </Modal>