feat(auth pages): added login and register pages

- fixed input component that not shows input field if label is not passed in props

app/UserTypes.php

@@ -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;});
+    }
+}

resources/views/auth/login.blade.php

@@ -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>

resources/views/auth/register.blade.php

@@ -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>

resources/views/components/button-sm.blade.php

@@ -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>

resources/views/components/input.blade.php

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

resources/views/components/layout.blade.php

@@ -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>

resources/views/components/logo.blade.php

@@ -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>

resources/views/components/navbar.blade.php

@@ -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>

resources/views/components/select.blade.php

@@ -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>

routes/web.php

@@ -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');