refactor(components): use NuxtUI for elements instead of hand rolling

ZeroTwentyFifty · Nov 25, 2024 · 5734c79 · 5734c79
1 parent fd34d66
commit 5734c79
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 17 deletions.
diff --git a/frontend/components/AuthForm.vue b/frontend/components/AuthForm.vue
@@ -5,8 +5,7 @@ import { useRouter } from 'vue-router'
 const { state, validate, onSubmit } = useAuth()
 const router = useRouter()
 
-async function handleSubmit(event: Event) {
-  event.preventDefault()
+async function handleSubmit(event: FormSubmitEvent<any>) {
   const success = await onSubmit(event)
   if (success) {
     router.push('/dashboard')
@@ -15,20 +14,41 @@ async function handleSubmit(event: Event) {
 </script>
 
 <template>
-  <div class="bg-white p-6 rounded-lg shadow-md">
-    <h2 class="text-2xl font-bold mb-4 text-gray-800">Login</h2>
-    <UForm :validate="validate" :state="state" class="space-y-4" @submit="handleSubmit">
-      <UFormGroup label="Email" name="email" class="text-gray-700">
-        <UInput v-model="state.email" class="border-gray-300" />
+  <UCard class="max-w-md mx-auto">
+    <UCardTitle class="text-2xl font-bold mb-4">Login</UCardTitle>
+    <UForm 
+      :validate="validate"
+      :state="state"
+      class="space-y-4"
+      @submit="handleSubmit"
+    >
+      <UFormGroup label="Email" name="email">
+        <UInput
+          v-model="state.email"
+          color="primary"
+          variant="outline"
+          placeholder="Enter your email"
+        />
       </UFormGroup>
 
-      <UFormGroup label="Password" name="password" class="text-gray-700">
-        <UInput v-model="state.password" type="password" class="border-gray-300" />
+      <UFormGroup label="Password" name="password">
+        <UInput 
+          v-model="state.password"
+          type="password"
+          color="primary"
+          variant="outline"
+          placeholder="Enter your password"
+        />
       </UFormGroup>
 
-      <UButton type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white">
-        Submit
+      <UButton
+        type="submit"
+        color="primary"
+        variant="solid"
+        block
+      >
+        Login
       </UButton>
     </UForm>
-  </div>
+  </UCard>
 </template>
diff --git a/frontend/components/FootprintList.vue b/frontend/components/FootprintList.vue
@@ -6,11 +6,12 @@ const { footprints, fetchFootprints } = useFootprints()
 </script>
 
 <template>
-  <div class="bg-white p-6 rounded-lg shadow-md">
-    <h2 class="text-2xl font-bold mb-4 text-gray-800">Footprints Dashboard</h2>
+  <UCard class="p-6">
+    <UCardTitle>Footprints Dashboard</UCardTitle>
     <UButton 
       @click="fetchFootprints" 
-      class="mb-4 bg-blue-600 hover:bg-blue-700 text-white"
+      class="mb-4"
+      color="primary"
     >
       Fetch Footprints
     </UButton>
@@ -20,5 +21,5 @@ const { footprints, fetchFootprints } = useFootprints()
       </li>
     </ul>
     <p v-else class="text-gray-700">No footprints data available. Click the button to fetch data.</p>
-  </div>
+  </UCard>
 </template>
diff --git a/frontend/pages/dashboard.vue b/frontend/pages/dashboard.vue
@@ -1,6 +1,5 @@
 <template>
     <section>
-      <p>This page will be displayed at the /about route.</p>
       <FootprintList />
     </section>
 </template>