fix: page scrolls up on form submisssion

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

@@ -0,0 +1,6 @@
+export function preventDefault(fn: (event: Event) => void): (event: Event) => void {
+	return function (this: unknown, event) {
+		event.preventDefault();
+		fn.call(this, event);
+	};
+}

frontend/src/routes/device/+page.svelte

@@ -11,6 +11,7 @@
 	import userStore from '$lib/stores/user-store';
 	import type { OidcDeviceCodeInfo } from '$lib/types/oidc.type';
 	import { getAxiosErrorMessage } from '$lib/utils/error-util';
+	import { preventDefault } from '$lib/utils/event-util';
 	import { startAuthentication } from '@simplewebauthn/browser';
 	import { onMount } from 'svelte';
 	import { slide } from 'svelte/transition';
@@ -105,7 +106,7 @@
 		</div>
 	{:else}
 		<p class="text-muted-foreground mt-2">{m.enter_code_displayed_in_previous_step()}</p>
-		<form id="device-code-form" onsubmit={authorize} class="w-full max-w-[450px]">
+		<form id="device-code-form" onsubmit={preventDefault(authorize)} class="w-full max-w-[450px]">
 			<Input id="user-code" class="mt-7" placeholder={m.code()} bind:value={userCode} type="text" />
 		</form>
 	{/if}

frontend/src/routes/login/alternative/code/+page.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
 	import SignInWrapper from '$lib/components/login-wrapper.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import Input from '$lib/components/ui/input/input.svelte';
+	import { m } from '$lib/paraglide/messages';
 	import UserService from '$lib/services/user-service';
 	import userStore from '$lib/stores/user-store.js';
 	import { getAxiosErrorMessage } from '$lib/utils/error-util';
+	import { preventDefault } from '$lib/utils/event-util';
 	import { onMount } from 'svelte';
 	import LoginLogoErrorSuccessIndicator from '../../components/login-logo-error-success-indicator.svelte';
-	import { page } from '$app/state';
-	import { m } from '$lib/paraglide/messages';
 
 	let { data } = $props();
 	let code = $state(data.code ?? '');
@@ -59,13 +60,7 @@
 	{:else}
 		<p class="text-muted-foreground mt-2">{m.enter_the_code_you_received_to_sign_in()}</p>
 	{/if}
-	<form
-		onsubmit={(e) => {
-			e.preventDefault();
-			authenticate();
-		}}
-		class="w-full max-w-[450px]"
-	>
+	<form onsubmit={preventDefault(authenticate)} class="w-full max-w-[450px]">
 		<Input id="Email" class="mt-7" placeholder={m.code()} bind:value={code} type="text" />
 		<div class="mt-8 flex justify-between gap-2">
 			<Button variant="secondary" class="flex-1" href={'/login/alternative' + page.url.search}

frontend/src/routes/login/alternative/email/+page.svelte

@@ -3,10 +3,11 @@
 	import SignInWrapper from '$lib/components/login-wrapper.svelte';
 	import { Button } from '$lib/components/ui/button';
 	import Input from '$lib/components/ui/input/input.svelte';
+	import { m } from '$lib/paraglide/messages';
 	import UserService from '$lib/services/user-service';
 	import { fade } from 'svelte/transition';
 	import LoginLogoErrorSuccessIndicator from '../../components/login-logo-error-success-indicator.svelte';
-	import { m } from '$lib/paraglide/messages';
+	import { preventDefault } from '$lib/utils/event-util';
 
 	const { data } = $props();
 
@@ -58,13 +59,7 @@
 			>
 		</div>
 	{:else}
-		<form
-			onsubmit={(e) => {
-				e.preventDefault();
-				requestEmail();
-			}}
-			class="w-full max-w-[450px]"
-		>
+		<form onsubmit={preventDefault(requestEmail)} class="w-full max-w-[450px]">
 			<p class="text-muted-foreground mt-2" in:fade>
 				{m.enter_your_email_address_to_receive_an_email_with_a_login_code()}
 			</p>

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

@@ -6,6 +6,7 @@
 	import UserService from '$lib/services/user-service';
 	import type { UserCreate } from '$lib/types/user.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
+	import { preventDefault } from '$lib/utils/event-util';
 	import { createForm } from '$lib/utils/form-util';
 	import { toast } from 'svelte-sonner';
 	import { z } from 'zod';
@@ -64,7 +65,7 @@
 	}
 </script>
 
-<form onsubmit={onSubmit} class="space-y-6">
+<form onsubmit={preventDefault(onSubmit)} class="space-y-6">
 	<!-- Profile Picture Section -->
 	<ProfilePictureSettings
 		{userId}

frontend/src/routes/settings/account/rename-passkey-modal.svelte

@@ -7,6 +7,7 @@
 	import WebAuthnService from '$lib/services/webauthn-service';
 	import type { Passkey } from '$lib/types/passkey.type';
 	import { axiosErrorToast } from '$lib/utils/error-util';
