Improving the default Laravel login and register views

Improving the default Laravel login and register views in such a simple manner but making a noticeable change in appearance.

The default Laravel login view

Now let’s update the look of these auth views.

In the auth layout blade file views/components/layout/auth.blade.php

<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100 dark:bg-gray-900">
    <div>
        <a href="/">
            <h1 class="text-4xl tracking-wider text-gray-900 dark:text-white mb-4">App name</h1>
        </a>
    </div>

    <div class="w-full sm:max-w-md mt-6 px-6 py-8 bg-white dark:bg-gray-800 shadow-md overflow-hidden sm:rounded-md">
        {{ $slot }}
    </div>
</div>

This replaces the default Laravel SVG with the App name in large text, you could also use your logo here.

In the login view views/auth/login.blade.php

<h2 class="text-xl md:text-2xl font-light tracking-wide text-gray-900 dark:text-white text-center mb-4">Login</h2>

Added description text for what the form is i.e. login

Now to move the login button across to the left and have forgot password text beside it on the right.

This is achieved by creating flex divs with half-width on medium screens and above.

<div class="md:flex mt-4">
    <div class="w-full md:w-1/2 mt-2 text-center md:text-start">
        <x-primary-button class="ml-1 px-8">
            {{ __('Log in') }}
        </x-primary-button>
    </div>
    <div class="w-full md:w-1/2 mt-4 text-start md:text-end">
        @if (Route::has('password.request'))
            <a class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800"
               href="{{ route('password.request') }}">
                {{ __('Forgot your password?') }}
            </a>
        @endif
    </div>
</div>

The primary button also gets an update

<button {{ $attributes->merge(['type' => 'submit', 'class' => 'inline-flex items-center px-4 py-2 border-primary bg-primary text-white shadow-primary/60 border border-transparent rounded-md font-semibold text-xs text-white dark:text-gray-200 uppercase tracking-widest hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition ease-in-out duration-150']) }}>
    {{ $slot }}
</button>

This is the result

The same gets done for the register and forgot password views