changes

app/pages/login.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import * as z from 'zod'
+import type { FormSubmitEvent, AuthFormField } from '@nuxt/ui'
+
+const toast = useToast()
+
+const fields: AuthFormField[] = [{
+  name: 'email',
+  type: 'email',
+  label: 'Email',
+  placeholder: 'Enter your email',
+  required: true
+}, {
+  name: 'password',
+  label: 'Password',
+  type: 'password',
+  placeholder: 'Enter your password',
+  required: true
+} , {
+  name: 'remember',
+  label: 'Remember me',
+  type: 'checkbox'
+}]
+
+const otp_fields: AuthFormField[] = [{
+  name: 'otp',
+  type: 'otp',
+  length: 6,
+  placeholder: '*'
+}]
+
+
+const schema = z.object({
+  email: z.email('Invalid email'),
+  password: z.string('Password is required').min(8, 'Must be at least 8 characters')
+})
+
+type Schema = z.output<typeof schema>
+
+function onSubmit(payload: FormSubmitEvent<Schema>) {
+  console.log('Submitted', payload)
+}
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center gap-4 p-4 mt-7">
+    <UPageCard class="w-full max-w-md dark:bg-zinc-950 rounded-3xl">
+      <UAuthForm
+        :schema="schema"
+        title="Login"
+        description="Enter your credentials to access your account."
+        icon="i-lucide-user"
+        :fields="fields"
+        :submit="{
+          label: 'Login',
+          class: 'rounded-full',
+          variant: 'solid'
+        }"
+    />
+    </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>
+