feat(auth pages): added login and register pages

- fixed input component that not shows input field if label is not passed in props
This commit is contained in:
kusowl 2026-01-08 18:03:12 +05:30
parent e9b873690e
commit 1938e8a864
10 changed files with 144 additions and 8 deletions

28
app/UserTypes.php Normal file
View File

@ -0,0 +1,28 @@
<?php
namespace App;
enum UserTypes: string
{
case Admin = 'admin';
case User = 'user';
case Broker = 'broker';
public function label(): string
{
return match ($this) {
UserTypes::Broker => 'Broker (Posts deals)',
UserTypes::User => 'User (Browse deals)',
self::Admin => 'Admin',
};
}
public static function labels(): array
{
$labels = array_map(function ($enum) {
return ['value' => $enum->value, 'label' =>$enum->label()];
}, self::cases());
return array_filter($labels, function ($kv) {return $kv['value'] !== self::Admin->value;});
}
}

View File

@ -0,0 +1,43 @@
<x-layout>
<section class="bg-linear-135 h-screen from-[#EFF6FF] to-[#FCF3F8] flex justify-center items-center">
<x-card class="md:w-96">
<div class="flex flex-col items-center space-y-5">
<x-logo class="w-fit"/>
<h1 class="font-bold text-2xl">Welcome Back</h1>
<p class=" text-accent-600 text-sm">Sign in to your {{config('app.name')}} account</p>
</div>
<form action="" class="flex flex-col space-y-5">
<x-input label="Email" name="email" type="email" placeholder="you@example.com"/>
<x-input label="Password" name="password" type="password"/>
<div class="flex justify-between">
<div class="flex items-center space-x-2">
<input type="checkbox" name="remember_me">
<label class="text-sm font-bold text-accent-600">Remember me</label>
</div>
<a class="text-blue-500 font-bold text-sm" href="">Forgot password?</a>
</div>
<x-button variant="neutral">Sign In</x-button>
</form>
<p class="text-center text-accent-600 text-xs">Don't have an account?
<a href="{{route('register')}}" class="text-blue-500 font-bold">Sign Up</a>
</p>
<div class="border-t border-t-accent-600/20 pt-5">
<p class="text-xs text-center text-accent-600">Demo Accounts</p>
<div class="flex justify-between mt-3 space-x-1 md:space-x-5">
<x-button-sm variant="ghost">Admin</x-button-sm>
<x-button-sm variant="ghost">Broker</x-button-sm>
<x-button-sm variant="ghost">User</x-button-sm>
</div>
</div>
</x-card>
<div class="absolute top-1 md:top-5 md:left-10">
<a href="{{route('home')}}" class="flex hover:underline">
<x-heroicon-o-arrow-left class="w-4 mr-2"/>
Back to Home
</a>
</div>
</section>
</x-layout>

View File

@ -0,0 +1,34 @@
@php
$options = \App\UserTypes::labels();
@endphp
<x-layout>
<section class="bg-linear-135 h-screen from-[#EFF6FF] to-[#FCF3F8] flex justify-center items-center">
<x-card class="md:w-96">
<div class="flex flex-col items-center space-y-5">
<x-logo class="w-fit"/>
<h1 class="font-bold text-2xl">Create Account</h1>
<p class=" text-accent-600 text-sm">Join {{config('app.name')}} and start discovering great deals</p>
</div>
<form action="" class="flex flex-col space-y-5">
<x-input label="Full Name" name="name" placeholder="Jhon Doe" />
<x-input label="Email" name="email" type="email" placeholder="you@example.com"/>
<x-select :options="$options" value-key="value" label-key="label" label="Account Type"/>
<x-input label="Password" name="password" type="password"/>
<x-input label="Confirm Password" name="password_confirmation" type="password"/>
<x-button variant="neutral">Create Account</x-button>
</form>
<p class="text-center text-accent-600 text-xs">Already have an account?
<a href="{{route('login')}}" class="text-blue-500 font-bold">Sign In</a>
</p>
</x-card>
<div class="absolute top-1 md:top-5 md:left-10">
<a href="{{route('home')}}" class="flex hover:underline">
<x-heroicon-o-arrow-left class="w-4 mr-2"/>
Back to Home
</a>
</div>
</section>
</x-layout>

View File

@ -0,0 +1,12 @@
@props(['variant' => ''])
@php
$variants = [
'neutral' => 'bg-primary-600 text-white',
'ghost' => 'bg-gray-100 text-black text-sm'
];
$variantClass = $variants[$variant] ?? '';
@endphp
<button {{$attributes->merge(['class' => "px-6 py-1 rounded-md font-medium hover:opacity-80 $variantClass"])}}>
{{$slot}}
</button>

View File

@ -1,10 +1,10 @@
@props(['label' => '', 'name' => '', 'placeholder' => '', 'type' => 'text'])
@if($label !== '')
<div class="flex flex-col space-y-2">
<div class="flex flex-col space-y-2">
@if($label !== '')
<label class="text-sm font-bold" for="{{$name}}">{{$label}}</label>
<input class="bg-[#F3F3F5] py-2 px-4 rounded-lg" type="{{$type}}" placeholder="{{$placeholder}}"
name="{{$name}}">
@endif
<input class="bg-[#F3F3F5] py-2 px-4 rounded-lg" type="{{$type}}" placeholder="{{$placeholder}}"
name="{{$name}}">
</div>
@endif

View File

@ -14,7 +14,7 @@
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-[#FFFFFF text-[#1b1b18] flex min-h-screen flex-col">
<body class="bg-[#FFFFFF] text-[#1b1b18] flex min-h-screen flex-col">
{{$slot}}
</body>
</html>

View File

@ -0,0 +1,3 @@
<div {{$attributes->merge(['class' => "p-3 rounded-lg bg-linear-120 from-[#136FFA] to-[#806CF9] text-white h-fit w-fit"])}}>
<p class="font-black">DH</p>
</div>

View File

@ -14,7 +14,7 @@
</div>
<div class="nav-buttons space-x-4 font-medium hidden sm:block ">
<a href="">Login</a>
<a href="{{route('login')}}">Login</a>
<a href="" class="ui-btn ui-btn-neutral">Register</a>
</div>
@ -36,7 +36,7 @@
<x-nav-links :link="route('home')" name="Explore deals" />
<x-nav-links :link="route('home')" name="About" />
<x-nav-links :link="route('home')" name="Contact" />
<a href="">Login</a>
<a href="{{route('login')}}">Login</a>
<a href="" class="ui-btn ui-btn-neutral w-fit">Register</a>
</ul>
</div>

View File

@ -0,0 +1,12 @@
@props(['options' => [], 'name' => '', 'placeholder' => '', 'labelKey' => 'label', 'valueKey' => 'value', 'label' => ''])
@if($label !== '')
<label class="text-sm font-bold" for="{{$name}}">{{$label}}</label>
@endif
<select name="{{$name}}" class="bg-[#F3F3F5] py-2 px-4 rounded-lg text-sm font-bold">
@if($placeholder !== '')
<option>{{$placeholder}}</option>
@endif
@foreach($options as $option)
<option value="{{$option[$valueKey]}}"> {{$option[$labelKey]}} </option>
@endforeach
</select>

View File

@ -4,3 +4,7 @@
use Illuminate\Support\Facades\Route;
Route::get('/', HomeController::class)->name('home');
Route::view('/login', 'auth.login')->name('login');
Route::view('/register', 'auth.register')->name('register');