feat: support login with email or username

resources/js/Pages/Auth/Login.vue

@@ -8,8 +8,8 @@ import AuthLayout from '@/layouts/AuthLayout.vue'
 
 const { config, flash } = useAuth()
 
-const form = useForm({
-  email: '',
+const form = useForm('LoginForm', {
+  login: '',
   password: '',
   remember: false,
 })
@@ -18,10 +18,10 @@ const rememberMe = ref(false)
 
 const fields: AuthFormField[] = [
   {
-    name: 'email',
-    type: 'email',
-    label: 'Email',
-    placeholder: 'Enter your email',
+    name: 'login',
+    type: 'text',
+    label: 'Email or Username',
+    placeholder: 'Enter your email or username',
     required: true,
   },
   {
@@ -42,7 +42,7 @@ const providers = computed(() =>
 )
 
 const schema = v.object({
-  email: v.pipe(v.string('Email is required'), v.nonEmpty('Email is required'), v.email('Please enter a valid email')),
+  login: v.pipe(v.string('Email or username is required'), v.nonEmpty('Email or username is required')),
   password: v.pipe(v.string('Password is required'), v.nonEmpty('Password is required')),
   remember: v.optional(v.boolean()),
 })
@@ -50,7 +50,7 @@ const schema = v.object({
 type Schema = v.InferOutput<typeof schema>
 
 function onSubmit(event: FormSubmitEvent<Schema>) {
-  form.email = event.data.email
+  form.login = event.data.login
   form.password = event.data.password
   form.remember = rememberMe.value
 
@@ -75,12 +75,12 @@ function onSubmit(event: FormSubmitEvent<Schema>) {
         </ULink>
       </template>
 
-      <template v-if="form.errors.email || flash.status" #validation>
+      <template v-if="form.errors.login || flash.status" #validation>
         <UAlert
-          v-if="form.errors.email"
+          v-if="form.errors.login"
           color="error"
           icon="i-lucide-alert-circle"
-          :title="form.errors.email"
+          :title="form.errors.login"
         />
         <UAlert
           v-if="flash.status"