login fully functional

app/pages/login.vue

@@ -5,12 +5,6 @@ import type { FormSubmitEvent, AuthFormField } from '@nuxt/ui'
 
 const toast = useToast()
 
-// create data model for the form
-const credentials = reactive({
-  email: '',
-  password: '',
-})
-
 const providers = [{
   label: 'Google',
   icon: 'i-simple-icons-google',
@@ -44,40 +38,54 @@ const fields: AuthFormField[] = [{
   type: 'checkbox'
 }]
 
-type Schema = z.output<typeof credentials>
+// actual login logic
 
-function formSubmit(payload: FormSubmitEvent<Schema>) {
-  console.log(payload);
-}
+const error_popup = ref(false)
 
-async function sendLogin() {
+async function sendLogin(u:string,p:string) {
   try {
-    await $fetch("/api/login", {
+    const r = await $fetch("/api/login", {
       method: "POST",
-      body: credentials
+      body: {"email": u, "password": p}
     })
-
     await refreshSession()
     await navigateTo('/dashboard') // user home page
-
   } catch {
-    alert("Login failed.")
+    error_popup.value = true // show popup
+    }
   }
+
+const schema = z.object({
+  email: z.email('Invalid email'),
+  password: z.string('Password is required').min(8, 'Must be at least 8 characters')
+})
+
+
+function onSubmit(payload: FormSubmitEvent<schema>) {
+  const data = payload.data.email
+  console.log('Submitted', data)
+  sendLogin(payload.data.email, payload.data.password)
 }
+
 </script>
 
 <template>
     <div class="flex flex-col items-center justify-center gap-4 p-4">
       <UPageCard class="w-full max-w-md">
         <UAuthForm
-            :schema="credentials"
+            :schema="schema"
             title="Login"
             description="Enter your credentials to access your account."
             icon="i-lucide-user"
             :fields="fields"
             :providers="providers"
             @submit="onSubmit"
-        />
+        >
+          <template #validation>
+            <UAlert v-if="error_popup" color="error" variant="subtle" icon="i-lucide-info" title="Error signing in" />
+          </template>
+
+        </UAuthForm>
       </UPageCard>
     </div>
 </template>