refactor: upgrade to Zod v4 (#623)

frontend/src/lib/stores/user-store.ts

@@ -1,12 +1,12 @@
-import { setLocale } from '$lib/paraglide/runtime';
 import type { User } from '$lib/types/user.type';
+import { setLocale } from '$lib/utils/locale.util';
 import { writable } from 'svelte/store';
 
 const userStore = writable<User | null>(null);
 
 const setUser = (user: User) => {
 	if (user.locale) {
-		setLocale(user.locale, { reload: false });
+		setLocale(user.locale, false);
 	}
 	userStore.set(user);
 };

frontend/src/lib/types/oidc.type.ts

@@ -10,7 +10,7 @@ export type OidcClientFederatedIdentity = {
 	issuer: string;
 	subject?: string;
 	audience?: string;
-	jwks?: string;
+	jwks: string | undefined;
 };
 
 export type OidcClientCredentials = {
@@ -18,7 +18,7 @@ export type OidcClientCredentials = {
 };
 
 export type OidcClient = OidcClientMetaData & {
-	callbackURLs: string[]; // No longer requires at least one URL
+	callbackURLs: string[];
 	logoutCallbackURLs: string[];
 	isPublic: boolean;
 	pkceEnabled: boolean;

frontend/src/lib/utils/form-util.ts

@@ -1,5 +1,5 @@
-import { writable } from 'svelte/store';
-import { z } from 'zod';
+import { get, writable } from 'svelte/store';
+import { z } from 'zod/v4';
 
 export type FormInput<T> = {
 	value: T;
@@ -13,6 +13,7 @@ type FormInputs<T> = {
 export function createForm<T extends z.ZodType<any, any>>(schema: T, initialValues: z.infer<T>) {
 	// Create a writable store for the inputs
 	const inputsStore = writable<FormInputs<z.infer<T>>>(initializeInputs(initialValues));
+	const errorsStore = writable<z.ZodError<any> | undefined>();
 
 	function initializeInputs(initialValues: z.infer<T>): FormInputs<z.infer<T>> {
 		const inputs: FormInputs<z.infer<T>> = {} as FormInputs<z.infer<T>>;
@@ -36,11 +37,12 @@ export function createForm<T extends z.ZodType<any, any>>(schema: T, initialValu
 			);
 
 			const result = schema.safeParse(values);
+			errorsStore.set(result.error);
 
 			if (!result.success) {
 				success = false;
 				for (const input of Object.keys(inputs)) {
-					const error = result.error.errors.find((e) => e.path[0] === input);
+					const error = result.error.issues.find((e) => e.path[0] === input);
 					if (error) {
 						inputs[input as keyof z.infer<T>].error = error.message;
 					} else {
@@ -58,15 +60,14 @@ export function createForm<T extends z.ZodType<any, any>>(schema: T, initialValu
 	}
 
 	function data() {
-		let values: z.infer<T> | null = null;
-		inputsStore.subscribe((inputs) => {
-			values = Object.fromEntries(
-				Object.entries(inputs).map(([key, input]) => {
-					input.value = trimValue(input.value);
-					return [key, input.value];
-				})
-			) as z.infer<T>;
-		})();
+		const inputs = get(inputsStore);
+
+		const values = Object.fromEntries(
+			Object.entries(inputs).map(([key, input]) => {
+				input.value = trimValue(input.value);
+				return [key, input.value];
+			})
+		) as z.infer<T>;
 
 		return values;
 	}
@@ -108,6 +109,7 @@ export function createForm<T extends z.ZodType<any, any>>(schema: T, initialValu
 	return {
 		schema,
 		inputs: inputsStore,
+		errors: errorsStore,
 		data,
 		validate,
 		setValue,

frontend/src/lib/utils/locale.util.ts

@@ -0,0 +1,10 @@
+import { setLocale as setParaglideLocale, type Locale } from '$lib/paraglide/runtime';
+import { z } from 'zod/v4';
+
+export function setLocale(locale: Locale, reload = true) {
+	import(`../../../node_modules/zod/dist/esm/v4/locales/${locale}.js`)
+		.then((zodLocale) => z.config(zodLocale.default()))
+		.finally(() => {
+			setParaglideLocale(locale, { reload });
+		});
+}

frontend/src/routes/settings/account/account-form.svelte

@@ -9,7 +9,7 @@
 	import { preventDefault } from '$lib/utils/event-util';
 	import { createForm } from '$lib/utils/form-util';
 	import { toast } from 'svelte-sonner';
-	import { z } from 'zod';
+	import { z } from 'zod/v4';
 
 	let {
 		callback,
@@ -35,7 +35,7 @@
 			.min(2)
 			.max(30)
 			.regex(/^[a-z0-9_@.-]+$/, m.username_can_only_contain()),
-		email: z.string().email(),
+		email: z.email(),
 		isAdmin: z.boolean()
 	});
 	type FormSchema = typeof formSchema;

frontend/src/routes/settings/account/locale-picker.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import * as Select from '$lib/components/ui/select';
-	import { getLocale, setLocale, type Locale } from '$lib/paraglide/runtime';
+	import { getLocale, type Locale } from '$lib/paraglide/runtime';
 	import UserService from '$lib/services/user-service';
 	import userStore from '$lib/stores/user-store';
+	import { setLocale } from '$lib/utils/locale.util';
 
 	const userService = new UserService();
 	const currentLocale = getLocale();

frontend/src/routes/settings/admin/api-keys/api-key-form.svelte

@@ -5,7 +5,7 @@
 	import type { ApiKeyCreate } from '$lib/types/api-key.type';
 	import { preventDefault } from '$lib/utils/event-util';
 	import { createForm } from '$lib/utils/form-util';
-	import { z } from 'zod';
+	import { z } from 'zod/v4';
 
 	let {
 		callback
@@ -28,8 +28,8 @@
 	const formSchema = z.object({
 		name: z
 			.string()
-			.min(3, m.name_must_be_at_least_3_characters())
-			.max(50, m.name_cannot_exceed_50_characters()),
+			.min(3)
+			.max(50),
 		description: z.string().default(''),
 		expiresAt: z.date().min(new Date(), m.expiration_date_must_be_in_the_future())
 	});

frontend/src/routes/settings/admin/application-configuration/forms/app-config-email-form.svelte

@@ -12,7 +12,7 @@
 	import { preventDefault } from '$lib/utils/event-util';
 	import { createForm } from '$lib/utils/form-util';
 	import { toast } from 'svelte-sonner';
-	import { z } from 'zod';
+	import { z } from 'zod/v4';
 
 	let {
 		callback,
@@ -36,7 +36,7 @@
 		smtpPort: z.number().min(1),
 		smtpUser: z.string(),
 		smtpPassword: z.string(),
-		smtpFrom: z.string().email(),
+		smtpFrom: z.email(),
 		smtpTls: z.enum(['none', 'starttls', 'tls']),
 		smtpSkipCertVerify: z.boolean(),
 		emailOneTimeAccessAsUnauthenticatedEnabled: z.boolean(),

frontend/src/routes/settings/admin/application-configuration/forms/app-config-general-form.svelte

@@ -8,7 +8,7 @@
 	import { preventDefault } from '$lib/utils/event-util';
 	import { createForm } from '$lib/utils/form-util';
 	import { toast } from 'svelte-sonner';
-	import { z } from 'zod';
+	import { z } from 'zod/v4';
 
 	let {
 		callback,

frontend/src/routes/settings/admin/application-configuration/forms/app-config-ldap-form.svelte

@@ -10,7 +10,7 @@
 	import { preventDefault } from '$lib/utils/event-util';
 	import { createForm } from '$lib/utils/form-util';
 	import { toast } from 'svelte-sonner';
-	import { z } from 'zod';
+	import { z } from 'zod/v4';
 
 	let {
 		callback,
@@ -48,7 +48,7 @@
 	};
 
 	const formSchema = z.object({
-		ldapUrl: z.string().url(),
+		ldapUrl: z.url(),
 		ldapBindDn: z.string().min(1),
 		ldapBindPassword: z.string().min(1),
 		ldapBase: z.string().min(1),

frontend/src/routes/settings/admin/oidc-clients/federated-identities-input.svelte

@@ -8,16 +8,18 @@
 	import { LucideMinus, LucidePlus } from '@lucide/svelte';
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
+	import { z } from 'zod/v4';
 
 	let {
 		client,
 		federatedIdentities = $bindable([]),
-		error = $bindable(null),
+		errors,
 		...restProps
 	}: HTMLAttributes<HTMLDivElement> & {
 		client?: OidcClient;
 		federatedIdentities: OidcClientFederatedIdentity[];
-		error?: string | null;
+		errors?: z.core.$ZodIssue[];
+
 		children?: Snippet;
 	} = $props();
 
@@ -47,6 +49,13 @@
 			[field]: value
 		};
 	}
+
+	function getFieldError(index: number, field: keyof OidcClientFederatedIdentity): string | null {
+		console.log(federatedIdentities)
+		if (!errors) return null;
+		const path = [index, field];
+		return errors?.filter((e) => e.path[0] == path[0] && e.path[1] == path[1])[0]?.message;
+	}
 </script>
 
 <div {...restProps}>
@@ -76,8 +85,11 @@
 								placeholder="https://example.com/"
 								value={identity.issuer}
 								oninput={(e) => updateFederatedIdentity(i, 'issuer', e.currentTarget.value)}
-								required
+								aria-invalid={!!getFieldError(i, 'issuer')}
 							/>
+							{#if getFieldError(i, 'issuer')}
+								<p class="text-destructive mt-1 text-xs">{getFieldError(i, 'issuer')}</p>
+							{/if}
 						</div>
 
 						<div>
@@ -87,7 +99,11 @@
 								placeholder="Defaults to the client ID: {client?.id}"
 								value={identity.subject || ''}
 								oninput={(e) => updateFederatedIdentity(i, 'subject', e.currentTarget.value)}
+								aria-invalid={!!getFieldError(i, 'subject')}
 							/>
+							{#if getFieldError(i, 'subject')}
+								<p class="text-destructive mt-1 text-xs">{getFieldError(i, 'subject')}</p>
+							{/if}
 						</div>
 
 						<div>
@@ -97,7 +113,11 @@
 								placeholder="Defaults to the Pocket ID URL"
 								value={identity.audience || ''}
 								oninput={(e) => updateFederatedIdentity(i, 'audience', e.currentTarget.value)}
+								aria-invalid={!!getFieldError(i, 'audience')}
 							/>
+							{#if getFieldError(i, 'audience')}
+								<p class="text-destructive mt-1 text-xs">{getFieldError(i, 'audience')}</p>
+							{/if}
 						</div>
 
 						<div>
@@ -107,7 +127,11 @@
 								placeholder="Defaults to {identity.issuer || '<issuer>'}/.well-known/jwks.json"
 								value={identity.jwks || ''}
 								oninput={(e) => updateFederatedIdentity(i, 'jwks', e.currentTarget.value)}
+								aria-invalid={!!getFieldError(i, 'jwks')}
 							/>
+							{#if getFieldError(i, 'jwks')}
+								<p class="text-destructive mt-1 text-xs">{getFieldError(i, 'jwks')}</p>
+							{/if}
 						</div>
 					</div>
 				</div>
@@ -115,10 +139,6 @@
 		</div>
 	</FormInput>
 
-	{#if error}
-		<p class="text-destructive mt-1 text-xs">{error}</p>
-	{/if}
-
 	<Button class="mt-3" variant="secondary" size="sm" onclick={addFederatedIdentity} type="button">
 		<LucidePlus class="mr-1 size-4" />
 		{federatedIdentities.length === 0

frontend/src/routes/settings/admin/oidc-clients/oidc-client-form.svelte

@@ -11,7 +11,7 @@
 	import { cn } from '$lib/utils/style';
 	import { LucideChevronDown } from '@lucide/svelte';
 	import { slide } from 'svelte/transition';
-	import { z } from 'zod';
+	import { z } from 'zod/v4';
 	import FederatedIdentitiesInput from './federated-identities-input.svelte';
 	import OidcCallbackUrlInput from './oidc-callback-url-input.svelte';
 
@@ -50,17 +50,17 @@
 		credentials: z.object({
 			federatedIdentities: z.array(
 				z.object({
-					issuer: z.string().url(),
+					issuer: z.url(),
 					subject: z.string().optional(),
 					audience: z.string().optional(),
-					jwks: z.string().url().optional().or(z.literal(''))
+					jwks: z.url().optional().or(z.literal(''))
 				})
 			)
 		})
 	});
 
 	type FormSchema = typeof formSchema;
-	const { inputs, ...form } = createForm<FormSchema>(formSchema, client);
+	const { inputs, errors, ...form } = createForm<FormSchema>(formSchema, client);
 
 	async function onSubmit() {
 		const data = form.validate();
@@ -91,6 +91,15 @@
 		logo = null;
 		logoDataURL = null;
 	}
+
+	function getFederatedIdentityErrors(errors: z.ZodError<any> | undefined) {
+		return errors?.issues
+			.filter((e) => e.path[0] == 'credentials' && e.path[1] == 'federatedIdentities')
+			.map((e) => {
+				e.path.splice(0, 2);
+				return e;
+			});
+	}
 </script>
 
 <form onsubmit={preventDefault(onSubmit)}>
@@ -159,7 +168,7 @@
 			<FederatedIdentitiesInput
 				client={existingClient}
 				bind:federatedIdentities={$inputs.credentials.value.federatedIdentities}
-				bind:error={$inputs.credentials.error}
+				errors={getFederatedIdentityErrors($errors)}
 			/>
 		</div>
 	{/if}

frontend/src/routes/settings/admin/user-groups/user-group-form.svelte

@@ -6,7 +6,7 @@
 	import type { UserGroupCreate } from '$lib/types/user-group.type';
 	import { preventDefault } from '$lib/utils/event-util';
 	import { createForm } from '$lib/utils/form-util';
-	import { z } from 'zod';
+	import { z } from 'zod/v4';
 
 	let {
 		callback,

frontend/src/routes/settings/admin/users/user-form.svelte

@@ -7,7 +7,7 @@
 	import type { User, UserCreate } from '$lib/types/user.type';
 	import { preventDefault } from '$lib/utils/event-util';
 	import { createForm } from '$lib/utils/form-util';
-	import { z } from 'zod';
+	import { z } from 'zod/v4';
 
 	let {
 		callback,
@@ -37,7 +37,7 @@
 			.min(2)
 			.max(30)
 			.regex(/^[a-z0-9_@.-]+$/, m.username_can_only_contain()),
-		email: z.string().email(),
+		email: z.email(),
 		isAdmin: z.boolean(),
 		disabled: z.boolean()
 	});