Initial commit untuk UAS SIG
This commit is contained in:
z0rayy
+166
@@ -0,0 +1,166 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="id">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Login - WebGIS SPBU & Kemiskinan</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Inter', sans-serif; background: #0f172a; color: #f1f5f9; display: flex; align-items: center; justify-content: center; height: 100vh; }
|
||||
.login-container { background: #1e293b; padding: 40px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); width: 100%; max-width: 400px; position: relative; }
|
||||
.login-container h2 { margin-bottom: 24px; text-align: center; color: #3b82f6; }
|
||||
.form-group { margin-bottom: 20px; }
|
||||
.form-group label { display: block; margin-bottom: 8px; font-size: 14px; color: #cbd5e1; }
|
||||
.form-group input { width: 100%; padding: 12px; border: 1px solid #334155; border-radius: 8px; background: #0f172a; color: #f1f5f9; font-size: 14px; outline: none; }
|
||||
.form-group input:focus { border-color: #3b82f6; }
|
||||
.btn { width: 100%; padding: 12px; background: #3b82f6; color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: 0.2s; }
|
||||
.btn:hover { background: #2563eb; }
|
||||
.btn-success { background: #22c55e; }
|
||||
.btn-success:hover { background: #16a34a; }
|
||||
.error-message, .success-message { font-size: 14px; margin-bottom: 16px; text-align: center; display: none; padding: 10px; border-radius: 6px; }
|
||||
.error-message { background: rgba(239, 68, 68, 0.1); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.2); }
|
||||
.success-message { background: rgba(34, 197, 94, 0.1); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.2); }
|
||||
.back-link { display: block; text-align: center; margin-top: 20px; color: #94a3b8; text-decoration: none; font-size: 14px; }
|
||||
.back-link:hover { color: #f1f5f9; }
|
||||
.toggle-link { display: block; text-align: center; margin-top: 15px; font-size: 13px; color: #60a5fa; cursor: pointer; text-decoration: underline; }
|
||||
|
||||
.form-section { display: none; }
|
||||
.form-section.active { display: block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="login-container">
|
||||
<div id="error-message" class="error-message"></div>
|
||||
<div id="success-message" class="success-message"></div>
|
||||
|
||||
<!-- Login Form -->
|
||||
<div id="login-section" class="form-section active">
|
||||
<h2>Login Sistem</h2>
|
||||
<form id="login-form">
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" required placeholder="Masukkan username">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" required placeholder="Masukkan password">
|
||||
</div>
|
||||
<button type="submit" class="btn">Login</button>
|
||||
</form>
|
||||
<span class="toggle-link" onclick="toggleForm('register')">Belum punya akun? Daftar di sini</span>
|
||||
</div>
|
||||
|
||||
<!-- Register Form -->
|
||||
<div id="register-section" class="form-section">
|
||||
<h2>Daftar Akun Baru</h2>
|
||||
<form id="register-form">
|
||||
<div class="form-group">
|
||||
<label for="reg-username">Username Baru</label>
|
||||
<input type="text" id="reg-username" required placeholder="Pilih username">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="reg-password">Password Baru</label>
|
||||
<input type="password" id="reg-password" required placeholder="Buat password">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-success">Daftar</button>
|
||||
</form>
|
||||
<span class="toggle-link" onclick="toggleForm('login')">Sudah punya akun? Login di sini</span>
|
||||
</div>
|
||||
|
||||
<a href="index.html" class="back-link">← Kembali ke Beranda</a>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleForm(type) {
|
||||
document.getElementById('error-message').style.display = 'none';
|
||||
document.getElementById('success-message').style.display = 'none';
|
||||
document.getElementById('login-section').classList.remove('active');
|
||||
document.getElementById('register-section').classList.remove('active');
|
||||
|
||||
if (type === 'login') {
|
||||
document.getElementById('login-section').classList.add('active');
|
||||
} else {
|
||||
document.getElementById('register-section').classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
function showMessage(type, msg) {
|
||||
const errDiv = document.getElementById('error-message');
|
||||
const succDiv = document.getElementById('success-message');
|
||||
errDiv.style.display = 'none';
|
||||
succDiv.style.display = 'none';
|
||||
|
||||
if (type === 'error') {
|
||||
errDiv.textContent = msg;
|
||||
errDiv.style.display = 'block';
|
||||
} else {
|
||||
succDiv.textContent = msg;
|
||||
succDiv.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
// Login Handler
|
||||
document.getElementById('login-form').addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
const username = document.getElementById('username').value;
|
||||
const password = document.getElementById('password').value;
|
||||
|
||||
try {
|
||||
const response = await fetch('backend/login.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ username, password })
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const redirect = urlParams.get('redirect') || 'admin.html';
|
||||
|
||||
if (redirect.includes('admin.html') && username !== 'admin') {
|
||||
showMessage('error', 'Akses Ditolak: Akun Anda bukan Administrator.');
|
||||
// Optionally log them out since they logged into the wrong place
|
||||
fetch('backend/logout.php');
|
||||
return;
|
||||
}
|
||||
|
||||
window.location.href = redirect;
|
||||
} else {
|
||||
showMessage('error', data.message);
|
||||
}
|
||||
} catch (err) {
|
||||
showMessage('error', 'Terjadi kesalahan server saat login');
|
||||
}
|
||||
});
|
||||
|
||||
// Register Handler
|
||||
document.getElementById('register-form').addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
const username = document.getElementById('reg-username').value;
|
||||
const password = document.getElementById('reg-password').value;
|
||||
|
||||
try {
|
||||
const response = await fetch('backend/register.php', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ username, password })
|
||||
});
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
showMessage('success', data.message);
|
||||
document.getElementById('register-form').reset();
|
||||
setTimeout(() => { toggleForm('login'); }, 2000);
|
||||
} else {
|
||||
showMessage('error', data.message);
|
||||
}
|
||||
} catch (err) {
|
||||
showMessage('error', 'Terjadi kesalahan server saat registrasi');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user