includio-cms 0.25.0 → 0.26.0

package/dist/admin/client/form/form-submissions.svelte

@@ -3,34 +3,41 @@
 	import type { FormConfig, FormSubmission } from '../../../types/forms.js';
 	import type { ColumnDef, RowSelectionState, SortingState, Table } from '@tanstack/table-core';
 	import SubmissionLink from './submission-link.svelte';
-	import SubmissionStatusBadge from './submission-status-badge.svelte';
 	import DataTable from '../collection/data-table.svelte';
 	import TablePagination from '../collection/table-pagination.svelte';
+	import TableToolbar from '../collection/table-toolbar.svelte';
+	import StatusBadge from '../collection/status-badge.svelte';
+	import StateDisplay from '../collection/state-display.svelte';
+	import BulkActionsBar from '../collection/bulk-actions-bar.svelte';
+	import PageHeader from '../../components/layout/page-header.svelte';
 	import { getLocalizedLabel } from '../../utils/collectionLabel.js';
 	import { useInterfaceLanguage } from '../../state/interface-language.svelte.js';
 	import type { InterfaceLanguage } from '../../../types/languages.js';
-	import { formatAbsoluteDate as formatAbsoluteDateUtil } from '../../utils/formatDate.js';
+	import { formatDateTime } from '../../utils/formatters.js';
 	import Checkbox from '../../../components/ui/checkbox/checkbox.svelte';
 	import { getRemotes } from '../../context/remotes.js';
 	import { invalidateAll } from '$app/navigation';
-	import Search from '@tabler/icons-svelte/icons/search';
-	import FilterIcon from '@tabler/icons-svelte/icons/filter';
 	import Download from '@tabler/icons-svelte/icons/download';
 	import ChevronDown from '@tabler/icons-svelte/icons/chevron-down';
 	import FileSpreadsheet from '@tabler/icons-svelte/icons/file-spreadsheet';
 	import FileText from '@tabler/icons-svelte/icons/file-text';
-	import Trash from '@tabler/icons-svelte/icons/trash';
 	import Eye from '@tabler/icons-svelte/icons/eye';
 	import EyeOff from '@tabler/icons-svelte/icons/eye-off';
-	import X from '@tabler/icons-svelte/icons/x';
-	import ClipboardList from '@tabler/icons-svelte/icons/clipboard-list';
-	import Input from '../../../components/ui/input/input.svelte';
 	import Button from '../../../components/ui/button/button.svelte';
 	import * as Popover from '../../../components/ui/popover/index.js';
+	import ConfirmationDialog from '../../components/dialogs/confirmation-dialog.svelte';
 
 	const interfaceLanguage = useInterfaceLanguage();
 	const remotes = getRemotes();
 
+	function pluralPL(n: number, singular: string, few: string, many: string): string {
+		const mod10 = n % 10;
+		const mod100 = n % 100;
+		if (n === 1) return singular;
+		if (mod10 >= 2 && mod10 <= 4 && (mod100 < 10 || mod100 >= 20)) return few;
+		return many;
+	}
+
 	type ReadFilter = 'all' | 'unread' | 'read';
 
 	const lang: Record<
