90 lines
4.8 KiB
HTML
90 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Login WebGIS</title>
|
|
<style>
|
|
body { margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center; font-family:Inter, system-ui, sans-serif; background:linear-gradient(180deg,#eef2ff,#f8fafc); color:#0f172a; }
|
|
.login-shell { width:100%; max-width:420px; padding:28px; background:#fff; border-radius:24px; box-shadow:0 28px 80px rgba(15,23,42,0.12); }
|
|
h1 { margin:0 0 18px; font-size:26px; letter-spacing:-0.02em; }
|
|
p { margin:0 0 20px; color:#475569; line-height:1.6; }
|
|
.field { margin-bottom:16px; }
|
|
label { display:block; font-size:14px; font-weight:600; margin-bottom:8px; }
|
|
input { width:100%; padding:12px 14px; border:1px solid #e2e8f0; border-radius:12px; font-size:15px; color:#0f172a; background:#fff; box-sizing:border-box; }
|
|
input:focus { outline:none; border-color:#3b82f6; box-shadow:0 0 0 4px rgba(59,130,246,0.12); }
|
|
button { width:100%; padding:13px 14px; border:none; border-radius:12px; background:#1d4ed8; color:#fff; font-size:15px; font-weight:700; cursor:pointer; transition:transform .15s, box-shadow .15s; }
|
|
button:hover { transform:translateY(-1px); box-shadow:0 12px 22px rgba(29,78,216,0.2); }
|
|
.note { margin-top:20px; font-size:14px; color:#64748b; }
|
|
.accounts { margin-top:24px; padding:16px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:16px; }
|
|
.accounts p { margin:0 0 10px; font-size:14px; color:#475569; }
|
|
.account-list { list-style:none; padding:0; margin:0; font-size:14px; color:#0f172a; }
|
|
.account-list li { margin-bottom:10px; line-height:1.5; }
|
|
.account-list strong { display:inline-block; width:120px; color:#1d4ed8; }
|
|
.footer-link { display:block; margin-top:24px; text-align:center; color:#3b82f6; text-decoration:none; font-size:14px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main class="login-shell">
|
|
<h1>Masuk ke WebGIS</h1>
|
|
<p>Silakan masuk dengan email dan kata sandi Anda. Jika Anda ingin menggunakan akun contoh, informasi login tersedia di bawah.</p>
|
|
<form id="login-form">
|
|
<div class="field">
|
|
<label for="email">Email</label>
|
|
<input id="email" name="email" type="email" placeholder="nama@contoh.com" required>
|
|
</div>
|
|
<div class="field">
|
|
<label for="password">Kata Sandi</label>
|
|
<input id="password" name="password" type="password" placeholder="••••••••" required>
|
|
</div>
|
|
<button type="submit">Masuk</button>
|
|
<p id="login-message" class="note" aria-live="polite"></p>
|
|
</form>
|
|
<section class="accounts" aria-label="Contoh akun">
|
|
<p>Akun contoh:</p>
|
|
<ul class="account-list">
|
|
<li><strong>Admin</strong> admin@example.com / Admin123!</li>
|
|
<li><strong>Pengurus Masjid</strong> manager@example.com / Manager123!</li>
|
|
<li><strong>Petugas Lapangan</strong> field@example.com / Field123!</li>
|
|
</ul>
|
|
</section>
|
|
<a class="footer-link" href="index.html">Kembali ke halaman utama</a>
|
|
</main>
|
|
<script>
|
|
const form = document.getElementById('login-form');
|
|
const message = document.getElementById('login-message');
|
|
|
|
form.addEventListener('submit', async function(event) {
|
|
event.preventDefault();
|
|
message.textContent = '';
|
|
const email = document.getElementById('email').value.trim().toLowerCase();
|
|
const password = document.getElementById('password').value;
|
|
|
|
if (!email || !password) {
|
|
message.textContent = 'Email dan kata sandi diperlukan.';
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('src/api/auth/login.php', {
|
|
method: 'POST',
|
|
credentials: 'same-origin',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ email, password })
|
|
});
|
|
const result = await response.json().catch(() => null);
|
|
if (!response.ok || !result || result.success === false) {
|
|
message.textContent = result && result.error ? 'Gagal masuk: ' + result.error : 'Gagal masuk. Periksa kredensial Anda.';
|
|
return;
|
|
}
|
|
message.textContent = 'Berhasil masuk. Mengalihkan...';
|
|
window.location.href = 'index.html';
|
|
} catch (err) {
|
|
console.error(err);
|
|
message.textContent = 'Terjadi kesalahan saat mencoba masuk. Silakan coba lagi.';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|