Profile: Add firstname field to users

src/lib/schema.ts

@@ -7,6 +7,7 @@ export interface Graphic {
 export interface User {
   id: string;
   username: string;
+  firstname: string;
   avatar: string;
   avatar_url?: string;
   admin: boolean;

src/routes/+layout.svelte

@@ -16,6 +16,7 @@
     TeamCard,
     RaceCard,
     SubstitutionCard,
+    NameIcon,
   } from "$lib/components";
   import { get_avatar_preview_event_handler } from "$lib/image";
 
@@ -151,13 +152,15 @@
     <!-- Data Drawer -->
     <!-- Data Drawer -->
     <div class="flex flex-col gap-2 p-2 pt-3">
-      <Button href="/data/raceresult" onclick={close_drawer} color="surface" width="w-full"
+      <Button href="/data/raceresults" onclick={close_drawer} color="surface" width="w-full">
-        >Race Results
+        Race Results
+      </Button>
+      <Button href="/data/season/teams" onclick={close_drawer} color="surface" width="w-full">
+        Season
+      </Button>
+      <Button href="/data/users" onclick={close_drawer} color="surface" width="w-full">
+        Users
       </Button>
-      <Button href="/data/season/teams" onclick={close_drawer} color="surface" width="w-full"
-        >Season</Button
-      >
-      <Button href="/data/user" onclick={close_drawer} color="surface" width="w-full">Users</Button>
     </div>
   {:else if $drawerStore.id === "login_drawer"}
     <!-- Login Drawer -->
@@ -168,22 +171,26 @@
       <form method="POST" class="contents">
         <!-- 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
+        <Input name="username" placeholder="Username" autocomplete="username" required>
-          ><UserIcon />
+          <UserIcon />
         </Input>
-        <Input name="password" type="password" placeholder="Password" autocomplete="off" required
+        <Input name="firstname" placeholder="First Name (leave empty for login)" autocomplete="off">
-          ><PasswordIcon />
+          <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
+          <Button formaction="/profile?/login" onclick={close_drawer} color="tertiary" submit>
-            >Login
+            Login
           </Button>
           <Button
             formaction="/profile?/create_profile"
             onclick={close_drawer}
             color="tertiary"
             submit
-            >Register
+          >
+            Register
           </Button>
         </div>
       </form>
@@ -206,6 +213,14 @@
         >
           <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")}

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

@@ -7,11 +7,12 @@ 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", "password", "redirect_url"]);
+    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,
@@ -22,6 +23,7 @@ export const actions = {
       .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() ?? "/");
   },