unknown
97 lines
5.0 KiB
HTML
97 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Login Administrator - Dinsos Pontianak</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>body { font-family: 'Inter', sans-serif; }</style>
|
|
</head>
|
|
<body class="bg-gray-100 flex items-center justify-center h-screen p-4">
|
|
<div class="bg-white p-8 rounded-2xl shadow-xl w-full max-w-sm border border-gray-200">
|
|
<div class="mb-6">
|
|
<div class="w-10 h-10 bg-gray-900 rounded-xl mb-4 flex items-center justify-center text-white font-bold text-lg">A</div>
|
|
<h2 class="text-2xl font-bold text-gray-900 tracking-tight">Dinsos Admin Login</h2>
|
|
<p class="text-gray-500 text-xs mt-1">Otoritas manajemen data verifikasi kemiskinan Kota Pontianak.</p>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">Username Admin</label>
|
|
<input type="text" id="input_username" placeholder="Masukkan ID Administrator" class="w-full p-3.5 rounded-lg border border-gray-300 bg-gray-50 outline-none focus:ring-2 focus:ring-gray-800 focus:bg-white transition-all text-gray-900 text-sm font-medium">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1">Kata Sandi Akun</label>
|
|
<input type="password" id="input_password" placeholder="••••••••" class="w-full p-3.5 rounded-lg border border-gray-300 bg-gray-50 outline-none focus:ring-2 focus:ring-gray-800 focus:bg-white transition-all text-gray-900 text-sm font-medium">
|
|
</div>
|
|
|
|
<p id="pesan_error_admin" class="text-red-600 text-xs font-semibold px-1 hidden"></p>
|
|
|
|
<button onclick="eksekusi_login_admin()" id="btn_submit_admin" class="w-full bg-gray-900 text-white font-bold py-3.5 rounded-lg hover:bg-gray-800 transition shadow-md text-sm tracking-wide">Masuk ke Dasbor</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Mengirimkan data otentikasi admin menuju API backend server secara asinkron
|
|
async function eksekusi_login_admin() {
|
|
const username_val = document.getElementById('input_username').value;
|
|
const password_val = document.getElementById('input_password').value;
|
|
const wadah_error = document.getElementById('pesan_error_admin');
|
|
const tombol_login = document.getElementById('btn_submit_admin');
|
|
|
|
if (!username_val || !password_val) {
|
|
wadah_error.textContent = 'Seluruh kolom input wajib dilengkapi.';
|
|
wadah_error.classList.remove('hidden');
|
|
return;
|
|
}
|
|
|
|
wadah_error.classList.add('hidden');
|
|
tombol_login.disabled = true;
|
|
tombol_login.textContent = 'Otorisasi Sistem...';
|
|
|
|
try {
|
|
/* Baris Kompleks: Mengirimkan request POST JSON payload kredensial admin ke server port 3000.
|
|
Jika kredensial terverifikasi sah oleh database, string token otorisasi disimpan ke dalam localStorage
|
|
peramban sebelum mengalihkan hak akses visual secara penuh ke halaman dasbor admin. */
|
|
const http_response = await fetch('http://localhost:3000/api/auth/login-admin', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
username: username_val,
|
|
password: password_val
|
|
})
|
|
});
|
|
|
|
const json_result = await http_response.json();
|
|
|
|
if (!http_response.ok) {
|
|
throw new Error(json_result.error || 'Akses ditolak oleh otoritas server.');
|
|
}
|
|
|
|
// Menyimpan identitas sesi token administrator ke memori lokal peramban web
|
|
localStorage.setItem('token_admin', json_result.token);
|
|
|
|
// Redireksi antarmuka secara instan menuju halaman dasbor pusat kontrol utama
|
|
window.location.href = 'admin_dasbor.html';
|
|
|
|
} catch (error_sistem) {
|
|
wadah_error.textContent = error_sistem.message;
|
|
wadah_error.classList.remove('hidden');
|
|
} finally {
|
|
tombol_login.disabled = false;
|
|
tombol_login.textContent = 'Masuk ke Dasbor';
|
|
}
|
|
}
|
|
|
|
// Mengikat event liistener enter pada kolom kata sandi admin untuk efisiensi aksesibilitas
|
|
document.getElementById('input_password').addEventListener('keypress', function(e) {
|
|
if (e.key === 'Enter') {
|
|
eksekusi_login_admin();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |