lernschiff/resources/views/livewire/pages/auth/verify-email.blade.php

69 lines
2.8 KiB
PHP

<?php
use App\Livewire\Actions\Logout;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Session;
use Livewire\Attributes\Layout;
use Livewire\Volt\Component;
new #[Layout('layouts.guest')] class extends Component
{
public function sendVerification(): void
{
if (Auth::user()->hasVerifiedEmail()) {
$this->redirectIntended(default: route('dashboard', absolute: false), navigate: true);
return;
}
Auth::user()->sendEmailVerificationNotification();
Session::flash('status', 'verification-link-sent');
}
public function logout(Logout $logout): void
{
$logout();
$this->redirect('/', navigate: true);
}
}; ?>
<div>
<div class="mb-6">
<h1 class="text-2xl font-bold tracking-tight text-text-primary">E-Mail bestätigen</h1>
<p class="text-sm text-text-muted mt-1">
Bitte klicke auf den Link in der E-Mail, die wir dir gesendet haben.
Kein Link erhalten? Wir schicken dir einen neuen.
</p>
</div>
@if (session('status') == 'verification-link-sent')
<div class="flex items-center gap-2 text-sm font-medium text-success bg-[oklch(0.96_0.05_155)] border border-[oklch(0.88_0.10_155)] rounded-lg px-4 py-3 mb-5">
<x-heroicon-s-check-circle class="w-4 h-4 shrink-0" />
Neuer Bestätigungslink wurde gesendet.
</div>
@endif
<div class="space-y-3">
<x-primary-button class="w-full relative" style="position:relative;" wire:click="sendVerification" wire:loading.attr="disabled">
<span wire:loading.class="opacity-50" wire:target="sendVerification" class="flex items-center gap-2 transition-opacity">
<x-heroicon-o-envelope class="w-4 h-4" />
Bestätigungslink erneut senden
</span>
<span wire:loading.flex wire:target="sendVerification" 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>
<button
wire:click="logout"
type="button"
class="w-full flex items-center justify-center gap-2 px-5 py-2.5 text-sm font-medium text-text-secondary hover:text-text-primary border border-border-subtle rounded-lg hover:bg-bg-base transition-all duration-150 cursor-pointer"
>
<x-heroicon-o-arrow-left-on-rectangle class="w-4 h-4" />
Abmelden
</button>
</div>
</div>