182 lines
9.1 KiB
PHP
182 lines
9.1 KiB
PHP
<?php
|
|
// login.php
|
|
require_once 'koneksi.php';
|
|
|
|
if (session_status() === PHP_SESSION_NONE) {
|
|
session_start();
|
|
}
|
|
|
|
// Jika pengguna sudah terlanjur login, langsung arahkan sesuai rolenya
|
|
if (isset($_SESSION['user_id']) && isset($_SESSION['role'])) {
|
|
if ($_SESSION['role'] === 'admin') {
|
|
header('Location: dashboard-admin.php');
|
|
} elseif ($_SESSION['role'] === 'pemerintah') {
|
|
header('Location: dashboard-pemerintah.php');
|
|
} elseif ($_SESSION['role'] === 'pengurus') {
|
|
header('Location: dashboard-pengurus.php');
|
|
} elseif ($_SESSION['role'] === 'relawan') {
|
|
header('Location: dashboard-relawan.php');
|
|
}
|
|
exit;
|
|
}
|
|
|
|
$error = '';
|
|
|
|
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
|
|
$username = bersih($_POST['username'] ?? '', $conn);
|
|
$password = $_POST['password'] ?? '';
|
|
|
|
if ($username && $password) {
|
|
$query = "SELECT * FROM users WHERE (username='$username' OR email='$username') AND aktif=1 LIMIT 1";
|
|
$result = $conn->query($query);
|
|
$user = $result->fetch_assoc();
|
|
|
|
// Menggunakan pencocokan plain-text / teks biasa sesuai permintaan Anda
|
|
if ($user && $password === $user['password']) {
|
|
$_SESSION['user_id'] = $user['id'];
|
|
$_SESSION['nama'] = $user['nama_lengkap'];
|
|
$_SESSION['role'] = $user['role'];
|
|
$_SESSION['username'] = $user['username'];
|
|
|
|
$conn->query("UPDATE users SET last_login=NOW() WHERE id={$user['id']}");
|
|
|
|
// PENGALIHAN OTOMATIS KE 4 DASHBOARD BERBEDA
|
|
if ($_SESSION['role'] === 'admin') {
|
|
header('Location: dashboard-admin.php');
|
|
} elseif ($_SESSION['role'] === 'pemerintah') {
|
|
header('Location: dashboard-pemerintah.php');
|
|
} elseif ($_SESSION['role'] === 'pengurus') {
|
|
header('Location: dashboard-pengurus.php');
|
|
} elseif ($_SESSION['role'] === 'relawan') {
|
|
header('Location: dashboard-relawan.php');
|
|
} else {
|
|
header('Location: login.php');
|
|
}
|
|
exit;
|
|
} else {
|
|
$error = 'Username/password salah atau akun Anda tidak aktif.';
|
|
}
|
|
} else {
|
|
$error = 'Semua kolom formulir wajib diisi.';
|
|
}
|
|
}
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Login - WebGIS Poverty Mapping</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { font-family: 'Inter', sans-serif; background: #ffffff; display: flex; height: 100vh; overflow: hidden; }
|
|
.split-container { display: flex; width: 100%; height: 100%; }
|
|
|
|
.left-side { flex: 1.2; background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); display: flex; flex-direction: column; justify-content: space-between; padding: 50px; color: #e2e8f0; position: relative; }
|
|
.left-side::before { content: ''; position: absolute; top:0; left:0; right:0; bottom:0; background: radial-gradient(circle at 80% 20%, rgba(255,255,255,0.1) 0%, transparent 50%); }
|
|
.brand-logo { font-size: 20px; font-weight: 800; color: #ffffff; display: flex; align-items: center; gap: 10px; z-index: 5; }
|
|
.brand-speech { z-index: 5; max-width: 500px; margin-bottom: 40px; }
|
|
.brand-speech h1 { font-size: 32px; color: white; font-weight: 800; line-height: 1.3; margin-bottom: 16px; }
|
|
.brand-speech p { font-size: 15px; line-height: 1.6; color: #bfdbfe; }
|
|
.brand-footer { z-index: 5; font-size: 13px; display: flex; gap: 20px; }
|
|
.brand-footer a { color: #93c5fd; text-decoration: none; transition: 0.2s; }
|
|
.brand-footer a:hover { color: white; }
|
|
|
|
.right-side { flex: 1; background: #f8fafc; display: flex; align-items: center; justify-content: center; padding: 40px; border-left: 1px solid #e2e8f0; }
|
|
.login-card { background: white; padding: 40px; border-radius: 16px; box-shadow: 0 10px 25px rgba(30, 58, 138, 0.05); width: 100%; max-width: 420px; border: 1px solid #e2e8f0; }
|
|
.login-header { margin-bottom: 24px; }
|
|
.login-header h2 { color: #1e3a8a; font-size: 22px; font-weight: 700; }
|
|
.login-header p { color: #64748b; font-size: 14px; margin-top: 4px; }
|
|
.form-group { margin-bottom: 20px; }
|
|
.form-group label { display: block; font-size: 13px; font-weight: 600; color: #1e293b; margin-bottom: 6px; }
|
|
.input-wrap { position: relative; display: flex; align-items: center; }
|
|
.input-wrap i.input-icon { position: absolute; left: 14px; color: #94a3b8; font-size: 14px; }
|
|
.form-input { width: 100%; padding: 12px 14px 12px 42px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 14px; color: #0f172a; outline: none; transition: 0.2s; font-family: inherit; }
|
|
.form-input:focus { border-color: #3b82f6; box-shadow: 0 0 0 4px rgba(59,130,246,0.1); }
|
|
.toggle-pw { position: absolute; right: 14px; background: none; border: none; color: #94a3b8; cursor: pointer; padding: 0; font-size: 14px; }
|
|
|
|
.btn-login { width: 100%; padding: 12px; background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); color: white; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 8px; transition: 0.2s; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 12px rgba(30, 58, 138, 0.2); }
|
|
.btn-login:hover { opacity: 0.95; transform: translateY(-1px); }
|
|
|
|
.alert-error { background: #fef2f2; color: #991b1b; padding: 12px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 20px; border: 1px solid #fee2e2; font-weight: 500; display: flex; align-items: center; gap: 8px; }
|
|
.lr-foot { text-align: center; margin-top: 24px; font-size: 13px; color: #64748b; line-height: 1.5; border-top: 1px solid #f1f5f9; padding-top: 20px; }
|
|
|
|
@media (max-width: 900px) { .left-side { display: none; } .right-side { flex: 1; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="split-container">
|
|
<div class="left-side">
|
|
<div class="brand-logo">
|
|
<i class="fa fa-map-location-dot"></i> WebGIS Poverty Mapping
|
|
</div>
|
|
<div class="brand-speech">
|
|
<h1>Sistem Pemetaan Terpadu Penanggulangan Kemiskinan</h1>
|
|
<p>Akses masuk terbatas khusus bagi jajaran Aparatur Pemerintahan, Pengurus Internal Rumah Ibadah, serta Mitra Relawan Lapangan terverifikasi.</p>
|
|
</div>
|
|
<div class="brand-footer">
|
|
<span style="color: #93c5fd;">Sistem Informasi Geografis v2.1.0</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="right-side">
|
|
<div class="login-card">
|
|
<div class="login-header">
|
|
<h2>Selamat Datang Kembali</h2>
|
|
<p>Gunakan kredensial akun terdaftar Anda</p>
|
|
</div>
|
|
|
|
<?php if ($error): ?>
|
|
<div class="alert-error">
|
|
<i class="fa fa-circle-exclamation"></i> <?= $error ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<form action="" method="POST">
|
|
<div class="form-group">
|
|
<label>Username atau Email</label>
|
|
<div class="input-wrap">
|
|
<i class="fa fa-user input-icon"></i>
|
|
<input class="form-input" type="text" name="username" placeholder="Masukkan username/email..." required autofocus value="<?= htmlspecialchars($_POST['username'] ?? '') ?>">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label>Password</label>
|
|
<div class="input-wrap">
|
|
<i class="fa fa-lock input-icon"></i>
|
|
<input class="form-input" type="password" name="password" id="pw" placeholder="Masukkan sandi akun..." required>
|
|
<button type="button" class="toggle-pw" onclick="togglePw()"><i class="fa fa-eye" id="eye-ic"></i></button>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" class="btn-login">
|
|
<i class="fa fa-right-to-bracket"></i> Masuk Sistem
|
|
</button>
|
|
</form>
|
|
|
|
<div class="lr-foot">
|
|
Butuh otorisasi akses atau lupa kata sandi?<br>Hubungi Administrator Pusat.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function togglePw() {
|
|
var pw = document.getElementById('pw');
|
|
var ic = document.getElementById('eye-ic');
|
|
if (pw.type === 'password') {
|
|
pw.type = 'text';
|
|
ic.className = 'fa fa-eye-slash';
|
|
} else {
|
|
pw.type = 'password';
|
|
ic.className = 'fa fa-eye';
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|