Login Page Laravel Inertia, Vue 3, dan Tailwind CSS

Setelah sebelumnya kita berhasil membuat layout untuk halaman otentikasi—yang akan digunakan untuk halaman login dan register, maka pada materi kali ini kita akan fokus pada proses slicing halaman login dari template Argon Dashboard ke dalam aplikasi kita.

Slicing yang dimaksud di sini adalah mengambil struktur dan tampilan dari file HTML bawaan Argon, kemudian kita sesuaikan agar bisa digunakan di dalam kerangka aplikasi berbasis Vue dan Inertia yang sedang kita bangun.

Langkah pertama, silakan teman-teman buka file Login.vue yang terletak di dalam direktori berikut:

resources/js/pages/auth/Login.vue

Selanjutnya, kita akan melakukan penggantian seluruh isi file tersebut dengan struktur yang telah kita sesuaikan dari template Argon. Artinya, kita akan menimpa konten bawaan dengan kode tampilan baru yang sudah terintegrasi dengan layout otentikasi yang sebelumnya telah dibuat (AuthenticatedLayout.vue).

Silakan ubah keseluruhan isi file Login.vue menjadi seperti berikut ini:

<template>
    <AuthLayout>
        <div
            class="flex flex-col w-full max-w-full px-3 mx-auto lg:mx-0 shrink-0 md:flex-0 md:w-7/12 lg:w-5/12 xl:w-4/12">
            <div
                class="relative flex flex-col min-w-0 break-words bg-transparent border-0 shadow-none lg:py4 rounded-2xl bg-clip-border">
                <div class="p-6 pb-0 mb-0">
                    <h4 class="font-bold">Sign In</h4>
                    <p class="mb-0">Enter your email and password to sign in</p>
                </div>

                <div class="flex-auto p-6">
                    <form @submit.prevent="submit">
                        <div v-if="form.errors.email || form.errors.password" class="mb-4 text-sm text-red-600">
                            {{ form.errors.email || form.errors.password }}
                        </div>

                        <div class="mb-4">
                            <input v-model="form.email" type="email" placeholder="Email"
                                class="focus:shadow-primary-outline dark:bg-gray-950 dark:placeholder:text-white/80 dark:text-white/80 text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding p-3 font-normal text-gray-700 outline-none transition-all placeholder:text-gray-500 focus:border-fuchsia-300 focus:outline-none"
                                required autocomplete="username" />
                        </div>

                        <div class="mb-4">
                            <input v-model="form.password" type="password" placeholder="Password"
                                class="focus:shadow-primary-outline dark:bg-gray-950 dark:placeholder:text-white/80 dark:text-white/80 text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding p-3 font-normal text-gray-700 outline-none transition-all placeholder:text-gray-500 focus:border-fuchsia-300 focus:outline-none"
                                required autocomplete="current-password" />
                        </div>

                        <div class="flex items-center pl-12 mb-0.5 text-left min-h-6">
                            <input id="rememberMe" v-model="form.remember"
                                class="mt-0.5 rounded-10 duration-250 ease-in-out after:rounded-circle after:shadow-2xl after:duration-250 checked:after:translate-x-5.3 h-5 relative float-left -ml-12 w-10 cursor-pointer appearance-none border border-solid border-gray-200 bg-zinc-700/10 bg-none bg-contain bg-left bg-no-repeat align-top transition-all after:absolute after:top-px after:h-4 after:w-4 after:translate-x-px after:bg-white after:content-[''] checked:border-blue-500/95 checked:bg-blue-500/95 checked:bg-none checked:bg-right"
                                type="checkbox" />
                            <label class="ml-2 font-normal cursor-pointer select-none text-sm text-slate-700"
                                for="rememberMe">Remember me</label>
                        </div>

                        <div class="text-center">
                            <button type="submit" :disabled="form.processing"
                                :class="{ 'opacity-50 cursor-not-allowed': form.processing }"
                                class="inline-block w-full px-16 py-3.5 mt-6 mb-0 font-bold leading-normal text-center text-white align-middle transition-all bg-blue-500 border-0 rounded-lg cursor-pointer hover:-translate-y-px active:opacity-85 hover:shadow-xs text-sm ease-in tracking-tight-rem shadow-md bg-150 bg-x-25">
                                Sign in
                            </button>
                        </div>
                    </form>
                </div>

                <div class="text-center pt-0 px-1 sm:px-6">
                    <p class="text-sm">
                        Don't have an account?
                        <Link href="/register" class="text-blue-500 font-semibold">Sign up</Link>
                    </p>
                </div>
            </div>
        </div>
    </AuthLayout>
