Form Message Area

#Error and success messages for forms in Laravel

@if ($errors->any())
    <div class="container px-5">
        <div class="alert alert-danger text-center pt-4 mx-auto">
            @foreach ($errors->all() as $error)
                <div>
                    {!! $error !!}
                </div>
                @if (!$loop->last)
                    <hr>
                @endif
            @endforeach
        </div>
    </div>
@endif

@if ($success)
    <div class="container px-5">
        <div class="alert alert-success text-center pt-4 mx-auto">
            {!! $success !!}
        </div>
    </div>
@endif

/**
* The above code in file - message-display.blade location: Resources/views/components
* The code below in file - MessageDisplay.php location:app/view/components
* The code below that is the basic login form that uses Bootstrap utilities
**/

<?php

namespace App\View\Components;

use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;

class MessageDisplay extends Component
{

    public $errors;
    public $success;
    /**
     * Create a new component instance.
     */
    public function __construct($errors = null, $success = null)
    {
        $this->errors = $errors;
        $this->success = $success;
    }

    /**
     * Get the view / contents that represent the component.
     */
    public function render(): View|Closure|string
    {
        return view('components.message-display');
    }
}


/**
* Basic login form
**/

@extends('layout')
@section('title', 'Login')

@section('content')
    <div class="wrapper m-5">
        <div class="mx-auto container p-5 mt-5 border border-success rounded">

            {{-- Display Validation Errors & success messages --}}
            <x-message-display :errors="$errors" :success="session('success')" />

            <form class="mx-5" action="{{ route('login.post') }}" method="POST">
                @csrf
                <div class="mb-3">
                    <label for="email" class="form-label">Email address</label>
                    <input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter your registered email address or Username">
                    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
                </div>
                <div class="mb-3">
                    <label for="password" class="form-label">Password</label>
                    <input type="password" name="password" class="form-control" id="password" placeholder="Enter your password">
                </div>
                <div class="mb-3 form-check">
                    <input type="checkbox" name="rememberme" class="form-check-input" id="rememberme">
                    <label class="form-check-label" for="rememberme">Remember Me!</label>
                </div>
                <button type="submit" class="btn btn-success">Log In</button>
            </form>
        </div>
    </div>
@endsection