user auth rose pine color scheme

ui/pages/signup.vue

@@ -1,35 +1,48 @@
 <script setup>
+console.log(useCookie("sessionToken").value)
+
 if (useCookie("sessionToken").value) {
     await navigateTo('/')
 }
 
+let username = ref('')
 let email = ref('')
 let password = ref('')
 
+let error = ref('')
+
 const submitForm = async () => {
-    await useFetch('/api/signup', {
+    const response = await useFetch('/api/signup', {
         method: 'POST',
         body: {
+            "username": username.value,
             "email": email.value,
             "password": password.value,
         }
     })
 
-    await navigateTo('/')
+    if (response.error.value != null) {
+        console.log(response)
+        error.value = response.error.value.data.message
+        setTimeout(() => error.value = "", 15000)
+    } else {
+        await navigateTo('/')
+    }
 }
 </script>
 
 <template>
-    <div class="min-h-screen min-w-screen grid place-content-center">
-        <div class="flex flex-col max-w-72 w-full text-center">
-            <input
-                class="py-2 px-4 resize-none rounded-md my-2 border-gray-200 dark:border-dark-gray-800 focus:border-gray-300 dark:focus:border-dark-gray-800 border focus:outline-none placeholder:italic placeholder:text-slate-500 dark:placeholder:text-gray-300"
-                v-model="email" type="email" placeholder="Email..." />
-            <input
-                class="py-2 px-4 resize-none rounded-md my-2 border-gray-200 dark:border-dark-gray-800 focus:border-gray-300 dark:focus:border-dark-gray-800 border focus:outline-none placeholder:italic placeholder:text-slate-500 dark:placeholder:text-gray-300"
-                v-model="password" type="password" placeholder="Password..." />
-            <button @click="submitForm" class="py-2 px-4 bg-blue-500 text-white rounded-md">Signup</button>
-            <p>Or <NuxtLink to="/login" class="text-pink-600">Log in</NuxtLink>
+    <div class="min-h-screen min-w-screen grid place-content-center bg-base">
+        <div
+            class="flex flex-col text-center bg-surface border border-muted/20 shadow-md px-10 py-8 rounded-2xl min-w-0 max-w-[313px]">
+            <h2 class="font-semibold text-2xl mb-2">Signup</h2>
+            <Input v-model="username" placeholder="Username..." />
+            <Input v-model="email" placeholder="Email..." />
+            <Input v-model="password" type="password" placeholder="Password..." />
+            <p class="text-love">{{ error }}</p>
+            <button @click="submitForm"
+                class="py-2 px-4 my-2 bg-pine/10 text-pine rounded-md transition-colors hover:bg-pine/15 active:bg-pine/25">Login</button>
+            <p>Or <NuxtLink to="/login" class="text-foam hover:underline">Log in</NuxtLink>
             </p>
         </div>
     </div>