</template>

<script setup>
import { useForm, Link } from '@inertiajs/vue3'
import AuthLayout from '@/layouts/AuthenticatedLayout.vue'

const form = useForm({
    email: '',
    password: '',
    remember: false,
})

function submit() {
    form.post(route('login'), {
        onFinish: () => form.reset('password'),
    })
}
</script>

Penjelasan

<template>

Bagian ini adalah struktur HTML tampilan yang akan dirender oleh komponen.

<AuthLayout>

• Ini artinya seluruh konten halaman login ini akan berada dalam layout otentikasi khusus, seperti tampilan halaman login yang berbeda dari dashboard utama setelah user login.

2. Struktur Tampilan Form Login

Container

<div class="flex flex-col w-full max-w-full px-3 ...">

• Baris ini adalah wrapper utama untuk mengatur lebar, padding, dan responsivitas tampilan.
• Gunakan lg:w-5/12 dan xl:w-4/12 agar tampilan tetap proporsional di layar besar.

Box Form Login

<div class="relative flex flex-col min-w-0 break-words ...">

• Bagian ini adalah kotak konten form login.
• Sudah dilengkapi padding, border radius (rounded-2xl), dan responsive shadow.

3. Judul dan Deskripsi

<h4 class="font-bold">Sign In</h4>
<p class="mb-0">Enter your email and password to sign in</p>

• Menjelaskan kepada user bahwa ini adalah halaman untuk masuk ke aplikasi.

4. Form Login

@submit.prevent="submit"

• Ketika form dikirim, maka tidak akan reload halaman (karena .prevent), dan akan memanggil fungsi submit() di <script setup>.

Validasi

<div v-if="form.errors.email || form.errors.password" class="mb-4 text-sm text-red-600">

• Menampilkan error dari backend apabila email atau password tidak valid.

Input Email & Password

<input v-model="form.email" type="email" ... />
<input v-model="form.password" type="password" ... />

• Binding langsung ke form object (useForm) menggunakan v-model, jadi nilai input akan otomatis sinkron ke data form.
• Sudah dilengkapi dengan Tailwind class dari Argon, termasuk focus effect dan style untuk dark mode.

Checkbox “Remember Me”

<input v-model="form.remember" type="checkbox" ... />

• Jika dicentang, maka akan menyimpan sesi login pengguna lebih lama.
• Class yang dipakai kompleks karena mengadopsi style dari Argon dengan animasi dan efek khusus.

Tombol Login

<button :disabled="form.processing" ...>

• :disabled akan aktif saat sedang proses login (form.processing) untuk mencegah klik berulang.
• Class disesuaikan agar tampilan terlihat seperti tombol modern yang interaktif.

5. Link ke Halaman Register

<Link href="/register" class="text-blue-500 font-semibold">Sign up</Link>

• Link dari @inertiajs/vue3 digunakan agar navigasi ke halaman register tidak melakukan full reload.
• Lebih cepat dan lebih smooth karena SPA.

6. <script setup>

import { useForm, Link } from '@inertiajs/vue3'
import AuthLayout from '@/layouts/AuthenticatedLayout.vue'

• useForm adalah fitur dari Inertia untuk mengelola form secara reactive, otomatis menangani error dan status.
• AuthLayout adalah layout pembungkus tampilan ini.
• Link adalah komponen untuk navigasi halaman.

Data Form

const form = useForm({
    email: '',
    password: '',
    remember: false,
})

• Object form ini akan di-bind ke input menggunakan v-model.

Fungsi Submit

function submit() {
    form.post(route('login'), {
        onFinish: () => form.reset('password'),
    })
}

• Mengirim data ke route login (pastikan route ini tersedia di Laravel).
• Setelah proses selesai (sukses/gagal), field password akan dikosongkan kembali untuk keamanan.

Preview

Silakan jalankan project menggunakan perintah composer run dev, kemudian jika kita akses halaman:

http://127.0.0.1:8000/login

maka akan terlihat seperti berikut ini:

Pada materi berikutnya, kita akan belajar mengintegrasikan register page yang disediakan oleh Argon Dashboard Template kedalam project laravel kita.