228 lines
11 KiB
PHP
228 lines
11 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Login - Sistem Antrian Puskesmas')
|
|
|
|
@section('content')
|
|
<div
|
|
class="min-h-screen flex items-center justify-center bg-gradient-to-br from-primary via-blue-600 to-secondary py-6 px-4 sm:px-6 lg:px-8">
|
|
<div class="max-w-md w-full space-y-8 animate-fade-in">
|
|
<!-- Header -->
|
|
<div class="text-center">
|
|
<div class="mx-auto h-20 w-20 bg-white rounded-full flex items-center justify-center mb-6 shadow-lg">
|
|
<span class="text-4xl">🏥</span>
|
|
</div>
|
|
<h2 class="text-3xl md:text-4xl font-bold text-white mb-3">Login</h2>
|
|
<p class="text-blue-100 text-lg">Masuk ke sistem antrian Puskesmas</p>
|
|
</div>
|
|
|
|
<!-- Login Form -->
|
|
<div class="bg-white rounded-2xl shadow-2xl p-6 md:p-8 animate-slide-up">
|
|
<form method="POST" action="{{ route('login') }}" class="space-y-6">
|
|
@csrf
|
|
|
|
<!-- Username/No KTP Field -->
|
|
<div>
|
|
<label for="email_or_ktp" class="block text-sm font-semibold text-gray-700 mb-2">
|
|
Username atau No KTP
|
|
</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 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
|
</svg>
|
|
</div>
|
|
<input id="email_or_ktp" name="email_or_ktp" type="text" required
|
|
class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-xl placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition duration-200 text-sm"
|
|
placeholder="Admin: username | User: nama atau No KTP" value="{{ old('email_or_ktp') }}">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Password Field -->
|
|
<div>
|
|
<label for="password" class="block text-sm font-semibold 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" name="password" type="password" required
|
|
class="block w-full pl-10 pr-3 py-3 border border-gray-300 rounded-xl placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary transition duration-200 text-sm"
|
|
placeholder="Masukkan password Anda">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Remember Me -->
|
|
<div class="flex items-center">
|
|
<input id="remember" name="remember" type="checkbox"
|
|
class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
|
|
<label for="remember" class="ml-2 block text-sm text-gray-700">
|
|
Ingat saya
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<div>
|
|
<button type="submit"
|
|
class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-semibold rounded-xl text-white bg-primary hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition duration-200 transform hover:scale-105">
|
|
<span class="absolute left-0 inset-y-0 flex items-center pl-3">
|
|
<svg class="h-5 w-5 text-blue-200 group-hover:text-blue-100 transition duration-200"
|
|
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd"
|
|
d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
</span>
|
|
Masuk
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Register Link -->
|
|
<div class="text-center">
|
|
<p class="text-sm text-gray-600">
|
|
Belum punya akun?
|
|
<a href="{{ route('register') }}"
|
|
class="font-semibold text-primary hover:text-secondary transition duration-200">
|
|
Daftar di sini
|
|
</a>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Forgot Password Link -->
|
|
<div class="text-center">
|
|
<p class="text-sm text-gray-600">
|
|
Lupa password?
|
|
<a href="{{ route('forgot-password') }}"
|
|
class="font-semibold text-primary hover:text-secondary transition duration-200">
|
|
Reset password di sini
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Back to Home -->
|
|
<div class="text-center">
|
|
<a href="{{ route('landing') }}"
|
|
class="text-blue-100 hover:text-white text-sm transition duration-200 flex items-center justify-center">
|
|
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
|
|
</svg>
|
|
Kembali ke Beranda
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@push('scripts')
|
|
<script>
|
|
// Show SweetAlert2 for errors
|
|
@if ($errors->any())
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Oops...',
|
|
text: '{{ $errors->first() }}',
|
|
confirmButtonText: 'OK',
|
|
confirmButtonColor: '#EF4444'
|
|
});
|
|
@endif
|
|
|
|
// Show SweetAlert2 for session errors
|
|
@if (session('error'))
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Error!',
|
|
text: '{{ session('error') }}',
|
|
confirmButtonText: 'OK',
|
|
confirmButtonColor: '#EF4444',
|
|
timer: 4000,
|
|
timerProgressBar: true
|
|
});
|
|
@endif
|
|
|
|
// Show login error message
|
|
@if (session('error') && str_contains(session('error'), 'Username/Nama/No KTP'))
|
|
Swal.fire({
|
|
icon: 'error',
|
|
title: 'Login Gagal!',
|
|
text: '{{ session('error') }}',
|
|
confirmButtonText: 'OK',
|
|
confirmButtonColor: '#EF4444',
|
|
timer: 4000,
|
|
timerProgressBar: true
|
|
});
|
|
@endif
|
|
|
|
// Show SweetAlert2 for success messages
|
|
@if (session('success'))
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'Berhasil!',
|
|
text: '{{ session('success') }}',
|
|
confirmButtonText: 'OK',
|
|
confirmButtonColor: '#10B981',
|
|
timer: 3000,
|
|
timerProgressBar: true
|
|
});
|
|
@endif
|
|
|
|
// Show register success message
|
|
@if (session('success') && str_contains(session('success'), 'Akun berhasil'))
|
|
Swal.fire({
|
|
icon: 'success',
|
|
title: 'Pendaftaran Berhasil!',
|
|
text: '{{ session('success') }}',
|
|
confirmButtonText: 'OK',
|
|
confirmButtonColor: '#10B981',
|
|
timer: 4000,
|
|
timerProgressBar: true
|
|
});
|
|
@endif
|
|
|
|
// Form validation with SweetAlert2
|
|
let hasConfirmedSubmission = false;
|
|
document.querySelector('form').addEventListener('submit', function(e) {
|
|
const emailOrKtp = document.getElementById('email_or_ktp').value.trim();
|
|
const password = document.getElementById('password').value.trim();
|
|
|
|
if (!emailOrKtp || !password) {
|
|
e.preventDefault();
|
|
Swal.fire({
|
|
icon: 'warning',
|
|
title: 'Perhatian!',
|
|
text: 'Mohon lengkapi semua field yang diperlukan.',
|
|
confirmButtonText: 'OK',
|
|
confirmButtonColor: '#F59E0B'
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (!hasConfirmedSubmission) {
|
|
e.preventDefault();
|
|
Swal.fire({
|
|
title: 'Konfirmasi Login',
|
|
text: 'Apakah Anda yakin ingin masuk ke sistem?',
|
|
icon: 'question',
|
|
showCancelButton: true,
|
|
confirmButtonText: 'Ya, Login',
|
|
cancelButtonText: 'Batal',
|
|
confirmButtonColor: '#3B82F6',
|
|
cancelButtonColor: '#6B7280'
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
hasConfirmedSubmission = true;
|
|
document.querySelector('form').submit();
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|
|
@endsection
|