Compare commits
2 Commits
cc905ac01b
...
e1b991b3eb
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
e1b991b3eb | ||
|
|
1857a496da |
@ -1,4 +1,9 @@
|
||||
<?php
|
||||
header('Access-Control-Allow-Origin: *');
|
||||
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
|
||||
header('Access-Control-Allow-Headers: Content-Type, Authorization');
|
||||
header('Content-Type: application/json');
|
||||
|
||||
$DB_HOST = "202.46.28.160";
|
||||
$DB_PORT = 23316;
|
||||
$DB_USER = "evelyn";
|
||||
|
||||
@ -44,9 +44,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="Login.js"></script>
|
||||
<script src="Animation Login.js"></script>
|
||||
<script src="Modal Login.js"></script>
|
||||
<script src="API Login.js"></script>
|
||||
<!-- ✅ PENTING: Gunakan type="module" -->
|
||||
<script type="module" src="Login.js"></script>
|
||||
<script src="Animation_Login.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
63
Login.js
63
Login.js
@ -1,5 +1,11 @@
|
||||
import { showModal, closeModal } from "./Modal Login.js";
|
||||
import { loginRequest } from "./API Login.js";
|
||||
import { showModal, setupModalOk, setupOutsideClose } from "./Modal_Login.js";
|
||||
import { loginRequest } from "./Login_Request.js";
|
||||
|
||||
// ✅ PENTING: Setup modal saat halaman load
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
setupModalOk();
|
||||
setupOutsideClose();
|
||||
});
|
||||
|
||||
document.getElementById('loginForm').addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
@ -7,95 +13,46 @@ document.getElementById('loginForm').addEventListener('submit', async function(e
|
||||
const username = document.getElementById('username').value.trim();
|
||||
const password = document.getElementById('password').value.trim();
|
||||
|
||||
// Validasi input kosong
|
||||
if (!username || !password) {
|
||||
showModal('error', 'Login Gagal!', 'Username dan password tidak boleh kosong.');
|
||||
return;
|
||||
}
|
||||
|
||||
// Loading state
|
||||
const submitBtn = this.querySelector('button[type="submit"]');
|
||||
const originalText = submitBtn.textContent;
|
||||
submitBtn.innerHTML = '<span>Memproses...</span>';
|
||||
submitBtn.disabled = true;
|
||||
|
||||
try {
|
||||
const data = await loginRequest(username, password);
|
||||
|
||||
console.log('Response dari server:', data); // Debug
|
||||
|
||||
if (data.success) {
|
||||
// Simpan data user ke localStorage
|
||||
localStorage.setItem('authToken', data.token);
|
||||
localStorage.setItem('username', data.username);
|
||||
|
||||
// Tampilkan modal sukses
|
||||
showModal('success', 'Login Berhasil!', `Selamat datang, ${data.username}!`);
|
||||
|
||||
} else {
|
||||
// Handle error dari backend
|
||||
showModal('error', 'Login Gagal!', data.message || 'Username atau password salah.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Login Error:', error);
|
||||
|
||||
// Handle berbagai jenis error
|
||||
let errorMessage = 'Terjadi kesalahan koneksi ke server.';
|
||||
|
||||
if (error.message === 'Failed to fetch') {
|
||||
errorMessage = 'Tidak dapat terhubung ke server. Periksa koneksi internet Anda.';
|
||||
} else if (error.message.includes('timeout')) {
|
||||
errorMessage = 'Request timeout. Server tidak merespons.';
|
||||
} else if (error.response) {
|
||||
// Error dari server dengan response
|
||||
errorMessage = error.response.data?.message || 'Terjadi kesalahan pada server.';
|
||||
} else if (error.status === 401) {
|
||||
errorMessage = 'Username atau password salah.';
|
||||
} else if (error.status === 403) {
|
||||
errorMessage = 'Akun Anda diblokir. Hubungi administrator.';
|
||||
} else if (error.status === 500) {
|
||||
errorMessage = 'Terjadi kesalahan pada server. Coba lagi nanti.';
|
||||
}
|
||||
|
||||
showModal('error', 'Error!', errorMessage);
|
||||
} finally {
|
||||
// Kembalikan button ke state normal
|
||||
submitBtn.textContent = originalText;
|
||||
submitBtn.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
// Link register
|
||||
document.getElementById('registerLink').addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
showModal('error', 'Info', 'Halaman Register sedang dalam pengembangan.');
|
||||
});
|
||||
|
||||
// Clear error visual saat user mulai mengetik
|
||||
document.getElementById('username').addEventListener('input', function() {
|
||||
this.style.borderColor = '';
|
||||
});
|
||||
|
||||
document.getElementById('password').addEventListener('input', function() {
|
||||
this.style.borderColor = '';
|
||||
});
|
||||
|
||||
// Optional: Tambahkan visual error pada input
|
||||
function setInputError(inputId) {
|
||||
const input = document.getElementById(inputId);
|
||||
if (input) {
|
||||
input.style.borderColor = '#ff0080';
|
||||
input.style.boxShadow = '0 0 20px rgba(255, 0, 128, 0.3)';
|
||||
}
|
||||
}
|
||||
|
||||
// Optional: Check apakah user sudah login saat buka halaman
|
||||
window.addEventListener('DOMContentLoaded', function() {
|
||||
const token = localStorage.getItem('authToken');
|
||||
const username = localStorage.getItem('username');
|
||||
|
||||
// Jika sudah ada token, redirect ke homepage
|
||||
if (token && username) {
|
||||
// Optional: Validasi token dulu ke backend
|
||||
console.log('User sudah login:', username);
|
||||
// window.location.href = 'homepage.html'; // Uncomment untuk auto redirect
|
||||
}
|
||||
});
|
||||
33
Login.php
33
Login.php
@ -1,13 +1,27 @@
|
||||
<?php
|
||||
session_start();
|
||||
// ✅ CORS Headers HARUS di paling atas sebelum apapun
|
||||
header('Access-Control-Allow-Origin: *');
|
||||
header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
|
||||
header('Access-Control-Allow-Headers: Content-Type, Authorization');
|
||||
header('Access-Control-Max-Age: 86400');
|
||||
header('Content-Type: application/json');
|
||||
|
||||
// ✅ Handle preflight OPTIONS request
|
||||
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
|
||||
http_response_code(200);
|
||||
exit();
|
||||
}
|
||||
|
||||
session_start();
|
||||
include 'Connection.php';
|
||||
|
||||
$username = $_POST['username'] ?? '';
|
||||
$password = $_POST['password'] ?? '';
|
||||
// Ambil data dari JSON body
|
||||
$input = json_decode(file_get_contents('php://input'), true);
|
||||
$username = $input['username'] ?? '';
|
||||
$password = $input['password'] ?? '';
|
||||
|
||||
if (empty($username) || empty($password)) {
|
||||
echo json_encode(["status" => "error", "message" => "Username dan password wajib diisi"]);
|
||||
echo json_encode(["success" => false, "message" => "Username dan password wajib diisi"]);
|
||||
exit;
|
||||
}
|
||||
|
||||
@ -17,7 +31,7 @@ $stmt->execute();
|
||||
$stmt->store_result();
|
||||
|
||||
if ($stmt->num_rows === 0) {
|
||||
echo json_encode(["status" => "error", "message" => "Username tidak ditemukan"]);
|
||||
echo json_encode(["success" => false, "message" => "Username tidak ditemukan"]);
|
||||
$stmt->close();
|
||||
$conn->close();
|
||||
exit;
|
||||
@ -28,9 +42,14 @@ $stmt->fetch();
|
||||
|
||||
if (password_verify($password, $hashedPassword)) {
|
||||
$_SESSION['username'] = $username;
|
||||
echo json_encode(["status" => "success", "message" => "Login berhasil"]);
|
||||
echo json_encode([
|
||||
"success" => true,
|
||||
"message" => "Login berhasil",
|
||||
"username" => $username,
|
||||
"token" => bin2hex(random_bytes(32))
|
||||
]);
|
||||
} else {
|
||||
echo json_encode(["status" => "error", "message" => "Password salah"]);
|
||||
echo json_encode(["success" => false, "message" => "Password salah"]);
|
||||
}
|
||||
|
||||
$stmt->close();
|
||||
|
||||
@ -28,7 +28,7 @@ export function setupModalOk() {
|
||||
const modalIcon = document.getElementById('modalIcon');
|
||||
|
||||
if (modalIcon.classList.contains('success')) {
|
||||
window.location.href = 'homepage.html';
|
||||
window.location.href = 'Homepage.html';
|
||||
} else {
|
||||
closeModal();
|
||||
}
|
||||
@ -41,7 +41,7 @@ export function setupOutsideClose() {
|
||||
|
||||
if (e.target === this) {
|
||||
if (modalIcon.classList.contains('success')) {
|
||||
window.location.href = 'homepage.html';
|
||||
window.location.href = 'Homepage.html';
|
||||
} else {
|
||||
closeModal();
|
||||
}
|
||||
@ -1,5 +1,5 @@
|
||||
import { showModal, closeModal, setupModalOk, setupOutsideClose } from "./Modal Register.js";
|
||||
import { registerRequest } from "./API Register.js";
|
||||
import { showModal, closeModal, setupModalOk, setupOutsideClose } from "./Modal_Register.js";
|
||||
import { registerRequest } from "./Register_Request.js";
|
||||
|
||||
// Aktifkan tombol modal
|
||||
setupModalOk();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user