Skip to main content

Forms

Auth Login Form code

Copy the implementation or inspect every file that belongs to this component unit.

resources/views/components/ui/auth-login-form.blade.php

@props([
    'action' => null,
    'title' => 'Welcome back',
    'description' => 'Sign in to continue to your workspace.',
    'loginName' => 'login',
    'registerHref' => null,
    'resetHref' => null,
    'submitLabel' => 'Sign in',
])

@php
    $errors ??= new Illuminate\Support\ViewErrorBag;
    $action ??= Route::has('login') ? route('login') : '#';
    $registerHref ??= Route::has('register') ? route('register') : '#';
    $resetHref ??= Route::has('password.request') ? route('password.request') : null;
@endphp

<div {{ $attributes }}>
    <div>
        <p class="text-xs font-bold uppercase tracking-[0.2em] text-brand-600 dark:text-brand-400">Secure access</p>
        <h2 class="mt-3 font-display text-3xl font-semibold tracking-tight text-gray-950 sm:text-4xl dark:text-white">{{ $title }}</h2>
        <p class="mt-3 text-sm leading-6 text-gray-500 dark:text-gray-400">{{ $description }}</p>
    </div>

    <x-auth-session-status class="mt-6" :status="session('status')" />

    <form method="POST" action="{{ $action }}" class="mt-8 space-y-5">
        @csrf

        <x-ui.field label="Email or username" for="full-page-login" :error="$errors->first($loginName)" required>
            <x-ui.input
                id="full-page-login"
                :name="$loginName"
                type="text"
                icon="user"
                :value="old($loginName)"
                placeholder="you@example.com"
                :invalid="$errors->has($loginName)"
                required
                autofocus
                autocomplete="username"
            />
        </x-ui.field>

        <x-ui.field label="Password" for="full-page-password" :error="$errors->first('password')" required>
            <x-ui.input
                id="full-page-password"
                name="password"
                type="password"
                icon="lock"
                placeholder="Enter your password"
                :invalid="$errors->has('password')"
                required
                autocomplete="current-password"
            />
        </x-ui.field>

        <div class="flex items-center justify-between gap-4">
            <x-ui.checkbox name="remember" label="Remember me" />
            @if ($resetHref)
                <a href="{{ $resetHref }}" class="text-sm font-semibold text-gray-600 transition hover:text-gray-950 hover:underline dark:text-gray-300 dark:hover:text-white">Forgot password?</a>
            @endif
        </div>

        <x-ui.button type="submit" size="lg" block icon-trailing="arrow-right">{{ $submitLabel }}</x-ui.button>
    </form>

    <p class="mt-7 text-sm text-gray-500 dark:text-gray-400">
        New to {{ config('app.name') }}?
        <a href="{{ $registerHref }}" class="font-semibold text-gray-950 hover:underline dark:text-white">Create an account</a>
    </p>
</div>