15 - Working Login Form | Laravel Daily

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...

The Full Lesson is Only for Premium Members

Want to access all of our courses? (36 h 00 min)

You also get:

61 courses

Premium tutorials

Access to repositories

Private Discord

Get Premium for $129/year or $29/month

Already a member? Login here