Add error handeling handling to the signup form

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

@@ -31,7 +31,7 @@ export const actions: Actions = {
       typeof username !== "string" ||
       username.length < 3 ||
       username.length > 31 ||
-      !/^[a-z0-9_-]+$/.test(username)
+      !/^[a-zA-Z0-9_-]+$/.test(username)
     ) {
       return error(400, {
         message: "Invalid username",
@@ -47,7 +47,7 @@ export const actions: Actions = {
       });
     }
 
-    const existingUser:any = await db
+    const existingUser: any = await db
       .select()
       .from(userTable)
       .where(eq(userTable.username, username))
@@ -86,6 +86,5 @@ export const actions: Actions = {
     });
 
     return redirect(302, "/");
-
   },
 };

src/routes/settings/admin/+page.svelte

@@ -73,7 +73,7 @@
 <div class="flex justify-center mb-4">
   <form
     method="POST"
-    action="/signup"
+    action="?/adduser"
     use:enhance={addUser}
     class="w-full max-w-xs"
   >

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

@@ -6,10 +6,17 @@ import { Argon2id } from "oslo/password";
 import { db } from "$lib/db/db.server";
 import type { DatabaseUser } from "$lib/server/auth";
 
-import type { Actions } from "./$types";
+import type { Actions, PageServerLoad } from "./$types";
 import { userTable } from "$lib/db/schema";
 import { eq } from "drizzle-orm";
 
+export const load: PageServerLoad = async (event) => {
+  if (event.locals.user) {
+    return redirect(302, "/");
+  }
+  return {};
+};
+
 export const actions: Actions = {
   default: async (event) => {
     const formData = await event.request.formData();
@@ -17,10 +24,12 @@ export const actions: Actions = {
     const password = formData.get("password");
     const firstName = formData.get("first_name");
     const lastName = formData.get("last_name");
-    let role: string = "";
     // username must be between 4 ~ 31 characters, and only consists of lowercase letters, 0-9, -, and _
     // keep in mind some database (e.g. mysql) are case insensitive
 
+    if (event.locals.user) {
+      return redirect(302, "/");
+    }
     // check all to make sure all fields are provided
     if (!username || !password || !firstName || !lastName) {
       return error(400, {
@@ -28,20 +37,11 @@ export const actions: Actions = {
       });
     }
 
-    if (!event.locals.user) {
-      role = "user";
-    }
-
-    if (event.locals.user && event.locals.user.role === "admin") {
-      const isAdmin = formData.get("role") === "on";
-      role = isAdmin ? "admin" : "user";
-    }
-
     if (
       typeof username !== "string" ||
       username.length < 3 ||
       username.length > 31 ||
-      !/^[a-z0-9_-]+$/.test(username)
+      !/^[a-zA-Z0-9_-]+$/.test(username)
     ) {
       return error(400, {
         message: "Invalid username",
@@ -102,12 +102,11 @@ export const actions: Actions = {
         last_name: lastName,
         hashed_password: hashedPassword,
         signup_date: new Date(),
-        role: role,
+        role: "user",
         last_login: new Date(),
       } as DatabaseUser)
       .execute();
 
-    if (!event.locals.user) {
     const session = await lucia.createSession(userId, {});
     const sessionCookie = lucia.createSessionCookie(session.id);
     event.cookies.set(sessionCookie.name, sessionCookie.value, {
@@ -115,23 +114,6 @@ export const actions: Actions = {
       ...sessionCookie.attributes,
     });
 
-      redirect(302, "/");
+    return redirect(302, "/");
-    } else {
-      if (event.locals.user && event.locals.user.role !== "admin") {
-        return error(403, {
-          message: "You are not authorized to add users",
-        });
-      }
-
-      return {
-        status: 200,
-        headers: {
-          "content-type": "application/json",
-        },
-        body: JSON.stringify({
-          message: "User date",
-        }),
-      };
-    }
   },
 };

src/routes/signup/+page.svelte

@@ -1,15 +1,38 @@
 <!-- routes/signup/+page.svelte -->
 <script lang="ts">
   import { enhance } from "$app/forms";
+  import { goto } from "$app/navigation";
   import { getRandomQuote } from "$lib";
+  import type { SubmitFunction } from "@sveltejs/kit";
   import { onMount } from "svelte";
 
+  let errors: { message?: string } = {};
   let backgroundImageUrl = "https://source.unsplash.com/random/?mountains";
 
   let quote: string = "";
   onMount(async () => {
     quote = getRandomQuote();
   });
+
+  const handleSubmit: SubmitFunction = async ({ formData, action, cancel }) => {
+    const response = await fetch(action, {
+      method: "POST",
+      body: formData,
+    });
+
+    if (response.ok) {
+      errors = {};
+      goto("/signup");
+      return;
+    }
+
+    const { type, error } = await response.json();
+    if (type === "error") {
+      errors = { message: error.message };
+    }
+    console.log(errors);
+    cancel();
+  };
 </script>
 
 <div
@@ -22,7 +45,7 @@
     </article>
 
     <div class="flex justify-center">
-      <form method="post" use:enhance class="w-full max-w-xs">
+      <form method="post" use:enhance={handleSubmit} class="w-full max-w-xs">
         <label for="username">Username</label>
         <input
           name="username"
@@ -52,6 +75,12 @@
       </form>
     </div>
 
+    {#if errors.message}
+      <div class="text-center text-error mt-4">
+        {errors.message}
+      </div>
+    {/if}
+
     <div class="flex justify-center mt-12 mr-25 ml-25">
       <blockquote class="w-80 text-center text-lg break-words">
         {#if quote != ""}
@@ -62,7 +91,6 @@
     </div>
   </div>
 </div>
-
 <!-- username first last pass -->
 
 <svelte:head>