Laravel 11 Event & Listener Send Email User Registered

Dispatch event when user is registered and send welcome email

// php artisan make:event UserRegistered
// app/Events/UserRegistered.php
namespace App\Events;

use App\Models\User;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class UserRegistered
{
    use Dispatchable, SerializesModels;

    public $user;

    /**
     * Create a new event instance.
     *
     * @param \App\Models\User $user
     */
    public function __construct(User $user)
    {
        $this->user = $user;
    }
}

// php artisan make:listener SendWelcomeEmail --event=UserRegistered
// app/Listeners/SendWelcomeEmail.php
namespace App\Listeners;

use App\Events\UserRegistered;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Queue\InteractsWithQueue;
use Illuminate\Support\Facades\Mail;
use App\Mail\WelcomeEmail;

class SendWelcomeEmail implements ShouldQueue
{
    use InteractsWithQueue;

    /**
     * Handle the event.
     *
     * @param \App\Events\UserRegistered $event
     */
    public function handle(UserRegistered $event)
    {
        // Send welcome email using the $event->user data
        Mail::to($event->user->email)->send(new WelcomeEmail($event->user));
    }
}

// php artisan make:mail WelcomeEmail
// app/Mail/WelcomeEmail.php
namespace App\Mail;

use App\Models\User;
use Illuminate\Bus\Queueable;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;

class WelcomeEmail extends Mailable
{
    use Queueable, SerializesModels;

    public $user;

    /**
     * Create a new message instance.
     *
     * @param \App\Models\User $user
     */
    public function __construct(User $user)
    {
        $this->user = $user;
    }

    /**
     * Build the message.
     *
     * @return $this
     */
    public function build()
    {
        return $this->view('emails.welcome')->with([
            'userName' => $this->user->name,
        ]);
    }
}
// resources/views/emails/welcome.blade.php
<!DOCTYPE html>
<html>
<head>
    <title>Welcome to BBMCode.com!</title>
</head>
<body>
    <h1>Hello, {{ $userName }}</h1>
    <p>Thank you for registering at our platform.</p>
</body>
</html>

// Dispatch event
namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use App\Models\User;
use App\Events\UserRegistered;
use Illuminate\Http\Request;

class RegisterController extends Controller
{
    public function register(Request $request)
    {
        // Validate and create the user
        $user = User::create($request->only('name', 'email', 'password'));

        // Dispatch the event
        event(new UserRegistered($user));

        return redirect()->route('home')->with('success', 'Registration successful.');
    }
}

// register the event and listener
// app/Providers/EventServiceProvider.php
protected $listen = [
    \App\Events\UserRegistered::class => [
        \App\Listeners\SendWelcomeEmail::class,
    ],
];

BBMCode

Vuejs Long press directive

A simple directive to execute a function when the element is long-pressed.

<template>
  <button v-longpress='showOptions'>Hold me for a while</button>
</template>

<script>
const PRESS_TIMEOUT = 1000

Vue.directive('longpress', {
  bind: function (el, { value }, vNode) {
    if (typeof value !== 'function') {
      console.warn(`Expect a function, got ${value}`)
      return
    }

    let pressTimer = null

    const start = e => {
      if (e.type === 'click' && e.button !== 0) {
        return;
      }

      if (pressTimer === null) {
        pressTimer = setTimeout(() => value(e), PRESS_TIMEOUT)
      }
    }

    const cancel = () => {
      if (pressTimer !== null) {
        clearTimeout(pressTimer)
        pressTimer = null
      }
    }

    ;['mousedown', 'touchstart'].forEach(e => el.addEventListener(e, start))
    ;['click', 'mouseout', 'touchend', 'touchcancel'].forEach(e => el.addEventListener(e, cancel))
  }
})
</script>

A more in-depth article with commented code can be found here.

Laravel 11 Event & Listener Send Email User Registered

BBMCode

Vuejs Long press directive

Nosakhare Obaseki