144 lines
7.3 KiB
PHP
144 lines
7.3 KiB
PHP
<x-app-layout>
|
|
<div class="max-w-[1600px] mx-auto space-y-8 pb-12 px-4 sm:px-6 lg:px-8">
|
|
|
|
{{-- 1. Header & Navigasi --}}
|
|
<div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mt-8">
|
|
<div class="flex items-center gap-4">
|
|
<a href="{{ route('dashboard') }}" class="p-3 bg-white border border-slate-200 rounded-2xl text-slate-400 hover:text-indigo-600 transition-all shadow-sm active:scale-90">
|
|
<i class="fas fa-arrow-left"></i>
|
|
</a>
|
|
<div>
|
|
<h2 class="text-2xl md:text-3xl font-black text-slate-800 tracking-tight leading-none uppercase">{{ __('Pengaturan Akun') }}</h2>
|
|
<p class="text-sm text-slate-500 font-medium italic mt-1">Manajemen profil dan keamanan akses sistem</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden sm:flex items-center gap-3">
|
|
<span class="px-4 py-2 bg-indigo-50 text-indigo-600 rounded-xl text-[10px] font-black uppercase tracking-widest border border-indigo-100">
|
|
ID pengguna: #{{ str_pad(auth()->id(), 4, '0', STR_PAD_LEFT) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- 2. Grid Utama --}}
|
|
<div class="grid grid-cols-1 xl:grid-cols-12 gap-8">
|
|
|
|
{{-- SISI KIRI: Form Utama --}}
|
|
<div class="xl:col-span-8 space-y-8 min-w-0">
|
|
{{-- Form Update Informasi Profil --}}
|
|
<div class="p-6 md:p-10 bg-white border border-slate-200 rounded-[2.5rem] md:rounded-[3rem] shadow-sm relative overflow-hidden group">
|
|
<div class="max-w-2xl relative z-10">
|
|
@include('profile.partials.update-profile-information-form')
|
|
</div>
|
|
<i class="fas fa-user-circle absolute -bottom-10 -right-10 text-[12rem] text-slate-50/50 -rotate-12 transition-transform group-hover:rotate-0 duration-700 pointer-events-none opacity-20"></i>
|
|
</div>
|
|
|
|
{{-- Form Update Password --}}
|
|
<div class="p-6 md:p-10 bg-white border border-slate-200 rounded-[2.5rem] md:rounded-[3rem] shadow-sm relative overflow-hidden group">
|
|
<div class="max-w-2xl relative z-10">
|
|
@include('profile.partials.update-password-form')
|
|
</div>
|
|
<i class="fas fa-key absolute -bottom-10 -right-10 text-[12rem] text-slate-50/50 -rotate-12 transition-transform group-hover:rotate-0 duration-700 pointer-events-none opacity-20"></i>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- SISI KANAN: Widgets --}}
|
|
<div class="xl:col-span-4 space-y-8 min-w-0">
|
|
|
|
{{-- WIDGET BIOMETRIK --}}
|
|
<div class="p-8 md:p-10 bg-indigo-600 text-white rounded-[2.5rem] md:rounded-[3rem] shadow-xl shadow-indigo-100 relative overflow-hidden group">
|
|
<div class="relative z-10">
|
|
<div class="w-14 h-14 bg-white/10 backdrop-blur-xl border border-white/20 rounded-2xl flex items-center justify-center mb-6">
|
|
<i class="fas fa-fingerprint text-2xl text-indigo-200"></i>
|
|
</div>
|
|
|
|
<h3 class="text-xl font-black uppercase tracking-tight mb-2">Akses Biometrik</h3>
|
|
<p class="text-indigo-100 text-[11px] leading-relaxed font-medium mb-8">
|
|
Daftarkan wajah atau sidik jari perangkat ini untuk login instan tanpa mengetik password.
|
|
</p>
|
|
|
|
<button type="button" id="register-passkey"
|
|
class="w-full py-4 bg-white text-indigo-600 rounded-2xl font-black text-[10px] uppercase tracking-[0.2em] shadow-lg hover:bg-indigo-50 transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed">
|
|
<i class="fas fa-plus-circle mr-2"></i> AKTIFKAN SEKARANG
|
|
</button>
|
|
</div>
|
|
<i class="fas fa-shield-check absolute -bottom-10 -left-10 text-[15rem] text-white/5 -rotate-12 pointer-events-none"></i>
|
|
</div>
|
|
|
|
{{-- Tips Keamanan --}}
|
|
<div class="p-8 bg-slate-900 rounded-[2.5rem] md:rounded-[3rem] text-white relative overflow-hidden">
|
|
<h4 class="text-[10px] font-black text-indigo-400 uppercase tracking-[0.3em] mb-4">Breeder Security Tip</h4>
|
|
<p class="text-xs text-slate-300 leading-relaxed italic">
|
|
"Pastikan perangkat yang Anda daftarkan adalah milik pribadi atau perangkat operasional resmi Ilycats untuk menjaga keamanan data pembiakan."
|
|
</p>
|
|
<i class="fas fa-paw absolute -bottom-4 -right-4 text-6xl text-white/5 rotate-12"></i>
|
|
</div>
|
|
|
|
{{-- Hapus Akun --}}
|
|
<div class="p-8 md:p-10 bg-rose-50 border border-rose-100 rounded-[2.5rem] md:rounded-[3rem] shadow-sm">
|
|
@include('profile.partials.delete-user-form')
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script type="module">
|
|
import WebAuthn from "{{ asset('vendor/webauthn/webauthn.js') }}";
|
|
|
|
// 1. Definisikan rute secara manual agar tidak salah tebak path
|
|
const routes = {
|
|
registerOptions: "{{ url('webauthn/register/options') }}",
|
|
register: "{{ url('webauthn/register') }}",
|
|
loginOptions: "{{ url('webauthn/login/options') }}",
|
|
login: "{{ url('webauthn/login') }}"
|
|
};
|
|
|
|
// 2. Ambil token CSRF dari meta tag
|
|
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
|
|
|
|
if (!csrfToken) {
|
|
console.error("CSRF Token tidak ditemukan! Pastikan ada <meta name='csrf-token'> di head.");
|
|
}
|
|
|
|
// 3. Buat instansi dengan rute manual
|
|
const webauthn = new WebAuthn(routes, {}, false, csrfToken);
|
|
|
|
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> MENGHUBUNGI SERVER...';
|
|
|
|
// Tes koneksi dulu sebelum panggil sensor
|
|
console.log("Mencoba akses ke:", routes.registerOptions);
|
|
|
|
const response = await webauthn.register();
|
|
|
|
if (response) {
|
|
alert("Berhasil! Wajah/Sidik Jari telah terdaftar.");
|
|
window.location.reload();
|
|
}
|
|
} catch (error) {
|
|
console.error("DETAIL ERROR:", error);
|
|
|
|
// Jika error 404, kita beri pesan khusus
|
|
if (error.status === 404) {
|
|
alert("Error 404: Rute tidak ditemukan. Coba jalankan 'php artisan route:clear' di SSH.");
|
|
} else {
|
|
alert("Gagal: " + (error.statusText || "Pastikan perangkat mendukung biometrik."));
|
|
}
|
|
} finally {
|
|
btn.disabled = false;
|
|
btn.innerHTML = originalText;
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
@endpush
|
|
</x-app-layout> |