@@ -38,16 +45,13 @@
 		{
 			createdAt: string;
 			status: string;
-			new: string;
 			read: string;
-			submissions: string;
 			unread: string;
-			unreadCount: string;
 			searchPlaceholder: string;
-			all: string;
 			filterAll: string;
 			filterUnread: string;
 			filterRead: string;
+			filterLabel: string;
 			export: string;
 			exportCsv: string;
 			exportJson: string;
@@ -55,28 +59,27 @@
 			noSubmissionsDesc: string;
 			noResults: string;
 			noResultsDesc: string;
-			bulkSelected: (n: number) => string;
+			unreadDescription: (n: number) => string;
 			bulkMarkRead: string;
 			bulkMarkUnread: string;
 			bulkExport: string;
-			bulkDelete: string;
-			confirmBulkDelete: (n: number) => string;
+			confirmBulkDeleteTitle: (n: number) => string;
+			confirmBulkDeleteDescription: string;
 			itemLabel: string;
+			loadingMessage: string;
+			errorMessage: string;
 		}
 	> = {
 		pl: {
 			createdAt: 'Wysłano',
 			status: 'Status',
-			new: 'Nowe',
 			read: 'Przeczytane',
-			submissions: 'zgłoszeń',
-			unread: 'nieprzeczytanych',
-			unreadCount: 'nieprzeczytanych',
+			unread: 'Nieprzeczytane',
 			searchPlaceholder: 'Szukaj zgłoszeń…',
-			all: 'Wszystkie',
 			filterAll: 'Wszystkie',
 			filterUnread: 'Nieprzeczytane',
 			filterRead: 'Przeczytane',
+			filterLabel: 'Status',
 			export: 'Eksportuj',
 			exportCsv: 'Eksportuj CSV',
 			exportJson: 'Eksportuj JSON',
@@ -84,27 +87,26 @@
 			noSubmissionsDesc: 'Nie otrzymano jeszcze żadnych zgłoszeń z tego formularza.',
 			noResults: 'Brak wyników',
 			noResultsDesc: 'Spróbuj zmienić kryteria wyszukiwania.',
-			bulkSelected: (n) => `${n} zaznaczonych`,
+			unreadDescription: (n) => `${n} nieprzeczytanych`,
 			bulkMarkRead: 'Oznacz przeczytane',
 			bulkMarkUnread: 'Oznacz nieprzeczytane',
 			bulkExport: 'Eksportuj',
-			bulkDelete: 'Usuń',
-			confirmBulkDelete: (n) => `Czy na pewno chcesz usunąć ${n} zgłoszeń?`,
-			itemLabel: 'zgłoszeń'
+			confirmBulkDeleteTitle: (n: number) => `Usunąć ${n} ${pluralPL(n, 'zgłoszenie', 'zgłoszenia', 'zgłoszeń')}?`,
+			confirmBulkDeleteDescription: 'Tej akcji nie cofniesz — zgłoszenia znikną z bazy.',
+			itemLabel: 'zgłoszeń',
+			loadingMessage: 'Ładowanie zgłoszeń…',
+			errorMessage: 'Nie udało się wczytać zgłoszeń.'
 		},
 		en: {
 			createdAt: 'Sent',
 			status: 'Status',
-			new: 'New',
 			read: 'Read',
-			submissions: 'submissions',
-			unread: 'unread',
-			unreadCount: 'unread',
+			unread: 'Unread',
 			searchPlaceholder: 'Search submissions…',
-			all: 'All',
 			filterAll: 'All',
 			filterUnread: 'Unread',
 			filterRead: 'Read',
+			filterLabel: 'Status',
 			export: 'Export',
 			exportCsv: 'Export CSV',
 			exportJson: 'Export JSON',
@@ -112,13 +114,16 @@
 			noSubmissionsDesc: 'No submissions have been received from this form yet.',
 			noResults: 'No results',
 			noResultsDesc: 'Try adjusting your search criteria.',
-			bulkSelected: (n) => `${n} selected`,
+			unreadDescription: (n) => `${n} unread`,
 			bulkMarkRead: 'Mark read',
 			bulkMarkUnread: 'Mark unread',
 			bulkExport: 'Export',
-			bulkDelete: 'Delete',
-			confirmBulkDelete: (n) => `Are you sure you want to delete ${n} submissions?`,
-			itemLabel: 'submissions'
+			confirmBulkDeleteTitle: (n: number) =>
+				`Delete ${n} ${n === 1 ? 'submission' : 'submissions'}?`,
+			confirmBulkDeleteDescription: 'This cannot be undone — submissions will be removed from the database.',
+			itemLabel: 'submissions',
+			loadingMessage: 'Loading submissions…',
+			errorMessage: 'Failed to load submissions.'
 		}
 	};
 
@@ -130,9 +135,16 @@
 	type Props = {
 		submissions: FormSubmission[];
 		formConfig: FormConfig;
+		data?: FormSubmission[];
+		state?: 'loading' | 'error' | 'ok';
 	};
 
-	let { submissions, formConfig }: Props = $props();
+	let { submissions, formConfig, data: injectedData, state: injectedState }: Props = $props();
+
+	const effectiveSubmissions = $derived(injectedData ?? submissions);
+	const tableViewState = $derived<'idle' | 'loading' | 'error'>(
+		injectedState === 'loading' ? 'loading' : injectedState === 'error' ? 'error' : 'idle'
+	);
 
 	let searchQuery = $state('');
 	let readFilter = $state<ReadFilter>('all');
@@ -141,7 +153,6 @@
 	let pageSize = $state(20);
 	let tableInstance = $state<Table<SubmissionRow> | null>(null);
 	let exportDropdownOpen = $state(false);
