MIF_HomsinNIME31231582/resources/views/auth/login.blade.php

109 lines
5.5 KiB
PHP

<x-guest-layout>
<!-- Session Status -->
<x-auth-session-status class="mb-4" :status="session('status')" />
<!-- Header dengan Logo -->
<div class="text-center mb-8">
<div class="bg-[#1e3a8a] w-20 h-20 rounded-2xl mx-auto mb-4 flex items-center justify-center shadow-lg">
<svg class="w-12 h-12 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253">
</path>
</svg>
</div>
<h2 class="text-2xl font-bold text-gray-900">Selamat Datang Kembali</h2>
<p class="text-sm text-gray-600 mt-1">Silakan login ke akun S-Learn Anda</p>
</div>
<form method="POST" action="{{ route('login') }}" class="space-y-6">
@csrf
<!-- Email Address -->
<div>
<label for="email" class="block text-sm font-medium text-gray-700 mb-2">
Email
</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207">
</path>
</svg>
</div>
<input id="email" type="email" name="email" value="{{ old('email') }}" required autofocus
autocomplete="username"
class="pl-10 w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-[#1e3a8a] focus:border-[#1e3a8a] transition duration-200 @error('email') border-red-500 @enderror"
placeholder="admin@gmail.com">
</div>
@error('email')
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
@enderror
</div>
<!-- Password -->
<div>
<label for="password" class="block text-sm font-medium text-gray-700 mb-2">
Password
</label>
<div class="relative">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
</path>
</svg>
</div>
<input id="password" type="password" name="password" required autocomplete="current-password"
class="pl-10 w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-[#1e3a8a] focus:border-[#1e3a8a] transition duration-200 @error('password') border-red-500 @enderror"
placeholder="********">
</div>
@error('password')
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
@enderror
</div>
<!-- Remember Me & Forgot Password -->
<div class="flex items-center justify-between">
<label class="flex items-center">
<input type="checkbox" name="remember"
class="rounded border-gray-300 text-[#1e3a8a] shadow-sm focus:ring-[#1e3a8a]">
<span class="ml-2 text-sm text-gray-600">Ingat saya</span>
</label>
@if (Route::has('password.request'))
<a href="{{ route('password.request') }}"
class="text-sm text-[#1e3a8a] hover:text-[#2b4a9e] hover:underline transition duration-200">
Lupa password?
</a>
@endif
</div>
<!-- Login Button -->
<button type="submit"
class="w-full bg-[#1e3a8a] text-white py-3 px-4 rounded-xl hover:bg-[#2b4a9e] focus:ring-4 focus:ring-[#1e3a8a]/50 transition duration-200 font-medium text-lg shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
<span class="flex items-center justify-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1">
</path>
</svg>
Masuk
</span>
</button>
<!-- Link ke Register (Jika diperlukan) -->
@if (Route::has('register'))
<div class="text-center mt-6 pt-6 border-t border-gray-200">
<p class="text-sm text-gray-600">
Belum punya akun?
<a href="{{ route('register') }}"
class="font-medium text-[#1e3a8a] hover:text-[#2b4a9e] hover:underline transition duration-200">
Daftar sekarang
</a>
</p>
</div>
@endif
</x-guest-layout>