ilycats/resources/views/profile/partials/update-profile-information-form.blade.php

<section class="space-y-6">
    <header>
        <h2 class="text-lg font-medium text-gray-900">
            {{ __('Informasi profil') }}
        </h2>
        <p class="mt-1 text-sm text-gray-600">
            {{ __("Update your account's profile information and email address.") }}
        </p>
    </header>

    {{-- Form Profile Standar --}}
    <form id="send-verification" method="post" action="{{ route('verification.send') }}">
        @csrf
    </form>

    <form method="post" action="{{ route('profile.update') }}" class="mt-6 space-y-6">
        @csrf
        @method('patch')

        <div>
            <x-input-label for="name" :value="__('Name')" />
            <x-text-input id="name" name="name" type="text" class="mt-1 block w-full" :value="old('name', $user->name)" required autofocus autocomplete="name" />
            <x-input-error class="mt-2" :messages="$errors->get('name')" />
        </div>

        <div>
            <x-input-label for="email" :value="__('Email')" />
            <x-text-input id="email" name="email" type="email" class="mt-1 block w-full" :value="old('email', $user->email)" required autocomplete="username" />
            <x-input-error class="mt-2" :messages="$errors->get('email')" />

            @if ($user instanceof \Illuminate\Contracts\Auth\MustVerifyEmail && ! $user->hasVerifiedEmail())
                {{-- Verification Logic --}}
                <div class="mt-2">
                    <p class="text-sm text-gray-800">
                        {{ __('Your email address is unverified.') }}
                        <button form="send-verification" class="underline text-sm text-gray-600 hover:text-gray-900">
                            {{ __('Click here to re-send the verification email.') }}
                        </button>
                    </p>
                </div>
            @endif
        </div>

        <div class="flex items-center gap-4">
            <x-primary-button>{{ __('Save') }}</x-primary-button>
        </div>
    </form>

    <hr class="border-slate-100 my-8">

    {{-- SECTION BIOMETRIK: DISESUAIKAN DENGAN DESIGN ILYCATS --}}
    <div class="p-8 bg-indigo-600 rounded-[2.5rem] text-white shadow-xl shadow-indigo-100 relative overflow-hidden group">
        <div class="relative z-10">
            <div class="flex items-center gap-4 mb-6">
                <div class="w-12 h-12 bg-white/20 backdrop-blur-md rounded-2xl flex items-center justify-center border border-white/30">
                    <i class="fas fa-fingerprint text-xl text-white"></i>
                </div>
                <div>
                    <h4 class="text-sm font-black uppercase tracking-widest">Keamanan Biometrik</h4>
                    <p class="text-[10px] text-indigo-100 font-bold uppercase tracking-tighter opacity-80">Passkeys • Face ID • Windows Hello</p>
                </div>
            </div>
            
            <p class="text-xs text-indigo-50 mb-6 leading-relaxed max-w-sm">
                Daftarkan wajah atau sidik jari Anda. Setelah terdaftar, Anda bisa masuk ke sistem tanpa perlu mengetik password lagi.
            </p>
            
            <button type="button" id="register-passkey" 
                    class="inline-flex items-center px-6 py-3 bg-white text-indigo-600 rounded-xl font-black text-[10px] uppercase tracking-widest hover:bg-indigo-50 transition-all shadow-lg active:scale-95 disabled:opacity-50">
                <i class="fas fa-plus-circle mr-2"></i> DAFTARKAN WAJAH SEKARANG
            </button>
        </div>
        
        {{-- Dekorasi Ikon --}}
        <i class="fas fa-shield-check absolute -bottom-6 -right-6 text-9xl text-white/10 -rotate-12"></i>
    </div>
</section>

{{-- PERBAIKAN SCRIPT: MENGGUNAKAN TYPE MODULE --}}
<script type="module">
    // 1. Ambil objek UTAMA (Default Export), bukan fungsi named-nya
    import WebAuthn from "{{ asset('vendor/webauthn/webauthn.js') }}";

    const regBtn = document.getElementById('register-passkey');
    
    if (regBtn) {
        regBtn.addEventListener('click', async () => {
            const btn = regBtn;
            const originalText = btn.innerHTML;

            try {
                btn.disabled = true;
                btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> MENUNGGU SCAN...';

                // 2. Panggil fungsi register melalui objek WebAuthn
                const response = await WebAuthn.register();

                if (response.success) {
                    alert("Berhasil! Wajah/Sidik Jari telah terdaftar.");
                    window.location.reload();
                }
            } catch (error) {
                console.error(error);
                alert("Pendaftaran gagal. Pastikan perangkat mendukung biometrik.");
            } finally {
                btn.disabled = false;
                btn.innerHTML = originalText;
            }
        });
    }
</script>