Refactor user avatar component and add settings page

src/lib/components/UserAvatar.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
   import { enhance } from "$app/forms";
-
+  import { goto } from "$app/navigation";
   export let user: any;
   let firstLetter = user.first_name.charAt(0);
+
+  async function navToSettings() {
+    goto("/settings");
+  }
 </script>
 
 <div class="dropdown dropdown-bottom dropdown-end" tabindex="0" role="button">
@@ -21,7 +25,7 @@
     <!-- svelte-ignore a11y-missing-attribute -->
     <li><a>Profile</a></li>
     <li><a>My Log</a></li>
-    <li><a>Settings</a></li>
+    <li><button on:click={navToSettings}>Settings</button></li>
     <form method="post" action="/" use:enhance>
       <li><button>Logout</button></li>
     </form>

src/routes/login/+page.svelte

@@ -28,7 +28,7 @@
       id="password"
       class="block mb-2 input input-bordered w-full max-w-xs"
     /><br />
-    <button class="py-2 px-4 rounded btn btn-primary">Login</button>
+    <button class="py-2 px-4 btn btn-primary">Login</button>
   </form>
 </div>
 

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

@@ -0,0 +1,48 @@
+import { redirect, type Actions } from "@sveltejs/kit";
+import type { PageServerLoad } from "./$types";
+import { db } from "$lib/db/db.server";
+import { userTable } from "$lib/db/schema";
+import { eq } from "drizzle-orm";
+
+export const load: PageServerLoad = async (event) => {
+  if (event.locals.user)
+    return {
+      user: event.locals.user,
+    };
+    return redirect(302, "/login");
+};
+
+export const actions: Actions = {
+    default: async (event: { request: { formData: () => any; }; }) => {
+    const formData = await event.request.formData();
+    let userId = formData.get("user_id");
+    let username = formData.get("username");
+    let firstName = formData.get("first_name");
+    let lastName = formData.get("last_name");
+
+    if (!userId) {
+        return {
+            status: 400,
+            body: {
+                message: "User ID is required"
+            }
+        };
+    }
+
+    await db.update(userTable)
+        .set({
+            username: username,
+            first_name: firstName,
+            last_name: lastName,
+        })
+        .where(eq(userTable.id, userId));
+
+        return {
+            status: 200,
+            body: {
+                message: "User updated"
+                
+            }
+        };
+    }
+};

src/routes/settings/+page.svelte

@@ -0,0 +1,51 @@
+<script>
+    import { enhance } from "$app/forms";
+
+    export let data;
+    let username = data.user?.username;
+    let first_name = data.user?.first_name;
+    let last_name = data.user?.last_name;
+    let user_id = data.user?.id;
+</script>
+
+<h1 class="text-center font-extrabold text-4xl mb-6">Settings Page</h1>
+
+<h1 class="text-center font-extrabold text-xl">User Account Settings</h1>
+
+<div class="flex justify-center">
+    <form method="post" use:enhance class="w-full max-w-xs">
+        <label for="username">Username</label>
+        <input
+            bind:value={username}
+            name="username"
+            id="username"
+            class="block mb-2 input input-bordered w-full max-w-xs"
+        /><br />
+        <label for="password">First Name</label>
+        <input
+            type="text"
+            bind:value={first_name}
+            name="first_name"
+            id="first_name"
+            class="block mb-2 input input-bordered w-full max-w-xs"
+        /><br />
+        <input
+            type="text"
+            bind:value={last_name}
+            name="last_name"
+            id="last_name"
+            class="block mb-2 input input-bordered w-full max-w-xs"
+        /><br />
+        <!--  make hidden input where the user id is -->
+        <input
+            type="hidden"
+            bind:value={user_id}
+            name="user_id"
+            id="user_id"
+            class="block mb-2 input input-bordered w-full max-w-xs"
+        />
+        <button class="py-2 px-4 btn btn-primary">Update</button>
+    </form>
+</div>
+
+<small class="text-center">For Debug Use: UUID={user_id}</small>

src/routes/user/+page.svelte

@@ -1 +0,0 @@
-<h1>User Page</h1>