Skeleton: Some login logic fixes

src/lib/fetch.ts

@@ -112,7 +112,9 @@ export const fetch_users = async (fetch: (_: any) => Promise<Response>): Promise
     .getFullList({ fetch: fetch, sort: "+username" });
 
   users.map((user: User) => {
-    user.avatar_url = pb.files.getURL(user, user.avatar);
+    if (user.avatar) {
+      user.avatar_url = pb.files.getURL(user, user.avatar);
+    }
   });
 
   return users;

src/lib/pocketbase.ts

@@ -8,6 +8,7 @@ export let pbUser: User | undefined = undefined;
 const update_user = async (record: AuthRecord): Promise<void> => {
   if (!record) {
     pbUser = undefined;
+    console.log("Returning with pbUser = undefined");
     return;
   }
 
@@ -32,8 +33,11 @@ const update_user = async (record: AuthRecord): Promise<void> => {
 };
 
 // Update the pbUser object when authStore changes (e.g. after logging in)
-pb.authStore.onChange(() => {
-  update_user(pb.authStore.record);
-  // console.log("Updating pbUser...")
-  // console.dir(pbUser, { depth: null });
+pb.authStore.onChange(async () => {
+  await update_user(pb.authStore.record);
+
+  // TODO: If the user has not chosen an avatar,
+  //       the page keeps displaying the "Login" button (wtf)
+  console.log("Updating pbUser...");
+  console.dir(pbUser, { depth: null });
 }, true);

src/routes/+layout.svelte

@@ -19,7 +19,6 @@
     RaceResultCard,
   } from "$lib/components";
   import { get_avatar_preview_event_handler } from "$lib/image";
-
   import {
     AppBar,
     storePopup,
@@ -39,7 +38,7 @@
     getToastStore,
   } from "@skeletonlabs/skeleton";
   import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floating-ui/dom";
-  import { invalidateAll } from "$app/navigation";
+  import { invalidate } from "$app/navigation";
   import { get_error_toast } from "$lib/toast";
   import { pb } from "$lib/pocketbase";
   import { AVATAR_HEIGHT, AVATAR_WIDTH } from "$lib/config";
@@ -135,8 +134,8 @@
   storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 
   // Reactive state
-  let username_value: string = $state("");
-  let firstname_value: string = $state("");
+  let username_value: string = $state(data.user?.username ?? "");
+  let firstname_value: string = $state(data.user?.firstname ?? "");
   let password_value: string = $state("");
   let avatar_value: FileList | undefined = $state();
 
@@ -147,15 +146,14 @@
     } catch (error) {
       toastStore.trigger(get_error_toast("" + error));
     }
-    await invalidateAll();
+    await invalidate("data:user");
     drawerStore.close();
     password_value = "";
-    firstname_value = data.user?.firstname ?? "";
   };
 
   const logout = async (): Promise<void> => {
     pb.authStore.clear();
-    await invalidateAll();
+    await invalidate("data:user");
     drawerStore.close();
     username_value = "";
     firstname_value = "";
@@ -172,10 +170,6 @@
         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;
-      }
 
       // Avatar handling
       let avatar_avif: Blob | undefined = undefined;
@@ -206,16 +200,20 @@
 
       try {
         if (create) {
+          if (!password_value || password_value === "") {
+            toastStore.trigger(get_error_toast("Please enter a password!"));
+            return;
+          }
+
           await pb.collection("users").create({
             username: username_value,
             firstname: firstname_value,
             password: password_value,
-            passwordConfirm: password_value,
+            passwordConfirm: password_value, // lol
             admin: false,
           });
 
           await login();
-          return;
         } else {
           if (!data.user?.id || data.user.id === "") {
             toastStore.trigger(get_error_toast("Invalid user id!"));
@@ -227,10 +225,10 @@
             firstname: firstname_value,
             avatar: avatar_avif,
           });
-
-          invalidateAll();
           drawerStore.close();
         }
+
+        invalidate("data:users");
       } catch (error) {
         toastStore.trigger(get_error_toast("" + error));
       }

src/routes/+layout.ts

@@ -11,7 +11,7 @@ export const ssr = false;
 // 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: LayoutLoad = async ({ fetch, depends }) => {
-  depends("data:graphics");
+  depends("data:graphics", "data:user");
 
   return {
     // User information (synchronous)