Files
WebGIS-PovertyMapping/sosial/login.php
T

234 lines
7.5 KiB
PHP

<?php
session_start();
include '../php/db.php';
// Kredensial Admin — bisa diganti sesuai kebutuhan
$error = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$user = trim($_POST['username'] ?? '');
$pass = $_POST['password'] ?? '';
$stmt = $conn->prepare("SELECT id, username, password_hash, role, full_name, is_active FROM users WHERE username = ? LIMIT 1");
if (!$stmt) {
$error = 'Konfigurasi login belum siap. Jalankan migration database terlebih dahulu.';
} else {
$stmt->bind_param("s", $user);
$stmt->execute();
$result = $stmt->get_result();
$account = $result ? $result->fetch_assoc() : null;
if ($account && intval($account['is_active']) === 1 && password_verify($pass, $account['password_hash'])) {
session_regenerate_id(true);
$_SESSION['user_id'] = intval($account['id']);
$_SESSION['username'] = $account['username'];
$_SESSION['role'] = $account['role'];
$_SESSION['full_name'] = $account['full_name'];
$_SESSION['is_admin'] = $account['role'] === 'admin';
if ($account['role'] === 'admin') {
header('Location: admin.php');
} else {
header('Location: index.php');
}
exit;
}
$error = 'Username atau password salah.';
$stmt->close();
}
}
if (isset($conn)) {
$conn->close();
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Admin — WebGIS Sosial</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: 'DM Sans', sans-serif;
background: #0a0d14;
color: #e2e8f0;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
/* Background grid effect */
body::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(245,158,11,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(245,158,11,0.03) 1px, transparent 1px);
background-size: 40px 40px;
}
/* Glow blob */
body::after {
content: '';
position: absolute;
top: -20%;
left: 50%;
transform: translateX(-50%);
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(245,158,11,0.08) 0%, transparent 70%);
pointer-events: none;
}
.login-card {
position: relative;
z-index: 1;
width: 100%;
max-width: 380px;
background: #1a1d27;
border: 1px solid #2a2d3a;
border-radius: 16px;
padding: 36px 32px;
box-shadow: 0 25px 60px rgba(0,0,0,0.5);
}
.login-logo {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 28px;
}
.login-logo-icon {
width: 44px;
height: 44px;
background: linear-gradient(135deg, #92400e, #f59e0b);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.login-logo-text {
font-family: 'Space Mono', monospace;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.05em;
}
.login-logo-text span { color: #f59e0b; }
.login-logo-sub {
font-size: 11px;
color: #6b7280;
margin-top: 1px;
}
h1 {
font-size: 20px;
font-weight: 700;
margin-bottom: 6px;
}
.login-desc {
font-size: 13px;
color: #6b7280;
margin-bottom: 24px;
line-height: 1.5;
}
label {
display: block;
font-size: 11px;
color: #9ca3af;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 6px;
margin-top: 16px;
}
input[type=text], input[type=password] {
width: 100%;
background: #0f1117;
border: 1px solid #2a2d3a;
color: #e2e8f0;
border-radius: 8px;
padding: 10px 14px;
font-size: 14px;
font-family: 'DM Sans', sans-serif;
outline: none;
transition: border-color 0.15s;
}
input[type=text]:focus, input[type=password]:focus {
border-color: #f59e0b;
}
.error-msg {
background: rgba(239,68,68,0.1);
border: 1px solid rgba(239,68,68,0.3);
color: #f87171;
border-radius: 8px;
padding: 10px 14px;
font-size: 13px;
margin-top: 16px;
}
.btn-login {
display: block;
width: 100%;
margin-top: 24px;
padding: 12px;
background: linear-gradient(135deg, #92400e, #f59e0b);
color: #fff;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 700;
font-family: 'DM Sans', sans-serif;
cursor: pointer;
transition: opacity 0.15s, transform 0.1s;
letter-spacing: 0.03em;
}
.btn-login:hover { opacity: 0.9; transform: translateY(-1px); }
.btn-login:active { transform: translateY(0); }
.back-link {
display: block;
text-align: center;
margin-top: 16px;
font-size: 12px;
color: #6b7280;
text-decoration: none;
transition: color 0.15s;
}
.back-link:hover { color: #e2e8f0; }
</style>
</head>
<body>
<div class="login-card">
<div class="login-logo">
<div class="login-logo-icon">🕌</div>
<div>
<div class="login-logo-text">WEB<span>GIS</span> SOSIAL</div>
<div class="login-logo-sub">Portal Pengguna</div>
</div>
</div>
<h1>🔐 Masuk Pengguna</h1>
<p class="login-desc">Gunakan akun sesuai role untuk mengakses dashboard publik atau panel pengelolaan data.</p>
<?php if ($error): ?>
<div class="error-msg">⚠️ <?= htmlspecialchars($error) ?></div>
<?php endif; ?>
<form method="POST">
<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="admin" autocomplete="off" required>
<label for="password">Password</label>
<input type="password" id="password" name="password" placeholder="••••••••" required>
<button type="submit" class="btn-login">Masuk →</button>
</form>
<a href="index.php" class="back-link">← Kembali ke Dashboard Publik</a>
</div>
</body>
</html>