create-aphex 0.1.3 → 0.2.1

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

@@ -1,472 +0,0 @@
-<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

@@ -1,182 +0,0 @@
-<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

@@ -1,25 +0,0 @@
-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
-	};
-};