svletekit: fix forms

frontend/svelte-kit/src/routes/+layout.server.ts

@@ -1,7 +1,7 @@
 import type { User } from '$lib/models/user/user';
 import { makeRequest } from '$lib/server/apis/api';
 import { HttpRequest, isAdmin, removeAuth } from '$lib/server/utils/util';
-import { error, redirect, type NumericRange } from '@sveltejs/kit';
+import { error, redirect } from '@sveltejs/kit';
 import type { LayoutServerLoad } from './$types';
 
 export const load = (async ({ locals, cookies }) => {
@@ -19,7 +19,7 @@ export const load = (async ({ locals, cookies }) => {
       removeAuth(cookies, locals);
       redirect(302, '/');
     }
-    error(response.status as NumericRange<400, 599>, { message: response.error });
+    error(response.status, { message: response.error });
   }
 
   return { user: response as User, isAdmin: isAdmin(accessToken) };

frontend/svelte-kit/src/routes/admin/+page.server.ts

@@ -3,7 +3,7 @@ import { RoleName } from '$lib/models/user/role';
 import type { User } from '$lib/models/user/user';
 import { makeRequest } from '$lib/server/apis/api';
 import { HttpRequest } from '$lib/server/utils/util';
-import { error, type Cookies, type NumericRange } from '@sveltejs/kit';
+import { error, fail, type Cookies } from '@sveltejs/kit';
 import type { Actions, PageServerLoad } from './$types';
 
 export const load = (async ({ cookies, url }) => {
@@ -19,8 +19,7 @@ export const load = (async ({ cookies, url }) => {
     auth: cookies.get('accessToken'),
   });
 
-  if ('error' in response)
-    error(response.status as NumericRange<400, 599>, { message: response.error });
+  if ('error' in response) error(response.status, { message: response.error });
 
   return {
     users: response as Pageable<User>,
@@ -38,29 +37,28 @@ const makeAction = async (cookies: Cookies, url: URL, method: HttpRequest, body?
     body,
   });
 
-  if ('error' in response)
-    error(response.status as NumericRange<400, 599>, { message: response.error });
+  if ('error' in response) return fail(response.status, { error: response.error });
 };
 
 export const actions = {
   activate: async ({ cookies, url }) => {
-    await makeAction(cookies, url, HttpRequest.PATCH, JSON.stringify({ active: true }));
+    return await makeAction(cookies, url, HttpRequest.PATCH, JSON.stringify({ active: true }));
   },
   deactivate: async ({ cookies, url }) => {
-    await makeAction(cookies, url, HttpRequest.PATCH, JSON.stringify({ active: false }));
+    return await makeAction(cookies, url, HttpRequest.PATCH, JSON.stringify({ active: false }));
   },
   unlock: async ({ cookies, url }) => {
-    await makeAction(cookies, url, HttpRequest.PATCH, JSON.stringify({ lock: false }));
+    return await makeAction(cookies, url, HttpRequest.PATCH, JSON.stringify({ lock: false }));
   },
   lock: async ({ cookies, url }) => {
-    await makeAction(cookies, url, HttpRequest.PATCH, JSON.stringify({ lock: true }));
+    return await makeAction(cookies, url, HttpRequest.PATCH, JSON.stringify({ lock: true }));
   },
   delete: async ({ cookies, url }) => {
-    await makeAction(cookies, url, HttpRequest.DELETE);
+    return await makeAction(cookies, url, HttpRequest.DELETE);
   },
   roles: async ({ cookies, url, request }) => {
     const formData = Object.fromEntries(await request.formData());
-    await makeAction(
+    return await makeAction(
       cookies,
       url,
       HttpRequest.PATCH,

frontend/svelte-kit/src/routes/admin/+page.svelte

@@ -10,17 +10,18 @@
     Trash2Icon,
     XIcon,
   } from 'lucide-svelte';
-  import type { PageServerData } from './$types';
+  import type { ActionData, PageServerData } from './$types';
   import ActivateModal from './activate-modal.svelte';
   import DeleteModal from './delete-modal.svelte';
   import LockModal from './lock-modal.svelte';
   import RoleModal from './role-modal.svelte';
 
   interface Props {
     data: PageServerData;
+    form: ActionData;
   }
 
-  const { data }: Props = $props();
+  const { data, form }: Props = $props();
   let activateDialog: HTMLDialogElement = $state() as HTMLDialogElement;
   let lockDialog: HTMLDialogElement = $state() as HTMLDialogElement;
   let deleteDialog: HTMLDialogElement = $state() as HTMLDialogElement;
@@ -52,6 +53,9 @@
     <div class="card mx-auto w-auto bg-base-200 p-8 shadow-xl 2xl:w-2/3">
       <div class="flex flex-col gap-8">
         <h1 class="text-center text-3xl font-bold">{m.admin_users()}</h1>
+        {#if form?.error}
+          <p class="label-text text-center text-xl text-error">{form.error}</p>
+        {/if}
         <table class="table table-zebra">
           <thead>
             <tr>

frontend/svelte-kit/src/routes/auth/confirm-registration/+server.ts

@@ -1,6 +1,6 @@
 import { makeRequest } from '$lib/server/apis/api';
 import { HttpRequest } from '$lib/server/utils/util';
-import { error, redirect, type NumericRange } from '@sveltejs/kit';
+import { error, redirect } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 
 export const GET = (async ({ locals, url }) => {
@@ -13,8 +13,7 @@ export const GET = (async ({ locals, url }) => {
     body: JSON.stringify({ token }),
   });
 
-  if ('error' in response)
-    error(response.status as NumericRange<400, 599>, { message: response.error });
+  if ('error' in response) error(response.status, { message: response.error });
 
   redirect(302, '/auth/sign-in');
 }) satisfies RequestHandler;

frontend/svelte-kit/src/routes/auth/resend-confirmation-email/+server.ts

@@ -1,6 +1,6 @@
 import { makeRequest } from '$lib/server/apis/api';
 import { HttpRequest } from '$lib/server/utils/util';
-import { error, redirect, type NumericRange } from '@sveltejs/kit';
+import { error, redirect } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 
 export const GET = (async ({ locals, url }) => {
@@ -13,8 +13,7 @@ export const GET = (async ({ locals, url }) => {
     body: JSON.stringify({ usernameOrEmail }),
   });
 
-  if ('error' in response)
-    error(response.status as NumericRange<400, 599>, { message: response.error });
+  if ('error' in response) error(response.status, { message: response.error });
 
   redirect(302, '/auth/sign-in');
 }) satisfies RequestHandler;

frontend/svelte-kit/src/routes/auth/sign-out-from-all-devices/+server.ts

@@ -1,6 +1,6 @@
 import { makeRequest } from '$lib/server/apis/api';
 import { HttpRequest, removeAuth } from '$lib/server/utils/util';
-import { error, redirect, type NumericRange } from '@sveltejs/kit';
+import { error, redirect } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 
 export const GET = (async ({ locals, cookies }) => {
@@ -10,8 +10,7 @@ export const GET = (async ({ locals, cookies }) => {
     auth: cookies.get('accessToken'),
   });
 
-  if ('error' in response)
-    error(response.status as NumericRange<400, 599>, { message: response.error });
+  if ('error' in response) error(response.status, { message: response.error });
 
   removeAuth(cookies, locals);
   redirect(302, '/');

frontend/svelte-kit/src/routes/auth/sign-out/+server.ts

@@ -1,6 +1,6 @@
 import { makeRequest } from '$lib/server/apis/api';
 import { HttpRequest, removeAuth } from '$lib/server/utils/util';
-import { error, redirect, type NumericRange } from '@sveltejs/kit';
+import { error, redirect } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 
 export const GET = (async ({ locals, cookies }) => {
@@ -10,8 +10,7 @@ export const GET = (async ({ locals, cookies }) => {
     auth: cookies.get('accessToken'),
   });
 
-  if ('error' in response)
-    error(response.status as NumericRange<400, 599>, { message: response.error });
+  if ('error' in response) error(response.status, { message: response.error });
 
   removeAuth(cookies, locals);
   redirect(302, '/');

frontend/svelte-kit/src/routes/profile/settings/security/+page.server.ts

@@ -6,16 +6,18 @@ import {
   setAccessTokenCookie,
   setRefreshTokenCookie,
 } from '$lib/server/utils/util';
-import { error, fail, redirect, type Actions, type NumericRange } from '@sveltejs/kit';
+import { fail, redirect, type Actions } from '@sveltejs/kit';
 import { superValidate } from 'sveltekit-superforms';
 import { zod } from 'sveltekit-superforms/adapters';
 import type { PageServerLoad } from './$types';
 import { changePasswordSchema } from './change-password-schema';
+import { deleteSchema } from './delete-schema';
 
 export const load = (async ({ parent }) => {
-  const form = await superValidate(zod(changePasswordSchema));
+  const changePasswordForm = await superValidate(zod(changePasswordSchema));
+  const deleteForm = await superValidate(zod(deleteSchema));
   const { user } = await parent();
-  return { form, user };
+  return { changePasswordForm, deleteForm, user };
 }) satisfies PageServerLoad;
 
 export const actions = {
@@ -47,15 +49,16 @@ export const actions = {
     setAccessTokenCookie(cookies, accessToken);
     setRefreshTokenCookie(cookies, refreshToken);
   },
-  delete: async ({ cookies, locals }) => {
+  delete: async ({ request, cookies, locals }) => {
+    const form = await superValidate(request, zod(deleteSchema));
+
     const response = await makeRequest({
       method: HttpRequest.DELETE,
       path: '/profile',
       auth: cookies.get('accessToken'),
     });
 
-    if ('error' in response)
-      error(response.status as NumericRange<400, 599>, { message: response.error });
+    if ('error' in response) return apiErrors(response, form);
 
     removeAuth(cookies, locals);
     redirect(302, '/');

frontend/svelte-kit/src/routes/profile/settings/security/+page.svelte

@@ -6,16 +6,24 @@
   import { zodClient } from 'sveltekit-superforms/adapters';
   import type { PageServerData } from './$types';
   import { changePasswordSchema } from './change-password-schema';
+  import { deleteSchema } from './delete-schema';
 
   interface Props {
     data: PageServerData;
   }
 
   const { data }: Props = $props();
-  const superform = superForm(data.form, {
+
+  const changePasswordForm = superForm(data.changePasswordForm, {
     validators: zodClient(changePasswordSchema),
   });
-  const { errors, enhance } = superform;
+  const { errors: changePasswordErrors, enhance: changePasswordEnhance } = changePasswordForm;
+
+  const deleteForm = superForm(data.deleteForm, {
+    validators: zodClient(deleteSchema),
+  });
+  const { errors: deleteErrors, enhance: deleteEnhance } = deleteForm;
+
   let dialog: HTMLDialogElement = $state() as HTMLDialogElement;
 </script>
 
@@ -26,28 +34,28 @@
       class="flex flex-col gap-4"
       method="POST"
       action="?/changePassword&username={data.user?.username}"
-      use:enhance
+      use:changePasswordEnhance
       novalidate
     >
       <FormControl
-        {superform}
+        superform={changePasswordForm}
         field="currentPassword"
         type="password"
         label={m.profile_currentPassword()}
       />
       <FormControl
-        {superform}
+        superform={changePasswordForm}
         field="newPassword"
         type="password"
         label={m.profile_newPassword()}
       />
       <FormControl
-        {superform}
+        superform={changePasswordForm}
         field="confirmNewPassword"
         type="password"
         label={m.profile_confirmNewPassword()}
       />
-      <p class="label-text text-error">{$errors?._errors}</p>
+      <p class="label-text text-error">{$changePasswordErrors?._errors}</p>
       <button class="btn btn-primary">{m.profile_changePassword()}</button>
     </form>
     <div class="divider"></div>
@@ -64,6 +72,7 @@
     >
       {m.profile_delete()}
     </button>
+    <p class="label-text text-center text-error">{$deleteErrors?._errors}</p>
   </div>
 </div>
 
@@ -72,7 +81,7 @@
     <p class="py-4">{m.profile_deleteAccountConfirmation()}</p>
   {/snippet}
   {#snippet actions()}
-    <form method="POST" action="?/delete" use:enhance>
+    <form method="POST" action="?/delete" use:deleteEnhance>
       <button type="submit" class="btn text-error" onclick={() => dialog.close()}>
         {m.general_delete()}
       </button>

frontend/svelte-kit/src/routes/profile/settings/security/delete-schema.ts

@@ -0,0 +1,3 @@
+import { z } from 'zod';
+
+export const deleteSchema = z.object({});

frontend/svelte-kit/src/routes/user/[name]/+page.server.ts

@@ -1,7 +1,7 @@
 import type { User } from '$lib/models/user/user';
 import { makeRequest } from '$lib/server/apis/api';
 import { HttpRequest } from '$lib/server/utils/util';
-import { error, type NumericRange } from '@sveltejs/kit';
+import { error } from '@sveltejs/kit';
 import type { PageServerLoad } from './$types';
 
 export const load = (async ({ params }) => {
@@ -10,8 +10,7 @@ export const load = (async ({ params }) => {
     path: `/users/username/${params.name}`,
   });
 
-  if ('error' in response)
-    error(response.status as NumericRange<400, 599>, { message: response.error });
+  if ('error' in response) error(response.status, { message: response.error });
 
   return { user: response as User };
 }) satisfies PageServerLoad;