mailwolt/resources/views/livewire/auth/signup-form.blade.php

<div class="w-full min-h-[86vh] grid place-items-center #px-4
        bg-[radial-gradient(1200px_600px_at_10%_-10%,rgba(59,130,246,.08),transparent),
            radial-gradient(900px_500px_at_90%_0%,rgba(99,102,241,.06),transparent)]">
    @if ($successMessage)
        <div
            x-data="{ open: true }"
            x-show="open"
            x-transition.opacity
            class="rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md
                       shadow-[0_10px_30px_rgba(0,0,0,.35)] px-4 py-3 mb-6"
        >
            <div class="flex items-start gap-3">
                <div class="shrink-0 inline-grid place-items-center w-9 h-9 rounded-xl
                                bg-emerald-500/15 border border-emerald-400/30">
                    <i class="ph ph-check text-emerald-300 text-lg"></i>
                </div>
                <div class="text-sm text-gray-200/90">
                    <p class="font-semibold text-emerald-300">Signup erfolgreich</p>
                    <p>{{ session('signup_success') }}</p>
                    <a href="{{ route('login') }}"
                       class="mt-2 inline-flex items-center gap-2 px-3 py-1.5 rounded-lg
                                  bg-gradient-to-b from-cyan-500 to-cyan-600 text-white text-sm
                                  hover:from-cyan-400 hover:to-cyan-600">
                        Zum Login
                        <i class="ph ph-arrow-right"></i>
                    </a>
                </div>
                <button @click="open=false"
                        class="ml-auto rounded-lg bg-white/10 hover:bg-white/15 border border-white/15
                                   w-8 h-8 grid place-items-center">
                    <i class="ph ph-x text-gray-200"></i>
                </button>
            </div>
        </div>
    @endif

    <div class="nx-card w-full max-w-[520px]">
        <div class="flex items-center justify-between mb-5">
            <span class="nx-chip">Neu hier?</span>
            <i class="ph ph-user-plus text-white/60"></i>
        </div>

        <p class="nx-subtle mb-7">
            Erstelle ein Konto, um mit MailWolt zu starten.
        </p>

        <form wire:submit.prevent="register" class="space-y-5">
            <div>
                <label class="nx-label" for="name">Name</label>
                <input id="name" type="text" wire:model.defer="name" class="nx-input" autofocus>
                @error('name') <p class="field-error">{{ $message }}</p> @enderror
            </div>

            <div>
                <label class="nx-label" for="email">E-Mail</label>
                <input id="email" type="text" wire:model.defer="email" class="nx-input" autocomplete="username">
                @error('email') <p class="field-error">{{ $message }}</p> @enderror
            </div>

            <div>
                <label class="nx-label" for="password">Passwort</label>
                <div class="relative">
                    <input id="password" type="password" wire:model.defer="password" class="nx-input pr-10"
                           autocomplete="new-password">
                    <button type="button" class="nx-eye" onclick="togglePassword('password', this)">
                        <i class="ph ph-eye text-white/60"></i>
                    </button>
                </div>
                @error('password') <p class="field-error">{{ $message }}</p> @enderror
            </div>

            <div>
                <label class="nx-label" for="password_confirmation">Passwort bestätigen</label>
                <div class="relative">
                    <input id="password_confirmation" type="password" wire:model.defer="password_confirmation"
                           class="nx-input pr-10" autocomplete="new-password">
                    <button type="button" class="nx-eye" onclick="togglePassword('password_confirmation', this)">
                        <i class="ph ph-eye text-white/60"></i>
                    </button>
                </div>
            </div>

            <div>
                <label class="flex items-center gap-2 cursor-pointer">
                    <input type="checkbox" wire:model.live="accept" class="peer hidden">
                    <span
                        class="w-5 h-5 flex items-center justify-center rounded border border-white/30 bg-white/5 peer-checked:bg-sky-500/20 peer-checked:border-sky-400/50 transition">
                    <i class="ph ph-check text-sky-400 text-xs hidden peer-checked:inline nx-check"></i>
                </span>
                    <span class="text-sm text-white/70">Ich akzeptiere die Nutzungsbedingungen</span>
                </label>
                @error('accept') <p class="field-error">{{ $message }}</p> @enderror
            </div>

            <button type="submit" class="nx-btn w-full">Konto erstellen</button>

            {{-- Fehler/Success Flash --}}
            @if (session('error'))
                <div class="nx-alert mt-4">
                    <i class="ph ph-warning-circle text-rose-300"></i>
                    <div>
                        <p class="font-medium">Registrierung fehlgeschlagen</p>
                        <p class="text-sm/5 text-rose-200/90">{{ session('error') }}</p>
                    </div>
                </div>
            @endif
        </form>

        {{-- kleines clientseitiges Toggle, löst kein Livewire-Event aus --}}
        <script>
            function togglePassword(id, btn) {
                const input = document.getElementById(id);
                const icon = btn.querySelector('i');
                if (input.type === 'password') {
                    input.type = 'text';
                    icon.classList.replace('ph-eye', 'ph-eye-slash');
                } else {
                    input.type = 'password';
                    icon.classList.replace('ph-eye-slash', 'ph-eye');
                }
            }
        </script>
    </div>
</div>