DISABLE SSR AND TRANSITION TO SPA

src/routes/+layout.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
   import "../app.css";
-
   import type { Snippet } from "svelte";
   import type { LayoutData } from "./$types";
   import { page } from "$app/stores";
-
   import {
     Button,
     MenuDrawerIcon,
@@ -29,6 +27,7 @@
     Drawer,
     getDrawerStore,
     Modal,
+    Toast,
     getModalStore,
     type DrawerSettings,
     Avatar,
@@ -36,9 +35,13 @@
     type DrawerStore,
     type ModalStore,
     type ModalComponent,
+    type ToastStore,
+    getToastStore,
   } from "@skeletonlabs/skeleton";
   import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floating-ui/dom";
-  import { enhance } from "$app/forms";
+  import { invalidateAll } from "$app/navigation";
+  import { get_error_toast } from "$lib/toast";
+  import { pb } from "$lib/pocketbase";
 
   let { data, children }: { data: LayoutData; children: Snippet } = $props();
 
@@ -57,6 +60,9 @@
     substitutionCard: { ref: SubstitutionCard },
   };
 
+  // Toast config
+  const toastStore: ToastStore = getToastStore();
+
   // Drawer config
   const drawerStore: DrawerStore = getDrawerStore();
   let drawerOpen: boolean = false;
@@ -125,12 +131,93 @@
 
   // Popups config
   storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
+
+  // Reactive state
+  let username_value: string = $state("");
+  let firstname_value: string = $state("");
+  let password_value: string = $state("");
+  let avatar_value: FileList | undefined = $state();
+
+  // Database actions
+  // TODO: Avatar compression
+  const login = async (): Promise<void> => {
+    try {
+      await pb.collection("users").authWithPassword(username_value, password_value);
+    } catch (error) {
+      toastStore.trigger(get_error_toast("" + error));
+    }
+    await invalidateAll();
+    drawerStore.close();
+    password_value = "";
+    firstname_value = data.user?.firstname ?? "";
+  };
+
+  const logout = async (): Promise<void> => {
+    pb.authStore.clear();
+    await invalidateAll();
+    drawerStore.close();
+    username_value = "";
+    firstname_value = "";
+    password_value = "";
+  };
+
+  const update_profile = (create?: boolean): (() => Promise<void>) => {
+    const handler = async (): Promise<void> => {
+      if (!username_value || username_value === "") {
+        toastStore.trigger(get_error_toast("Please enter a username!"));
+        return;
+      }
+      if (!firstname_value || firstname_value === "") {
+        toastStore.trigger(get_error_toast("Please enter your first name!"));
+        return;
+      }
+      if (!password_value || password_value === "") {
+        toastStore.trigger(get_error_toast("Please enter a password!"));
+        return;
+      }
+
+      try {
+        if (create) {
+          await pb.collection("users").create({
+            username: username_value,
+            firstname: firstname_value,
+            password: password_value,
+            passwordConfirm: password_value,
+            admin: false,
+          });
+
+          await login();
+          return;
+        } else {
+          if (!data.user?.id || data.user.id === "") {
+            toastStore.trigger(get_error_toast("Invalid user id!"));
+            return;
+          }
+
+          await pb.collection("users").update(data.user.id, {
+            username: username_value,
+            firstname: firstname_value,
+            avatar: avatar_value && avatar_value.length === 1 ? avatar_value[0] : undefined,
+          });
+
+          invalidateAll();
+          drawerStore.close();
+        }
+      } catch (error) {
+        toastStore.trigger(get_error_toast("" + error));
+      }
+    };
+
+    return handler;
+  };
 </script>
 
 <LoadingIndicator />
 
 <Modal components={modalRegistry} regionBackdrop="!overflow-y-scroll" />
 
