includio-cms 0.1.0 → 0.1.2

package/dist/admin/auth-client.js

@@ -1,2 +1,5 @@
 import { createAuthClient } from 'better-auth/svelte';
-export const authClient = createAuthClient();
+import { adminClient } from 'better-auth/client/plugins';
+export const authClient = createAuthClient({
+    plugins: [adminClient()]
+});

package/dist/admin/client/account/sessions-section.svelte

@@ -10,6 +10,7 @@
 	import DeviceMobile from '@tabler/icons-svelte/icons/device-mobile';
 	import Loader2 from '@tabler/icons-svelte/icons/loader-2';
 	import Button from '../../../components/ui/button/button.svelte';
+	import { parseUserAgent } from '../../utils/parseUserAgent.js';
 
 	const interfaceLanguage = useInterfaceLanguage();
 
@@ -65,27 +66,6 @@
 		}
 	}
 
-	function parseUserAgent(ua: string | null | undefined): { browser: string; os: string; isMobile: boolean } {
-		if (!ua) return { browser: 'Unknown', os: 'Unknown', isMobile: false };
-
-		const isMobile = /mobile|android|iphone|ipad/i.test(ua);
-
-		let browser = 'Unknown';
-		if (ua.includes('Firefox')) browser = 'Firefox';
-		else if (ua.includes('Edg')) browser = 'Edge';
-		else if (ua.includes('Chrome')) browser = 'Chrome';
-		else if (ua.includes('Safari')) browser = 'Safari';
-
-		let os = 'Unknown';
-		if (ua.includes('Windows')) os = 'Windows';
-		else if (ua.includes('Mac')) os = 'macOS';
-		else if (ua.includes('Linux')) os = 'Linux';
-		else if (ua.includes('Android')) os = 'Android';
-		else if (ua.includes('iPhone') || ua.includes('iPad')) os = 'iOS';
-
-		return { browser, os, isMobile };
-	}
-
 	function formatDate(date: Date | string): string {
 		return new Date(date).toLocaleString(toLocaleCode(interfaceLanguage.current), {
 			year: 'numeric',

package/dist/admin/client/index.d.ts

@@ -7,3 +7,4 @@ export { default as LoginPage } from './login/login-page.svelte';
 export { default as MediaPage } from './media/media-page.svelte';
 export { default as FormPage } from './form/form-page.svelte';
 export { default as FormSubmissionPage } from './form/form-submission/form-submission-page.svelte';
+export { default as UsersPage } from './users/users-page.svelte';

package/dist/admin/client/index.js

@@ -7,3 +7,4 @@ export { default as LoginPage } from './login/login-page.svelte';
 export { default as MediaPage } from './media/media-page.svelte';
 export { default as FormPage } from './form/form-page.svelte';
 export { default as FormSubmissionPage } from './form/form-submission/form-submission-page.svelte';
+export { default as UsersPage } from './users/users-page.svelte';

package/dist/admin/client/users/accept-invite-page.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+	import '../../styles/admin.css';
+	import { Input } from '../../../components/ui/input/index.js';
+	import Label from '../../../components/ui/label/label.svelte';
+	import Button from '../../../components/ui/button/button.svelte';
+	import Loader2 from '@tabler/icons-svelte/icons/loader-2';
+	import { page } from '$app/state';
+	import { goto } from '$app/navigation';
+	import { usersLang } from './lang.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+
+	const interfaceLanguage = useInterfaceLanguage();
+	const lang = $derived(usersLang[interfaceLanguage.current]);
+
+	const token = $derived(page.url.searchParams.get('token'));
+
+	let name = $state('');
+	let password = $state('');
+	let confirmPassword = $state('');
+	let loading = $state(false);
+	let error = $state('');
+	let success = $state(false);
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		if (password !== confirmPassword) {
+			error = lang.invite.confirmPassword + ' — mismatch';
+			return;
+		}
+		if (password.length < 6) {
+			error = 'Password must be at least 6 characters';
+			return;
+		}
+
+		loading = true;
+		error = '';
+
+		try {
+			const res = await fetch('/admin/api/accept-invite', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ token, name, password })
+			});
+
+			const data = await res.json();
+
+			if (!res.ok) {
+				error = data.error || 'Error';
+				loading = false;
+				return;
+			}
+
+			success = true;
+			setTimeout(() => goto('/admin/login'), 2000);
+		} catch {
+			error = 'Network error';
+			loading = false;
+		}
+	}
+</script>
+
+<div
+	class="relative flex min-h-svh flex-col items-center justify-center overflow-hidden p-6 md:p-10"
+	style="background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);"
+>
+	<div
+		class="pointer-events-none absolute inset-0 hidden dark:block"
+		style="background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #2D4A77 100%);"
+	></div>
+
+	<div class="relative z-10 w-full max-w-sm">
+		<div
+			class="overflow-hidden rounded-3xl border border-slate-200/50 bg-white/80 p-8 shadow-2xl backdrop-blur-xl dark:border-white/10 dark:bg-slate-900/60"
+		>
+			<div class="mb-6 text-center">
+				<div class="mb-2 text-3xl font-bold" style="background: linear-gradient(135deg, #2D4A77, #4975AE); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
+					includio
+				</div>
+				<h1 class="text-lg font-semibold">{lang.invite.acceptTitle}</h1>
+				<p class="text-muted-foreground mt-1 text-sm">{lang.invite.acceptDescription}</p>
+			</div>
+
+			{#if success}
+				<div class="rounded-lg bg-green-50 p-4 text-center text-sm text-green-700 dark:bg-green-900/20 dark:text-green-400">
+					{lang.invite.accepted}
+				</div>
+			{:else if !token}
+				<div class="rounded-lg bg-red-50 p-4 text-center text-sm text-red-700 dark:bg-red-900/20 dark:text-red-400">
+					{lang.invite.invalidToken}
+				</div>
+			{:else}
+				<form onsubmit={handleSubmit} class="space-y-4">
+					<div class="space-y-2">
+						<Label for="invite-name">{lang.name}</Label>
+						<Input id="invite-name" bind:value={name} required class="rounded-xl" />
+					</div>
+					<div class="space-y-2">
+						<Label for="invite-password">{lang.password}</Label>
+						<Input id="invite-password" type="password" bind:value={password} required minlength={6} class="rounded-xl" />
+					</div>
+					<div class="space-y-2">
+						<Label for="invite-confirm">{lang.invite.confirmPassword}</Label>
+						<Input id="invite-confirm" type="password" bind:value={confirmPassword} required minlength={6} class="rounded-xl" />
+					</div>
+					{#if error}
+						<p class="text-destructive text-sm">{error}</p>
+					{/if}
+					<Button type="submit" class="w-full rounded-xl" disabled={loading}>
+						{#if loading}
+							<Loader2 class="mr-2 size-4 animate-spin" />
+						{/if}
+						{lang.invite.acceptInvite}
+					</Button>
+				</form>
+			{/if}
+		</div>
+	</div>
+</div>

package/dist/admin/client/users/accept-invite-page.svelte.d.ts

@@ -0,0 +1,4 @@
+import '../../styles/admin.css';
+declare const AcceptInvitePage: import("svelte").Component<Record<string, never>, {}, "">;
+type AcceptInvitePage = ReturnType<typeof AcceptInvitePage>;
+export default AcceptInvitePage;

package/dist/admin/client/users/create-user-dialog.svelte

@@ -0,0 +1,157 @@
+<script lang="ts">
+	import * as Dialog from '../../../components/ui/dialog/index.js';
+	import * as Select from '../../../components/ui/select/index.js';
+	import { Input } from '../../../components/ui/input/index.js';
+	import Label from '../../../components/ui/label/label.svelte';
+	import Button from '../../../components/ui/button/button.svelte';
+	import EyeIcon from '@tabler/icons-svelte/icons/eye';
+	import EyeOffIcon from '@tabler/icons-svelte/icons/eye-off';
+	import DiceIcon from '@tabler/icons-svelte/icons/dice-3';
+	import { authClient } from '../../auth-client.js';
+	import { toast } from 'svelte-sonner';
+	import { usersLang } from './lang.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import type { UserRole } from '../../../types/roles.js';
+
+	type Props = {
+		open: boolean;
+		onOpenChange: (open: boolean) => void;
+		onCreated: () => void;
+	};
+
+	let { open = $bindable(), onOpenChange, onCreated }: Props = $props();
+
+	const interfaceLanguage = useInterfaceLanguage();
+	const lang = $derived(usersLang[interfaceLanguage.current]);
+
+	let name = $state('');
+	let email = $state('');
+	let password = $state('');
+	let role = $state<UserRole>('user');
+	let loading = $state(false);
+	let error = $state('');
+	let showPassword = $state(false);
+
+	function generatePassword(length = 20): string {
+		const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%&*';
+		const array = new Uint8Array(length);
+		crypto.getRandomValues(array);
+		return Array.from(array, (b) => chars[b % chars.length]).join('');
+	}
+
+	function reset() {
+		name = '';
+		email = '';
+		password = '';
+		role = 'user';
+		error = '';
+		showPassword = false;
+	}
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		loading = true;
+		error = '';
+
+		const { error: apiError } = await authClient.admin.createUser({
+			email,
+			password,
+			name,
+			role
+		});
+
+		if (apiError) {
+			error = apiError.message || 'Error';
+			loading = false;
+			return;
+		}
+
+		toast.success(lang.userCreated);
+		loading = false;
+		reset();
+		onOpenChange(false);
+		onCreated();
+	}
+</script>
+
+<Dialog.Root
+	{open}
+	onOpenChange={(v) => {
+		if (!v) reset();
+		onOpenChange(v);
+	}}
+>
+	<Dialog.Content>
+		<Dialog.Header>
+			<Dialog.Title>{lang.createUser}</Dialog.Title>
+		</Dialog.Header>
+		<form onsubmit={handleSubmit} class="space-y-4">
+			<div class="space-y-2">
+				<Label for="create-name">{lang.name}</Label>
+				<Input id="create-name" bind:value={name} required />
+			</div>
+			<div class="space-y-2">
+				<Label for="create-email">{lang.email}</Label>
+				<Input id="create-email" type="email" bind:value={email} required />
+			</div>
+			<div class="space-y-2">
+				<Label for="create-password">{lang.password}</Label>
+				<div class="flex gap-1">
+					<div class="relative flex-1">
+						<Input
+							id="create-password"
+							type={showPassword ? 'text' : 'password'}
+							bind:value={password}
+							required
+							minlength={6}
+							class="pr-9"
+						/>
+						<button
+							type="button"
+							class="text-muted-foreground hover:text-foreground absolute right-2 top-1/2 -translate-y-1/2"
+							onclick={() => (showPassword = !showPassword)}
+						>
+							{#if showPassword}
+								<EyeOffIcon class="size-4" />
+							{:else}
+								<EyeIcon class="size-4" />
+							{/if}
+						</button>
+					</div>
+					<Button
+						type="button"
+						variant="outline"
+						size="icon"
+						class="shrink-0"
+						onclick={() => {
+							password = generatePassword();
+							showPassword = true;
+						}}
+						title={lang.generatePassword}
+					>
+						<DiceIcon class="size-4" />
+					</Button>
+				</div>
+			</div>
+			<div class="space-y-2">
+				<Label>{lang.role}</Label>
+				<Select.Root type="single" value={role} onValueChange={(v) => v && (role = v as UserRole)}>
+					<Select.Trigger class="w-full">
+						{role === 'admin' ? lang.roleAdmin : lang.roleUser}
+					</Select.Trigger>
+					<Select.Content>
+						<Select.Item value="user">{lang.roleUser}</Select.Item>
+						<Select.Item value="admin">{lang.roleAdmin}</Select.Item>
+					</Select.Content>
+				</Select.Root>
+			</div>
+			{#if error}
+				<p class="text-destructive text-sm">{error}</p>
+			{/if}
+			<Dialog.Footer>
+				<Button type="button" variant="outline" onclick={() => onOpenChange(false)}>{lang.cancel}</Button>
+				<Button type="submit" disabled={loading}>{lang.createUser}</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>

package/dist/admin/client/users/create-user-dialog.svelte.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onCreated: () => void;
+};
+declare const CreateUserDialog: import("svelte").Component<Props, {}, "open">;
+type CreateUserDialog = ReturnType<typeof CreateUserDialog>;
+export default CreateUserDialog;

package/dist/admin/client/users/delete-user-dialog.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import * as AlertDialog from '../../../components/ui/alert-dialog/index.js';
+	import { authClient } from '../../auth-client.js';
+	import { toast } from 'svelte-sonner';
+	import { usersLang } from './lang.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+
+	type Props = {
+		open: boolean;
+		onOpenChange: (open: boolean) => void;
+		onDeleted: () => void;
+		userId: string | null;
+		currentUserId: string;
+	};
+
+	let { open = $bindable(), onOpenChange, onDeleted, userId, currentUserId }: Props = $props();
+
+	const interfaceLanguage = useInterfaceLanguage();
+	const lang = $derived(usersLang[interfaceLanguage.current]);
+
+	async function handleDelete() {
+		if (!userId) return;
+
+		if (userId === currentUserId) {
+			toast.error(lang.cannotDeleteSelf);
+			onOpenChange(false);
+			return;
+		}
+
+		const { error } = await authClient.admin.removeUser({ userId });
+
+		if (error) {
+			toast.error(error.message || 'Error');
+			onOpenChange(false);
+			return;
+		}
+
+		toast.success(lang.userDeleted);
+		onOpenChange(false);
+		onDeleted();
+	}
+</script>
+
+<AlertDialog.Root {open} onOpenChange={(v) => onOpenChange(v)}>
+	<AlertDialog.Content>
+		<AlertDialog.Title>{lang.deleteConfirmTitle}</AlertDialog.Title>
+		<AlertDialog.Description>{lang.deleteConfirmDescription}</AlertDialog.Description>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel>{lang.cancel}</AlertDialog.Cancel>
+			<AlertDialog.Action onclick={handleDelete}>{lang.deleteUser}</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

package/dist/admin/client/users/delete-user-dialog.svelte.d.ts

@@ -0,0 +1,10 @@
+type Props = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onDeleted: () => void;
+    userId: string | null;
+    currentUserId: string;
+};
+declare const DeleteUserDialog: import("svelte").Component<Props, {}, "open">;
+type DeleteUserDialog = ReturnType<typeof DeleteUserDialog>;
+export default DeleteUserDialog;

package/dist/admin/client/users/edit-user-dialog.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+	import * as Dialog from '../../../components/ui/dialog/index.js';
+	import * as Select from '../../../components/ui/select/index.js';
+	import { Input } from '../../../components/ui/input/index.js';
+	import Label from '../../../components/ui/label/label.svelte';
+	import Button from '../../../components/ui/button/button.svelte';
+	import { authClient } from '../../auth-client.js';
+	import { toast } from 'svelte-sonner';
+	import { usersLang } from './lang.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import type { UserRole } from '../../../types/roles.js';
+
+	type UserData = {
+		id: string;
+		name: string;
+		email: string;
+		role: string;
+	};
+
+	type Props = {
+		open: boolean;
+		onOpenChange: (open: boolean) => void;
+		onUpdated: () => void;
+		user: UserData | null;
+		currentUserId: string;
+	};
+
+	let { open = $bindable(), onOpenChange, onUpdated, user, currentUserId }: Props = $props();
+
+	const interfaceLanguage = useInterfaceLanguage();
+	const lang = $derived(usersLang[interfaceLanguage.current]);
+
+	let name = $state('');
+	let email = $state('');
+	let role = $state<UserRole>('user');
+	let loading = $state(false);
+	let error = $state('');
+
+	const isSelf = $derived(user?.id === currentUserId);
+
+	$effect(() => {
+		if (user) {
+			name = user.name;
+			email = user.email;
+			role = (user.role as UserRole) || 'user';
+		}
+	});
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		if (!user) return;
+		loading = true;
+		error = '';
+
+		// Update name/email
+		const { error: updateError } = await authClient.admin.updateUser({
+			userId: user.id,
+			data: { name, email }
+		});
+
+		if (updateError) {
+			error = updateError.message || 'Error';
+			loading = false;
+			return;
+		}
+
+		// Update role if changed and not self
+		if (role !== user.role && !isSelf) {
+			const { error: roleError } = await authClient.admin.setRole({
+				userId: user.id,
+				role
+			});
+
+			if (roleError) {
+				error = roleError.message || 'Error';
+				loading = false;
+				return;
+			}
+		}
+
+		toast.success(lang.userUpdated);
+		loading = false;
+		onOpenChange(false);
+		onUpdated();
+	}
+</script>
+
+<Dialog.Root {open} onOpenChange={(v) => onOpenChange(v)}>
+	<Dialog.Content>
+		<Dialog.Header>
+			<Dialog.Title>{lang.editUser}</Dialog.Title>
+		</Dialog.Header>
+		<form onsubmit={handleSubmit} class="space-y-4">
+			<div class="space-y-2">
+				<Label for="edit-name">{lang.name}</Label>
+				<Input id="edit-name" bind:value={name} required />
+			</div>
+			<div class="space-y-2">
+				<Label for="edit-email">{lang.email}</Label>
+				<Input id="edit-email" type="email" bind:value={email} required />
+			</div>
+			<div class="space-y-2">
+				<Label>{lang.role}</Label>
+				{#if isSelf}
+					<p class="text-muted-foreground text-sm">{lang.cannotChangeSelfRole}</p>
+				{:else}
+					<Select.Root type="single" value={role} onValueChange={(v) => v && (role = v as UserRole)}>
+						<Select.Trigger class="w-full">
+							{role === 'admin' ? lang.roleAdmin : lang.roleUser}
+						</Select.Trigger>
+						<Select.Content>
+							<Select.Item value="user">{lang.roleUser}</Select.Item>
+							<Select.Item value="admin">{lang.roleAdmin}</Select.Item>
+						</Select.Content>
+					</Select.Root>
+				{/if}
+			</div>
+			{#if error}
+				<p class="text-destructive text-sm">{error}</p>
+			{/if}
+			<Dialog.Footer>
+				<Button type="button" variant="outline" onclick={() => onOpenChange(false)}>{lang.cancel}</Button>
+				<Button type="submit" disabled={loading}>{lang.save}</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>

package/dist/admin/client/users/edit-user-dialog.svelte.d.ts

@@ -0,0 +1,16 @@
+type UserData = {
+    id: string;
+    name: string;
+    email: string;
+    role: string;
+};
+type Props = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onUpdated: () => void;
+    user: UserData | null;
+    currentUserId: string;
+};
+declare const EditUserDialog: import("svelte").Component<Props, {}, "open">;
+type EditUserDialog = ReturnType<typeof EditUserDialog>;
+export default EditUserDialog;

package/dist/admin/client/users/invite-user-dialog.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import * as Dialog from '../../../components/ui/dialog/index.js';
+	import * as Select from '../../../components/ui/select/index.js';
+	import { Input } from '../../../components/ui/input/index.js';
+	import Label from '../../../components/ui/label/label.svelte';
+	import Button from '../../../components/ui/button/button.svelte';
+	import { toast } from 'svelte-sonner';
+	import { usersLang } from './lang.js';
+	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
+	import type { UserRole } from '../../../types/roles.js';
+
+	type Props = {
+		open: boolean;
+		onOpenChange: (open: boolean) => void;
+		onInvited: () => void;
+	};
+
+	let { open = $bindable(), onOpenChange, onInvited }: Props = $props();
+
+	const interfaceLanguage = useInterfaceLanguage();
+	const lang = $derived(usersLang[interfaceLanguage.current]);
+
+	let email = $state('');
+	let role = $state<UserRole>('user');
+	let loading = $state(false);
+	let error = $state('');
+
+	function reset() {
+		email = '';
+		role = 'user';
+		error = '';
+	}
+
+	async function handleSubmit(e: Event) {
+		e.preventDefault();
+		loading = true;
+		error = '';
+
+		try {
+			const res = await fetch('/admin/api/invite', {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify({ email, role })
+			});
+
+			const data = await res.json();
+
+			if (!res.ok) {
+				if (res.status === 409) {
+					error = lang.invite.emailAlreadyRegistered;
+				} else {
+					error = data.error || 'Error';
+				}
+				loading = false;
+				return;
+			}
+
+			toast.success(lang.invite.inviteSent);
+			loading = false;
+			reset();
+			onOpenChange(false);
+			onInvited();
+		} catch {
+			error = 'Network error';
+			loading = false;
+		}
+	}
+</script>
+
+<Dialog.Root
+	{open}
+	onOpenChange={(v) => {
+		if (!v) reset();
+		onOpenChange(v);
+	}}
+>
+	<Dialog.Content>
+		<Dialog.Header>
+			<Dialog.Title>{lang.invite.inviteUser}</Dialog.Title>
+		</Dialog.Header>
+		<form onsubmit={handleSubmit} class="space-y-4">
+			<div class="space-y-2">
+				<Label for="invite-email">{lang.email}</Label>
+				<Input id="invite-email" type="email" bind:value={email} required />
+			</div>
+			<div class="space-y-2">
+				<Label>{lang.role}</Label>
+				<Select.Root type="single" value={role} onValueChange={(v) => v && (role = v as UserRole)}>
+					<Select.Trigger class="w-full">
+						{role === 'admin' ? lang.roleAdmin : lang.roleUser}
+					</Select.Trigger>
+					<Select.Content>
+						<Select.Item value="user">{lang.roleUser}</Select.Item>
+						<Select.Item value="admin">{lang.roleAdmin}</Select.Item>
+					</Select.Content>
+				</Select.Root>
+			</div>
+			{#if error}
+				<p class="text-destructive text-sm">{error}</p>
+			{/if}
+			<Dialog.Footer>
+				<Button type="button" variant="outline" onclick={() => onOpenChange(false)}>{lang.cancel}</Button>
+				<Button type="submit" disabled={loading}>{lang.invite.sendInvite}</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>

package/dist/admin/client/users/invite-user-dialog.svelte.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onInvited: () => void;
+};
+declare const InviteUserDialog: import("svelte").Component<Props, {}, "open">;
+type InviteUserDialog = ReturnType<typeof InviteUserDialog>;
+export default InviteUserDialog;