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>