feat: Actually actually make changing usernames work

9 files changes, lord have mercy on my soul

src/lib/components/forms/updatePFP.svelte

@@ -14,7 +14,7 @@
 </script>
 
 <form class="grid w-full items-start gap-3" onsubmit={submit}>
-  <fieldset class="grid w-full gap-3 rounded-lg border p-4">
+  <fieldset class="flex size-full flex-col justify-center gap-3 rounded-lg border p-4">
     <legend class="-ml-1 px-1 text-sm font-medium"> Upload Profile Image </legend>
     <input
       class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0

src/lib/components/forms/updatePassword.svelte

@@ -15,7 +15,7 @@
 
 <!-- Update Password -->
 <form class="grid w-full items-start gap-3" use:enhance method="POST" action="?/updatePassword">
-  <fieldset class="grid w-full gap-3 rounded-lg border p-4">
+  <fieldset class="flex size-full flex-col justify-center gap-3 rounded-lg border p-4">
     <legend class="-ml-1 px-1 text-sm font-medium"> Update Password </legend>
     <div class="grid gap-3">
       <Label for="currentPassword">Current Password</Label>

src/lib/components/forms/updateUsername.svelte

@@ -13,8 +13,8 @@
   });
 </script>
 
-<form class="grid w-full items-start gap-3" method="POST" action="?/updateUsername" use:enhance>
+<form class="grid size-full items-start gap-3" method="POST" action="?/updateUsername" use:enhance>
-  <fieldset class="grid w-full gap-3 rounded-lg border p-4">
+  <fieldset class="flex size-full flex-col justify-center gap-3 rounded-lg border p-4">
     <legend class="-ml-1 px-1 text-sm font-medium"> Update Username </legend>
     <div class="grid gap-3">
       <Label for="username">New Username</Label>
