core/php-framework
8
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Convert login form to use Flux UI components

Browse source 
Replace raw HTML form elements with Flux UI equivalents:
- flux:heading and flux:subheading for title
- flux:input for email and password fields
- flux:checkbox for remember me
- flux:link for back navigation

Flux UI components integrate properly with Livewire and
handle loading states automatically.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Snider 2026-01-23 12:00:30 +00:00
parent f6c688d4e1
commit 5919bca336
1 changed files with 20 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
app/Website/Demo/View/Blade/web/login.blade.php
View file

@ -2,55 +2,32 @@
<div class="w-full max-w-md"> <div class="w-full max-w-md">
{{-- Header --}} {{-- Header --}}
<div class="text-center mb-8"> <div class="text-center mb-8">
<h1 class="text-2xl font-bold text-white mb-2">Sign in to {{ config('app.name', 'Core PHP') }}</h1> <flux:heading size="xl">Sign in to {{ config('app.name', 'Core PHP') }}</flux:heading>
<p class="text-zinc-400">Enter your credentials to continue</p> <flux:subheading>Enter your credentials to continue</flux:subheading>
</div> </div>
{{-- Login Form --}} {{-- Login Form --}}
<form wire:submit="login" class="bg-zinc-800/50 rounded-xl p-6 space-y-6"> <form wire:submit="login" class="bg-zinc-800/50 rounded-xl p-6 space-y-6">
{{-- Email --}} {{-- Email --}}
<div> <flux:input
<label for="email" class="block text-sm font-medium text-zinc-300 mb-2">Email address</label>
<input
wire:model="email" wire:model="email"
type="email" type="email"
id="email" label="Email address"
autocomplete="email"
class="w-full px-4 py-3 bg-zinc-900 border border-zinc-700 rounded-lg text-white placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent transition"
placeholder="you@example.com" placeholder="you@example.com"
> autocomplete="email"
@error('email') />
<p class="mt-2 text-sm text-red-400">{{ $message }}</p>
@enderror
</div>
{{-- Password --}} {{-- Password --}}
<div> <flux:input
<label for="password" class="block text-sm font-medium text-zinc-300 mb-2">Password</label>
<input
wire:model="password" wire:model="password"
type="password" type="password"
id="password" label="Password"
autocomplete="current-password"
class="w-full px-4 py-3 bg-zinc-900 border border-zinc-700 rounded-lg text-white placeholder-zinc-500 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:border-transparent transition"
placeholder="Enter your password" placeholder="Enter your password"
> autocomplete="current-password"
@error('password') />
<p class="mt-2 text-sm text-red-400">{{ $message }}</p>
@enderror
</div>
{{-- Remember Me --}} {{-- Remember Me --}}
<div class="flex items-center justify-between"> <flux:checkbox wire:model="remember" label="Remember me" />
<label class="flex items-center gap-2 cursor-pointer">
<input
wire:model="remember"
type="checkbox"
class="w-4 h-4 rounded border-zinc-600 bg-zinc-900 text-violet-600 focus:ring-violet-500 focus:ring-offset-zinc-900"
>
<span class="text-sm text-zinc-400">Remember me</span>
</label>
</div>
{{-- Submit --}} {{-- Submit --}}
<flux:button type="submit" variant="primary" class="w-full"> <flux:button type="submit" variant="primary" class="w-full">
@ -59,10 +36,8 @@
</form> </form>
{{-- Back to home --}} {{-- Back to home --}}
<p class="text-center mt-6 text-zinc-500"> <flux:link href="/" class="block text-center mt-6">
<a href="/" class="text-violet-400 hover:text-violet-300 transition">
&larr; Back to home &larr; Back to home
</a> </flux:link>
</p>
</div> </div>
</div> </div>