+	import { preventDefault } from '$lib/utils/event-util';
 	import { toast } from 'svelte-sonner';
 
 	let {
@@ -49,7 +50,7 @@
 			<Dialog.Title>{m.name_passkey()}</Dialog.Title>
 			<Dialog.Description>{m.name_your_passkey_to_easily_identify_it_later()}</Dialog.Description>
 		</Dialog.Header>
-		<form onsubmit={onSubmit}>
+		<form onsubmit={preventDefault(onSubmit)}>
 			<div class="grid items-center gap-4 sm:grid-cols-4">
 				<Label for="name" class="sm:text-right">{m.name()}</Label>
 				<Input id="name" bind:value={name} class="col-span-3" />

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

@@ -3,6 +3,7 @@
 	import { Button } from '$lib/components/ui/button';
 	import { m } from '$lib/paraglide/messages';
 	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';
 
@@ -52,7 +53,7 @@
 	}
 </script>
 
-<form onsubmit={onSubmit}>
+<form onsubmit={preventDefault(onSubmit)}>
 	<div class="grid grid-cols-1 items-start gap-5 md:grid-cols-2">
 		<FormInput
 			label={m.name()}

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

@@ -9,6 +9,7 @@
 	import AppConfigService from '$lib/services/app-config-service';
 	import appConfigStore from '$lib/stores/application-configuration-store';
 	import type { AllAppConfig } from '$lib/types/application-configuration';
+	import { preventDefault } from '$lib/utils/event-util';
 	import { createForm } from '$lib/utils/form-util';
 	import { toast } from 'svelte-sonner';
 	import { z } from 'zod';
@@ -94,7 +95,7 @@
 	}
 </script>
 
-<form onsubmit={onSubmit}>
+<form onsubmit={preventDefault(onSubmit)}>
 	<fieldset disabled={$appConfigStore.uiConfigDisabled}>
 		<h4 class="text-lg font-semibold">{m.smtp_configuration()}</h4>
 		<div class="mt-4 grid grid-cols-1 items-end gap-5 md:grid-cols-2">

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

@@ -5,6 +5,7 @@
 	import { m } from '$lib/paraglide/messages';
 	import appConfigStore from '$lib/stores/application-configuration-store';
 	import type { AllAppConfig } from '$lib/types/application-configuration';
+	import { preventDefault } from '$lib/utils/event-util';
 	import { createForm } from '$lib/utils/form-util';
 	import { toast } from 'svelte-sonner';
 	import { z } from 'zod';
@@ -45,7 +46,7 @@
 	}
 </script>
 
-<form onsubmit={onSubmit}>
+<form onsubmit={preventDefault(onSubmit)}>
 	<fieldset class="flex flex-col gap-5" disabled={$appConfigStore.uiConfigDisabled}>
 		<div class="flex flex-col gap-5">
 			<FormInput label={m.application_name()} bind:input={$inputs.appName} />

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

@@ -7,6 +7,7 @@
 	import appConfigStore from '$lib/stores/application-configuration-store';
 	import type { AllAppConfig } from '$lib/types/application-configuration';
 	import { axiosErrorToast } from '$lib/utils/error-util';
+	import { preventDefault } from '$lib/utils/event-util';
 	import { createForm } from '$lib/utils/form-util';
 	import { toast } from 'svelte-sonner';
 	import { z } from 'zod';
@@ -103,7 +104,7 @@
 	}
 </script>
 
-<form onsubmit={onSubmit}>
+<form onsubmit={preventDefault(onSubmit)}>
 	<h4 class="text-lg font-semibold">{m.client_configuration()}</h4>
 	<fieldset disabled={$appConfigStore.uiConfigDisabled}>
 		<div class="mt-4 grid grid-cols-1 items-start gap-5 md:grid-cols-2">

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

@@ -10,6 +10,7 @@
 		OidcClientCreate,
 		OidcClientCreateWithLogo
 	} from '$lib/types/oidc.type';
+	import { preventDefault } from '$lib/utils/event-util';
 	import { createForm } from '$lib/utils/form-util';
 	import { z } from 'zod';
 	import OidcCallbackUrlInput from './oidc-callback-url-input.svelte';
@@ -78,7 +79,7 @@
 	}
 </script>
 
-<form onsubmit={onSubmit}>
+<form onsubmit={preventDefault(onSubmit)}>
 	<div class="grid grid-cols-1 gap-x-3 gap-y-7 sm:flex-row md:grid-cols-2">
 		<FormInput label={m.name()} class="w-full" bind:input={$inputs.name} />
 		<div></div>

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

@@ -4,6 +4,7 @@
 	import { m } from '$lib/paraglide/messages';
 	import appConfigStore from '$lib/stores/application-configuration-store';
 	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';
 
@@ -56,7 +57,7 @@
 	}
 </script>
 
-<form onsubmit={onSubmit}>
+<form onsubmit={preventDefault(onSubmit)}>
 	<fieldset disabled={inputDisabled}>
 		<div class="flex flex-col gap-3 sm:flex-row">
 			<div class="w-full">

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

@@ -5,6 +5,7 @@
 	import { m } from '$lib/paraglide/messages';
 	import appConfigStore from '$lib/stores/application-configuration-store';
 	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';
 
@@ -54,7 +55,7 @@
 	}
 </script>
 
-<form onsubmit={onSubmit}>
+<form onsubmit={preventDefault(onSubmit)}>
 	<fieldset disabled={inputDisabled}>
 		<div class="grid grid-cols-1 items-start gap-5 md:grid-cols-2">
 			<FormInput label={m.first_name()} bind:input={$inputs.firstName} />