68 lines
3.7 KiB
PHP
68 lines
3.7 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Login | SMAN 1 Garut</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>tailwind.config = { theme: { extend: { colors: { primary: { DEFAULT: '#3C50E0' } } } } };</script>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@2.1.4/css/boxicons.min.css">
|
|
</head>
|
|
<body class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
|
|
<div class="w-full max-w-md">
|
|
<div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 p-8">
|
|
<div class="text-center mb-8">
|
|
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">SMAN 1 Garut</h1>
|
|
<p class="text-gray-500 dark:text-gray-400 mt-1">Sign in to dashboard</p>
|
|
</div>
|
|
<form id="login-form" class="space-y-5">
|
|
<div>
|
|
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Email</label>
|
|
<input type="email" id="email" name="email" required autocomplete="email"
|
|
class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-transparent">
|
|
</div>
|
|
<div>
|
|
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Password</label>
|
|
<input type="password" id="password" name="password" required autocomplete="current-password"
|
|
class="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-primary focus:border-transparent">
|
|
</div>
|
|
<p id="login-error" class="text-sm text-red-600 dark:text-red-400 hidden"></p>
|
|
<button type="submit" id="login-btn" class="w-full py-2.5 px-4 rounded-lg font-medium text-white bg-primary hover:opacity-90 focus:ring-2 focus:ring-primary focus:ring-offset-2">
|
|
Sign in
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
(function() {
|
|
var form = document.getElementById('login-form');
|
|
var errorEl = document.getElementById('login-error');
|
|
var btn = document.getElementById('login-btn');
|
|
var apiLogin = '<?= base_url('api/auth/login') ?>';
|
|
var dashboardUrl = '<?= base_url('dashboard') ?>';
|
|
form.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
errorEl.classList.add('hidden');
|
|
errorEl.textContent = '';
|
|
btn.disabled = true;
|
|
fetch(apiLogin, {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
|
|
credentials: 'same-origin',
|
|
body: JSON.stringify({ email: document.getElementById('email').value, password: document.getElementById('password').value })
|
|
}).then(function(r) {
|
|
if (r.ok) return r.json();
|
|
return r.json().then(function(j) { throw new Error(j.message || 'Login failed'); });
|
|
}).then(function() {
|
|
window.location.href = dashboardUrl;
|
|
}).catch(function(err) {
|
|
errorEl.textContent = err.message || 'Invalid email or password';
|
|
errorEl.classList.remove('hidden');
|
|
btn.disabled = false;
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|