Add registration (#8)

config/livewire-use.php

@@ -23,5 +23,5 @@
     |
     */
 
-    'views_prefix' => 'templates::',
+    'views_prefix' => 'app::',
 ];

resources/css/components/_all.css

@@ -1,5 +1,8 @@
 @import 'button.css';
+@import 'card.css';
+@import 'checkbox.css';
 @import 'container.css';
 @import 'dropdown.css';
+@import 'form.css';
 @import 'input.css';
 @import 'navbar.css';

resources/css/components/button.css

@@ -1,6 +1,6 @@
 @layer components {
     .btn {
-        @apply inline-flex w-full shrink-0 cursor-pointer select-none flex-wrap items-center justify-center gap-1 border-transparent;
+        @apply inline-flex w-full shrink-0 cursor-pointer select-none flex-wrap items-center justify-center gap-1 rounded-lg border-transparent py-2.5 text-sm font-medium;
 
         &-disabled,
         &[disabled],

resources/css/components/card.css

@@ -0,0 +1,5 @@
+@layer components {
+    .card {
+        @apply w-full bg-white px-6 py-12 shadow-sm sm:max-w-lg sm:rounded-xl sm:px-12 dark:bg-gray-900;
+    }
+}

resources/css/components/checkbox.css

@@ -0,0 +1,7 @@
+@layer components {
+    .checkbox {
+        &-group {
+            @apply flex flex-1 items-center gap-1.5;
+        }
+    }
+}

resources/css/components/form.css

@@ -0,0 +1,13 @@
+@layer components {
+    .form {
+        @apply flex flex-col gap-6;
+    }
+
+    .field {
+        @apply w-full;
+    }
+
+    .label {
+        @apply block w-full text-sm font-medium leading-6 text-gray-950 dark:text-white;
+    }
+}

resources/css/components/input.css

@@ -1,17 +1,9 @@
 @layer components {
-    .field {
-        @apply w-full;
-    }
-
-    .label {
-        @apply block;
-    }
-
     .input {
-        @apply w-full focus:border-transparent focus:ring-0;
+        @apply w-full rounded-lg py-1.5 focus:border-transparent focus:ring-0;
 
         &-group {
-            @apply flex flex-1 items-center;
+            @apply flex flex-1 items-center border-0 bg-transparent px-0;
         }
 
         &-prepend {
@@ -26,12 +18,4 @@
             @apply border-0 border-opacity-0 bg-transparent;
         }
     }
-
-    .radio {
-        @apply hover:text-primary-500 inline-flex cursor-pointer items-center space-x-3 text-sm font-medium text-gray-400;
-
-        label {
-            @apply w-full;
-        }
-    }
 }

resources/css/components/radio.css

@@ -0,0 +1,9 @@
+@layer components {
+    .radio {
+        @apply hover:text-primary-500 inline-flex cursor-pointer items-center space-x-3 text-sm font-medium text-gray-400;
+
+        label {
+            @apply w-full;
+        }
+    }
+}

resources/views/auth/login.blade.php

@@ -1,6 +1,6 @@
-<x-ui-container class="flex h-screen items-center justify-center">
+<x-ui-container class="flex flex-col gap-y-6 h-screen items-center justify-center">
     <x-ui-card>
-        <form wire:submit="submit">
+        <form class="form" wire:submit="submit">
             <x-forms-input
                 wire:model="form.email"
                 type="email"
@@ -16,8 +16,16 @@
                 required
             />
 
-            <x-ui-button type="submit">
-                {{ __('Login') }}
+            <x-forms-checkbox
+                wire:model="form.remember"
+                label="{{ __('Remember me') }}"
+            />
+
+            <x-ui-button
+                class="btn-primary"
+                type="submit"
+            >
+                {{ __('Sign In') }}
             </x-ui-button>
         </form>
     </x-ui-card>

resources/views/auth/logout.blade.php

@@ -0,0 +1,3 @@
+<div>
+    {{-- nothing will be displayed here --}}
+</div>

resources/views/auth/register.blade.php

@@ -0,0 +1,34 @@
+<x-ui-container class="flex flex-col gap-y-6 h-screen items-center justify-center">
+    <x-ui-card>
+        <form class="form" wire:submit="submit">
+            <x-forms-input
+                wire:model="form.email"
+                type="email"
+                label="{{ __('Email') }}"
+                required
+                autofocus
+            />
+
+            <x-forms-input
+                wire:model="form.password"
+                type="password"
+                label="{{ __('Password') }}"
+                required
+            />
+
+            <x-forms-input
+                wire:model="form.password_confirmation"
+                type="password"
+                label="{{ __('Confirm Password') }}"
+                required
+            />
+
+            <x-ui-button
+                class="btn-primary"
+                type="submit"
+            >
+                {{ __('Sign Up') }}
+            </x-ui-button>
+        </form>
+    </x-ui-card>
+</x-ui-container>

resources/views/forms/checkbox.blade.php

@@ -0,0 +1,50 @@
+<div
+    wire:key="{{ $hash() }}"
+    class="field"
+>
+    <div {{ $attributes->class([
+        'checkbox-group' => filled($prepend || $append),
+        'checkbox-error' => $errors->has($id()),
+    ]) }}>
+        {{ $prepend }}
+
+        @if ($label && $left)
+            <x-forms-label
+                {{ $attributes->only('required') }}
+                for="{{ $id() }}"
+                :$label
+            />
+        @endif
+
+        <input
+            {{ $attributes
+                ->merge([
+                    'id' => $id(),
+                    'type' => 'checkbox',
+                ])
+                ->class([
+                    'checkbox peer',
+                    'checkbox-prepend' => filled($prepend),
+                    'checkbox-append' => filled($append),
+                    'checkbox-error' => $errors->has($id())
+                ])
+            }}
+        />
+
+        @if ($label && ! $left)
+            <x-forms-label
+                {{ $attributes->only('required') }}
+                for="{{ $id() }}"
+                :$label
+            />
+        @endif
+
+        {{ $append }}
+    </div>
+
+    @error($id())
+        <div class="input-error">
+            <span>{{ $message }}</span>
+        </div>
+    @enderror
+</div>

resources/views/forms/label.blade.php

@@ -1,7 +1,7 @@
-<label class="label">
+<label class="label" {{ $attributes }}>
     <span>{{ $label }}</span>
 
     @if ($required)
-        <span class="text-error">*</span>
+        <span class="text-primary-400">*</span>
     @endif
 </label>

src/Auth/Controllers/LogoutController.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace Foxws\LivewireUse\Auth\Controllers;
+
+use Foxws\LivewireUse\Views\Components\Page;
+use Livewire\Attributes\Layout;
+use Livewire\Features\SupportRedirects\Redirector;
+
+#[Layout('components.layouts.auth')]
+class LogoutController extends Page
+{
+    protected static string $view = 'auth.logout';
+
+    public function mount(): void
+    {
+        $this->seo()->setTitle(__('Logout'));
+        $this->seo()->setDescription(__('Account Logout'));
+
+        $this->submit();
+    }
+
+    public function submit(): Redirector
+    {
+        auth()->logout();
+
+        request()->session()->invalidate();
+
+        request()->session()->regenerateToken();
+
+        return redirect('/');
+    }
+}

src/Auth/Controllers/RegisterController.php

@@ -0,0 +1,30 @@
+<?php
+
+namespace Foxws\LivewireUse\Auth\Controllers;
+
+use Foxws\LivewireUse\Auth\Forms\RegisterForm;
+use Foxws\LivewireUse\Views\Components\Page;
+use Livewire\Attributes\Layout;
+
+#[Layout('components.layouts.auth')]
+class RegisterController extends Page
+{
+    protected static string $view = 'auth.register';
+
+    public RegisterForm $form;
+
+    public function mount(): void
+    {
+        $this->seo()->setTitle(__('Register'));
+        $this->seo()->setDescription(__('Sign up'));
+
+        if (static::isAuthenticated()) {
+            redirect()->intended();
+        }
+    }
+
+    public function submit(): void
+    {
+        $this->form->submit();
+    }
+}

src/Auth/Forms/LoginForm.php

@@ -17,10 +17,14 @@ class LoginForm extends Form
     #[Validate]
     public ?string $password = null;
 
+    #[Validate]
+    public ?bool $remember = null;
+
     public function rules(): array
     {
         return [
             'email' => 'required|email',
+            'remember' => 'nullable|boolean',
             'password' => [
                 'required',
                 Password::defaults(),
@@ -30,7 +34,7 @@ public function rules(): array
 
     protected function handle()
     {
-        if (Auth::attempt($this->all())) {
+        if (Auth::attempt($this->only('email', 'password'), $this->remember)) {
             session()->regenerate();
 
             return redirect()->intended();

src/Auth/Forms/RegisterForm.php

@@ -0,0 +1,63 @@
+<?php
+
+namespace Foxws\LivewireUse\Auth\Forms;
+
+use Foxws\LivewireUse\Forms\Components\Form;
+use Illuminate\Auth\Events\Registered;
+use Illuminate\Foundation\Auth\User;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Hash;
+use Illuminate\Validation\Rules\Password;
+use Livewire\Attributes\Validate;
+
+class RegisterForm extends Form
+{
+    protected static int $maxAttempts = 3;
+
+    #[Validate]
+    public ?string $email = null;
+
+    #[Validate]
+    public ?string $password = null;
+
+    #[Validate]
+    public ?string $password_confirmation = null;
+
+    public function rules(): array
+    {
+        return [
+            'email' => 'required|email|unique:users',
+            'password' => [
+                'required',
+                'confirmed',
+                Password::defaults(),
+            ],
+            'password_confirmation' => [
+                'required',
+                Password::defaults(),
+            ],
+        ];
+    }
+
+    protected function handle()
+    {
+        $data = $this->only('email', 'password');
+
+        $data['password'] = Hash::make($data['password']);
+
+        $user = $this->getUserModel()::create($data);
+
+        request()->session()->regenerate();
+
+        auth()->login($user);
+
+        event(new Registered($user));
+
+        redirect()->to('/');
+    }
+
+    protected function getUserModel(): User
+    {
+        return app(config('auth.providers.users.model'));
+    }
+}

src/Exceptions/RateLimitedException.php

@@ -6,18 +6,14 @@
 
 class RateLimitedException extends Exception
 {
-    public int $minutesUntilAvailable = 0;
-
     public function __construct(
         public string $ip,
-        public int $secondsUntilAvailable,
+        public int $seconds,
     ) {
-        $this->minutesUntilAvailable = ceil($this->secondsUntilAvailable / 60);
-
         parent::__construct(sprintf(
             'Too many requests from [%s]. Retry in %d seconds.',
             $this->ip,
-            $this->secondsUntilAvailable,
+            $this->seconds,
         ));
     }
 }