better ui

app/pages/login.vue

@@ -4,6 +4,8 @@ import type { FormSubmitEvent, AuthFormField } from '@nuxt/ui'
 
 const toast = useToast()
 
+const wrong_login = ref(false)
+
 const fields: AuthFormField[] = [{
   name: 'email',
   type: 'email',
@@ -22,12 +24,7 @@ const fields: AuthFormField[] = [{
   type: 'checkbox'
 }]
 
-const otp_fields: AuthFormField[] = [{
-  name: 'otp',
-  type: 'otp',
-  length: 6,
-  placeholder: '*'
-}]
+
 
 
 const schema = z.object({
@@ -56,32 +53,19 @@ function onSubmit(payload: FormSubmitEvent<Schema>) {
           class: 'rounded-full',
           variant: 'solid'
         }"
-    />
+    >
+        <template #validation v-if="wrong_login">
+          <UAlert color="error"
+                  icon="lucide:circle-x" 
+                  variant="soft" 
+                  :ui="{ icon: 'self-center' }"
+                  title="Incorrect Login" 
+                  description="Either your e-mail or your password are wrong."/>
+        </template>
+    </UAuthForm>
     </UPageCard>
   </div>
 
-  <!----<div class="flex flex-col items-center justify-center gap-4 p-4">
-    <UPageCard class="w-full max-w-md dark:bg-zinc-950 rounded-3xl">
-      <UAuthForm
-        :schema="schema"
-        title="Login"
-        description="Check the code sent to your e-mail"
-        icon="i-lucide-user"
-        :fields="otp_fields"
-        :submit="{
-          label: 'Submit',
-          class: 'rounded-full',
-          variant: 'solid'
-        }"
-        :ui="{
-          otp: 'justify-center'
-        }"
-    >
-    <template #footer>
-      <UButton icon="lucide:rotate-cw" class="w-full rounded-full justify-center" color="success">Resend</UButton>
-    </template>
-  </UAuthForm>
-    </UPageCard>
-  </div>-->
+
 </template>