-	let filterPopoverOpen = $state(false);
 
 	const t = $derived(lang[interfaceLanguage.current]);
 	const formLabel = $derived(
@@ -149,8 +160,8 @@
 	);
 
 	const stats = $derived({
-		total: submissions.length,
-		unreadCount: submissions.filter((s) => !s.read).length
+		total: effectiveSubmissions.length,
+		unreadCount: effectiveSubmissions.filter((s) => !s.read).length
 	});
 
 	const selectedCount = $derived(
@@ -167,7 +178,7 @@
 	);
 
 	const filteredData = $derived.by(() => {
-		let result: SubmissionRow[] = submissions.map((submission) => ({
+		let result: SubmissionRow[] = effectiveSubmissions.map((submission) => ({
 			...submission,
 			...submission.data,
 			url: `/admin/form-submissions/${submission.id}`
@@ -194,14 +205,29 @@
 	const totalItems = $derived(filteredData.length);
 	const pageCount = $derived(Math.ceil(totalItems / pageSize));
 
-	const activeFilterLabel = $derived(
-		readFilter === 'all' ? t.filterAll : readFilter === 'unread' ? t.filterUnread : t.filterRead
+	const dataFilters = $derived([
+		{
+			slug: 'read',
+			label: t.filterLabel,
+			options: [
+				{ value: 'all', label: t.filterAll },
+				{ value: 'unread', label: t.filterUnread },
+				{ value: 'read', label: t.filterRead }
+			]
+		}
+	]);
+
+	const activeDataFilters = $derived({
+		read: readFilter === 'all' ? null : readFilter
+	});
+
+	const headerDescription = $derived(
+		stats.unreadCount > 0 ? t.unreadDescription(stats.unreadCount) : undefined
 	);
 
 	const columns = $derived.by(() => {
 		const cols: ColumnDef<SubmissionRow>[] = [];
 
-		// Checkbox column
 		cols.push({
 			id: 'select',
 			header: ({ table }) =>
@@ -220,22 +246,20 @@
 			enableHiding: false
 		});
 
-		// Read dot column
 		cols.push({
-			id: 'readDot',
-			header: '',
-			cell: (info) => {
-				return renderComponent(SubmissionStatusBadge, {
-					isRead: info.row.original.read,
-					variant: 'dot'
-				});
-			},
+			id: 'status',
+			header: t.status,
+			cell: (info) =>
+				renderComponent(StatusBadge, {
+					variant: 'boolean',
+					active: info.row.original.read,
+					activeLabel: t.read,
+					inactiveLabel: t.unread
+				}),
 			enableSorting: false,
-			enableHiding: false,
-			size: 32
+			size: 130
 		});
 
-		// Dynamic field columns
 		const firstShowField = formConfig.fields.find((f) => f.showInDataTable);
 		formConfig.fields.forEach((field) => {
 			if (!field.showInDataTable) return;
@@ -271,7 +295,6 @@
 			cols.push(col);
 		});
 
-		// Message preview column (find textarea field not in showInDataTable)
 		const messageField = formConfig.fields.find(
 			(f) => f.type === 'textarea' && !f.showInDataTable
 		);
@@ -292,13 +315,12 @@
 			});
 		}
 
-		// Date column
 		cols.push({
 			accessorKey: 'createdAt',
 			header: t.createdAt,
 			cell: (info) => {
 				const date = new Date(info.row.original.createdAt);
-				return formatAbsoluteDateUtil(date, interfaceLanguage.current);
+				return formatDateTime(date, interfaceLanguage.current);
 			}
 		});
 
@@ -318,7 +340,7 @@
 	}
 
 	async function handleExportJson() {
-		const blob = new Blob([JSON.stringify(submissions, null, 2)], {
+		const blob = new Blob([JSON.stringify(effectiveSubmissions, null, 2)], {
 			type: 'application/json'
 		});
 		const url = URL.createObjectURL(blob);
@@ -346,94 +368,29 @@
 		invalidateAll();
 	}
 
-	async function handleBulkDelete() {
+	let confirmBulkDeleteOpen = $state(false);
+	let bulkDeleting = $state(false);
+
+	function handleBulkDelete() {
 		if (selectedIds.length === 0) return;
-		if (!confirm(t.confirmBulkDelete(selectedIds.length))) return;
-		await remotes.deleteFormSubmissions(selectedIds);
-		rowSelection = {};
-		invalidateAll();
+		confirmBulkDeleteOpen = true;
 	}
 
+	async function performBulkDelete() {
+		bulkDeleting = true;
+		try {
+			await remotes.deleteFormSubmissions(selectedIds);
+			rowSelection = {};
+			invalidateAll();
+		} finally {
+			bulkDeleting = false;
+		}
+	}
 </script>
 
 <div class="space-y-5">
-	<!-- Header -->
-	<div>
-		<div class="mb-1 flex flex-wrap items-center gap-3">
-			<h1 class="text-2xl font-bold">{formLabel}</h1>
-			<span
-				class="bg-lavender-lighter text-primary inline-flex h-6 items-center rounded-full px-2.5 text-xs font-bold"
-				aria-label="{stats.total} {t.submissions}"
-			>
-				{stats.total} {t.submissions}
-			</span>
-			{#if stats.unreadCount > 0}
-				<span
-					class="inline-flex h-6 items-center rounded-full bg-amber-50 px-2.5 text-xs font-semibold text-amber-600"
-					aria-label="{stats.unreadCount} {t.unreadCount}"
-				>
-					{stats.unreadCount} {t.unreadCount}
-				</span>
-			{/if}
-		</div>
-
-		<!-- Toolbar -->
-		<div class="mt-4 flex flex-wrap items-center gap-2.5">
-			<div class="relative min-w-[240px] flex-1">
-				<Search
-					class="text-muted-foreground pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2"
-				/>
-				<Input
-					type="search"
-					placeholder={t.searchPlaceholder}
-					class="border-border bg-white pl-9"
-					value={searchQuery}
-					oninput={(e) => (searchQuery = e.currentTarget.value)}
-					aria-label={t.searchPlaceholder}
-				/>
-			</div>
-
-			<Popover.Root bind:open={filterPopoverOpen}>
-				<Popover.Trigger>
-					{#snippet child({ props })}
-						<Button
-							{...props}
-							variant="outline"
-							size="sm"
-							class="gap-1.5 {readFilter !== 'all'
-								? 'border-primary/30 bg-lavender-lighter text-primary'
-								: ''}"
-						>
-							<FilterIcon class="size-3.5" />
-							{activeFilterLabel}
-						</Button>
-					{/snippet}
-				</Popover.Trigger>
-				<Popover.Content class="w-40 p-1" align="start">
-					{#each ['all', 'unread', 'read'] as filter}
-						<button
-							class="hover:bg-accent flex w-full items-center rounded-md px-2.5 py-1.5 text-sm transition-colors {readFilter ===
-							filter
-								? 'bg-accent text-accent-foreground font-medium'
-								: 'text-foreground'}"
-							onclick={() => {
-								readFilter = filter as ReadFilter;
-								filterPopoverOpen = false;
-							}}
-						>
-							{filter === 'all'
-								? t.filterAll
-								: filter === 'unread'
-									? t.filterUnread
-									: t.filterRead}
-						</button>
-					{/each}
-				</Popover.Content>
-			</Popover.Root>
-
-			<div class="flex-1"></div>
-
-			<!-- Export dropdown -->
+	<PageHeader title={formLabel} count={stats.total} description={headerDescription}>
+		{#snippet secondaryActions()}
 			<Popover.Root bind:open={exportDropdownOpen}>
 				<Popover.Trigger>
 					{#snippet child({ props })}
@@ -461,24 +418,30 @@
 					</button>
 				</Popover.Content>
 			</Popover.Root>
-		</div>
-	</div>
-
-	<!-- Table -->
-	{#if submissions.length === 0}
-		<!-- Empty state: no submissions at all -->
-		<div class="flex flex-col items-center justify-center rounded-2xl border bg-card px-10 py-20 text-center">
-			<div
-				class="bg-surface mb-5 flex size-[72px] items-center justify-center rounded-xl"
-			>
-				<ClipboardList class="text-muted-foreground size-8" />
-			</div>
-			<h2 class="mb-1.5 text-lg font-bold">{t.noSubmissions}</h2>
-			<p class="text-muted-foreground max-w-[360px] text-sm leading-relaxed">
-				{t.noSubmissionsDesc}
-			</p>
-		</div>
+		{/snippet}
+	</PageHeader>
+
+	{#if tableViewState === 'error'}
+		<StateDisplay kind="error" title={t.errorMessage} />
+	{:else if tableViewState === 'loading'}
+		<StateDisplay kind="loading" title={t.loadingMessage} />
+	{:else if effectiveSubmissions.length === 0}
+		<StateDisplay kind="empty" title={t.noSubmissions} description={t.noSubmissionsDesc} />
 	{:else}
+		<TableToolbar
+			{searchQuery}
+			searchPlaceholder={t.searchPlaceholder}
+			searchLabel={t.searchPlaceholder}
+			onSearchChange={(q) => (searchQuery = q)}
+			hideStatusFilter
+			hideViewToggle
+			{dataFilters}
+			{activeDataFilters}
+			onDataFilterChange={(_slug, value) => {
+				readFilter = (value as ReadFilter | null) ?? 'all';
+			}}
+		/>
+
 		<div class="overflow-hidden rounded-xl border bg-card shadow-sm">
 			<DataTable
 				data={filteredData}
@@ -493,9 +456,8 @@
 				onRowSelectionChange={(s) => (rowSelection = s)}
 				pagination={{ pageIndex: 0, pageSize }}
 				tableRef={(t) => (tableInstance = t)}
-				emptyMessage={searchQuery || readFilter !== 'all'
-					? t.noResults
-					: t.noSubmissions}
+				emptyTitle={searchQuery || readFilter !== 'all' ? t.noResults : t.noSubmissions}
+				emptyDescription={searchQuery || readFilter !== 'all' ? t.noResultsDesc : t.noSubmissionsDesc}
 			/>
 
 			<TablePagination
@@ -514,59 +476,46 @@
 	{/if}
 </div>
 
-<!-- Bulk actions bar -->
-{#if selectedCount > 0}
-	<div
-		class="fixed bottom-6 left-1/2 z-50 flex -translate-x-1/2 items-center gap-3 rounded-xl bg-[#2E2558] px-5 py-2.5 text-white shadow-xl"
-		role="toolbar"
-		aria-label="Bulk actions"
-	>
-		<span class="text-sm font-bold whitespace-nowrap">{t.bulkSelected(selectedCount)}</span>
-		<div class="h-5 w-px bg-white/20"></div>
+<BulkActionsBar
+	{selectedCount}
+	onDelete={handleBulkDelete}
+	onClear={() => (rowSelection = {})}
+>
+	{#snippet actions()}
 		<Button
 			variant="ghost"
 			size="sm"
-			class="gap-1.5 border border-white/20 text-white hover:bg-white/10 hover:text-white"
+			class="border border-white/20 text-white hover:bg-white/10 hover:text-white"
 			onclick={handleBulkMarkRead}
 		>
-			<Eye class="size-3.5" />
+			<Eye class="mr-1.5 size-3.5" />
 			{t.bulkMarkRead}
 		</Button>
 		<Button
 			variant="ghost"
 			size="sm"
-			class="gap-1.5 border border-white/20 text-white hover:bg-white/10 hover:text-white"
+			class="border border-white/20 text-white hover:bg-white/10 hover:text-white"
 			onclick={handleBulkMarkUnread}
 		>
-			<EyeOff class="size-3.5" />
+			<EyeOff class="mr-1.5 size-3.5" />
 			{t.bulkMarkUnread}
 		</Button>
 		<Button
 			variant="ghost"
 			size="sm"
-			class="gap-1.5 border border-white/20 text-white hover:bg-white/10 hover:text-white"
+			class="border border-white/20 text-white hover:bg-white/10 hover:text-white"
 			onclick={handleExportCsv}
 		>
-			<Download class="size-3.5" />
+			<Download class="mr-1.5 size-3.5" />
 			{t.bulkExport}
 		</Button>
-		<Button
-			variant="ghost"
-			size="sm"
-			class="gap-1.5 border border-red-400/50 text-white hover:bg-red-500/20 hover:text-white"
-			onclick={handleBulkDelete}
-		>
-			<Trash class="size-3.5" />
-			{t.bulkDelete}
-		</Button>
-		<Button
-			variant="ghost"
-			size="icon"
-			class="ml-1 size-7 text-white/60 hover:bg-white/10 hover:text-white"
-			onclick={() => (rowSelection = {})}
-		>
-			<X class="size-3.5" />
-		</Button>
-	</div>
-{/if}
-
+	{/snippet}
+</BulkActionsBar>
+
+<ConfirmationDialog
+	bind:open={confirmBulkDeleteOpen}
+	title={t.confirmBulkDeleteTitle(selectedIds.length)}
+	description={t.confirmBulkDeleteDescription}
+	loading={bulkDeleting}
+	onConfirm={performBulkDelete}
+/>

package/dist/admin/client/form/form-submissions.svelte.d.ts

@@ -2,6 +2,8 @@ import type { FormConfig, FormSubmission } from '../../../types/forms.js';
 type Props = {
     submissions: FormSubmission[];
     formConfig: FormConfig;
+    data?: FormSubmission[];
+    state?: 'loading' | 'error' | 'ok';
 };
 declare const FormSubmissions: import("svelte").Component<Props, {}, "">;
 type FormSubmissions = ReturnType<typeof FormSubmissions>;

package/dist/admin/client/login/lang.d.ts

@@ -12,6 +12,8 @@ export declare const loginLang: Record<string, {
         form_label: string;
         login_error: string;
         login_success: string;
+        email_invalid: string;
+        password_too_short: string;
     };
     forgot: {
         heading: string;
@@ -37,5 +39,6 @@ export declare const loginLang: Record<string, {
         passwordHint: string;
         passwordMinLength: string;
         passwordRequirements: string;
+        generatePassword: string;
     };
 }>;

package/dist/admin/client/login/lang.js

@@ -12,7 +12,9 @@ export const loginLang = {
             skip_to_content: 'Przejdź do treści',
             form_label: 'Logowanie',
             login_error: 'Nieprawidłowy e-mail lub hasło. Spróbuj ponownie.',
-            login_success: 'Zalogowano pomyślnie'
+            login_success: 'Zalogowano pomyślnie',
+            email_invalid: 'Podaj poprawny adres e-mail',
+            password_too_short: 'Hasło jest za krótkie'
         },
         forgot: {
             heading: 'Przypomnij hasło',
@@ -37,7 +39,8 @@ export const loginLang = {
             form_label: 'Zmiana hasła',
             passwordHint: 'Min. 8 znaków, wielka litera, cyfra i znak specjalny',
             passwordMinLength: 'Hasło musi mieć min. 8 znaków',
-            passwordRequirements: 'Hasło musi zawierać wielką literę, cyfrę i znak specjalny'
+            passwordRequirements: 'Hasło musi zawierać wielką literę, cyfrę i znak specjalny',
+            generatePassword: 'Wygeneruj hasło'
         }
     },
     en: {
@@ -53,7 +56,9 @@ export const loginLang = {
             skip_to_content: 'Skip to content',
             form_label: 'Login',
             login_error: 'Invalid email or password. Please try again.',
-            login_success: 'Logged in successfully'
+            login_success: 'Logged in successfully',
+            email_invalid: 'Enter a valid email address',
+            password_too_short: 'Password is too short'
         },
         forgot: {
             heading: 'Forgot password',
@@ -78,7 +83,8 @@ export const loginLang = {
             form_label: 'Reset password',
             passwordHint: 'Min. 8 characters, uppercase, number and special character',
             passwordMinLength: 'Password must be at least 8 characters',
-            passwordRequirements: 'Password must contain an uppercase letter, a number and a special character'
+            passwordRequirements: 'Password must contain an uppercase letter, a number and a special character',
+            generatePassword: 'Generate password'
         }
     }
 };

package/dist/admin/client/login/login-form.svelte

@@ -4,7 +4,7 @@
 
 	import { defaults, superForm } from 'sveltekit-superforms';
 	import { zod4, zod4Client } from 'sveltekit-superforms/adapters';
-	import { loginSchema, forgotPasswordSchema } from './schema.js';
+	import { createLoginSchema, createForgotPasswordSchema } from './schema.js';
 	import { toast } from 'svelte-sonner';
 	import { authClient } from '../../auth-client.js';
 	import { loginLang } from './lang.js';
@@ -17,6 +17,13 @@
 	const lang = () => loginLang[interfaceLanguage.current].login;
 	const forgotLang = () => loginLang[interfaceLanguage.current].forgot;
 
+	// superForm is initialized once — capture the current language for validation messages
+	const loginSchema = createLoginSchema({
+		emailInvalid: lang().email_invalid,
+		passwordTooShort: lang().password_too_short
+	});
+	const forgotPasswordSchema = createForgotPasswordSchema({ emailInvalid: lang().email_invalid });
+
 	let mode: 'login' | 'forgot' | 'forgot-sent' = $state('login');
 	let forgotLoading = $state(false);
 	let forgotError = $state('');