151 lines
6.8 KiB
PHP
151 lines
6.8 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 ASGARD - SMAN 4 Jember</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="{{ asset('css/auth.css') }}" rel="stylesheet">
|
|
</head>
|
|
<body class="auth-page px-6">
|
|
|
|
<div class="login-container">
|
|
<div class="login-visual">
|
|
<div class="visual-pattern"></div>
|
|
<div class="relative z-10">
|
|
<div class="mb-12">
|
|
<span class="badge-ai">AI TECHNOLOGY</span>
|
|
</div>
|
|
<h2 class="text-5xl font-extrabold italic tracking-tighter mb-6 leading-tight">
|
|
Tentukan Jalur <br> Karirmu Bersama <br> <span class="text-green-400">ASGARD.</span>
|
|
</h2>
|
|
<p class="text-green-100/60 font-medium leading-relaxed max-w-sm mb-12">
|
|
Sistem bimbingan cerdas SMAN 4 Jember membantu memetakan masa depanmu melalui kekuatan data.
|
|
</p>
|
|
<div class="flex items-center space-x-4 opacity-50">
|
|
<div class="w-10 h-10 rounded-full border border-white flex items-center justify-center font-bold">S4</div>
|
|
<div class="text-[10px] font-bold uppercase tracking-widest">Official Academic System <br> SMAN 4 Jember</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="login-form-area">
|
|
<div class="mb-10">
|
|
<h3 class="text-3xl font-black text-slate-900 tracking-tighter">AI Login <span class="text-green-600">—</span></h3>
|
|
<p class="text-slate-400 font-bold text-[10px] uppercase tracking-widest mt-2">Sistem Rekomendasi Jurusan</p>
|
|
</div>
|
|
|
|
<form id="loginForm" class="space-y-6">
|
|
@csrf
|
|
<div>
|
|
<label class="block text-[10px] font-black uppercase tracking-widest text-slate-400 mb-3 ml-1">Username / ID Siswa</label>
|
|
<input type="text" id="username" name="username" required
|
|
class="input-modern w-full text-slate-900"
|
|
placeholder="Masukkan ID Siswa">
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex justify-between items-center mb-3 px-1">
|
|
<label class="block text-[10px] font-black uppercase tracking-widest text-slate-400">Password</label>
|
|
<a href="#" class="text-[10px] font-black text-green-600 hover:text-green-800 uppercase tracking-widest">Bantuan</a>
|
|
</div>
|
|
<input type="password" id="password" name="password" required
|
|
class="input-modern w-full text-slate-900"
|
|
placeholder="••••••••">
|
|
<p id="error-message" class="hidden text-red-500 text-[11px] font-bold mt-2 ml-1 italic"></p>
|
|
</div>
|
|
|
|
<div class="pt-4 flex flex-col gap-4">
|
|
<button type="submit" id="btnLogin" class="btn-login w-full">
|
|
Masuk Ke ASGARD
|
|
</button>
|
|
<a href="{{ route('landingpage') }}" class="btn-login w-full text-center flex items-center justify-center">
|
|
Kembali ke Beranda
|
|
</a>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="mt-12 text-center">
|
|
<p class="text-[11px] text-slate-400 font-bold uppercase tracking-widest">
|
|
Punya kendala akses?
|
|
<a href="#" class="text-green-600 hover:text-green-800 ml-1 underline">Hubungi Guru BK</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const apiLoginUrl = @json(route('api.login'));
|
|
const adminDashboardUrl = @json(route('admin.dashboard'));
|
|
const studentDashboardUrl = @json(route('student.profile'));
|
|
|
|
document.getElementById('loginForm').addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
const btn = document.getElementById('btnLogin');
|
|
const username = document.getElementById('username').value.trim();
|
|
const password = document.getElementById('password').value;
|
|
const errorElement = document.getElementById('error-message');
|
|
|
|
errorElement.classList.add('hidden');
|
|
errorElement.innerText = '';
|
|
|
|
btn.disabled = true;
|
|
btn.innerText = 'Memproses...';
|
|
|
|
try {
|
|
const response = await fetch(apiLoginUrl, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Accept': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
username: username,
|
|
password: password
|
|
})
|
|
});
|
|
|
|
const contentType = response.headers.get('content-type') || '';
|
|
let data = {};
|
|
|
|
if (contentType.includes('application/json')) {
|
|
data = await response.json();
|
|
} else {
|
|
const text = await response.text();
|
|
console.error('Response bukan JSON:', text);
|
|
throw new Error('Server tidak mengembalikan JSON.');
|
|
}
|
|
|
|
if (response.ok && data.success) {
|
|
localStorage.setItem('access_token', data.access_token);
|
|
localStorage.setItem('user_role', data.role);
|
|
|
|
if (data.user) {
|
|
localStorage.setItem('user_name', data.user.name || data.user.username || 'User');
|
|
}
|
|
|
|
if (data.role === 'admin') {
|
|
window.location.href = adminDashboardUrl;
|
|
} else if (data.role === 'siswa') {
|
|
window.location.href = studentDashboardUrl;
|
|
} else {
|
|
errorElement.innerText = 'Role pengguna tidak dikenali.';
|
|
errorElement.classList.remove('hidden');
|
|
}
|
|
} else {
|
|
errorElement.innerText = data.message || 'Username atau password salah.';
|
|
errorElement.classList.remove('hidden');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error:', error);
|
|
errorElement.innerText = 'Koneksi gagal. Silakan coba lagi.';
|
|
errorElement.classList.remove('hidden');
|
|
} finally {
|
|
btn.disabled = false;
|
|
btn.innerText = 'Masuk Ke ASGARD';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |