feat: support login with email or username

app/Http/Controllers/Auth/LoginController.php

@@ -3,6 +3,7 @@
 namespace App\Http\Controllers\Auth;
 
 use App\Http\Controllers\Controller;
+use App\Models\User;
 use Illuminate\Http\RedirectResponse;
 use Illuminate\Http\Request;
 use Illuminate\Support\Facades\Auth;
@@ -25,18 +26,26 @@ class LoginController extends Controller
      */
     public function store(Request $request): RedirectResponse
     {
-        $credentials = $request->validate([
+        $request->validate([
-            'email' => ['required', 'string', 'email'],
+            'login' => ['required', 'string'],
             'password' => ['required', 'string'],
         ]);
 
+        $login = $request->input('login');
+        $password = $request->input('password');
+
+        $isEmail = filter_var($login, FILTER_VALIDATE_EMAIL);
+        $user = $isEmail
+            ? User::where('email', $login)->first()
+            : User::whereRaw('LOWER(username) = ?', [strtolower($login)])->first();
+
         $remember = config('auth-ui.features.remember_me')
             ? $request->boolean('remember')
             : false;
 
-        if (! Auth::attempt($credentials, $remember)) {
+        if (! $user || ! Auth::attempt(['email' => $user->email, 'password' => $password], $remember)) {
             throw ValidationException::withMessages([
-                'email' => __('auth.failed'),
+                'login' => __('auth.failed'),
             ]);
         }
 

resources/js/Pages/Auth/Login.vue

@@ -8,8 +8,8 @@ import AuthLayout from '@/layouts/AuthLayout.vue'
 
 const { config, flash } = useAuth()
 
-const form = useForm({
+const form = useForm('LoginForm', {
-  email: '',
+  login: '',
   password: '',
   remember: false,
 })
@@ -18,10 +18,10 @@ const rememberMe = ref(false)
 
 const fields: AuthFormField[] = [
   {
-    name: 'email',
+    name: 'login',
-    type: 'email',
+    type: 'text',
-    label: 'Email',
+    label: 'Email or Username',
-    placeholder: 'Enter your email',
+    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"