lernschiff/resources/views/livewire/pages/auth/reset-password.blade.php

<?php

use Illuminate\Auth\Events\PasswordReset;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Password;
use Illuminate\Support\Facades\Session;
use Illuminate\Support\Str;
use Illuminate\Validation\Rules;
use Livewire\Attributes\Layout;
use Livewire\Attributes\Locked;
use Livewire\Volt\Component;

new #[Layout('layouts.guest')] class extends Component
{
    #[Locked]
    public string $token = '';
    public string $email = '';
    public string $password = '';
    public string $password_confirmation = '';

    public function mount(string $token): void
    {
        $this->token = $token;
        $this->email = request()->string('email');
    }

    public function resetPassword(): void
    {
        $this->validate([
            'token' => ['required'],
            'email' => ['required', 'string', 'email'],
            'password' => ['required', 'string', 'confirmed', Rules\Password::defaults()],
        ]);

        $status = Password::reset(
            $this->only('email', 'password', 'password_confirmation', 'token'),
            function ($user) {
                $user->forceFill([
                    'password' => Hash::make($this->password),
                    'remember_token' => Str::random(60),
                ])->save();
                event(new PasswordReset($user));
            }
        );

        if ($status != Password::PASSWORD_RESET) {
            $this->addError('email', __($status));
            return;
        }

        Session::flash('status', __($status));
        $this->redirectRoute('login', navigate: true);
    }
}; ?>

<div>
    <div class="mb-6">
        <h1 class="text-2xl font-bold tracking-tight text-text-primary">Neues Passwort</h1>
        <p class="text-sm text-text-muted mt-1">Wähle ein sicheres neues Passwort für dein Konto.</p>
    </div>

    <form wire:submit="resetPassword" class="space-y-4">

        <div>
            <x-input-label for="email" value="E-Mail-Adresse" />
            <x-text-input
                wire:model="email"
                id="email"
                type="text"
                name="email"
                required
                autofocus
                autocomplete="username"
            />
            <x-input-error :messages="$errors->get('email')" />
        </div>

        <div>
            <x-input-label for="password" value="Neues Passwort" />
            <div class="relative" x-data="{ showPassword: false }">
                <x-text-input
                    wire:model="password"
                    id="password"
                    type="password"
                    x-bind:type="showPassword ? 'text' : 'password'"
                    name="password"
                    required
                    autocomplete="new-password"
                    class="pr-10"
                />
                <button type="button" @click="showPassword = !showPassword"
                    class="absolute right-3 top-1/2 -translate-y-1/2 text-text-muted hover:text-text-secondary transition-colors duration-150 cursor-pointer"
                    aria-label="Passwort anzeigen">
                    <span x-show="!showPassword">
                        <x-heroicon-o-eye class="w-4 h-4" />
                    </span>
                    <span x-show="showPassword" x-cloak>
                        <x-heroicon-o-eye-slash class="w-4 h-4" />
                    </span>
                </button>
            </div>
            <x-input-error :messages="$errors->get('password')" />
        </div>

        <div>
            <x-input-label for="password_confirmation" value="Passwort bestätigen" />
            <div class="relative" x-data="{ showPassword: false }">
                <x-text-input
                    wire:model="password_confirmation"
                    id="password_confirmation"
                    type="password"
                    x-bind:type="showPassword ? 'text' : 'password'"
                    name="password_confirmation"
                    required
                    autocomplete="new-password"
                    class="pr-10"
                />
                <button type="button" @click="showPassword = !showPassword"
                    class="absolute right-3 top-1/2 -translate-y-1/2 text-text-muted hover:text-text-secondary transition-colors duration-150 cursor-pointer"
                    aria-label="Passwort anzeigen">
                    <span x-show="!showPassword">
                        <x-heroicon-o-eye class="w-4 h-4" />
                    </span>
                    <span x-show="showPassword" x-cloak>
                        <x-heroicon-o-eye-slash class="w-4 h-4" />
                    </span>
                </button>
            </div>
            <x-input-error :messages="$errors->get('password_confirmation')" />
        </div>

        <x-primary-button class="w-full relative" style="position:relative;" wire:loading.attr="disabled">
            <span wire:loading.class="opacity-50" wire:target="resetPassword" class="flex items-center gap-2 transition-opacity">
                <x-heroicon-o-lock-closed class="w-4 h-4" />
                Passwort speichern
            </span>
            <span wire:loading.flex wire:target="resetPassword" style="position:absolute;top:0;right:0;bottom:0;left:0;align-items:center;justify-content:center;">
                <svg class="animate-spin w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
                </svg>
            </span>
        </x-primary-button>

    </form>
</div>