create-aphex 0.1.0

package/templates/base/src/routes/(protected)/admin/settings/_components/ApiKeysSettings.svelte

@@ -0,0 +1,472 @@
+<script lang="ts">
+	import { Button } from '@aphexcms/ui/shadcn/button';
+	import { Input } from '@aphexcms/ui/shadcn/input';
+	import { Label } from '@aphexcms/ui/shadcn/label';
+	import { Badge } from '@aphexcms/ui/shadcn/badge';
+	import {
+		Dialog,
+		DialogContent,
+		DialogDescription,
+		DialogFooter,
+		DialogHeader,
+		DialogTitle,
+		DialogTrigger
+	} from '@aphexcms/ui/shadcn/dialog';
+	import * as Select from '@aphexcms/ui/shadcn/select';
+	import * as Card from '@aphexcms/ui/shadcn/card';
+	import * as Tooltip from '@aphexcms/ui/shadcn/tooltip';
+	import * as Collapsible from '@aphexcms/ui/shadcn/collapsible';
+	import { Separator } from '@aphexcms/ui/shadcn/separator';
+	import { apiKeys as apiKeysApi } from '@aphexcms/cms-core/client';
+	import { confirmDialog, usePermissions } from '@aphexcms/cms-core/client';
+	import { invalidateAll } from '$app/navigation';
+	import { toast } from 'svelte-sonner';
+	import { KeyRound, Copy, Trash2, Plus, ChevronDown } from '@lucide/svelte';
+
+	type ApiKey = {
+		id: string;
+		name: string | null;
+		permissions: ('read' | 'write')[];
+		createdAt: Date | null;
+		lastRequest: Date | null;
+		expiresAt: Date | null;
+	};
+
+	type Props = {
+		apiKeys: ApiKey[];
+		organizationRole?: string | null;
+	};
+
+	let { apiKeys, organizationRole }: Props = $props();
+
+	// Capability-driven gate — any role (built-in or custom) with apiKey.manage
+	// gets the create/delete affordances. The legacy `organizationRole` prop is
+	// kept in the signature for backwards compat but no longer drives the UI.
+	void organizationRole;
+	const perms = usePermissions();
+	const canManageApiKeys = $derived(perms.can('apiKey.manage'));
+
+	let createDialogOpen = $state(false);
+	let newKeyName = $state('');
+	let newKeyMode = $state<'read' | 'write'>('read');
+	const newKeyPermissions = $derived<('read' | 'write')[]>(
+		newKeyMode === 'write' ? ['read', 'write'] : ['read']
+	);
+	let newKeyExpiresValue = $state('365');
+	let newKeyExpiresInDays = $state<number | undefined>(365);
+	let createdKey = $state<{ key: string; name: string } | null>(null);
+	let isCreating = $state(false);
+
+	const expirationOptions = [
+		{ value: '30', label: '30 days' },
+		{ value: '90', label: '90 days' },
+		{ value: '365', label: '1 year' },
+		{ value: 'never', label: 'Never' }
+	];
+
+	const expirationTriggerContent = $derived(
+		expirationOptions.find((opt) => opt.value === newKeyExpiresValue)?.label ?? '1 year'
+	);
+
+	async function createApiKey() {
+		if (!newKeyName.trim()) {
+			toast.error('Please enter a key name');
+			return;
+		}
+
+		isCreating = true;
+		try {
+			const result = await apiKeysApi.create({
+				name: newKeyName.trim(),
+				permissions: newKeyPermissions,
+				expiresInDays: newKeyExpiresInDays
+			});
+
+			if (!result.success || !result.data) {
+				throw new Error(result.error || 'Failed to create API key');
+			}
+
+			createdKey = { key: result.data.apiKey.key, name: result.data.apiKey.name ?? newKeyName };
+
+			// Reset form
+			newKeyName = '';
+			newKeyMode = 'read';
+			newKeyExpiresValue = '365';
+			newKeyExpiresInDays = 365;
+
+			// Refresh the list
+			await invalidateAll();
+		} catch (error) {
+			toast.error(error instanceof Error ? error.message : 'Failed to create API key');
+		} finally {
+			isCreating = false;
+		}
+	}
+
+	async function deleteApiKey(id: string, name: string) {
+		const confirmed = await confirmDialog({
+			title: `Delete "${name}"?`,
+			description: 'This action cannot be undone.',
+			confirmText: 'Delete',
+			variant: 'destructive'
+		});
+		if (!confirmed) return;
+
+		try {
+			const result = await apiKeysApi.remove(id);
+
+			if (!result.success) {
+				throw new Error(result.error || 'Failed to delete API key');
+			}
+
+			toast.success(`API key "${name}" deleted`);
+			await invalidateAll();
+		} catch (error) {
+			toast.error(error instanceof Error ? error.message : 'Failed to delete API key');
+		}
+	}
+
+	function copyToClipboard(text: string) {
+		navigator.clipboard.writeText(text);
+		toast.success('Copied to clipboard!');
+	}
+
+	function formatDate(date: Date | null | undefined) {
+		if (!date) return 'Never';
+		return new Date(date).toLocaleDateString('en-US', {
+			year: 'numeric',
+			month: 'short',
+			day: 'numeric'
+		});
+	}
+</script>
+
+<Card.Root>
+	<Card.Header>
+		<div class="flex items-center justify-between">
+			<div>
+				<Card.Title>API Keys</Card.Title>
+				<Card.Description>API keys allow programmatic access to your CMS content</Card.Description>
+			</div>
+			{#if canManageApiKeys}
+				<Dialog bind:open={createDialogOpen}>
+					{#if apiKeys.length > 0}
+						<!-- Only show the top-right trigger when there's already a list.
+						     The empty state renders its own inline Create button that
+						     flips `createDialogOpen` directly — showing both CTAs on an
+						     empty screen makes the layout feel cluttered. -->
+						<DialogTrigger>
+							{#snippet child({ props })}
+								<Button size="sm" {...props}>
+									<Plus class="mr-1.5 h-4 w-4" />
+									Create Key
+								</Button>
+							{/snippet}
+						</DialogTrigger>
+					{/if}
+					<DialogContent class="sm:max-w-[500px]">
+						{#if createdKey}
+							<DialogHeader>
+								<DialogTitle>API Key Created</DialogTitle>
+								<DialogDescription>
+									Save this key securely - you won't be able to see it again
+								</DialogDescription>
+							</DialogHeader>
+							<div class="space-y-4 py-4">
+								<div>
+									<Label>Key Name</Label>
+									<p class="mt-1 text-sm font-medium">{createdKey.name}</p>
+								</div>
+								<div>
+									<Label>API Key</Label>
+									<div class="mt-1 flex gap-2">
+										<Input value={createdKey.key} readonly class="font-mono text-xs" />
+										<Button
+											size="sm"
+											variant="outline"
+											onclick={() => copyToClipboard(createdKey!.key)}
+										>
+											Copy
+										</Button>
+									</div>
+								</div>
+							</div>
+							<DialogFooter>
+								<Button
+									onclick={() => {
+										createdKey = null;
+										createDialogOpen = false;
+									}}
+								>
+									Done
+								</Button>
+							</DialogFooter>
+						{:else}
+							<DialogHeader>
+								<DialogTitle>Create API Key</DialogTitle>
+								<DialogDescription>
+									Generate a new API key for programmatic access
+								</DialogDescription>
+							</DialogHeader>
+							<div class="space-y-4 py-4">
+								<div>
+									<Label for="key-name">Key Name</Label>
+									<Input
+										id="key-name"
+										bind:value={newKeyName}
+										placeholder="Production API Key"
+										class="mt-1"
+									/>
+									<p class="text-muted-foreground mt-1 text-xs">
+										A descriptive name to identify this key
+									</p>
+								</div>
+
+								<div>
+									<Label>Access Level</Label>
+									<div class="mt-2 flex gap-2">
+										<Button
+											variant={newKeyMode === 'read' ? 'default' : 'outline'}
+											size="sm"
+											onclick={() => (newKeyMode = 'read')}
+										>
+											Read only
+										</Button>
+										<Button
+											variant={newKeyMode === 'write' ? 'default' : 'outline'}
+											size="sm"
+											onclick={() => (newKeyMode = 'write')}
+										>
+											Read + Write
+										</Button>
+									</div>
+								</div>
+
+								<div>
+									<Label for="expires">Expires In</Label>
+									<Select.Root
+										type="single"
+										name="expiration"
+										bind:value={newKeyExpiresValue}
+										onValueChange={(value) => {
+											if (value) {
+												newKeyExpiresInDays = value === 'never' ? undefined : parseInt(value);
+											}
+										}}
+									>
+										<Select.Trigger class="mt-1 w-[180px]">
+											{expirationTriggerContent}
+										</Select.Trigger>
+										<Select.Content>
+											<Select.Group>
+												{#each expirationOptions as option (option.value)}
+													<Select.Item value={option.value} label={option.label}>
+														{option.label}
+													</Select.Item>
+												{/each}
+											</Select.Group>
+										</Select.Content>
+									</Select.Root>
+								</div>
+							</div>
+							<DialogFooter>
+								<Button
+									variant="outline"
+									onclick={() => (createDialogOpen = false)}
+									disabled={isCreating}
+								>
+									Cancel
+								</Button>
+								<Button onclick={createApiKey} disabled={isCreating}>
+									{isCreating ? 'Creating...' : 'Create Key'}
+								</Button>
+							</DialogFooter>
+						{/if}
+					</DialogContent>
+				</Dialog>
+			{/if}
+		</div>
+	</Card.Header>
+
+	<Card.Content>
+		{#if apiKeys.length === 0}
+			<div class="flex flex-col items-center justify-center py-12 text-center">
+				<div class="bg-muted mb-4 rounded-full p-3">
+					<KeyRound class="text-muted-foreground h-6 w-6" />
+				</div>
+				<p class="text-base font-medium">No API keys yet</p>
+				<p class="text-muted-foreground mt-1 text-sm">
+					Create your first API key to access the CMS data programmatically
+				</p>
+				{#if canManageApiKeys}
+					<Button size="sm" class="mt-4" onclick={() => (createDialogOpen = true)}>
+						<Plus class="mr-1.5 h-4 w-4" />
+						Create API Key
+					</Button>
+				{/if}
+			</div>
+		{:else}
+			<div class="divide-y">
+				{#each apiKeys as apiKey, i (apiKey.id)}
+					<div
+						class="flex items-center justify-between gap-4 {i > 0 ? 'pt-4' : ''} {i <
+						apiKeys.length - 1
+							? 'pb-4'
+							: ''}"
+					>
+						<div class="min-w-0 flex-1">
+							<div class="flex items-center gap-2">
+								<KeyRound class="text-muted-foreground h-4 w-4 shrink-0" />
+								<span class="truncate font-medium">{apiKey.name}</span>
+								<div class="flex gap-1">
+									{#each apiKey.permissions as permission}
+										<Badge variant="secondary" class="text-xs capitalize">
+											{permission}
+										</Badge>
+									{/each}
+								</div>
+							</div>
+							<div class="text-muted-foreground mt-1.5 ml-6 flex flex-wrap gap-x-4 gap-y-1 text-xs">
+								<span>Created {formatDate(apiKey.createdAt)}</span>
+								<span>Last used {formatDate(apiKey.lastRequest)}</span>
+								<span>
+									Expires {apiKey.expiresAt ? formatDate(apiKey.expiresAt) : 'never'}
+								</span>
+							</div>
+						</div>
+						{#if canManageApiKeys}
+							<Tooltip.Root>
+								<Tooltip.Trigger>
+									{#snippet child({ props })}
+										<Button
+											{...props}
+											variant="ghost"
+											size="icon"
+											class="text-muted-foreground hover:text-destructive h-8 w-8 shrink-0"
+											onclick={(e) => {
+												props.onclick?.(e);
+												deleteApiKey(apiKey.id, apiKey.name ?? 'Unnamed');
+											}}
+										>
+											<Trash2 class="h-4 w-4" />
+										</Button>
+									{/snippet}
+								</Tooltip.Trigger>
+								<Tooltip.Content>Delete this API key</Tooltip.Content>
+							</Tooltip.Root>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</Card.Content>
+</Card.Root>
+
+<!-- Quick Reference -->
+<Card.Root class="mt-6">
+	<Card.Header class="pb-3">
+		<Card.Title class="text-sm font-medium">Quick Reference</Card.Title>
+		<Card.Description>
+			Pass your key via the <code class="bg-muted rounded px-1 py-0.5 text-xs">x-api-key</code> header
+		</Card.Description>
+	</Card.Header>
+	<Card.Content class="space-y-4">
+		<!-- Auth example -->
+		<div class="bg-muted relative rounded-md p-3">
+			<code class="block font-mono text-xs leading-relaxed break-all">
+				curl -H "x-api-key: your_key_here" \<br />
+				&nbsp;&nbsp;https://your-app.com/api/documents?type=&#123;schemaType&#125;
+			</code>
+			<Button
+				variant="ghost"
+				size="icon"
+				class="absolute top-2 right-2 h-7 w-7"
+				onclick={() =>
+					copyToClipboard(
+						'curl -H "x-api-key: your_key_here" \\\n  https://your-app.com/api/documents?type={schemaType}'
+					)}
+			>
+				<Copy class="h-3.5 w-3.5" />
+			</Button>
+		</div>
+
+		<!-- Endpoints -->
+		<Collapsible.Root>
+			<Collapsible.Trigger
+				class="flex w-full items-center justify-between text-xs font-medium [&[data-state=open]>svg]:rotate-180"
+			>
+				Endpoints
+				<ChevronDown class="text-muted-foreground h-3.5 w-3.5 transition-transform duration-200" />
+			</Collapsible.Trigger>
+			<Collapsible.Content>
+				<div class="bg-muted mt-2 overflow-hidden rounded-md font-mono text-xs">
+					<div class="divide-border divide-y">
+						<div class="flex gap-2 px-3 py-1.5">
+							<Badge variant="outline" class="w-14 justify-center font-mono text-[10px]">GET</Badge>
+							<span class="text-muted-foreground">/api/documents?type=&#123;type&#125;</span>
+						</div>
+						<div class="flex gap-2 px-3 py-1.5">
+							<Badge variant="outline" class="w-14 justify-center font-mono text-[10px]">GET</Badge>
+							<span class="text-muted-foreground">/api/documents/&#123;id&#125;</span>
+						</div>
+						<div class="flex gap-2 px-3 py-1.5">
+							<Badge variant="secondary" class="w-14 justify-center font-mono text-[10px]"
+								>POST</Badge
+							>
+							<span class="text-muted-foreground">/api/documents</span>
+						</div>
+						<div class="flex gap-2 px-3 py-1.5">
+							<Badge variant="secondary" class="w-14 justify-center font-mono text-[10px]"
+								>PUT</Badge
+							>
+							<span class="text-muted-foreground">/api/documents/&#123;id&#125;</span>
+						</div>
+						<div class="flex gap-2 px-3 py-1.5">
+							<Badge variant="secondary" class="w-14 justify-center font-mono text-[10px]"
+								>DEL</Badge
+							>
+							<span class="text-muted-foreground">/api/documents/&#123;id&#125;</span>
+						</div>
+						<div class="flex gap-2 px-3 py-1.5">
+							<Badge variant="outline" class="w-14 justify-center font-mono text-[10px]">POST</Badge
+							>
+							<span class="text-muted-foreground">/api/documents/query</span>
+						</div>
+						<div class="flex gap-2 px-3 py-1.5">
+							<Badge variant="outline" class="w-14 justify-center font-mono text-[10px]">GET</Badge>
+							<span class="text-muted-foreground">/api/assets</span>
+						</div>
+						<div class="flex gap-2 px-3 py-1.5">
+							<Badge variant="secondary" class="w-14 justify-center font-mono text-[10px]"
+								>POST</Badge
+							>
+							<span class="text-muted-foreground">/api/assets</span>
+							<span class="text-muted-foreground/60 ml-auto text-[10px]">multipart/form-data</span>
+						</div>
+						<div class="flex gap-2 px-3 py-1.5">
+							<Badge variant="outline" class="w-14 justify-center font-mono text-[10px]">GET</Badge>
+							<span class="text-muted-foreground">/api/schemas</span>
+						</div>
+					</div>
+				</div>
+			</Collapsible.Content>
+		</Collapsible.Root>
+
+		<!-- Permissions note -->
+		<div class="text-muted-foreground text-xs leading-relaxed">
+			<p>
+				<Badge variant="outline" class="mr-1 font-mono text-[10px]">GET</Badge> endpoints need
+				<strong class="text-foreground">read</strong> permission.
+				<Badge variant="secondary" class="mr-1 ml-1 font-mono text-[10px]">POST</Badge>
+				<Badge variant="secondary" class="mr-1 font-mono text-[10px]">PUT</Badge>
+				<Badge variant="secondary" class="mr-1 font-mono text-[10px]">DEL</Badge> need
+				<strong class="text-foreground">write</strong>. Read-only keys get
+				<code class="bg-muted rounded px-1 py-0.5">403</code> on mutations.
+			</p>
+			<p class="mt-1">
+				<code class="bg-muted rounded px-1 py-0.5">POST /api/documents/query</code> is the exception
+				— it only needs <strong class="text-foreground">read</strong> permission.
+			</p>
+		</div>
+	</Card.Content>
+</Card.Root>

package/templates/base/src/routes/(protected)/admin/settings/_components/OrganizationsSettings.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+	import { Button } from '@aphexcms/ui/shadcn/button';
+	import { Input } from '@aphexcms/ui/shadcn/input';
+	import { Label } from '@aphexcms/ui/shadcn/label';
+	import * as Card from '@aphexcms/ui/shadcn/card';
+	import * as Avatar from '@aphexcms/ui/shadcn/avatar';
+	import { Separator } from '@aphexcms/ui/shadcn/separator';
+	import { invalidateAll } from '$app/navigation';
+	import { toast } from 'svelte-sonner';
+	import { Copy, Users } from '@lucide/svelte';
+	import type { Organization } from '@aphexcms/cms-core';
+	import { organizations } from '@aphexcms/cms-core/client';
+
+	type Props = {
+		activeOrganization: Organization & { members: any[] };
+		currentUserId: string;
+	};
+
+	let { activeOrganization, currentUserId }: Props = $props();
+
+	let editOrgName = $state(activeOrganization.name);
+	let editOrgSlug = $state(activeOrganization.slug);
+	let isUpdatingOrg = $state(false);
+	let error = $state<string | null>(null);
+
+	// Sync local state when the active organization changes (e.g. org switch)
+	$effect(() => {
+		editOrgName = activeOrganization.name;
+		editOrgSlug = activeOrganization.slug;
+		error = null;
+	});
+
+	const orgInitials = $derived(
+		activeOrganization.name
+			.split(' ')
+			.map((w) => w[0])
+			.join('')
+			.toUpperCase()
+			.slice(0, 2)
+	);
+
+	const formattedDate = $derived(
+		new Date(activeOrganization.createdAt).toLocaleDateString('en-US', {
+			year: 'numeric',
+			month: 'long',
+			day: 'numeric'
+		})
+	);
+
+	function generateSlug(text: string): string {
+		return text
+			.toLowerCase()
+			.trim()
+			.replace(/[^\w\s-]/g, '')
+			.replace(/[\s_-]+/g, '-')
+			.replace(/^-+|-+$/g, '');
+	}
+
+	function handleSlugInput(event: Event) {
+		const target = event.target as HTMLInputElement;
+		editOrgSlug = target.value.toLowerCase().replace(/[^a-z0-9-]/g, '');
+	}
+
+	function copyToClipboard(text: string) {
+		navigator.clipboard.writeText(text);
+		toast.success('Copied to clipboard!');
+	}
+
+	async function updateOrganization() {
+		if (!editOrgName.trim() || !editOrgSlug.trim()) {
+			error = 'Please enter both organization name and slug';
+			return;
+		}
+
+		isUpdatingOrg = true;
+		error = null;
+		try {
+			const result = await organizations.update(activeOrganization.id, {
+				name: editOrgName.trim(),
+				slug: editOrgSlug.trim()
+			});
+
+			if (!result.success) {
+				throw new Error(result.error || 'Failed to update organization');
+			}
+
+			toast.success('Organization updated successfully');
+			await invalidateAll();
+		} catch (err) {
+			error = err instanceof Error ? err.message : 'Failed to update organization';
+		} finally {
+			isUpdatingOrg = false;
+		}
+	}
+</script>
+
+<Card.Root>
+	<Card.Header>
+		<div class="flex items-center gap-4">
+			<Avatar.Root class="h-12 w-12 text-lg">
+				{#if activeOrganization.metadata?.logo}
+					<Avatar.Image src={activeOrganization.metadata.logo} alt={activeOrganization.name} />
+				{/if}
+				<Avatar.Fallback>{orgInitials}</Avatar.Fallback>
+			</Avatar.Root>
+			<div class="min-w-0 flex-1">
+				<Card.Title class="text-lg">{activeOrganization.name}</Card.Title>
+				<div class="text-muted-foreground mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs">
+					<span class="flex items-center gap-1">
+						<Users class="h-3 w-3" />
+						{activeOrganization.members.length} member{activeOrganization.members.length !== 1
+							? 's'
+							: ''}
+					</span>
+					<span>Created {formattedDate}</span>
+				</div>
+			</div>
+		</div>
+	</Card.Header>
+
+	<Card.Content>
+		<!-- Org ID -->
+		<div class="mb-4">
+			<Label class="text-muted-foreground text-xs">Organization ID</Label>
+			<div class="mt-1 flex items-center gap-2">
+				<code
+					class="bg-muted text-muted-foreground flex-1 truncate rounded-md px-3 py-1.5 font-mono text-xs"
+				>
+					{activeOrganization.id}
+				</code>
+				<Button
+					variant="ghost"
+					size="icon"
+					class="h-7 w-7 shrink-0"
+					onclick={() => copyToClipboard(activeOrganization.id)}
+				>
+					<Copy class="h-3.5 w-3.5" />
+				</Button>
+			</div>
+		</div>
+
+		<Separator class="mb-4" />
+
+		<div class="grid gap-4">
+			<div>
+				<Label for="org-name">Organization Name</Label>
+				<Input id="org-name" bind:value={editOrgName} placeholder="Acme Inc" class="mt-2" />
+			</div>
+			<div>
+				<Label for="org-slug">Slug</Label>
+				<div class="mt-2 flex gap-2">
+					<Input
+						id="org-slug"
+						value={editOrgSlug}
+						oninput={handleSlugInput}
+						placeholder="acme-inc"
+						class="flex-1"
+					/>
+					<Button
+						variant="outline"
+						size="sm"
+						onclick={() => (editOrgSlug = generateSlug(editOrgName))}
+						disabled={!editOrgName.trim()}
+					>
+						Generate
+					</Button>
+				</div>
+				<p class="text-muted-foreground mt-1.5 font-mono text-xs">
+					/{editOrgSlug || 'your-slug'}
+				</p>
+			</div>
+			{#if error}
+				<p class="text-destructive text-sm">{error}</p>
+			{/if}
+		</div>
+	</Card.Content>
+	<Card.Footer class="border-t px-6 py-4">
+		<Button onclick={updateOrganization} disabled={isUpdatingOrg}>
+			{isUpdatingOrg ? 'Saving...' : 'Save'}
+		</Button>
+	</Card.Footer>
+</Card.Root>

package/templates/base/src/routes/(protected)/admin/settings/account/+page.server.ts

@@ -0,0 +1,25 @@
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ locals }) => {
+	const auth = locals.auth;
+
+	if (!auth || auth.type !== 'session') {
+		throw new Error('No session found');
+	}
+
+	const databaseAdapter = locals.aphexCMS.databaseAdapter;
+
+	const userProfile = await databaseAdapter.findUserProfileById(auth.user.id);
+	const userPreferences = userProfile?.preferences || {};
+
+	let hasChildOrganizations = false;
+	if (auth.organizationId && databaseAdapter.hierarchyEnabled) {
+		const childOrgs = await databaseAdapter.getChildOrganizations(auth.organizationId);
+		hasChildOrganizations = childOrgs.length > 0;
+	}
+
+	return {
+		userPreferences,
+		hasChildOrganizations
+	};
+};