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

84 lines
3.1 KiB
PHP

<?php
use Illuminate\Support\Facades\Auth;
use Illuminate\Validation\ValidationException;
use Livewire\Attributes\Layout;
use Livewire\Volt\Component;
new #[Layout('layouts.guest')] class extends Component
{
public string $password = '';
public bool $showPassword = false;
public function confirmPassword(): void
{
$this->validate([
'password' => ['required', 'string'],
]);
if (! Auth::guard('web')->validate([
'email' => Auth::user()->email,
'password' => $this->password,
])) {
throw ValidationException::withMessages([
'password' => __('auth.password'),
]);
}
session(['auth.password_confirmed_at' => time()]);
$this->redirectIntended(default: route('dashboard', absolute: false), navigate: true);
}
}; ?>
<div>
<div class="mb-6">
<h1 class="text-2xl font-bold tracking-tight text-[--color-text-primary]">Sicherheitsbereich</h1>
<p class="text-sm text-[--color-text-muted] mt-1">
Bitte bestätige dein Passwort, um fortzufahren.
</p>
</div>
<form wire:submit="confirmPassword" class="space-y-4">
<div>
<x-input-label for="password" value="Aktuelles Passwort" />
<div class="relative">
<x-text-input
wire:model="password"
id="password"
:type="$showPassword ? 'text' : 'password'"
name="password"
required
autocomplete="current-password"
class="pr-10"
/>
<button type="button" wire:click="$set('showPassword', !$showPassword)"
class="absolute right-3 top-1/2 -translate-y-1/2 text-[--color-text-muted] hover:text-[--color-text-secondary] transition-colors duration-150 cursor-pointer"
aria-label="Passwort anzeigen">
@if($showPassword)
<x-heroicon-o-eye-slash class="w-4 h-4" />
@else
<x-heroicon-o-eye class="w-4 h-4" />
@endif
</button>
</div>
<x-input-error :messages="$errors->get('password')" />
</div>
<x-primary-button class="w-full" wire:loading.attr="disabled">
<span wire:loading.remove wire:target="confirmPassword">
<x-heroicon-o-shield-check class="w-4 h-4" />
Bestätigen
</span>
<span wire:loading wire:target="confirmPassword" class="flex items-center gap-2">
<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>
Wird geprüft…
</span>
</x-primary-button>
</form>
</div>