Compare commits
2 Commits
cc905ac01b
...
e1b991b3eb
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
e1b991b3eb | ||
|
|
1857a496da |
@ -1,4 +1,9 @@
|
|||||||
<?php
|
<?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_HOST = "202.46.28.160";
|
||||||
$DB_PORT = 23316;
|
$DB_PORT = 23316;
|
||||||
$DB_USER = "evelyn";
|
$DB_USER = "evelyn";
|
||||||
|
|||||||
@ -44,9 +44,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="Login.js"></script>
|
<!-- ✅ PENTING: Gunakan type="module" -->
|
||||||
<script src="Animation Login.js"></script>
|
<script type="module" src="Login.js"></script>
|
||||||
<script src="Modal Login.js"></script>
|
<script src="Animation_Login.js"></script>
|
||||||
<script src="API Login.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
63
Login.js
63
Login.js
@ -1,5 +1,11 @@
|
|||||||
import { showModal, closeModal } from "./Modal Login.js";
|
import { showModal, setupModalOk, setupOutsideClose } from "./Modal_Login.js";
|
||||||
import { loginRequest } from "./API 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) {
|
document.getElementById('loginForm').addEventListener('submit', async function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@ -7,95 +13,46 @@ document.getElementById('loginForm').addEventListener('submit', async function(e
|
|||||||
const username = document.getElementById('username').value.trim();
|
const username = document.getElementById('username').value.trim();
|
||||||
const password = document.getElementById('password').value.trim();
|
const password = document.getElementById('password').value.trim();
|
||||||
|
|
||||||
// Validasi input kosong
|
|
||||||
if (!username || !password) {
|
if (!username || !password) {
|
||||||
showModal('error', 'Login Gagal!', 'Username dan password tidak boleh kosong.');
|
showModal('error', 'Login Gagal!', 'Username dan password tidak boleh kosong.');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Loading state
|
|
||||||
const submitBtn = this.querySelector('button[type="submit"]');
|
const submitBtn = this.querySelector('button[type="submit"]');
|
||||||
const originalText = submitBtn.textContent;
|
|
||||||
submitBtn.innerHTML = '<span>Memproses...</span>';
|
|
||||||
submitBtn.disabled = true;
|
submitBtn.disabled = true;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const data = await loginRequest(username, password);
|
const data = await loginRequest(username, password);
|
||||||
|
|
||||||
|
console.log('Response dari server:', data); // Debug
|
||||||
|
|
||||||
if (data.success) {
|
if (data.success) {
|
||||||
// Simpan data user ke localStorage
|
|
||||||
localStorage.setItem('authToken', data.token);
|
localStorage.setItem('authToken', data.token);
|
||||||
localStorage.setItem('username', data.username);
|
localStorage.setItem('username', data.username);
|
||||||
|
|
||||||
// Tampilkan modal sukses
|
|
||||||
showModal('success', 'Login Berhasil!', `Selamat datang, ${data.username}!`);
|
showModal('success', 'Login Berhasil!', `Selamat datang, ${data.username}!`);
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
// Handle error dari backend
|
|
||||||
showModal('error', 'Login Gagal!', data.message || 'Username atau password salah.');
|
showModal('error', 'Login Gagal!', data.message || 'Username atau password salah.');
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Login Error:', error);
|
console.error('Login Error:', error);
|
||||||
|
|
||||||
// Handle berbagai jenis error
|
|
||||||
let errorMessage = 'Terjadi kesalahan koneksi ke server.';
|
let errorMessage = 'Terjadi kesalahan koneksi ke server.';
|
||||||
|
|
||||||
if (error.message === 'Failed to fetch') {
|
if (error.message === 'Failed to fetch') {
|
||||||
errorMessage = 'Tidak dapat terhubung ke server. Periksa koneksi internet Anda.';
|
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);
|
showModal('error', 'Error!', errorMessage);
|
||||||
} finally {
|
} finally {
|
||||||
// Kembalikan button ke state normal
|
|
||||||
submitBtn.textContent = originalText;
|
|
||||||
submitBtn.disabled = false;
|
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() {
|
document.getElementById('username').addEventListener('input', function() {
|
||||||
this.style.borderColor = '';
|
this.style.borderColor = '';
|
||||||
});
|
});
|
||||||
|
|
||||||
document.getElementById('password').addEventListener('input', function() {
|
document.getElementById('password').addEventListener('input', function() {
|
||||||
this.style.borderColor = '';
|
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
|
<?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');
|
header('Content-Type: application/json');
|
||||||
|
|
||||||
|
// ✅ Handle preflight OPTIONS request
|
||||||
|
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
|
||||||
|
http_response_code(200);
|
||||||
|
exit();
|
||||||
|
}
|
||||||
|
|
||||||
|
session_start();
|
||||||
include 'Connection.php';
|
include 'Connection.php';
|
||||||
|
|
||||||
$username = $_POST['username'] ?? '';
|
// Ambil data dari JSON body
|
||||||
$password = $_POST['password'] ?? '';
|
$input = json_decode(file_get_contents('php://input'), true);
|
||||||
|
$username = $input['username'] ?? '';
|
||||||
|
$password = $input['password'] ?? '';
|
||||||
|
|
||||||
if (empty($username) || empty($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;
|
exit;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -17,7 +31,7 @@ $stmt->execute();
|
|||||||
$stmt->store_result();
|
$stmt->store_result();
|
||||||
|
|
||||||
if ($stmt->num_rows === 0) {
|
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();
|
$stmt->close();
|
||||||
$conn->close();
|
$conn->close();
|
||||||
exit;
|
exit;
|
||||||
@ -28,9 +42,14 @@ $stmt->fetch();
|
|||||||
|
|
||||||
if (password_verify($password, $hashedPassword)) {
|
if (password_verify($password, $hashedPassword)) {
|
||||||
$_SESSION['username'] = $username;
|
$_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 {
|
} else {
|
||||||
echo json_encode(["status" => "error", "message" => "Password salah"]);
|
echo json_encode(["success" => false, "message" => "Password salah"]);
|
||||||
}
|
}
|
||||||
|
|
||||||
$stmt->close();
|
$stmt->close();
|
||||||
|
|||||||
@ -28,7 +28,7 @@ export function setupModalOk() {
|
|||||||
const modalIcon = document.getElementById('modalIcon');
|
const modalIcon = document.getElementById('modalIcon');
|
||||||
|
|
||||||
if (modalIcon.classList.contains('success')) {
|
if (modalIcon.classList.contains('success')) {
|
||||||
window.location.href = 'homepage.html';
|
window.location.href = 'Homepage.html';
|
||||||
} else {
|
} else {
|
||||||
closeModal();
|
closeModal();
|
||||||
}
|
}
|
||||||
@ -41,7 +41,7 @@ export function setupOutsideClose() {
|
|||||||
|
|
||||||
if (e.target === this) {
|
if (e.target === this) {
|
||||||
if (modalIcon.classList.contains('success')) {
|
if (modalIcon.classList.contains('success')) {
|
||||||
window.location.href = 'homepage.html';
|
window.location.href = 'Homepage.html';
|
||||||
} else {
|
} else {
|
||||||
closeModal();
|
closeModal();
|
||||||
}
|
}
|
||||||
@ -1,5 +1,5 @@
|
|||||||
import { showModal, closeModal, setupModalOk, setupOutsideClose } from "./Modal Register.js";
|
import { showModal, closeModal, setupModalOk, setupOutsideClose } from "./Modal_Register.js";
|
||||||
import { registerRequest } from "./API Register.js";
|
import { registerRequest } from "./Register_Request.js";
|
||||||
|
|
||||||
// Aktifkan tombol modal
|
// Aktifkan tombol modal
|
||||||
setupModalOk();
|
setupModalOk();
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user