@@ -28,18 +28,6 @@
       />
       {#if $errors.username}<span class="text-sm text-red-500">{$errors.username[0]}</span>{/if}
     </div>
-    <div class="grid gap-3">
-      <Label for="password">Password</Label>
-      <Input
-        id="password"
-        name="password"
-        type="password"
-        placeholder="Password"
-        bind:value={$form.password}
-        aria-invalid={$errors.password ? 'true' : undefined}
-      />
-      {#if $errors.password}<span class="text-sm text-red-500">{$errors.password[0]}</span>{/if}
-    </div>
     <Button type="submit">Update Username</Button>
     <p class="mt-1 text-center text-sm text-green-500">
       {#if $message}{$message}{/if}

src/lib/components/user.svelte

@@ -5,18 +5,18 @@
   import type { PageData } from '../../routes/(main)/$types';
   const { data }: { data: PageData } = $props();
 
-  const imageSrc = data.session?.user.image ?? `https://api.dicebear.com/9.x/identicon/svg?seed=${data.session?.user.id}`;
+  const imageSrc = data.user.image ?? `https://api.dicebear.com/9.x/identicon/svg?seed=${data.session?.user.id}`;
 </script>
 
-{#if data.session}
+{#if data.user.username}
   <div class="mb-1 flex w-full items-center p-2">
     <div class="avatar mr-2 rounded-sm">
       <div class="h-12 w-12 overflow-hidden rounded-lg border bg-white">
-        <img src={imageSrc} alt="Profile image for {data.session?.user.name}" />
+        <img src={imageSrc} alt="Profile image for {data.user.username}" />
       </div>
     </div>
     <div class="flex w-full items-center align-middle">
-      <p class="font-bold">{data.session?.user.name}</p>
+      <p class="font-bold">{data.user.username}</p>
     </div>
     <Tooltip.Root>
       <Tooltip.Trigger>

src/lib/server/db/sqlite.ts

@@ -13,12 +13,13 @@ class AuthDb {
     this.client.pragma('journal_mode = WAL');
   }
 
+  setUserName(userId: string, newUsername: string) {
+    this.client.prepare('UPDATE user SET username = ? WHERE id = ?').run(newUsername, userId);
+    console.log('wam bam');
+  }
+
   setUserImage(userId: string, image: string) {
-    try {
+    this.client.prepare('UPDATE user SET image = ? WHERE id = ?').run(image, userId);
-      this.client.prepare('UPDATE user SET image = ? WHERE id = ?').run(image, userId);
-    } catch (e) {
-      console.error(`Error setting user image: ${(e as Error).message}`);
-    }
   }
 
   getUser(userId: string): Profile {

src/lib/types/account.ts

@@ -27,7 +27,6 @@ export const changeUsernameSchema = z.object({
     .max(15, 'Username must be no more than 15 characters.')
     .regex(/^(?![A-Z])/gm, 'Username cannot contain uppercase letters')
     .regex(/^(?=[a-z0-9-_]+$)/gm, 'Username cannot contain special characters'),
-  password: z.string().nonempty('Password must not be empty.'),
 });
 
 export type ChangePasswordSchema = typeof changePasswordSchema;

src/routes/(main)/+layout.server.ts

@@ -1,9 +1,15 @@
 import { db } from '$lib/server/db';
 import { auth } from '$lib/server/db/auth';
+import { authdb } from '$lib/server/db/sqlite.js';
 import { newChannelSchema } from '$lib/types/misc';
 import { superValidate } from 'sveltekit-superforms';
 import { zod } from 'sveltekit-superforms/adapters';
 
+interface Profile {
+  username: string;
+  image: string;
+}
+
 export async function load({ request }) {
   const form = await superValidate(zod(newChannelSchema));
   const rows = await db.getChannels();
@@ -17,8 +23,17 @@ export async function load({ request }) {
     headers: request.headers,
   });
 
+  let user: Profile;
+
+  if (session?.user.id) {
+    user = authdb.getUser(session.user.id);
+  } else {
+    throw new Error('No user ID found.');
+  }
+
   return {
     session,
+    user,
     channels,
     form,
   };

src/routes/(main)/account/+page.server.ts

@@ -5,6 +5,7 @@ import { zod } from 'sveltekit-superforms/adapters';
 import { auth } from '$lib/server/db/auth';
 import { changeUsernameSchema, changePasswordSchema } from '$lib/types/account';
 import type { APIError } from 'better-auth/api';
+import { authdb } from '$lib/server/db/sqlite.js';
 
 export async function load({ request }) {
   const session = await auth.api.getSession({
@@ -50,10 +51,31 @@ export const actions = {
     return message(newpassForm, 'Password updated.');
   },
   updateUsername: async ({ request }) => {
+    const session = await auth.api.getSession({
+      headers: request.headers,
+    });
     const newuserForm = await superValidate(request, zod(changeUsernameSchema));
 
-    if (!newuserForm.valid) {
+    try {
-      return fail(400, { newuserForm });
+      if (!newuserForm.valid) {
+        return fail(400, { newuserForm });
+      }
+
+      if (session?.user.id) {
+        if (authdb.getUser(session.user.id).username !== newuserForm.data.username) {
+          authdb.setUserName(session.user.id, newuserForm.data.username);
+        } else {
+          throw new Error('New username cannot be the same as old username.');
+        }
+      } else {
+        throw new Error('No user ID found.');
+      }
+    } catch (e) {
+      const errorMessage = (e as Error).message;
+      if (errorMessage === 'UNIQUE constraint failed: user.username') {
+        return setError(newuserForm, 'username', 'Username taken.');
+      }
+      return setError(newuserForm, 'username', errorMessage.charAt(0).toUpperCase() + errorMessage.slice(1));
     }
 
     return message(newuserForm, 'Username updated.');

src/routes/(main)/account/+page.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
   import { Button } from '$lib/components/ui/button/index';
   import * as Dialog from '$lib/components/ui/dialog';
+  import type { PageData } from './$types';
 
-  let { data } = $props();
+  let { data }: { data: PageData } = $props();
 
   import UpdatePassword from '$lib/components/forms/updatePassword.svelte';
-  import UpdateUsername from '$lib/components/forms/updateUsername.svelte';
   import UpdatePfp from '$lib/components/forms/updatePFP.svelte';
+  import UpdateUsername from '$lib/components/forms/updateUsername.svelte';
 
   let open: boolean = $state(false);
 </script>
@@ -23,7 +24,7 @@
 
     <!-- Account Actions -->
     <div class="grid w-full items-start gap-3">
-      <fieldset class="grid w-full gap-3 rounded-lg border p-4">
+      <fieldset class="flex size-full flex-col justify-center gap-3 rounded-lg border p-4">
         <legend class="-ml-1 px-1 text-sm font-medium"> Account Actions </legend>
         <form method="POST" action="?/signOut">
           <Button type="submit" class="w-full">Sign Out</Button>