Abimanyu Ridho
111 lines
3.6 KiB
PHP
111 lines
3.6 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Masuk - WebGIS Poverty Mapping</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet" />
|
|
<link rel="stylesheet" href="css/base.css">
|
|
<link rel="stylesheet" href="css/layout.css">
|
|
<link rel="stylesheet" href="css/components.css">
|
|
<style>
|
|
/* Ensure the login page body is visible immediately */
|
|
body {
|
|
display: flex !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="login-body">
|
|
|
|
<div class="login-container">
|
|
<div class="login-header">
|
|
<span class="login-logo">🗺️</span>
|
|
<h1>WebGIS Poverty</h1>
|
|
<p>Sistem Informasi Geografis & Manajemen Kemiskinan</p>
|
|
</div>
|
|
|
|
<div class="login-error" id="login-error-msg"></div>
|
|
|
|
<form class="login-form" id="login-form" onsubmit="handleLogin(event)">
|
|
<div class="form-group">
|
|
<label class="form-label" for="username">Username</label>
|
|
<input class="form-input" type="text" id="username" autocomplete="username" placeholder="Masukkan username..." required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="form-label" for="password">Password</label>
|
|
<input class="form-input" type="password" id="password" autocomplete="current-password" placeholder="Masukkan password..." required>
|
|
</div>
|
|
|
|
<button class="btn btn-primary btn-login" type="submit" id="btn-submit">
|
|
<span>Masuk</span>
|
|
</button>
|
|
</form>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
// Redirect if session is already active
|
|
(async function() {
|
|
try {
|
|
const res = await fetch('api/me.php');
|
|
const data = await res.json();
|
|
if (data.status === 'success') {
|
|
window.location.href = '?page=dashboard';
|
|
}
|
|
} catch (e) {}
|
|
})();
|
|
|
|
async function handleLogin(event) {
|
|
event.preventDefault();
|
|
|
|
const errorMsg = document.getElementById('login-error-msg');
|
|
const btnSubmit = document.getElementById('btn-submit');
|
|
const usernameInput = document.getElementById('username');
|
|
const passwordInput = document.getElementById('password');
|
|
|
|
errorMsg.style.display = 'none';
|
|
btnSubmit.disabled = true;
|
|
btnSubmit.innerHTML = '<span>Memproses...</span>';
|
|
|
|
const body = {
|
|
username: usernameInput.value.trim(),
|
|
password: passwordInput.value
|
|
};
|
|
|
|
try {
|
|
const response = await fetch('api/login.php', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(body)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (result.status === 'success') {
|
|
// Success: redirect to default page (map)
|
|
window.location.href = '?page=dashboard';
|
|
} else {
|
|
// Error: show error message
|
|
errorMsg.textContent = result.message || 'Username atau password salah.';
|
|
errorMsg.style.display = 'block';
|
|
btnSubmit.disabled = false;
|
|
btnSubmit.innerHTML = '<span>Masuk</span>';
|
|
}
|
|
} catch (err) {
|
|
errorMsg.textContent = 'Gagal terhubung ke server. Pastikan Apache & MySQL menyala.';
|
|
errorMsg.style.display = 'block';
|
|
btnSubmit.disabled = false;
|
|
btnSubmit.innerHTML = '<span>Masuk</span>';
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|