182 lines
11 KiB
PHP
182 lines
11 KiB
PHP
<?php if (isset($component)) { $__componentOriginal69dc84650370d1d4dc1b42d016d7226b = $component; } ?>
|
|
<?php if (isset($attributes)) { $__attributesOriginal69dc84650370d1d4dc1b42d016d7226b = $attributes; } ?>
|
|
<?php $component = App\View\Components\GuestLayout::resolve([] + (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag ? $attributes->all() : [])); ?>
|
|
<?php $component->withName('guest-layout'); ?>
|
|
<?php if ($component->shouldRender()): ?>
|
|
<?php $__env->startComponent($component->resolveView(), $component->data()); ?>
|
|
<?php if (isset($attributes) && $attributes instanceof Illuminate\View\ComponentAttributeBag): ?>
|
|
<?php $attributes = $attributes->except(\App\View\Components\GuestLayout::ignoredParameterNames()); ?>
|
|
<?php endif; ?>
|
|
<?php $component->withAttributes([]); ?>
|
|
|
|
<style>
|
|
@keyframes logo-breathing-glow {
|
|
0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(99, 102, 241, 0.2); border-color: rgba(255, 255, 255, 0.1); }
|
|
50% { transform: scale(1.08); box-shadow: 0 0 60px rgba(79, 70, 229, 0.6); border-color: rgba(129, 140, 248, 0.5); }
|
|
}
|
|
.animate-logo-glow { animation: logo-breathing-glow 4s ease-in-out infinite; }
|
|
|
|
/* Animasi Pulse untuk Ikon Biometrik */
|
|
@keyframes bio-pulse {
|
|
0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); }
|
|
70% { box-shadow: 0 0 0 15px rgba(79, 70, 229, 0); }
|
|
100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
|
|
}
|
|
.bio-pulse-effect { animation: bio-pulse 2s infinite; }
|
|
</style>
|
|
|
|
<?php $__env->slot('title', null, []); ?> Masuk | <?php echo e($setting->app_name ?? config('app.name')); ?> <?php $__env->endSlot(); ?>
|
|
|
|
<div class="min-h-screen flex bg-white overflow-hidden">
|
|
|
|
|
|
<div class="hidden lg:flex lg:w-[35%] relative bg-slate-900 justify-center items-center p-8">
|
|
<div class="absolute inset-0 bg-cover bg-center opacity-30" style="background-image: url('https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop');"></div>
|
|
<div class="absolute inset-0 bg-gradient-to-br from-slate-900 via-indigo-950 to-slate-900 opacity-95"></div>
|
|
|
|
<div class="relative z-10 text-center w-full max-w-xs">
|
|
<div class="inline-flex p-6 mb-8 bg-white/5 backdrop-blur-2xl rounded-[3rem] border border-white/10 animate-logo-glow transition-all">
|
|
<?php if(isset($setting) && isset($setting->app_logo)): ?>
|
|
<img src="<?php echo e(asset('storage/' . $setting->app_logo)); ?>" alt="Logo" class="h-24 w-auto max-w-[160px] object-contain filter drop-shadow-2xl">
|
|
<?php else: ?>
|
|
<div class="w-24 h-24 bg-indigo-600 rounded-[2rem] flex items-center justify-center text-4xl font-black text-white italic">I</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
<h2 class="text-3xl font-black text-white tracking-tighter mb-2 uppercase"><?php echo e($setting->app_name ?? 'Ily Cattery'); ?></h2>
|
|
<p class="text-indigo-300 text-[10px] font-bold uppercase tracking-[0.4em] leading-relaxed italic opacity-70"><?php echo e($setting->app_slogan ?? 'Intelligence Cattery System'); ?></p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="flex-1 flex items-center justify-center p-6 sm:p-12 lg:p-16 bg-slate-50/50">
|
|
<div class="w-full max-w-md space-y-10">
|
|
|
|
<div class="space-y-2 text-center lg:text-left">
|
|
<div class="lg:hidden flex justify-center mb-6">
|
|
<?php if(isset($setting) && isset($setting->app_logo)): ?>
|
|
<img src="<?php echo e(asset('storage/' . $setting->app_logo)); ?>" class="h-14 w-auto">
|
|
<?php endif; ?>
|
|
</div>
|
|
<h3 class="text-3xl font-black text-slate-900 tracking-tight">Access Portal</h3>
|
|
<p class="text-slate-500 font-medium text-sm">Gunakan kredensial Anda atau akses biometrik.</p>
|
|
</div>
|
|
|
|
<form method="POST" action="<?php echo e(route('login')); ?>" class="space-y-6">
|
|
<?php echo csrf_field(); ?>
|
|
|
|
<div class="space-y-4">
|
|
|
|
<div class="group">
|
|
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 block ml-1">Email / Username</label>
|
|
<div class="relative">
|
|
<span class="absolute inset-y-0 left-0 pl-5 flex items-center text-slate-300 group-focus-within:text-indigo-600 transition-colors">
|
|
<i class="fas fa-user-shield"></i>
|
|
</span>
|
|
<input type="email" name="email" :value="old('email')" required autofocus
|
|
class="block w-full pl-12 pr-4 py-4 bg-white border border-slate-200 rounded-2xl text-slate-900 text-sm font-semibold focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/30 transition-all outline-none shadow-sm"
|
|
placeholder="admin@ilycats.com">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="group">
|
|
<label class="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-2 block ml-1">Password</label>
|
|
<div class="relative flex items-center">
|
|
<span class="absolute left-0 pl-5 flex items-center text-slate-300 group-focus-within:text-indigo-600 transition-colors">
|
|
<i class="fas fa-lock"></i>
|
|
</span>
|
|
<input id="password-field" type="password" name="password" required
|
|
class="block w-full pl-12 pr-12 py-4 bg-white border border-slate-200 rounded-2xl text-slate-900 text-sm font-semibold focus:ring-4 focus:ring-indigo-500/10 focus:border-indigo-500/30 transition-all outline-none shadow-sm"
|
|
placeholder="••••••••">
|
|
<button type="button" onclick="togglePassword()" class="absolute right-4 p-2 text-slate-300 hover:text-indigo-600 transition-colors focus:outline-none">
|
|
<i id="toggle-icon" class="fas fa-eye text-sm"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center justify-between px-1">
|
|
<label class="inline-flex items-center cursor-pointer group">
|
|
<input type="checkbox" name="remember" class="w-5 h-5 rounded border-slate-300 text-indigo-600 focus:ring-indigo-500/20">
|
|
<span class="ml-3 text-xs font-bold text-slate-500 group-hover:text-slate-800 transition-colors">Ingat Sesi</span>
|
|
</label>
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center gap-4">
|
|
<button type="submit" class="flex-1 py-4 bg-slate-900 hover:bg-indigo-700 text-white text-xs font-black uppercase tracking-[0.2em] rounded-2xl shadow-xl shadow-indigo-200 transition-all hover:-translate-y-1">
|
|
Masuk Sistem
|
|
</button>
|
|
|
|
|
|
<button type="button" id="login-passkey" title="Login dengan Wajah / Biometrik"
|
|
class="w-14 h-14 flex items-center justify-center bg-indigo-50 border border-indigo-100 rounded-2xl text-indigo-600 hover:bg-indigo-600 hover:text-white transition-all duration-500 bio-pulse-effect active:scale-90">
|
|
<i class="fas fa-face-viewfinder text-xl"></i>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="pt-8 text-center border-t border-slate-100">
|
|
<p class="text-[9px] text-slate-400 font-bold uppercase tracking-widest opacity-60">
|
|
<?php echo e(date('Y')); ?> <?php echo e($setting->app_name ?? 'ILY CATTERY'); ?> • Encrypted Intelligence Access
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
function togglePassword() {
|
|
const passwordField = document.getElementById('password-field');
|
|
const toggleIcon = document.getElementById('toggle-icon');
|
|
passwordField.type = passwordField.type === 'password' ? 'text' : 'password';
|
|
toggleIcon.classList.toggle('fa-eye');
|
|
toggleIcon.classList.toggle('fa-eye-slash');
|
|
}
|
|
</script>
|
|
|
|
<script type="module">
|
|
import WebAuthn from "<?php echo e(asset('vendor/webauthn/webauthn.js')); ?>";
|
|
|
|
// Inisialisasi Instance
|
|
const webauthn = new WebAuthn();
|
|
const loginBtn = document.getElementById('login-passkey');
|
|
|
|
if (loginBtn) {
|
|
loginBtn.addEventListener('click', async () => {
|
|
const originalIcon = loginBtn.innerHTML;
|
|
|
|
try {
|
|
loginBtn.disabled = true;
|
|
loginBtn.classList.remove('bio-pulse-effect');
|
|
loginBtn.innerHTML = '<i class="fas fa-circle-notch fa-spin text-xl"></i>';
|
|
|
|
// Panggil login (sesuai metode di file webauthn.js Anda)
|
|
const response = await webauthn.login();
|
|
|
|
if (response) {
|
|
window.location.href = "<?php echo e(route('dashboard')); ?>";
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
alert("Gagal mengenali biometrik. Pastikan wajah Anda sudah terdaftar di pengaturan akun.");
|
|
loginBtn.innerHTML = originalIcon;
|
|
loginBtn.classList.add('bio-pulse-effect');
|
|
} finally {
|
|
loginBtn.disabled = false;
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
<?php echo $__env->renderComponent(); ?>
|
|
<?php endif; ?>
|
|
<?php if (isset($__attributesOriginal69dc84650370d1d4dc1b42d016d7226b)): ?>
|
|
<?php $attributes = $__attributesOriginal69dc84650370d1d4dc1b42d016d7226b; ?>
|
|
<?php unset($__attributesOriginal69dc84650370d1d4dc1b42d016d7226b); ?>
|
|
<?php endif; ?>
|
|
<?php if (isset($__componentOriginal69dc84650370d1d4dc1b42d016d7226b)): ?>
|
|
<?php $component = $__componentOriginal69dc84650370d1d4dc1b42d016d7226b; ?>
|
|
<?php unset($__componentOriginal69dc84650370d1d4dc1b42d016d7226b); ?>
|
|
<?php endif; ?><?php /**PATH /home/u806112658/domains/earrinasia.com/ilycats/resources/views/auth/login.blade.php ENDPATH**/ ?>
|