Now that we have learned how to work with forms, let's implement the same knowledge into the login form.
Front-end
So, let's add the HTML part of the form.
resources/js/Pages/Auth/Login.vue:
<script setup>import GuestLayout from '../../Layouts/Guest.vue';import { Head } from '@inertiajs/vue3';</script> <template> <Head title="Log in" /> <GuestLayout> <p>Login form coming soon.</p> <form @submit.prevent="loginForm.post(route('login.post'))"> <div> <!-- Email --> <div> <label for="email" class="block font-medium text-sm text-gray-700"> Email </label> <input v-model="loginForm.email" id="email" type="email" class="block mt-1 w-full rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" required autofocus autocomplete="username"> <p class="mt-2 text-sm text-red-600" v-show="loginForm.errors.email"> {{ loginForm.errors.email }} </p> </div> <!-- Password --> <div class="mt-4"> <label for="password" class="block font-medium text-sm text-gray-700"> Password </label> <input v-model="loginForm.password" id="password" type="password" class="block mt-1 w-full rounded-md shadow-sm border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" required autocomplete="current-password"> </div> <!-- Remember me --> <div class="block mt-4"> <label class="flex items-center"> <input type="checkbox" name="remember" v-model="loginForm.remember" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" /> <span class="ml-2 text-sm text-gray-600">Remember me</span> </label> </div> <!-- Buttons --> <div class="flex items-center justify-end mt-4"> <button class="inline-flex items-center px-4 py-2 bg-gray-800 border border-transparent rounded-md font-semibold text-xs text-white uppercase tracking-widest hover:bg-gray-700 active:bg-gray-900 focus:outline-none focus:border-gray-900 focus:shadow-outline-gray transition ease-in-out duration-150 ml-4"> Log in </button> </div> </div> </form> </GuestLayout></template>The form itself is very similar to the post form. But, instead of...