+<Toast zIndex="z-[1000]" />
+
 <Drawer zIndex="z-30">
   <!-- Use p-3 because the drawer has a 5px overlap with the navbar -->
   {#if $drawerStore.id === "menu_drawer"}
@@ -181,39 +268,29 @@
     <!-- Login Drawer -->
     <div class="flex flex-col gap-2 p-2 pt-3">
       <h4 class="h4 select-none">Enter Username and Password</h4>
-      <form method="POST" class="contents" use:enhance>
-        <!-- Supply the pathname so the form can redirect to the current page. -->
-        <input type="hidden" name="redirect_url" value={$page.url.pathname} />
-        <Input name="username" placeholder="Username" autocomplete="username" required>
-          <UserIcon />
-        </Input>
-        <Input name="firstname" placeholder="First Name (leave empty for login)" autocomplete="off">
-          <NameIcon />
-        </Input>
-        <Input name="password" type="password" placeholder="Password" autocomplete="off" required>
-          <PasswordIcon />
-        </Input>
-        <div class="flex justify-end gap-2">
-          <Button
-            formaction="/profile?/login"
-            onclick={close_drawer}
-            color="tertiary"
-            submit
-            shadow
-          >
-            Login
-          </Button>
-          <Button
-            formaction="/profile?/create_profile"
-            onclick={close_drawer}
-            color="tertiary"
-            submit
-            shadow
-          >
-            Register
-          </Button>
-        </div>
-      </form>
+      <Input bind:value={username_value} placeholder="Username" autocomplete="username" required>
+        <UserIcon />
+      </Input>
+      <Input
+        bind:value={firstname_value}
+        placeholder="First Name (leave empty for login)"
+        autocomplete="off"
+      >
+        <NameIcon />
+      </Input>
+      <Input
+        bind:value={password_value}
+        type="password"
+        placeholder="Password"
+        autocomplete="off"
+        required
+      >
+        <PasswordIcon />
+      </Input>
+      <div class="flex justify-end gap-2">
+        <Button onclick={login} color="tertiary" shadow>Login</Button>
+        <Button onclick={update_profile(true)} color="tertiary" shadow>Register</Button>
+      </div>
     </div>
   {:else if $drawerStore.id === "profile_drawer" && data.user}
     <!-- Profile Drawer -->
@@ -221,56 +298,30 @@
     <!-- Profile Drawer -->
     <div class="flex flex-col gap-2 p-2 pt-3">
       <h4 class="h4 select-none">Edit Profile</h4>
-      <form method="POST" enctype="multipart/form-data" class="contents" use:enhance>
-        <!-- Supply the pathname so the form can redirect to the current page. -->
-        <input type="hidden" name="redirect_url" value={$page.url.pathname} />
-        <input type="hidden" name="id" value={data.user.id} />
-        <Input
-          name="username"
-          value={data.user.username}
-          maxlength={10}
-          placeholder="Username"
-          autocomplete="username"
-        >
-          <UserIcon />
-        </Input>
-        <Input
-          name="firstname"
-          value={data.user.firstname}
-          placeholder="First Name"
-          autocomplete="off"
-        >
-          <NameIcon />
-        </Input>
-        <FileDropzone
-          name="avatar"
-          onchange={get_avatar_preview_event_handler("user_avatar_preview")}
-        >
-          <svelte:fragment slot="message"
-            ><span class="font-bold">Upload Avatar</span></svelte:fragment
-          >
-        </FileDropzone>
-        <div class="flex justify-end gap-2">
-          <Button
-            formaction="/profile?/update_profile"
-            onclick={close_drawer}
-            color="secondary"
-            submit
-            shadow
-          >
-            Save Changes
-          </Button>
-          <Button
-            formaction="/profile?/logout"
-            onclick={close_drawer}
-            color="primary"
-            submit
-            shadow
-          >
-            Logout
-          </Button>
-        </div>
-      </form>
+      <Input
+        bind:value={username_value}
+        maxlength={10}
+        placeholder="Username"
+        autocomplete="username"
+      >
+        <UserIcon />
+      </Input>
+      <Input bind:value={firstname_value} placeholder="First Name" autocomplete="off">
+        <NameIcon />
+      </Input>
+      <FileDropzone
+        name="avatar"
+        bind:files={avatar_value}
+        onchange={get_avatar_preview_event_handler("user_avatar_preview")}
+      >
+        <svelte:fragment slot="message">
+          <span class="font-bold">Upload Avatar</span>
+        </svelte:fragment>
+      </FileDropzone>
+      <div class="flex justify-end gap-2">
+        <Button onclick={update_profile()} color="secondary" shadow>Save Changes</Button>
+        <Button onclick={logout} color="primary" shadow>Logout</Button>
+      </div>
     </div>
   {/if}
 </Drawer>

src/routes/+layout.ts

@@ -1,66 +1,69 @@
+import { pb, pbUser } from "$lib/pocketbase";
+
+// This makes the page client-side rendered
+export const ssr = false;
+
 import type { Driver, Graphic, Race, Substitution, Team } from "$lib/schema";
-import type { LayoutServerLoad } from "./$types";
+import type { LayoutLoad } from "./$types";
 
 // On each page load (every route), this function runs serverside.
 // The "locals.user" object is only available on the server,
 // since it's populated inside hooks.server.ts per request.
 // It will populate the "user" attribute of each page's "data" object,
 // so each page has access to the current user (or knows if no one is signed in).
-export const load: LayoutServerLoad = ({ locals }) => {
+export const load: LayoutLoad = () => {
   const fetch_graphics = async (): Promise<Graphic[]> => {
-    const graphics: Graphic[] = await locals.pb
-      .collection("graphics")
-      .getFullList({ fetch: fetch });
+    const graphics: Graphic[] = await pb.collection("graphics").getFullList({ fetch: fetch });
 
     graphics.map((graphic: Graphic) => {
-      graphic.file_url = locals.pb.files.getURL(graphic, graphic.file);
+      graphic.file_url = pb.files.getURL(graphic, graphic.file);
     });
 
     return graphics;
   };
 
   const fetch_teams = async (): Promise<Team[]> => {
-    const teams: Team[] = await locals.pb.collection("teams").getFullList({
+    const teams: Team[] = await pb.collection("teams").getFullList({
       sort: "+name",
       fetch: fetch,
     });
 
     teams.map((team: Team) => {
-      team.banner_url = locals.pb.files.getURL(team, team.banner);
-      team.logo_url = locals.pb.files.getURL(team, team.logo);
+      team.banner_url = pb.files.getURL(team, team.banner);
+      team.logo_url = pb.files.getURL(team, team.logo);
     });
 
     return teams;
   };
 
   const fetch_drivers = async (): Promise<Driver[]> => {
-    const drivers: Driver[] = await locals.pb.collection("drivers").getFullList({
+    const drivers: Driver[] = await pb.collection("drivers").getFullList({
       sort: "+code",
       fetch: fetch,
     });
 
     drivers.map((driver: Driver) => {
-      driver.headshot_url = locals.pb.files.getURL(driver, driver.headshot);
+      driver.headshot_url = pb.files.getURL(driver, driver.headshot);
     });
 
     return drivers;
   };
 
   const fetch_races = async (): Promise<Race[]> => {
-    const races: Race[] = await locals.pb.collection("races").getFullList({
+    const races: Race[] = await pb.collection("races").getFullList({
       sort: "+step",
       fetch: fetch,
     });
 
     races.map((race: Race) => {
-      race.pictogram_url = locals.pb.files.getURL(race, race.pictogram);
+      race.pictogram_url = pb.files.getURL(race, race.pictogram);
     });
 
     return races;
   };
 
   const fetch_substitutions = async (): Promise<Substitution[]> => {
-    const substitutions: Substitution[] = await locals.pb.collection("substitutions").getFullList({
+    const substitutions: Substitution[] = await pb.collection("substitutions").getFullList({
       expand: "race",
       fetch: fetch,
     });
@@ -75,8 +78,8 @@ export const load: LayoutServerLoad = ({ locals }) => {
 
   return {
     // User information
-    user: locals.user,
-    admin: locals.user?.admin ?? false,
+    user: pbUser,
+    admin: pbUser?.admin ?? false,
 
     // Return static data asynchronously
     graphics: fetch_graphics(),

src/routes/data/raceresults/+page.server.ts

@@ -1,55 +0,0 @@
-import {
-  form_data_clean,
-  form_data_ensure_keys,
-  form_data_get_and_remove_id,
-  form_data_remove,
-} from "$lib/form";
-import type { Driver, Graphic, Race, RaceResult } from "$lib/schema";
-import type { Actions, PageServerLoad } from "./$types";
-
-export const actions = {
-  create_raceresult: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    form_data_ensure_keys(data, ["race", "pxxs"]);
-    form_data_remove(data, ["pxxs_codes", "dnfs_codes"]);
-
-    await locals.pb.collection("raceresults").create(data);
-  },
-
-  update_raceresult: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    form_data_remove(data, ["pxxs_codes", "dnfs_codes"]);
-    const id: string = form_data_get_and_remove_id(data);
-
-    console.dir(data, { depth: null });
-
-    await locals.pb.collection("raceresults").update(id, data);
-  },
-
-  delete_raceresult: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    form_data_remove(data, ["pxxs_codes", "dnfs_codes"]);
-    const id: string = form_data_get_and_remove_id(data);
-
-    await locals.pb.collection("raceresults").delete(id);
-  },
-} as Actions;
-
-export const load: PageServerLoad = async ({ fetch, locals }) => {
-  // TODO: Duplicated code from racepicks/+page.server.ts
-  const fetch_raceresults = async (): Promise<RaceResult[]> => {
-    const raceresults: RaceResult[] = await locals.pb.collection("raceresultsdesc").getFullList();
-
-    return raceresults;
-  };
-
-  return {
-    results: await fetch_raceresults(),
-  };
-};

src/routes/data/raceresults/+page.ts

@@ -0,0 +1,18 @@
+import { pb } from "$lib/pocketbase";
+import type { RaceResult } from "$lib/schema";
+import type { PageLoad } from "../../$types";
+
+export const load: PageLoad = async ({ fetch }) => {
+  // TODO: Duplicated code from racepicks/+page.server.ts
+  const fetch_raceresults = async (): Promise<RaceResult[]> => {
+    const raceresults: RaceResult[] = await pb
+      .collection("raceresultsdesc")
+      .getFullList({ fetch: fetch });
+
+    return raceresults;
+  };
+
+  return {
+    results: await fetch_raceresults(),
+  };
+};

src/routes/data/season/drivers/+page.server.ts

@@ -1,59 +0,0 @@
-import { DRIVER_HEADSHOT_HEIGHT, DRIVER_HEADSHOT_WIDTH } from "$lib/config";
-import { form_data_clean, form_data_ensure_keys, form_data_get_and_remove_id } from "$lib/form";
-import { image_to_avif } from "$lib/server/image";
-import type { Actions } from "@sveltejs/kit";
-
-export const actions = {
-  create_driver: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    form_data_ensure_keys(data, ["firstname", "lastname", "code", "team", "headshot"]);
-
-    // The toggle switch will report "on" or nothing
-    data.set("active", data.has("active") ? "true" : "false");
-
-    // Compress headshot
-    const headshot_avif: Blob = await image_to_avif(
-      await (data.get("headshot") as File).arrayBuffer(),
-      DRIVER_HEADSHOT_WIDTH,
-      DRIVER_HEADSHOT_HEIGHT,
-    );
-
-    data.set("headshot", headshot_avif);
-
-    await locals.pb.collection("drivers").create(data);
-  },
-
-  update_driver: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    const id: string = form_data_get_and_remove_id(data);
-
-    // The toggle switch will report "on" or nothing
-    data.set("active", data.has("active") ? "true" : "false");
-
-    if (data.has("headshot")) {
-      // Compress headshot
-      const headshot_avif: Blob = await image_to_avif(
-        await (data.get("headshot") as File).arrayBuffer(),
-        DRIVER_HEADSHOT_WIDTH,
-        DRIVER_HEADSHOT_HEIGHT,
-      );
-
-      data.set("headshot", headshot_avif);
-    }
-
-    await locals.pb.collection("drivers").update(id, data);
-  },
-
-  delete_driver: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    const id: string = form_data_get_and_remove_id(data);
-
-    await locals.pb.collection("drivers").delete(id);
-  },
-} satisfies Actions;

src/routes/data/season/races/+page.server.ts

@@ -1,64 +0,0 @@
-import { RACE_PICTOGRAM_HEIGHT, RACE_PICTOGRAM_WIDTH } from "$lib/config";
-import {
-  form_data_clean,
-  form_data_ensure_keys,
-  form_data_fix_dates,
-  form_data_get_and_remove_id,
-} from "$lib/form";
-import { image_to_avif } from "$lib/server/image";
-import type { Actions } from "@sveltejs/kit";
-
-export const actions = {
-  create_race: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    form_data_ensure_keys(data, ["name", "step", "pictogram", "pxx", "qualidate", "racedate"]);
-    form_data_fix_dates(data, ["sprintqualidate", "sprintdate", "qualidate", "racedate"]);
-
-    // Compress pictogram
-    const pictogram_avif: Blob = await image_to_avif(
-      await (data.get("pictogram") as File).arrayBuffer(),
-      RACE_PICTOGRAM_WIDTH,
-      RACE_PICTOGRAM_HEIGHT,
-    );
-
-    data.set("pictogram", pictogram_avif);
-
-    await locals.pb.collection("races").create(data);
-  },
-
-  update_race: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    // Do not remove empty sprint dates so they can be cleared by updating the record
-    const data: FormData = form_data_clean(await request.formData(), [
-      "sprintqualidate",
-      "sprintdate",
-    ]);
-    form_data_fix_dates(data, ["sprintqualidate", "sprintdate", "qualidate", "racedate"]);
-    const id: string = form_data_get_and_remove_id(data);
-
-    if (data.has("pictogram")) {
-      // Compress pictogram
-      const pictogram_avif: Blob = await image_to_avif(
-        await (data.get("pictogram") as File).arrayBuffer(),
-        RACE_PICTOGRAM_WIDTH,
-        RACE_PICTOGRAM_HEIGHT,
-      );
-
-      data.set("pictogram", pictogram_avif);
-    }
-
-    await locals.pb.collection("races").update(id, data);
-  },
-
-  delete_race: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    const id: string = form_data_get_and_remove_id(data);
-
-    await locals.pb.collection("races").delete(id);
-  },
-} satisfies Actions;

src/routes/data/season/races/+page.svelte

@@ -26,6 +26,7 @@
     modalStore.trigger(modalSettings);
   };
 
+  // TODO: Displayed dates differ from actual dates by 1 hour
   const races_columns: TableColumn[] = $derived([
     {
       data_value_name: "name",

src/routes/data/season/substitutions/+page.server.ts

@@ -1,31 +0,0 @@
-import { form_data_clean, form_data_ensure_keys, form_data_get_and_remove_id } from "$lib/form";
-import type { Actions } from "@sveltejs/kit";
-
-export const actions = {
-  create_substitution: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    form_data_ensure_keys(data, ["substitute", "for", "race"]);
-
-    await locals.pb.collection("substitutions").create(data);
-  },
-
-  update_substitution: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    const id: string = form_data_get_and_remove_id(data);
-
-    await locals.pb.collection("substitutions").update(id, data);
-  },
-
-  delete_substitution: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    const id: string = form_data_get_and_remove_id(data);
-
-    await locals.pb.collection("substitutions").delete(id);
-  },
-} satisfies Actions;

src/routes/data/season/teams/+page.server.ts

@@ -1,74 +0,0 @@
-import type { Actions } from "./$types";
-import { form_data_clean, form_data_ensure_keys, form_data_get_and_remove_id } from "$lib/form";
-import { image_to_avif } from "$lib/server/image";
-import {
-  TEAM_BANNER_HEIGHT,
-  TEAM_BANNER_WIDTH,
-  TEAM_LOGO_HEIGHT,
-  TEAM_LOGO_WIDTH,
-} from "$lib/config";
-
-export const actions = {
-  create_team: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    form_data_ensure_keys(data, ["name", "banner", "logo", "color"]);
-
-    // Compress banner
-    const banner_avif: Blob = await image_to_avif(
-      await (data.get("banner") as File).arrayBuffer(),
-      TEAM_BANNER_WIDTH,
-      TEAM_BANNER_HEIGHT,
-    );
-    data.set("banner", banner_avif);
-
-    // Compress logo
-    const logo_avif: Blob = await image_to_avif(
-      await (data.get("logo") as File).arrayBuffer(),
-      TEAM_LOGO_WIDTH,
-      TEAM_LOGO_HEIGHT,
-    );
-    data.set("logo", logo_avif);
-
-    await locals.pb.collection("teams").create(data);
-  },
-
-  update_team: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    const id: string = form_data_get_and_remove_id(data);
-
-    if (data.has("banner")) {
-      // Compress banner
-      const banner_avif: Blob = await image_to_avif(
-        await (data.get("banner") as File).arrayBuffer(),
-        TEAM_BANNER_WIDTH,
-        TEAM_BANNER_HEIGHT,
-      );
-      data.set("banner", banner_avif);
-    }
-
-    if (data.has("logo")) {
-      // Compress logo
-      const logo_avif: Blob = await image_to_avif(
-        await (data.get("logo") as File).arrayBuffer(),
-        TEAM_LOGO_WIDTH,
-        TEAM_LOGO_HEIGHT,
-      );
-      data.set("logo", logo_avif);
-    }
-
-    await locals.pb.collection("teams").update(id, data);
-  },
-
-  delete_team: async ({ request, locals }) => {
-    if (!locals.admin) return { unauthorized: true };
-
-    const data: FormData = form_data_clean(await request.formData());
-    const id: string = form_data_get_and_remove_id(data);
-
-    await locals.pb.collection("teams").delete(id);
-  },
-} satisfies Actions;

src/routes/data/users/+page.server.ts

@@ -1,20 +0,0 @@
-import type { Graphic, User } from "$lib/schema";
-import type { PageServerLoad } from "./$types";
-
-export const load: PageServerLoad = async ({ fetch, locals }) => {
-  const fetch_users = async (): Promise<User[]> => {
-    const users: User[] = await locals.pb
-      .collection("users")
-      .getFullList({ fetch: fetch, sort: "+username" });
-
-    users.map((user: User) => {
-      user.avatar_url = locals.pb.files.getURL(user, user.avatar);
-    });
-
-    return users;
-  };
-
-  return {
-    users: await fetch_users(),
-  };
-};

src/routes/data/users/+page.ts

@@ -0,0 +1,21 @@
+import { pb } from "$lib/pocketbase";
+import type { User } from "$lib/schema";
+import type { PageLoad } from "../../$types";
+
+export const load: PageLoad = async ({ fetch }) => {
+  const fetch_users = async (): Promise<User[]> => {
+    const users: User[] = await pb
+      .collection("users")
+      .getFullList({ fetch: fetch, sort: "+username" });
+
+    users.map((user: User) => {
+      user.avatar_url = pb.files.getURL(user, user.avatar);
+    });
+
+    return users;
+  };
+
+  return {
+    users: await fetch_users(),
+  };
+};

src/routes/profile/+page.server.ts

@@ -1,89 +0,0 @@
-import { form_data_clean, form_data_ensure_keys, form_data_get_and_remove_id } from "$lib/form";
-import { error, redirect } from "@sveltejs/kit";
-import type { Actions } from "./$types";
-import { image_to_avif } from "$lib/server/image";
-import { AVATAR_HEIGHT, AVATAR_WIDTH } from "$lib/config";
-
-export const actions = {
-  create_profile: async ({ request, locals }): Promise<void> => {
-    const data: FormData = form_data_clean(await request.formData());
-    form_data_ensure_keys(data, ["username", "firstname", "password", "redirect_url"]);
-
-    // Confirm password lol
-    await locals.pb.collection("users").create({
-      username: data.get("username")?.toString(),
-      firstname: data.get("firstname")?.toString(),
-      password: data.get("password")?.toString(),
-      passwordConfirm: data.get("password")?.toString(),
-      admin: false,
-    });
-
-    // Directly login after registering
-    await locals.pb
-      .collection("users")
-      .authWithPassword(data.get("username")?.toString(), data.get("password")?.toString());
-
-    // The current page is sent with the form, redirect to that page
-    redirect(303, data.get("redirect_url")?.toString() ?? "/");
-  },
-
-  // TODO: PocketBase API rule: Only the active user should be able to modify itself
-  update_profile: async ({ request, locals }): Promise<void> => {
-    const data: FormData = form_data_clean(await request.formData());
-    form_data_ensure_keys(data, ["redirect_url"]);
-    const id: string = form_data_get_and_remove_id(data);
-
-    if (data.has("avatar")) {
-      // Compress image
-      const compressed: Blob = await image_to_avif(
-        await (data.get("avatar") as File).arrayBuffer(),
-        AVATAR_WIDTH,
-        AVATAR_HEIGHT,
-      );
-
-      // At most 20kB
-      if (compressed.size > 20000) {
-        error(400, "Avatar too large!");
-      }
-
-      data.set("avatar", compressed);
-    }
-
-    await locals.pb.collection("users").update(id, data);
-
-    redirect(303, data.get("redirect_url")?.toString() ?? "/");
-  },
-
-  login: async ({ request, locals }) => {
-    if (locals.user) {
-      error(400, "Already logged in!");
-    }
-
-    const data: FormData = form_data_clean(await request.formData());
-    form_data_ensure_keys(data, ["username", "password", "redirect_url"]);
-
-    try {
-      await locals.pb
-        .collection("users")
-        .authWithPassword(data.get("username")?.toString(), data.get("password")?.toString());
-    } catch (err) {
-      error(400, "Failed to login!");
-    }
-
-    redirect(303, data.get("redirect_url")?.toString() ?? "/");
-  },
-
-  logout: async ({ request, locals }) => {
-    if (!locals.user) {
-      error(400, "Not logged in!");
-    }
-
-    const data: FormData = form_data_clean(await request.formData());
-    form_data_ensure_keys(data, ["redirect_url"]);
-
-    locals.pb.authStore.clear();
-    locals.user = undefined;
-
-    redirect(303, data.get("redirect_url")?.toString() ?? "/");
-  },
-} satisfies Actions;

src/routes/racepicks/+page.server.ts

@@ -1,92 +0,0 @@
-import { form_data_clean, form_data_ensure_keys, form_data_get_and_remove_id } from "$lib/form";
-import type { CurrentPickedUser, Race, RacePick, RaceResult } from "$lib/schema";
-import type { Actions, PageServerLoad } from "./$types";
-
-export const actions = {
-  create_racepick: async ({ request, locals }) => {
-    const data: FormData = form_data_clean(await request.formData());
-    form_data_ensure_keys(data, ["user", "race", "pxx", "dnf"]);
-
-    if (locals.user?.id !== data.get("user")) return { unauthorized: true };
-
-    await locals.pb.collection("racepicks").create(data);
-  },
-
-  update_racepick: async ({ request, locals }) => {
-    const data: FormData = form_data_clean(await request.formData());
-    form_data_ensure_keys(data, ["user", "race"]);
-    const id: string = form_data_get_and_remove_id(data);
-
-    if (locals.user?.id !== data.get("user")) return { unauthorized: true };
-
-    await locals.pb.collection("racepicks").update(id, data);
-  },
-
-  delete_racepick: async ({ request, locals }) => {
-    const data: FormData = form_data_clean(await request.formData());
-    form_data_ensure_keys(data, ["user", "race"]);
-    const id: string = form_data_get_and_remove_id(data);
-
-    if (locals.user?.id !== data.get("user")) return { unauthorized: true };
-
-    await locals.pb.collection("racepicks").delete(id);
-  },
-} satisfies Actions;
-
-export const load: PageServerLoad = async ({ fetch, locals }) => {
-  const fetch_currentrace = async (): Promise<Race | null> => {
-    const currentrace: Race[] = await locals.pb.collection("currentrace").getFullList();
-
-    // The currentrace collection either has a single or no entries
-    if (currentrace.length == 0) return null;
-
-    currentrace[0].pictogram_url = await locals.pb.files.getURL(
-      currentrace[0],
-      currentrace[0].pictogram,
-    );
-
-    return currentrace[0];
-  };
-
-  const fetch_racepicks = async (): Promise<RacePick[]> => {
-    // Don't expand race/pxx/dnf since we already fetched those
-    const racepicks: RacePick[] = await locals.pb
-      .collection("racepicks")
-      .getFullList({ fetch: fetch, expand: "user" });
-
-    return racepicks;
-  };
-
-  const fetch_currentpickedusers = async (): Promise<CurrentPickedUser[]> => {
-    const currentpickedusers: CurrentPickedUser[] = await locals.pb
-      .collection("currentpickedusers")
-      .getFullList();
-
-    currentpickedusers.map((currentpickeduser: CurrentPickedUser) => {
-      if (currentpickeduser.avatar) {
-        currentpickeduser.avatar_url = locals.pb.files.getURL(
-          currentpickeduser,
-          currentpickeduser.avatar,
-        );
-      }
-    });
-
-    return currentpickedusers;
-  };
-
-  // TODO: Duplicated code from data/raceresults/+page.server.ts
-  const fetch_raceresults = async (): Promise<RaceResult[]> => {
-    // Don't expand races/pxxs/dnfs since we already fetched those
-    const raceresults: RaceResult[] = await locals.pb.collection("raceresultsdesc").getFullList();
-
-    return raceresults;
-  };
-
-  return {
-    racepicks: fetch_racepicks(),
-    currentpickedusers: fetch_currentpickedusers(),
-    raceresults: fetch_raceresults(),
-
-    currentrace: await fetch_currentrace(),
-  };
-};

src/routes/racepicks/+page.ts

@@ -0,0 +1,57 @@
+import { pb } from "$lib/pocketbase";
+import type { CurrentPickedUser, Race, RacePick, RaceResult } from "$lib/schema";
+import type { PageLoad } from "../$types";
+
+export const load: PageLoad = async ({ fetch }) => {
+  const fetch_currentrace = async (): Promise<Race | null> => {
+    const currentrace: Race[] = await pb.collection("currentrace").getFullList({ fetch: fetch });
+
+    // The currentrace collection either has a single or no entries
+    if (currentrace.length == 0) return null;
+
+    currentrace[0].pictogram_url = pb.files.getURL(currentrace[0], currentrace[0].pictogram);
+
+    return currentrace[0];
+  };
+
+  const fetch_racepicks = async (): Promise<RacePick[]> => {
+    // Don't expand race/pxx/dnf since we already fetched those
+    const racepicks: RacePick[] = await pb
+      .collection("racepicks")
+      .getFullList({ fetch: fetch, expand: "user" });
+
+    return racepicks;
+  };
+
+  const fetch_currentpickedusers = async (): Promise<CurrentPickedUser[]> => {
+    const currentpickedusers: CurrentPickedUser[] = await pb
+      .collection("currentpickedusers")
+      .getFullList({ fetch: fetch });
+
+    currentpickedusers.map((currentpickeduser: CurrentPickedUser) => {
+      if (currentpickeduser.avatar) {
+        currentpickeduser.avatar_url = pb.files.getURL(currentpickeduser, currentpickeduser.avatar);
+      }
+    });
+
+    return currentpickedusers;
+  };
+
+  // TODO: Duplicated code from data/raceresults/+page.server.ts
+  const fetch_raceresults = async (): Promise<RaceResult[]> => {
+    // Don't expand races/pxxs/dnfs since we already fetched those
+    const raceresults: RaceResult[] = await pb
+      .collection("raceresultsdesc")
+      .getFullList({ fetch: fetch });
+
+    return raceresults;
+  };
+
+  return {
+    racepicks: fetch_racepicks(),
+    currentpickedusers: fetch_currentpickedusers(),
+    raceresults: fetch_raceresults(),
+
+    currentrace: await fetch_currentrace(),
+  };
+};