Refactor admin settings page and add user signup functionality

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

@@ -0,0 +1,12 @@
+import { error, redirect, type Actions } from "@sveltejs/kit";
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = async (event) => {
+  if (!event.locals.user) {
+    return redirect(302, "/login");
+  } else {
+    if (event.locals.user.role !== "admin") {
+      return redirect(302, "/settings");
+    }
+  }
+};

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

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import { enhance } from "$app/forms";
+  import { goto } from "$app/navigation";
+  import { type SubmitFunction } from "@sveltejs/kit";
+  let errors: { message?: string } = {};
+  let message: { message?: string } = {};
+  const addUser: SubmitFunction = async ({ formData, action, cancel }) => {
+    const response = await fetch(action, {
+      method: "POST",
+      body: formData,
+    });
+
+    if (response.ok) {
+      console.log("User Added Successfully!");
+      errors = {};
+      cancel();
+      window.location.reload();
+      return;
+    }
+
+    const { type, error } = await response.json();
+    if (type === "error") {
+      errors = { message: error.message };
+    }
+    console.log(errors);
+    cancel();
+  };
+</script>
+
+<h1 class="text-center font-extrabold text-4xl">Admin Settings</h1>
+
+<h2 class="text-center font-extrabold text-2xl">Add User</h2>
+<div class="flex justify-center">
+  <form
+    method="POST"
+    action="/signup"
+    use:enhance={addUser}
+    class="w-full max-w-xs"
+  >
+    <label for="username">Username</label>
+    <input
+      name="username"
+      id="username"
+      class="block mb-2 input input-bordered w-full max-w-xs"
+    /><br />
+    <label for="first_name">First Name</label>
+    <input
+      name="first_name"
+      id="first_name"
+      class="block mb-2 input input-bordered w-full max-w-xs"
+    /><br />
+    <label for="last_name">Last Name</label>
+    <input
+      name="last_name"
+      id="last_name"
+      class="block mb-2 input input-bordered w-full max-w-xs"
+    /><br />
+    <label for="password">Password</label>
+    <input
+      type="password"
+      name="password"
+      id="password"
+      class="block mb-2 input input-bordered w-full max-w-xs"
+    /><br />
+    <label for="role">Admin User?</label>
+    <input
+      type="checkbox"
+      name="role"
+      id="admin"
+      class="block mb-2 checkbox-primary checkbox"
+    /><br />
+    <button class="py-2 px-4 btn btn-primary">Signup</button>
+  </form>
+</div>
+
+{#if errors.message}
+  <div class="text-center text-error mt-4">
+    {errors.message}
+  </div>
+{/if}

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

@@ -1,6 +1,6 @@
 // routes/signup/+page.server.ts
 import { lucia } from "$lib/server/auth";
-import { fail, redirect } from "@sveltejs/kit";
+import { error, fail, redirect } from "@sveltejs/kit";
 import { generateId } from "lucia";
 import { Argon2id } from "oslo/password";
 import { db } from "$lib/db/db.server";
@@ -17,6 +17,7 @@ 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
 
@@ -27,6 +28,15 @@ 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 ||
@@ -91,18 +101,36 @@ export const actions: Actions = {
         last_name: lastName,
         hashed_password: hashedPassword,
         signup_date: new Date(),
-        role: "user",
+        role: role,
         last_login: new Date(),
       } as DatabaseUser)
       .execute();
 
-    const session = await lucia.createSession(userId, {});
+    if (!event.locals.user) {
-    const sessionCookie = lucia.createSessionCookie(session.id);
+      const session = await lucia.createSession(userId, {});
-    event.cookies.set(sessionCookie.name, sessionCookie.value, {
+      const sessionCookie = lucia.createSessionCookie(session.id);
-      path: ".",
+      event.cookies.set(sessionCookie.name, sessionCookie.value, {
-      ...sessionCookie.attributes,
+        path: ".",
-    });
+        ...sessionCookie.attributes,
+      });
 
-    redirect(302, "/");
+      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 created",
+        }),
+      };
+    }
   },
 };