Auth Reset Page

reset.blade.php

This file is responsible for displaying the reset password form in a Laravel project using the Livewire and Volt libraries. This form allows users to request a password reset link.

The file makes use of the Livewire's state and rules functions, which are imported at the beginning of the file. The state function is used to define an initial state, while the rules function sets validation rules for the email.

Code Explanation

PHP Code

<?php 
use Illuminate\Support\Facades\Password;
use function Livewire\Volt\{state, rules};

state(['email' => null, 'emailSentMessage' => false]);
rules(['email' => 'required|email']);

$sendResetPasswordLink = function(){
    $this->validate();
    $response = Password::broker()->sendResetLink(['email' => $this->email]);

    if ($response == Password::RESET_LINK_SENT) {
        $this->emailSentMessage = trans($response);
        return;
    }
    $this->addError('email', trans($response));
}
?>

The above PHP code does the following:

1. It uses two Laravel classes: Password from Illuminate\Support\Facades and state, rules from Livewire\Volt.

2. It defines two states: email and emailSentMessage with initial values null and false respectively.

3. It sets a validation rule for the email state. This requires that email should be a required field and a valid email address.

4. It defines a function sendResetPasswordLink that:

   • Validates the email using the set rules.
   • Sends a password reset link to the provided email.
   • If the link is sent successfully, it sets the emailSentMessage state to the response message. Otherwise, it adds an error to the email field with the response message.

HTML Code

<x-layouts.app>
    <div class="flex flex-col items-stretch justify-center w-screen h-screen sm:items-center">
        <!-- omitted code -->
        @volt('auth.password.reset')
            <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
                <div class="px-10 py-0 sm:py-8 sm:shadow-sm sm:bg-white sm:border sm:rounded-lg border-gray-200/60">
                    @if ($emailSentMessage)
                        <!-- omitted code -->
                    @else
                        <form wire:submit="sendResetPasswordLink" class="space-y-6">
                            <x-ui.input label="Email address" type="email" id="email" name="email" wire:model="email" />
                            <x-ui.button type="primary" submit="true">Send password reset link</x-ui.button>
                        </form>
                    @endif
                </div>
            </div>
        @endvolt
    </div>
</x-layouts.app>

The above HTML code section is responsible for:

1. Loading the app layout and indicating a section for the password reset.

2. If the $emailSentMessage state is true (meaning the password reset link was sent successfully), it displays a success message (omitted in the example for brevity).

3. If the $emailSentMessage state is false (i.e., the password reset link hasn't been sent), it displays a form for the user to enter their email and request a password reset link.

Note: The HTML code uses Volt and Blade syntax along with ✨ Tailwind CSS ✨ for styling.