Auth Confirm Page

This confirm.blade.php file is a part of the App\Http\Livewire\Auth\Passwords namespace and it is used to confirm the user's password before proceeding. It requires the user to enter their password, validates it and then stores the confirmation time in the session. If the confirmation is successful, the user is redirected to the intended page.

Code Overview 📝

<?php 
namespace App\Http\Livewire\Auth\Passwords;

use function Livewire\Volt\{state, rules};

state(['password' => '']);
rules(['password' => 'required|current_password']);

$confirm = function(){
    $this->validate();
    session()->put('auth.password_confirmed_at', time());
    return redirect()->intended('/');
}
?>

The above PHP code sets initial state where the 'password' is set to an empty string. It also sets a rule that the 'password' field is required and it must match the current_password. The $confirm function validates the user input, if validation passes, it stores the confirmation time in the session and redirects the user to the intended page.

Blade Template Overview 📓

<x-layouts.app>
<div class="flex flex-col items-stretch justify-center w-screen h-screen sm:items-center">
    <div class="sm:mx-auto sm:w-full sm:max-w-md">
        <x-ui.link href="/">
            <x-ui.logo class="w-auto h-12 mx-auto text-gray-800 fill-current" />
        </x-ui.link>
        <h2 class="mt-6 text-3xl font-extrabold leading-9 text-center text-gray-800"> Confirm your password </h2>
        <p class="mt-2 text-sm leading-5 text-center text-gray-600 max-w"> Please confirm your password before continuing </p>
    </div>
    <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">
            @volt('auth.password.confirm')
            <form wire:submit="confirm" class="space-y-6">
                <x-ui.input label="Password" type="password" id="password" name="password" wire:model="password" />
                <div class="flex items-center justify-end text-sm">
                    <x-ui.text-link href="/auth/password/reset">Forgot your password?</x-ui.text-link>
                </div>
                <x-ui.button type="primary" submit="true">Confirm password</x-ui.button>
            </form>
            @endvolt
        </div>
    </div>
</div>
</x-layouts.app>

The above Blade template provides a user interface for password confirmation. It is wrapped in a layout component (x-layouts.app).

The layout contains:

• A link component with a logo inside
• A title and a small instruction text
• A Volt injection point
• A form with an input for the password, a link for password reset, and a button to confirm the password.

Components Involved 🧩

Several UI components are used in this blade file:

Component	Description
<x-ui.link>	This component is used to create a hyperlink.
<x-ui.logo>	This component is used to display the logo.
<x-ui.input>	This component is used to create an input field.
<x-ui.text-link>	This component is used to create a text hyperlink.
<x-ui.button>	This component is used to create a button.